From 91c18df5e571b8d2405dc5a3434d3e27ecfdbbfd Mon Sep 17 00:00:00 2001 From: cha0s Date: Sun, 27 Oct 2019 13:34:44 -0500 Subject: [PATCH] chore: bump pixi to v5 --- TODO.md | 21 ++++++++++++--------- packages/graphics/canvas.js | 4 ++-- packages/graphics/container.js | 17 +++++++++-------- packages/graphics/image.js | 15 ++++++++------- packages/graphics/index.js | 14 ++++++-------- packages/graphics/package.json | 8 ++++---- packages/graphics/primitives.js | 4 ++-- packages/graphics/renderer.js | 17 +++++------------ packages/graphics/sprite.js | 5 +++-- packages/graphics/three/scene.js | 2 -- 10 files changed, 51 insertions(+), 56 deletions(-) diff --git a/TODO.md b/TODO.md index abe69b5..275e2b7 100644 --- a/TODO.md +++ b/TODO.md @@ -16,7 +16,6 @@ - ✔ Entity packets - ✔ Decouple input normalization from action registry - ✔ entityList.fromJSON() -- ❌ Socket WebWorker can't connect in Firefox - ✔ Don't run emitter destruction tickers on server - ✔ Investigate unrolling equalsClose - ✔ Bitshifts for on_positionChanged x/y boxing @@ -24,19 +23,23 @@ - ✔ EE optimizations (lookupEmitListeners) - ✔ Core.fastApply, search for /\(\.\.\./ - ✔ Rename visibleBoundingBox(es)? to visibleAabb(s)? -- ❌ Property.fastAccess to skip getter, this.entity.currentAnimation - ✔ Trait params fromJS is super slow - ✔ Entity::is is slow? -- ❌ Manual state sync +- ✔ Manual state sync - ✔ Synchronized provides packet updates - ✔ Phase out EntityPacketSynchronizer - - ❌ Implement ALL trait state update packets - - ❌ Implement Entity remember packets + - ✔ Implement ALL trait state update packets - ✔ Implement Entity remove packets - ✔ Save state/param extensions separately on create instead of only merging -- ❌ Pointer events polyfill: https://github.com/jquery/PEP -- ❌ Target trait updates beyond just visible; e.g. others don't need to know +- ✔ Target trait updates beyond just visible; e.g. others don't need to know about inventory change -- ❌ afterDestructionTickers shouldn't exist... destruction should be deferred -- ❌ Remove position pack check from trait and add to Vector +- ✔ Remove position pack check from trait and add to Vector +- ❌ PIXI particles +- ❌ Pointer events polyfill: https://github.com/jquery/PEP +- ❌ Fix physics drag during latency +- ❌ Socket WebWorker can't connect in Firefox +- ✔ PIXI update to v5 +- ❌ chunked tile communication +- ❌ Property.fastAccess to skip getter, this.entity.currentAnimation - ❌ zLib dictionary for packet compression +- ❌ afterDestructionTickers shouldn't exist... destruction should be deferred diff --git a/packages/graphics/canvas.js b/packages/graphics/canvas.js index ca13c2a..fe428e6 100644 --- a/packages/graphics/canvas.js +++ b/packages/graphics/canvas.js @@ -1,4 +1,4 @@ -const PIXI = 'undefined' !== typeof window ? require('pixi.js') : undefined; +import {RenderTexture} from '@pixi/core'; import {compose} from '@avocado/core'; import {Vector} from '@avocado/math'; @@ -15,7 +15,7 @@ export class Canvas extends decorate(class {}) { constructor(size = [0, 0]) { super(); - this.renderTexture = PIXI.RenderTexture.create(size[0], size[1]); + this.renderTexture = RenderTexture.create(size[0], size[1]); } destroy() { diff --git a/packages/graphics/container.js b/packages/graphics/container.js index db96e30..5dc311b 100644 --- a/packages/graphics/container.js +++ b/packages/graphics/container.js @@ -1,4 +1,6 @@ -const PIXI = 'undefined' !== typeof window ? require('pixi.js') : undefined; +import {Container as PIXIContainer} from '@pixi/display'; +import {AdvancedBloomFilter} from '@pixi/filter-advanced-bloom'; +import {ColorMatrixFilter} from '@pixi/filter-color-matrix'; import {Renderable} from './renderable'; @@ -8,7 +10,7 @@ export class Container extends Renderable { super(); this._children = []; this._childrenIndexes = new Map(); - this.container = PIXI ? new PIXI.Container() : undefined; + this.container = new PIXIContainer(); } addChild(child) { @@ -24,7 +26,7 @@ export class Container extends Renderable { } desaturate() { - let filter = new PIXI.filters.ColorMatrixFilter(); + let filter = new ColorMatrixFilter(); filter.desaturate(); this.container.filters = [filter]; } @@ -48,12 +50,12 @@ export class Container extends Renderable { if ( filters && filters.length > 0 - && filters[0] instanceof PIXI.filters.ColorMatrixFilter + && filters[0] instanceof ColorMatrixFilter ) { filter = filters[0]; } else { - filter = new PIXI.filters.ColorMatrixFilter(); + filter = new ColorMatrixFilter(); } const nightness = 0.1; const double = nightness * 2; @@ -72,7 +74,7 @@ export class Container extends Renderable { } paused(intensity = 1) { - let filter = new PIXI.filters.ColorMatrixFilter(); + let filter = new ColorMatrixFilter(); filter.sepia(); filter.brightness(1 - intensity, true); this.container.filters = [filter]; @@ -146,7 +148,7 @@ export class Container extends Renderable { } sepia() { - let filter = new PIXI.filters.ColorMatrixFilter(); + let filter = new ColorMatrixFilter(); filter.sepia(); this.container.filters = [filter]; } @@ -154,7 +156,6 @@ export class Container extends Renderable { setFilter(filter) { switch (filter) { case 'bloom': - const {AdvancedBloomFilter} = require('@pixi/filter-advanced-bloom'); this.container.filters = [new AdvancedBloomFilter({ threshold: 0.5, bloomScale: .8, diff --git a/packages/graphics/image.js b/packages/graphics/image.js index 46243a1..b7db169 100644 --- a/packages/graphics/image.js +++ b/packages/graphics/image.js @@ -1,4 +1,5 @@ -const PIXI = 'undefined' !== typeof window ? require('pixi.js') : undefined; +import {BaseTexture, Texture} from '@pixi/core'; +import {SCALE_MODES} from '@pixi/constants'; import {Resource} from '@avocado/resource'; @@ -14,12 +15,12 @@ export class Image extends Resource { } static fromHtmlCanvas(htmlCanvas) { - const baseTexture = PIXI.BaseTexture.fromCanvas( + const baseTexture = BaseTexture.from( htmlCanvas, - PIXI.SCALE_MODES.NEAREST + SCALE_MODES.NEAREST ); const image = new Image(); - image.texture = new PIXI.Texture(baseTexture); + image.texture = new Texture(baseTexture); return image; } @@ -27,7 +28,7 @@ export class Image extends Resource { return this.loadBaseTexture(uri).then((baseTexture) => { const image = new Image(); image.uri = uri; - image.texture = new PIXI.Texture(baseTexture); + image.texture = new Texture(baseTexture); return image; }); } @@ -40,7 +41,7 @@ export class Image extends Resource { return Promise.resolve(this.baseTextureCache[uri]); } return new Promise((resolve, reject) => { - const baseTexture = PIXI.BaseTexture.fromImage(uri); + const baseTexture = BaseTexture.from(uri); baseTexture.once('error', () => { reject(new Error(`Couldn't load image "${uri}"`)); }); @@ -69,7 +70,7 @@ export class Image extends Resource { height: rectangle[3], }; const subimage = new Image(); - subimage.texture = new PIXI.Texture(this.texture, frame); + subimage.texture = new Texture(this.texture, frame); return subimage; } diff --git a/packages/graphics/index.js b/packages/graphics/index.js index 7339b23..944f7da 100644 --- a/packages/graphics/index.js +++ b/packages/graphics/index.js @@ -1,4 +1,6 @@ -const PIXI = 'undefined' !== typeof window ? require('pixi.js') : undefined; +import {SCALE_MODES} from '@pixi/constants'; +import {Renderer, BatchRenderer} from '@pixi/core'; +import {settings} from '@pixi/settings'; export {Canvas} from './canvas'; export {Color} from './color'; @@ -13,10 +15,6 @@ export {Stage} from './stage'; // Proton. export {Proton, TextNode, TextNodeRenderer} from './proton'; // Pixelly! -if (PIXI) { - PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST - // Kill PIXI's ticker. - const ticker = PIXI.ticker.shared; - ticker.autoStart = false; - ticker.stop(); -} +settings.SCALE_MODE = SCALE_MODES.NEAREST; +// Lil pixi manegement. +Renderer.registerPlugin('batch', BatchRenderer); diff --git a/packages/graphics/package.json b/packages/graphics/package.json index b0ec4d3..e4cdb33 100644 --- a/packages/graphics/package.json +++ b/packages/graphics/package.json @@ -1,6 +1,6 @@ { "name": "@avocado/graphics", - "version": "1.0.6", + "version": "1.0.8", "main": "index.js", "author": "cha0s", "license": "MIT", @@ -8,12 +8,12 @@ "@avocado/core": "1.x", "@avocado/math": "1.x", "@avocado/resource": "1.x", - "@pixi/filter-advanced-bloom": "2.7.0", + "@pixi/filter-advanced-bloom": "3.0.3", "debug": "3.1.0", "immutable": "4.0.0-rc.12", - "pixi.js": "4.8.6", + "pixi.js": "5.1.5", + "proton-js": "3.1.2", "three": "0.103.0", - "three.proton.js": "0.1.5", "web-animations-js": "2.3.1" } } diff --git a/packages/graphics/primitives.js b/packages/graphics/primitives.js index 0ee36a8..63688f4 100644 --- a/packages/graphics/primitives.js +++ b/packages/graphics/primitives.js @@ -1,4 +1,4 @@ -const PIXI = 'undefined' !== typeof window ? require('pixi.js') : undefined; +import {Graphics} from '@pixi/graphics'; import {Color} from './color'; import {Renderable} from './renderable'; @@ -15,7 +15,7 @@ export class Primitives extends Renderable { constructor() { super(); - this.primitives = new PIXI.Graphics(); + this.primitives = new Graphics(); } clear() { diff --git a/packages/graphics/renderer.js b/packages/graphics/renderer.js index b3ef9ba..a8e6771 100644 --- a/packages/graphics/renderer.js +++ b/packages/graphics/renderer.js @@ -1,19 +1,12 @@ -const PIXI = 'undefined' !== typeof window ? require('pixi.js') : undefined; +import {Renderer as PIXIRenderer} from '@pixi/core'; export class Renderer { constructor(size = [0, 0], type = 'auto') { - switch (type) { - case 'auto': - this.renderer = PIXI.autoDetectRenderer(size[0], size[1]); - break; - case 'canvas': - this.renderer = new PIXI.CanvasRenderer(size[0], size[1]); - break; - case 'webgl': - this.renderer = new PIXI.WebGLRenderer(size[0], size[1]); - break; - } + this.renderer = new PIXIRenderer(size[0], size[1]); + // Need to set size explicitly since v5. + this.renderer.view.width = size[0]; + this.renderer.view.height = size[1]; } destroy() { diff --git a/packages/graphics/sprite.js b/packages/graphics/sprite.js index d1bf427..81c2e0e 100644 --- a/packages/graphics/sprite.js +++ b/packages/graphics/sprite.js @@ -1,4 +1,4 @@ -const PIXI = 'undefined' !== typeof window ? require('pixi.js') : undefined; +import {Sprite as PIXISprite} from '@pixi/sprite'; import {Renderable} from './renderable'; @@ -7,7 +7,7 @@ export class Sprite extends Renderable { constructor(image) { super(); this._image = image; - this.sprite = new PIXI.Sprite(image.texture); + this.sprite = new PIXISprite(image.texture); this.anchor = [0.5, 0.5]; } @@ -26,6 +26,7 @@ export class Sprite extends Renderable { width: rectangle[2], height: rectangle[3], }; + this._image.texture.updateUvs(); } } diff --git a/packages/graphics/three/scene.js b/packages/graphics/three/scene.js index 712910b..945bb38 100644 --- a/packages/graphics/three/scene.js +++ b/packages/graphics/three/scene.js @@ -1,5 +1,3 @@ -const PIXI = 'undefined' !== typeof window ? require('pixi.js') : undefined; - import * as THREE from 'three'; import {compose, Property} from '@avocado/core';