feat(SDK): migrate to PIXI v5

Author: CGjupoulton

engine/core/src/main/resources/view/core/Drawer.js

@@ -39,7 +39,7 @@ export class Drawer {
 
   static get requirements () {
     return {
-      PIXI: 'PIXI4'
+      PIXI: 'PIXI5'
     }
   }
 
@@ -206,7 +206,7 @@ export class Drawer {
     if (this.demo) {
       if (this.demo.logo) {
         try {
-          const logo = PIXI.Sprite.fromFrame(this.demo.logo)
+          const logo = PIXI.Sprite.from(this.demo.logo)
           logo.position.set(Drawer.WIDTH / 2, Drawer.HEIGHT / 2)
           logo.anchor.set(0.5)
           logo.baseScale = fitAspectRatio(logo.texture.width, logo.texture.height, 2 * Drawer.WIDTH / 3, Drawer.HEIGHT / 2, 0)
@@ -747,7 +747,7 @@ export class Drawer {
 
     var drawer = this
 
-    var loader = new PIXI.loaders.Loader(window.location.origin)
+    var loader = new PIXI.Loader(window.location.origin)
     this.playerInfo = agents.map(function (agent, index) {
       var agentData = {
         name: agent.name || 'Anonymous',
@@ -777,8 +777,8 @@ export class Drawer {
       completed = true
     }
 
-    loader.on('complete', onComplete)
-    loader.on('error', function (e) {
+    loader.onComplete.add(onComplete)
+    loader.onError.add(function (e) {
       console.warn(e)
       // The loader won't complete now, let's just go ahead and see what happens
       if (!completed) {
@@ -860,7 +860,7 @@ export class Drawer {
       var resources = this.getResources()
       this.renderer = this.createRenderer(this.initWidth, this.initHeight, canvas)
       setRenderer(this.renderer)
-      var loader = new PIXI.loaders.Loader(resources.baseUrl)
+      var loader = new PIXI.Loader(resources.baseUrl)
       for (key in resources.images) {
         loader.add(key, resources.images[key], { crossOrigin: true })
       }
@@ -893,20 +893,15 @@ export class Drawer {
         requestAnimationFrame(self.animate.bind(self))
         self.initPreload(self.scope, self.container, self.loaded = 0, self.initWidth, self.initHeight)
       }
-      loader.on('start', onStart)
-      loader.on('progress', function (loader, resource) {
+      loader.onStart.add(onStart)
+      loader.onProgress.add(function (loader, resource) {
         if (loader.progress < 100) {
           self.preload(self.scope, self.container, self.loaded = loader.progress / 100, self.initWidth, self.initHeight, resource)
         }
       })
 
       const onComplete = function () {
         var key
-        for (key in resources.images) {
-          if (resources.images.hasOwnProperty(key) && loader.resources[key].texture) {
-            PIXI.Texture.addToCache(loader.resources[key].texture, key)
-          }
-        }
         for (key in resources.spines) {
           if (resources.spines.hasOwnProperty(key)) {
             PIXI.AnimCache[key] = PIXI.AnimCache[resources.baseUrl + resources.spines[key]]
@@ -917,8 +912,8 @@ export class Drawer {
         self.changed = true
       }
 
-      loader.on('complete', onComplete)
-      loader.on('error', function (e) {
+      loader.onComplete.add(onComplete)
+      loader.onError.add(function (e) {
         console.warn(e)
       })
 
@@ -937,7 +932,9 @@ export class Drawer {
   }
 
   createRenderer (width, height, canvas) {
-    return PIXI.autoDetectRenderer(width, height, {
+    return PIXI.autoDetectRenderer({
+      width, 
+      height,
       view: canvas,
       clearBeforeRender: true,
       preserveDrawingBuffer: false

engine/modules/endscreen/src/main/resources/view/endscreen-module/EndScreenModule.js

@@ -231,7 +231,7 @@ export class EndScreenModule {
     let sprite = this.spriteName
     var titleRanking
     if (PIXI.utils.TextureCache[sprite]) {
-      titleRanking = PIXI.Sprite.fromFrame(sprite)
+      titleRanking = PIXI.Sprite.from(sprite)
     } else {
       ErrorLog.push(new MissingImageError(sprite))
       titleRanking = new PIXI.Sprite(PIXI.Texture.EMPTY)

engine/modules/entities/src/main/resources/view/entity-module/BitmapText.js

@@ -31,14 +31,16 @@ export class BitmapText extends Entity {
   updateDisplay (state, changed, globalData) {
     super.updateDisplay(state, changed, globalData)
     if (state.fontFamily !== null) {
-      if (PIXI.extras.BitmapText.fonts[state.fontFamily]) {
+      if (PIXI.BitmapFont.available[state.fontFamily]) {
         if (this.graphics.children.length === 0) {
-          this.displayed = new PIXI.extras.BitmapText('', {
-            font: { size: state.fontSize || 1, name: state.fontFamily }
+          this.displayed = new PIXI.BitmapText('', {
+             fontSize: state.fontSize || 1, 
+             fontName: state.fontFamily
           })
           this.graphics.addChild(this.displayed)
         } else {
-          this.displayed.font = { size: state.fontSize || 1, name: state.fontFamily }
+          this.displayed.fontName = state.fontFamily
+          this.displayed.fontSize = state.fontSize || 1
         }
         this.displayed.anchor.set(state.anchorX, state.anchorY)
         this.displayed.blendMode = state.blendMode

engine/modules/entities/src/main/resources/view/entity-module/Command.js

@@ -79,7 +79,7 @@ export class CreateCommands {
 
 export class LoadCommand {
   constructor ([assetName, sourceImage, imageWidth, imageHeight, origRow, origCol, imageCount, imagesPerRow], globalData) {
-    this.loader = new PIXI.loaders.Loader()
+    this.loader = new PIXI.Loader()
 
     if (imageWidth === '0') {
       imageWidth = PIXI.utils.TextureCache[sourceImage].width
@@ -122,7 +122,7 @@ export class LoadCommand {
     if (Object.keys(this.loader.resources).length > 0) {
       return new Promise((resolve) => {
         this.loader.load()
-        this.loader.on('complete', resolve)
+        this.loader.onComplete.add(resolve)
       })
     }
   }

engine/modules/entities/src/main/resources/view/entity-module/ContainerBasedEntity.js

@@ -13,6 +13,7 @@ export class ContainerBasedEntity extends Entity {
   initDisplay () {
     super.initDisplay()
     this.graphics = new PIXI.Container()
+    this.graphics.sortableChildren = true
   }
 
   updateDisplay (state, changed, globalData) {

engine/modules/entities/src/main/resources/view/entity-module/Entity.js

@@ -140,9 +140,6 @@ export class Entity {
           globalData.updatedBuffers.push(this)
         }
       }
-      if (changed.zIndex) {
-        globalData.mustResort = true
-      }
       if (changed.mask) {
         globalData.maskUpdates[this.id] = state.mask
       }

engine/modules/entities/src/main/resources/view/entity-module/GraphicEntityModule.js

@@ -15,7 +15,6 @@ export class GraphicEntityModule {
     this.globalData = {
       toWorldUnits: 1,
       mustResetTree: true,
-      mustResort: true,
       maskUpdates: {},
       updatedBuffers: [],
       players: [],
@@ -118,21 +117,12 @@ export class GraphicEntityModule {
     this.globalData.toPixel = (WIDTH / canvasData.width) * canvasData.oversampling
     this.globalData.mustResetTree = true
     api.container = this.container = container
+    container.sortableChildren = true
     this.entities.forEach((e) => {
       e.init()
     })
   }
 
-  sortChildren (container) {
-    container.children.sort((a, b) => {
-      if (a.zIndex === b.zIndex) {
-        return a.id - b.id
-      } else {
-        return a.zIndex - b.zIndex
-      }
-    })
-  }
-
   stillLoading () {
     return this.loadingAssets > 0
   }
@@ -144,15 +134,10 @@ export class GraphicEntityModule {
 
     this.entities.forEach(e => e.render(progress, currentData, this.globalData))
 
-    // Flags are set by Entity when a zIndex changes, or a group has different children
+    // Flags are set by Entity when a group has different children
     if (this.globalData.mustResetTree) {
       this.reconstructTree()
       this.globalData.mustResetTree = false
-      this.globalData.mustResort = true
-    }
-    if (this.globalData.mustResort) {
-      this.resortTree()
-      this.globalData.mustResort = false
     }
     for (const entityId in this.globalData.maskUpdates) {
       const entity = this.entities.get(+entityId)
@@ -169,17 +154,7 @@ export class GraphicEntityModule {
     this.globalData.maskUpdates = {}
   }
 
-  resortTree () {
-    // Groups
-    this.entities.forEach(e => {
-      if (e instanceof ContainerBasedEntity) {
-        this.sortChildren(e.childrenContainer)
-      }
-    })
-    // Parent
-    this.sortChildren(this.container)
-  }
-
+  
   reconstructTree () {
     this.container.removeChildren()
 

engine/modules/entities/src/main/resources/view/entity-module/Sprite.js

@@ -8,7 +8,7 @@ export class Sprite extends SpriteBasedEntity {
     if (this.defaultState.image === null) {
       this.graphics = new PIXI.Sprite(PIXI.Texture.EMPTY)
     } else {
-      this.graphics = PIXI.Sprite.fromFrame(this.defaultState.image)
+      this.graphics = PIXI.Sprite.from(this.defaultState.image)
     }
   }
 }

engine/modules/entities/src/main/resources/view/entity-module/SpriteAnimation.js

@@ -46,7 +46,7 @@ export class SpriteAnimation extends TextureBasedEntity {
         const image = state.loop ? images[animationIndex % images.length] : (images[animationIndex] || images[images.length - 1])
 
         try {
-          this.graphics.texture = PIXI.Texture.fromFrame(image)
+          this.graphics.texture = PIXI.Texture.from(image)
         } catch (error) {
           ErrorLog.push(new MissingImageError(image, error))
         }

engine/modules/entities/src/main/resources/view/entity-module/SpriteBasedEntity.js

@@ -21,7 +21,7 @@ export class SpriteBasedEntity extends TextureBasedEntity {
     if (changed.image) {
       try {
         if (state.image !== null) {
-          this.graphics.texture = PIXI.Texture.fromFrame(state.image)
+          this.graphics.texture = PIXI.Texture.from(state.image)
         } else {
           this.graphics.texture = PIXI.Texture.EMPTY
         }