Updated to PixiJS v5.

dist/iwmlib.pixi.js

@@ -2894,7 +2894,7 @@
                 }
 
                 const url = Button.iconIsUrl(icon) ? icon : `../../assets/icons/${icon}.png`;
-                const iconTexture = PIXI.Texture.fromImage(url, true);
+                const iconTexture = PIXI.Texture.from(url);
 
                 const sprite = new PIXI.Sprite(iconTexture);
                 sprite.tint = color;
@@ -3728,7 +3728,7 @@
             // closeButton
             //-----------------
             if (this.opts.closeButton) {
-                let closeButton = PIXI.Sprite.fromImage('../../assets/icons/close.png', true);
+                let closeButton = PIXI.Sprite.from('../../assets/icons/close.png');
                 closeButton.width = this.headerStyle.fontSize;
                 closeButton.height = closeButton.width;
                 closeButton.tint = this.theme.color2;
@@ -4312,8 +4312,7 @@
                 resolution,
                 autoResize,
                 backgroundColor,
-                forceCanvas,
+                forceCanvas
-                roundPixels // not needed for PixiJS >= 5
             });
 
             this.width = width;
@@ -4944,7 +4943,7 @@
      * }).setup().run()
      *
      * // Add a video sprite
-     * const sprite = new PIXI.Sprite(PIXI.Texture.fromVideo("assets/blurfilter.mp4"))
+     * const sprite = new PIXI.Sprite(PIXI.Texture.from("assets/blurfilter.mp4"))
      * sprite.width = app.size.width
      * sprite.height = app.size.height
      * app.scene.addChild(sprite)
@@ -4970,10 +4969,15 @@
         }
 
         apply(filterManager, input, output) {
-            let renderTarget = filterManager.getRenderTarget(true);
+            let renderTarget = filterManager.getFilterTexture();
             this.tiltShiftXFilter.apply(filterManager, input, renderTarget);
             this.tiltShiftYFilter.apply(filterManager, renderTarget, output);
-            filterManager.returnRenderTarget(renderTarget);
+            filterManager.returnFilterTexture(renderTarget);
+
+            // let renderTarget = filterManager.getRenderTarget(true)
+            // this.tiltShiftXFilter.apply(filterManager, input, renderTarget)
+            // this.tiltShiftYFilter.apply(filterManager, renderTarget, output)
+            // filterManager.returnRenderTarget(renderTarget)
         }
 
         /**
@@ -5050,19 +5054,23 @@
 
             uniform mat3 projectionMatrix;
 
+            varying vec2 vVertexPosition;
             varying vec2 vTextureCoord;
 
             void main(void) {
-                gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);
+                vVertexPosition = aVertexPosition;
                 vTextureCoord = aTextureCoord;
+                gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);
             }
         `;
 
             const fragment = `
+
+            varying vec2 vVertexPosition;
             varying vec2 vTextureCoord;
 
-            uniform vec4 filterArea;
             uniform sampler2D uSampler;
+            
             uniform int shape;
             uniform vec4 rectangle;
             uniform vec3 circle;
@@ -5075,15 +5083,12 @@
             }
 
             void main(void) {
-                // textureCoord to pixelCoord
-                vec2 pixelCoord = vTextureCoord * filterArea.xy - vec2(4.0, 4.0);   // FIXME: There's a shift of 4 * 4 pixels, don't know why...
-
                 bool inside = false;
 
                 if (shape == 1) {
-                    inside = distance(pixelCoord, circle.xy) <= circle.z;
+                    inside = distance(vVertexPosition, circle.xy) <= circle.z;
                 } else if (shape == 2) {
-                    inside = pixelCoord.x >= rectangle.x && pixelCoord.x <= rectangle.z && pixelCoord.y >= rectangle.y && pixelCoord.y <= rectangle.w;
+                    inside = vVertexPosition.x >= rectangle.x && vVertexPosition.x <= rectangle.z && vVertexPosition.y >= rectangle.y && vVertexPosition.y <= rectangle.w;
                 }
 
                 if (inside) {
@@ -6396,9 +6401,7 @@
                     for (let j = 0; j < elements.length; j++) {
                         // if(elements[j].tagName == "svg") return false;
 
-                        const target = elements[j];
+                        let hammer = new Hammer(elements[j], opts);
-
-                        let hammer = new Hammer(target, opts);
 
                         if (window.propagating !== 'undefined') {
                             hammer = propagating(hammer);
@@ -6419,23 +6422,16 @@
                             hammer.get('tap').set(opts);
                         }
 
-                        console.log('APPLY HAMMER ON', type);
-
-                        target.addEventListener("click", ()=>{
-                            console.log("Hello");
-                        });
-
                         hammer.on(type, event => {
-                            console.log('FIRED');
                             cb(event);
                         });
 
-                        if (Hammer.__hammers.has(target)) {
+                        if (Hammer.__hammers.has(elements[j])) {
-                            const elementHammers = Hammer.__hammers.get(target);
+                            const elementHammers = Hammer.__hammers.get(elements[j]);
                             elementHammers.push(hammer);
-                            Hammer.__hammers.set(target, elementHammers);
+                            Hammer.__hammers.set(elements[j], elementHammers);
                         } else {
-                            Hammer.__hammers.set(target, [hammer]);
+                            Hammer.__hammers.set(elements[j], [hammer]);
                         }
                     }
                 } else {
@@ -8501,7 +8497,7 @@
         }
 
         /**
-         * Loads a tile from image using the PIXI.Texture.fromImage method.
+         * Loads a tile from image using the PIXI.Texture.from method.
          *
          * @static
          * @param {*} imageId
@@ -8511,7 +8507,7 @@
          * @memberof Tile
          */
         static fromImage(imageId, crossorigin, scaleMode) {
-            return new Tile(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode), imageId)
+            return new Tile(PIXI.Texture.from(imageId, crossorigin, scaleMode), imageId)
         }
 
         /**
@@ -8762,7 +8758,7 @@
         constructor(tiles, compression) {
             super(tiles);
             this.destroyed = false;
-            this.loader = new PIXI.loaders.Loader();
+            this.loader = new PIXI.Loader();
             this.loader.on('load', this._onLoaded.bind(this));
             this.loader.on('error', this._onError.bind(this));
             if (compression) {
@@ -9868,7 +9864,7 @@
          * @return {Sprite} sprite - A sprite with a single tile texture
          */
         thumbnail() {
-            return new PIXI.Sprite.fromImage(this.info.baseURL)
+            return new PIXI.Sprite.from(this.info.baseURL)
         }
 
         /** Returns a list of all tiles of a given level.
@@ -10368,7 +10364,7 @@
             let canvas = globalScatterLoaderCanvas;
             canvas.width = w;
             canvas.height = h;
-            let renderer = new PIXI.WebGLRenderer(w, h, {
+            let renderer = new PIXI.Renderer(w, h, {
                 view: canvas,
                 resolution: resolution
             });
@@ -10627,8 +10623,8 @@
      * Class that represents a PixiJS Flippable.
      *
      * @example
-     * const front = PIXI.Sprite.fromImage('./assets/front.jpg')
+     * const front = PIXI.Sprite.from('./assets/front.jpg')
-     * const back = PIXI.Sprite.fromImage('./assets/back.jpg')
+     * const back = PIXI.Sprite.from('./assets/back.jpg')
      * app.scene.addChild(front)
      *
      * // Create the flippable
@@ -10649,7 +10645,7 @@
          * @constructor
          * @param {PIXI.DisplayObject} front - The object to show initially. Should have been added to the scene.
          * @param {PIXI.DisplayObject} back - The object to show on the backside. Should have not been added to the scene.
-         * @param {PIXI.WebGLRenderer|PIXI.CanvasRenderer} renderer - The renderer of the application.
+         * @param {PIXI.Renderer|PIXI.CanvasRenderer} renderer - The renderer of the application.
          * @param {object} [opts] - An options object which can contain the following properties.
          * @param {number} [opts.duration=1] - The duration of the flip animation in seconds.
          * @param {GSAP.Ease} [opts.ease=Power2.easeOut] - The ease of the flip animation.
@@ -10733,7 +10729,7 @@
 
             // shadow
             //--------------------
-            const shadow = new PIXI.projection.Sprite3d(PIXI.Texture.fromImage('../../assets/images/shadow.png'));
+            const shadow = new PIXI.projection.Sprite3d(PIXI.Texture.from('../../assets/images/shadow.png'));
             shadow.renderable = false;
             shadow.anchor.set(0.5);
             shadow.scale3d.set(0.98);
@@ -11384,7 +11380,7 @@
                     if (child.scatter) {
                         let polygon = child.scatter.polygon;
                         let shape = new PIXI.Polygon(polygon.flatAbsolutePoints());
-                        shape.close();
+                        //shape.close() not possible in PixiJS v5
                         this.drawShape(shape);
                     }
                 }
@@ -15522,8 +15518,8 @@
      * Class that represents a PixiJS List.
      *
      * @example
-     * const elephant1 = PIXI.Sprite.fromImage('./assets/elephant-1.jpg')
+     * const elephant1 = PIXI.Sprite.from('./assets/elephant-1.jpg')
-     * const elephant2 = PIXI.Sprite.fromImage('./assets/elephant-2.jpg')
+     * const elephant2 = PIXI.Sprite.from('./assets/elephant-2.jpg')
      *
      * // Create the list
      * const list = new List([elephant1, elephant2])

gulpfile.js

@@ -13,7 +13,7 @@ function vendors() {
             './node_modules/propagating-hammerjs/propagating.js',
             './node_modules/pixi.js/dist/pixi.js',
             './node_modules/pixi-compressed-textures/lib/crn_decomp.js',
-            './node_modules/pixi-compressed-textures/bin/pixi-compressed-textures.js',
+            './node_modules/pixi-compressed-textures/dist/pixi-compressed-textures.js',
             './node_modules/pixi-filters/dist/pixi-filters.js',
             './node_modules/pixi-particles/dist/pixi-particles.js',
             './node_modules/pixi-projection/dist/pixi-projection.js',

lib/pixi/app.js

@@ -116,8 +116,7 @@ export default class PIXIApp extends PIXI.Application {
             resolution,
             autoResize,
             backgroundColor,
-            forceCanvas,
+            forceCanvas
-            roundPixels // not needed for PixiJS >= 5
         })
 
         this.width = width

lib/pixi/application.html

@@ -23,7 +23,7 @@
         document.body.appendChild(app.view)
 
         // ex, add display objects
-        const sprite = PIXI.Sprite.fromImage('./assets/app-circle.png')
+        const sprite = PIXI.Sprite.from('./assets/app-circle.png')
         sprite.scale.set(.3, .3)
         app.stage.addChild(sprite)
 

lib/pixi/badge.html

@@ -121,11 +121,11 @@
             })
 
             let sprite1 = new PIXI.Sprite(
-                PIXI.Texture.fromVideo('./assets/badge-1.mp4')
+                PIXI.Texture.from('./assets/badge-1.mp4')
             )
             sprite1.scale.set(0.05, 0.05)
 
-            let texture1 = PIXI.Texture.fromVideo('./assets/badge-1.mp4')
+            let texture1 = PIXI.Texture.from('./assets/badge-1.mp4')
             texture1.baseTexture.on('loaded', e => {
                 let sprite1 = new PIXI.Sprite(texture1)
                 sprite1.scale.set(0.05, 0.05)

lib/pixi/blurfilter.html

@@ -36,7 +36,7 @@ const app = new PIXIApp({
 }).setup().run()
 
 // Load a video and add it to the scene
-const videoSprite = new PIXI.Sprite(PIXI.Texture.fromVideo("assets/blurfilter.mp4"))
+const videoSprite = new PIXI.Sprite(PIXI.Texture.from("assets/blurfilter.mp4"))
 videoSprite.width = app.size.width
 videoSprite.height = app.size.height
 app.scene.addChild(videoSprite)

lib/pixi/blurfilter.js

@@ -15,7 +15,7 @@
  * }).setup().run()
  *
  * // Add a video sprite
- * const sprite = new PIXI.Sprite(PIXI.Texture.fromVideo("assets/blurfilter.mp4"))
+ * const sprite = new PIXI.Sprite(PIXI.Texture.from("assets/blurfilter.mp4"))
  * sprite.width = app.size.width
  * sprite.height = app.size.height
  * app.scene.addChild(sprite)
@@ -41,10 +41,15 @@ export default class BlurFilter extends PIXI.Filter {
     }
 
     apply(filterManager, input, output) {
-        let renderTarget = filterManager.getRenderTarget(true)
+        let renderTarget = filterManager.getFilterTexture()
         this.tiltShiftXFilter.apply(filterManager, input, renderTarget)
         this.tiltShiftYFilter.apply(filterManager, renderTarget, output)
-        filterManager.returnRenderTarget(renderTarget)
+        filterManager.returnFilterTexture(renderTarget)
+
+        // let renderTarget = filterManager.getRenderTarget(true)
+        // this.tiltShiftXFilter.apply(filterManager, input, renderTarget)
+        // this.tiltShiftYFilter.apply(filterManager, renderTarget, output)
+        // filterManager.returnRenderTarget(renderTarget)
     }
 
     /**
@@ -121,19 +126,23 @@ class TiltShiftAxisFilter extends PIXI.Filter {
 
             uniform mat3 projectionMatrix;
 
+            varying vec2 vVertexPosition;
             varying vec2 vTextureCoord;
 
             void main(void) {
-                gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);
+                vVertexPosition = aVertexPosition;
                 vTextureCoord = aTextureCoord;
+                gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);
             }
         `
 
         const fragment = `
+
+            varying vec2 vVertexPosition;
             varying vec2 vTextureCoord;
 
-            uniform vec4 filterArea;
             uniform sampler2D uSampler;
+            
             uniform int shape;
             uniform vec4 rectangle;
             uniform vec3 circle;
@@ -146,15 +155,12 @@ class TiltShiftAxisFilter extends PIXI.Filter {
             }
 
             void main(void) {
-                // textureCoord to pixelCoord
-                vec2 pixelCoord = vTextureCoord * filterArea.xy - vec2(4.0, 4.0);   // FIXME: There's a shift of 4 * 4 pixels, don't know why...
-
                 bool inside = false;
 
                 if (shape == 1) {
-                    inside = distance(pixelCoord, circle.xy) <= circle.z;
+                    inside = distance(vVertexPosition, circle.xy) <= circle.z;
                 } else if (shape == 2) {
-                    inside = pixelCoord.x >= rectangle.x && pixelCoord.x <= rectangle.z && pixelCoord.y >= rectangle.y && pixelCoord.y <= rectangle.w;
+                    inside = vVertexPosition.x >= rectangle.x && vVertexPosition.x <= rectangle.z && vVertexPosition.y >= rectangle.y && vVertexPosition.y <= rectangle.w;
                 }
 
                 if (inside) {

lib/pixi/button.js

@@ -664,7 +664,7 @@ export default class Button extends PIXI.Container {
             }
 
             const url = Button.iconIsUrl(icon) ? icon : `../../assets/icons/${icon}.png`
-            const iconTexture = PIXI.Texture.fromImage(url, true)
+            const iconTexture = PIXI.Texture.from(url)
 
             const sprite = new PIXI.Sprite(iconTexture)
             sprite.tint = color

lib/pixi/coordinates.html

@@ -64,7 +64,7 @@
                 super.setup()
                 let x = 30
                 let y = 30
-                let sprite = PIXI.Sprite.fromImage('../examples/women.jpeg')
+                let sprite = PIXI.Sprite.from('../examples/women.jpeg')
                 sprite.interactive = true
                 let scatter = new DisplayObjectScatter(sprite, this.renderer,
                     {

lib/pixi/deepzoom/image.html

@@ -126,7 +126,7 @@
             app.scene.addChild(deepZoomImage)
 
             //Set info text.
-            info.innerHTML = "resolution: " + app._options.resolution +
+            info.innerHTML = "resolution: " + app.renderer.resolution +
                 "<br>high resolution: " + !!state;
         }
 

lib/pixi/deepzoom/image.js

@@ -595,7 +595,7 @@ export class DeepZoomImage extends PIXI.Container {
      * @return {Sprite} sprite - A sprite with a single tile texture
      */
     thumbnail() {
-        return new PIXI.Sprite.fromImage(this.info.baseURL)
+        return new PIXI.Sprite.from(this.info.baseURL)
     }
 
     /** Returns a list of all tiles of a given level.

lib/pixi/deepzoom/loader.js

@@ -84,7 +84,7 @@ export class PIXITileLoader extends TileLoader {
     constructor(tiles, compression) {
         super(tiles)
         this.destroyed = false
-        this.loader = new PIXI.loaders.Loader()
+        this.loader = new PIXI.Loader()
         this.loader.on('load', this._onLoaded.bind(this))
         this.loader.on('error', this._onError.bind(this))
         if (compression) {
@@ -256,7 +256,7 @@ export class RequestTileLoader extends TileLoader {
             }
             xhr.send()
         } else {
-            let texture = PIXI.Texture.fromImage('assets/image.png')
+            let texture = PIXI.Texture.from('assets/image.png')
             this._textureAvailable(url, col, row, texture)
             if (callback) callback()
         }

lib/pixi/deepzoom/tile.js

@@ -52,7 +52,7 @@ export default class Tile extends PIXI.Sprite {
     }
 
     /**
-     * Loads a tile from image using the PIXI.Texture.fromImage method.
+     * Loads a tile from image using the PIXI.Texture.from method.
      *
      * @static
      * @param {*} imageId
@@ -62,7 +62,7 @@ export default class Tile extends PIXI.Sprite {
      * @memberof Tile
      */
     static fromImage(imageId, crossorigin, scaleMode) {
-        return new Tile(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode), imageId)
+        return new Tile(PIXI.Texture.from(imageId, crossorigin, scaleMode), imageId)
     }
 
     /**

lib/pixi/flipeffect.html

@@ -75,13 +75,13 @@ class ScatterApp extends PIXIApp {
     setup() {
         super.setup()
         let urls = ['../examples/women.jpeg', '../examples/king.jpeg']
-        PIXI.loader.add(urls).load((loader) => {
+        PIXI.Loader.shared.add(urls).load((loader) => {
             // We need a loader because the size of the sprite must be known
             // when the scatter is defined
             let x = 30
             let y = 30
             for(let url in loader.resources) {
-                let sprite = PIXI.Sprite.fromImage(url)
+                let sprite = PIXI.Sprite.from(url)
                 sprite.interactive = true
                 let scatter = new DisplayObjectScatter(sprite, this.renderer,
                         { x: x, y: y,

lib/pixi/flipeffect.js

@@ -45,7 +45,7 @@ export class ScatterLoader extends CardLoader {
         let canvas = globalScatterLoaderCanvas
         canvas.width = w
         canvas.height = h
-        let renderer = new PIXI.WebGLRenderer(w, h, {
+        let renderer = new PIXI.Renderer(w, h, {
             view: canvas,
             resolution: resolution
         })

lib/pixi/flippable.js

@@ -26,8 +26,8 @@
  * Class that represents a PixiJS Flippable.
  *
  * @example
- * const front = PIXI.Sprite.fromImage('./assets/front.jpg')
+ * const front = PIXI.Sprite.from('./assets/front.jpg')
- * const back = PIXI.Sprite.fromImage('./assets/back.jpg')
+ * const back = PIXI.Sprite.from('./assets/back.jpg')
  * app.scene.addChild(front)
  *
  * // Create the flippable
@@ -48,7 +48,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
      * @constructor
      * @param {PIXI.DisplayObject} front - The object to show initially. Should have been added to the scene.
      * @param {PIXI.DisplayObject} back - The object to show on the backside. Should have not been added to the scene.
-     * @param {PIXI.WebGLRenderer|PIXI.CanvasRenderer} renderer - The renderer of the application.
+     * @param {PIXI.Renderer|PIXI.CanvasRenderer} renderer - The renderer of the application.
      * @param {object} [opts] - An options object which can contain the following properties.
      * @param {number} [opts.duration=1] - The duration of the flip animation in seconds.
      * @param {GSAP.Ease} [opts.ease=Power2.easeOut] - The ease of the flip animation.
@@ -132,7 +132,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
 
         // shadow
         //--------------------
-        const shadow = new PIXI.projection.Sprite3d(PIXI.Texture.fromImage('../../assets/images/shadow.png'))
+        const shadow = new PIXI.projection.Sprite3d(PIXI.Texture.from('../../assets/images/shadow.png'))
         shadow.renderable = false
         shadow.anchor.set(0.5)
         shadow.scale3d.set(0.98)

lib/pixi/flippable.test.html

@@ -68,7 +68,7 @@ app.scene.addChild(scatterContainer)
 
 // scatter
 //--------------------
-const sprite1 = PIXI.Sprite.fromImage('./assets/fruit-1.jpg')
+const sprite1 = PIXI.Sprite.from('./assets/fruit-1.jpg')
 sprite1.interactive = true
 sprite1.scatter = new DisplayObjectScatter(sprite1, app.renderer, {
     x: 20,
@@ -81,7 +81,7 @@ scatterContainer.addChild(sprite1)
 
 // flippable
 //--------------------
-const sprite2 = PIXI.Sprite.fromImage('./assets/fruit-2.jpg')
+const sprite2 = PIXI.Sprite.from('./assets/fruit-2.jpg')
 const flippable = new Flippable(sprite1, sprite2, app.renderer)
 
 // button1

lib/pixi/list.js

@@ -7,8 +7,8 @@ import Events from '../events.js'
  * Class that represents a PixiJS List.
  *
  * @example
- * const elephant1 = PIXI.Sprite.fromImage('./assets/elephant-1.jpg')
+ * const elephant1 = PIXI.Sprite.from('./assets/elephant-1.jpg')
- * const elephant2 = PIXI.Sprite.fromImage('./assets/elephant-2.jpg')
+ * const elephant2 = PIXI.Sprite.from('./assets/elephant-2.jpg')
  *
  * // Create the list
  * const list = new List([elephant1, elephant2])

lib/pixi/modal.html

@@ -129,7 +129,7 @@ let button6 = new Button({
     }
 })
 
-let img = PIXI.Sprite.fromImage('./assets/modal-1.jpg')
+let img = PIXI.Sprite.from('./assets/modal-1.jpg')
 img.scale.set(.2, .2)
 
 let button7 = new Button({

lib/pixi/popup.js

@@ -73,7 +73,7 @@ export class InteractivePopup extends AbstractPopup {
         // closeButton
         //-----------------
         if (this.opts.closeButton) {
-            let closeButton = PIXI.Sprite.fromImage('../../assets/icons/close.png', true)
+            let closeButton = PIXI.Sprite.from('../../assets/icons/close.png')
             closeButton.width = this.headerStyle.fontSize
             closeButton.height = closeButton.width
             closeButton.tint = this.theme.color2

lib/pixi/scatter.html

@@ -43,7 +43,7 @@
                     let x = 30
                     let y = 30
                     for (let key of ['women', 'king']) {
-                        let sprite = PIXI.Sprite.fromImage('../examples/' + key + '.jpeg')
+                        let sprite = PIXI.Sprite.from('../examples/' + key + '.jpeg')
                         sprite.interactive = true
                         let scatter = new DisplayObjectScatter(sprite, this.renderer,
                             {
@@ -98,7 +98,7 @@
                     this.scene.addChild(this.scatterContainerFront)
 
                     // Add the queen to ScatterContainer one
-                    let sprite1 = PIXI.Sprite.fromImage('../examples/women.jpeg')
+                    let sprite1 = PIXI.Sprite.from('../examples/women.jpeg')
                     sprite1.interactive = true
                     let scatter1 = new DisplayObjectScatter(sprite1, this.renderer, {
                         x: 20,
@@ -108,7 +108,7 @@
                     this.scatterContainerBack.addChild(sprite1)
 
                     // Add the king to ScatterContainer two
-                    let sprite2 = PIXI.Sprite.fromImage('../examples/king.jpeg')
+                    let sprite2 = PIXI.Sprite.from('../examples/king.jpeg')
                     sprite2.interactive = true
                     let scatter2 = new DisplayObjectScatter(sprite2, this.renderer, {
                         x: 280,
@@ -151,7 +151,7 @@
 
 
                     // Add the queen to ScatterContainer one
-                    let woman = PIXI.Sprite.fromImage('../examples/women.jpeg')
+                    let woman = PIXI.Sprite.from('../examples/women.jpeg')
                     woman.interactive = true
                     new DisplayObjectScatter(woman, this.renderer, {
                         x: 20,
@@ -161,21 +161,21 @@
                     })
                     this.scene.addChild(woman)
 
-                    let nestedKing = PIXI.Sprite.fromImage('../examples/king.jpeg')
+                    let nestedKing = PIXI.Sprite.from('../examples/king.jpeg')
                     nestedKing.interactive = true
                     new DisplayObjectScatter(nestedKing, this.renderer, {
                         x: 20, y: 20, startScale: 0.3
                     })
                     woman.addChild(nestedKing)
 
-                     let nestedQueen = PIXI.Sprite.fromImage('../examples/women.jpeg')
+                     let nestedQueen = PIXI.Sprite.from('../examples/women.jpeg')
                     nestedQueen.interactive = true
                     new DisplayObjectScatter(nestedQueen, this.renderer, {
                         x: 40, y: 40, startScale: 0.3
                     })
                     woman.addChild(nestedQueen)
 
-                    let king = PIXI.Sprite.fromImage('../examples/king.jpeg')
+                    let king = PIXI.Sprite.from('../examples/king.jpeg')
                     king.interactive = true
                     new DisplayObjectScatter(king, this.renderer, {
                         x: 200, y: 20, startScale: 1

lib/pixi/scatter.js

@@ -137,7 +137,7 @@ export class ScatterContainer extends PIXI.Graphics {
                 if (child.scatter) {
                     let polygon = child.scatter.polygon
                     let shape = new PIXI.Polygon(polygon.flatAbsolutePoints())
-                    shape.close()
+                    //shape.close() not possible in PixiJS v5
                     this.drawShape(shape)
                 }
             }

lib/pixi/text.html

@@ -58,9 +58,9 @@ app.loadSprites([
     text.pivot.set(text.width / 2, text.height / 2)
     container.addChild(text)
 
-    // PIXI.extras.BitmapText
+    // PIXI.BitmapText
     //--------------------
-    const bitmapText = new PIXI.extras.BitmapText('Bibliothek\nStuttgart', {
+    const bitmapText = new PIXI.BitmapText('Bibliothek\nStuttgart', {
         font: '50px Arial',
         align: 'left'
     })

lib/pixi/tooltip.html

@@ -143,7 +143,7 @@ app.loadSprites([
         textStyle: {lineHeight: 22, fontSize: 18, fill: ['#843d39','#ae4a4a', '#d7626c'], fontStyle: 'italic'}
     })
 
-    let texture1 = PIXI.Texture.fromVideo('./assets/tooltip-3.mp4')
+    let texture1 = PIXI.Texture.from('./assets/tooltip-3.mp4')
 
     texture1.baseTexture.on('loaded', e => {
 

package.json

@@ -27,9 +27,9 @@
     "author": "",
     "license": "LGPL-3.0-or-later",
     "devDependencies": {
-        "@pixi/jsdoc-template": "^2.4.2",
+        "@pixi/jsdoc-template": "^2.4.3",
-        "eslint": "^6.1.0",
+        "eslint": "^6.3.0",
-        "eslint-config-prettier": "^6.0.0",
+        "eslint-config-prettier": "^6.2.0",
         "eslint-plugin-prettier": "^3.1.0",
         "fs-extra": "^8.0.1",
         "gulp": "^4.0.2",
@@ -48,11 +48,13 @@
         "gsap": "^2.1.3",
         "hammerjs": "^2.0.8",
         "optimal-select": "^4.0.1",
-        "pixi-compressed-textures": "^1.1.8",
+        "pixi-compressed-textures": "^2.0.0",
-        "pixi-filters": "^2.7.1",
+        "pixi-ease": "^2.4.0",
+        "pixi-filters": "^3.0.3",
         "pixi-particles": "^4.1.1",
-        "pixi-projection": "^0.2.8",
+        "pixi-projection": "^0.3.5",
-        "pixi.js": "^4.8.8",
+        "pixi-viewport": "^4.2.2",
+        "pixi.js": "^5.1.3",
         "propagating-hammerjs": "^1.4.7"
     }
 }