chore: bump pixi to v5

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

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() {

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,

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;
   }
 

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);

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"
   }
 }

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() {

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() {

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();
   }
 
 }

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';