upgrade pixi.js to v6

RobotlegsJS · May 13, 2022 · b07c753 · b07c753
1 parent c11838c
commit b07c753
Show file tree

Hide file tree

Showing 17 changed files with 54 additions and 72 deletions.
diff --git a/games/match3/package.json b/games/match3/package.json
@@ -29,7 +29,7 @@
     "@robotlegsjs/pixi": "^3.0.0",
     "@robotlegsjs/pixi-palidor": "^3.0.0",
     "gsap": "^1.20.6",
-    "pixi.js": "^5.2.1",
+    "pixi.js": "^6.3.2",
     "reflect-metadata": "^0.1.13",
     "tslib": "^2.3.0"
   },

diff --git a/games/match3/src/Game.ts b/games/match3/src/Game.ts
@@ -1,31 +1,28 @@
-/// <reference path="../node_modules/@robotlegsjs/pixi/definitions/pixi.d.ts" />
-
 import { Context } from "@robotlegsjs/core";
 import { ContextView } from "@robotlegsjs/pixi";
 import { PalidorBundle } from "@robotlegsjs/pixi-palidor";
+import { AbstractRenderer, autoDetectRenderer, Container, Loader, utils } from "pixi.js";
 import { GameConfig } from "./matchthree/configs/GameConfig";
 import { PalidorConfig } from "./matchthree/configs/PalidorConfig";
 import { ViewsConfig } from "./matchthree/configs/ViewsConfig";
 import { AtlasKeys } from "./matchthree/utils/AtlasKeys";
 
-import PIXI = require("pixi.js");
-
 export class Game {
-    private _stage: PIXI.Container;
-    private _renderer: PIXI.Renderer;
+    private _stage: Container;
+    private _renderer: AbstractRenderer;
     private _context: Context;
 
     public constructor() {
-        this._renderer = PIXI.autoDetectRenderer({ width: 340, height: 480 });
-        this._stage = new PIXI.Container();
+        this._renderer = autoDetectRenderer({ width: 340, height: 480 });
+        this._stage = new Container();
         this._context = new Context();
         this._context
             .install(PalidorBundle)
             .configure(new ContextView(this._stage))
             .configure(GameConfig, ViewsConfig, PalidorConfig)
             .initialize();
 
-        PIXI.Loader.shared
+        Loader.shared
             .add(AtlasKeys.ATLAS_PNG)
             .add(AtlasKeys.ATLAS_XML)
             .add(AtlasKeys.FONT_FNT)
@@ -38,7 +35,7 @@ export class Game {
     }
 
     public onLoad(): void {
-        AtlasKeys.update(PIXI.utils.TextureCache);
+        AtlasKeys.update(utils.TextureCache);
     }
 
     public render = (): void => {

diff --git a/games/match3/src/matchthree/mediators/AlertPopupMediator.ts b/games/match3/src/matchthree/mediators/AlertPopupMediator.ts
@@ -5,13 +5,13 @@ import { AlertPopup } from "../views/AlertPopup";
 @injectable()
 export class AlertPopupMediator extends Mediator<AlertPopup> {
     public initialize(): void {
-        this.eventMap.mapListener(
+        this.eventMap.on(
             this.view.confirmButton,
             "click",
             this._onTriggeredHandlerConfirmButton,
             this
         );
-        this.eventMap.mapListener(
+        this.eventMap.on(
             this.view.cancelButton,
             "click",
             this._onTriggeredHandlerCancelButton,

diff --git a/games/match3/src/matchthree/mediators/GameOverPopupMediator.ts b/games/match3/src/matchthree/mediators/GameOverPopupMediator.ts
@@ -13,13 +13,8 @@ export class GameOverPopupMediator extends Mediator<GameOverPopup> {
     private _gameService: GameService;
 
     public initialize(): void {
-        this.eventMap.mapListener(
-            this.view.retryButton,
-            "click",
-            this._onTriggeredHandlerRetryButton,
-            this
-        );
-        this.eventMap.mapListener(
+        this.eventMap.on(this.view.retryButton, "click", this._onTriggeredHandlerRetryButton, this);
+        this.eventMap.on(
             this.view.levelSelectButton,
             "click",
             this._onTriggeredHandlerLevelSelectButton,

diff --git a/games/match3/src/matchthree/mediators/GridFieldComponentMediator.ts b/games/match3/src/matchthree/mediators/GridFieldComponentMediator.ts
@@ -46,8 +46,8 @@ export class GridFieldComponentMediator extends Mediator<GridFieldComponent> {
             this
         );
 
-        this.eventMap.mapListener(this.view, "mousedown", this._onSelectPiecesHandlerView, this);
-        this.eventMap.mapListener(this.view, "mouseup", this._onSelectPiecesHandlerView, this);
+        this.eventMap.on(this.view, "mousedown", this._onSelectPiecesHandlerView, this);
+        this.eventMap.on(this.view, "mouseup", this._onSelectPiecesHandlerView, this);
 
         this._gameManager.nextStep();
     }

diff --git a/games/match3/src/matchthree/mediators/HUDGameComponentMediator.ts b/games/match3/src/matchthree/mediators/HUDGameComponentMediator.ts
@@ -25,12 +25,7 @@ export class HUDGameComponentMediator extends Mediator<HUDGameComponent> {
     private _paused: boolean;
 
     public initialize(): void {
-        this.eventMap.mapListener(
-            this.view.pauseButton,
-            "click",
-            this._onTriggeredHandlerPauseButton,
-            this
-        );
+        this.eventMap.on(this.view.pauseButton, "click", this._onTriggeredHandlerPauseButton, this);
         this.eventMap.mapListener(
             this.eventDispatcher,
             GameEvent.UPDATE_HUD_DATA,

diff --git a/games/match3/src/matchthree/mediators/HomeViewMediator.ts b/games/match3/src/matchthree/mediators/HomeViewMediator.ts
@@ -9,13 +9,8 @@ export class HomeViewMediator extends Mediator<HomeView> {
     private _flowService: FlowService;
 
     public initialize(): void {
-        this.eventMap.mapListener(this.view.playButton, "click", this._onClickPlayButton, this);
-        this.eventMap.mapListener(
-            this.view.optionsButton,
-            "click",
-            this._onClickOptionsButton,
-            this
-        );
+        this.eventMap.on(this.view.playButton, "click", this._onClickPlayButton, this);
+        this.eventMap.on(this.view.optionsButton, "click", this._onClickOptionsButton, this);
     }
 
     public destroy(): void {

diff --git a/games/match3/src/matchthree/mediators/LevelSelectViewMediator.ts b/games/match3/src/matchthree/mediators/LevelSelectViewMediator.ts
@@ -24,12 +24,7 @@ export class LevelSelectViewMediator extends Mediator<LevelSelectView> {
 
     public initialize(): void {
         this._createMapButtons();
-        this.eventMap.mapListener(
-            this.view.backButton,
-            "click",
-            this._onTriggeredHandlerBackButton,
-            this
-        );
+        this.eventMap.on(this.view.backButton, "click", this._onTriggeredHandlerBackButton, this);
     }
 
     public destroy(): void {
@@ -53,12 +48,7 @@ export class LevelSelectViewMediator extends Mediator<LevelSelectView> {
             levelButton.setStars(ScoreUtils.getNumStars(levelInfo.hiScore, levelInfo.scoreStarts));
             levelButton.anchor.set(0.5);
             this._levelsIds.set(levelButton, levels[i].levelId);
-            this.eventMap.mapListener(
-                levelButton,
-                "click",
-                this._onTriggeredHandlerLevelButton,
-                this
-            );
+            this.eventMap.on(levelButton, "click", this._onTriggeredHandlerLevelButton, this);
         }
     }
 

diff --git a/games/match3/src/matchthree/mediators/OptionsViewMediator.ts b/games/match3/src/matchthree/mediators/OptionsViewMediator.ts
@@ -9,8 +9,8 @@ export class OptionsViewMediator extends Mediator<OptionsView> {
     private _flowService: FlowService;
 
     public initialize(): void {
-        this.eventMap.mapListener(this.view.backButton, "click", this._onClickBackButton, this);
-        this.eventMap.mapListener(this.view.deleteButton, "click", this._onClickDeleteButton, this);
+        this.eventMap.on(this.view.backButton, "click", this._onClickBackButton, this);
+        this.eventMap.on(this.view.deleteButton, "click", this._onClickDeleteButton, this);
     }
 
     public destroy(): void {

diff --git a/games/match3/src/matchthree/mediators/PausePopupMediator.ts b/games/match3/src/matchthree/mediators/PausePopupMediator.ts
@@ -13,14 +13,14 @@ export class PausePopupMediator extends Mediator<PausePopup> {
     private _gameService: GameService;
 
     public initialize(): void {
-        this.eventMap.mapListener(
+        this.eventMap.on(
             this.view.levelSelectButton,
             "click",
             this._onClickLevelSelectButton,
             this
         );
-        this.eventMap.mapListener(this.view.resumeButton, "click", this._onClickResumeButton, this);
-        this.eventMap.mapListener(this.view.retryButton, "click", this._onClickRetryButton, this);
+        this.eventMap.on(this.view.resumeButton, "click", this._onClickResumeButton, this);
+        this.eventMap.on(this.view.retryButton, "click", this._onClickRetryButton, this);
     }
 
     public destroy(): void {

diff --git a/games/match3/src/matchthree/mediators/YouWinPopupMediator.ts b/games/match3/src/matchthree/mediators/YouWinPopupMediator.ts
@@ -23,13 +23,8 @@ export class YouWinPopupMediator extends Mediator<YouWinPopup> {
             String(this._levelModel.levelInfo.hiScore)
         );
 
-        this.eventMap.mapListener(
-            this.view.retryButton,
-            "click",
-            this._onTriggeredHandlerRetryButton,
-            this
-        );
-        this.eventMap.mapListener(
+        this.eventMap.on(this.view.retryButton, "click", this._onTriggeredHandlerRetryButton, this);
+        this.eventMap.on(
             this.view.levelSelectButton,
             "click",
             this._onTriggeredHandlerLevelSelectButton,

diff --git a/games/match3/src/matchthree/utils/PixiFactory.ts b/games/match3/src/matchthree/utils/PixiFactory.ts
@@ -1,4 +1,4 @@
-import { BitmapText, Container, Graphics, Sprite, Texture } from "pixi.js";
+import { BitmapText, Container, Graphics, Sprite, TextStyleAlign, Texture } from "pixi.js";
 import { IconButton } from "../views/components/IconButton";
 import { LevelSelectButton } from "../views/components/LevelSelectButton";
 import { AtlasKeys } from "./AtlasKeys";
@@ -8,17 +8,19 @@ import { ViewPortSize } from "./ViewPortSize";
 export class PixiFactory {
     public static getText(text: string, fontSize: number = MagicValues.SIZE_DEFAULT): BitmapText {
         const style = {
-            align: "center",
-            font: { name: MagicValues.FONT_FAMILY, size: fontSize }
+            align: "center" as TextStyleAlign,
+            fontName: MagicValues.FONT_FAMILY,
+            fontSize
         };
 
         return new BitmapText(text, style);
     }
 
     public static getTitle(label: string): Container {
         const style = {
-            align: "center",
-            font: { name: MagicValues.FONT_FAMILY, size: MagicValues.SIZE_TITLE }
+            align: "center" as TextStyleAlign,
+            fontName: MagicValues.FONT_FAMILY,
+            fontSize: MagicValues.SIZE_TITLE
         };
 
         const title = new BitmapText(label, style);

diff --git a/games/match3/src/matchthree/views/IntroView.ts b/games/match3/src/matchthree/views/IntroView.ts
@@ -18,7 +18,10 @@ export class IntroView extends Container {
     }
 
     private _setupImages(): void {
-        const logo: Sprite = TilingSprite.from(AtlasKeys.LOGO_TYPESCRIPT);
+        const logo: Sprite = TilingSprite.from(AtlasKeys.LOGO_TYPESCRIPT, {
+            width: 340,
+            height: 64
+        });
         logo.anchor.x = 0.5;
         logo.x = ViewPortSize.HALF_WIDTH;
         logo.y = ViewPortSize.MAX_HEIGHT - 64;

diff --git a/games/match3/src/matchthree/views/StartingPopup.ts b/games/match3/src/matchthree/views/StartingPopup.ts
@@ -28,7 +28,7 @@ export class StartingPopup extends Container {
 
     private _setupTexts(): void {
         this._decreasingNumber = PixiFactory.getText("3", MagicValues.SIZE_DEFAULT + 6);
-        this._decreasingNumber.anchor = 0.5;
+        this._decreasingNumber.anchor.set(0.5, 0.5);
         this._decreasingNumber.scale.set(1.2);
         this._decreasingNumber.x = ViewPortSize.HALF_WIDTH;
         this._decreasingNumber.y = ViewPortSize.HALF_HEIGHT;

diff --git a/games/match3/test/matchthree/game/models/PieceData.test.ts b/games/match3/test/matchthree/game/models/PieceData.test.ts
@@ -67,15 +67,21 @@ describe("PieceData", () => {
 
     it("UpdateDisplayPosition: Any", () => {
         piece = new PieceData(5, 6, PieceType.NORMAL, PieceIds.ORANGE);
-        piece.display = TilingSprite.from("./assets/atlas/game/piece_normal_3.png");
+        piece.display = TilingSprite.from("./assets/atlas/game/piece_normal_3.png", {
+            width: 36,
+            height: 36
+        });
         piece.updateDisplayPosition();
         assert.equal(piece.display.x, Tile.TILE_WIDTH * piece.col);
         assert.equal(piece.display.y, Tile.TILE_WIDTH * piece.row);
     });
 
     it("UpdateDisplayPosition: Any in the first row", () => {
         piece = new PieceData(5, 0, PieceType.NORMAL, PieceIds.ORANGE);
-        piece.display = TilingSprite.from("./assets/atlas/game/piece_normal_3.png");
+        piece.display = TilingSprite.from("./assets/atlas/game/piece_normal_3.png", {
+            width: 36,
+            height: 36
+        });
         piece.updateDisplayPosition();
         assert.equal(piece.display.x, Tile.TILE_WIDTH * piece.col);
         assert.equal(piece.display.y, -Tile.TILE_HEIGHT);

diff --git a/games/match3/test/matchthree/utils/AtlasKeys.test.ts b/games/match3/test/matchthree/utils/AtlasKeys.test.ts
@@ -6,7 +6,7 @@ import "../../entry";
 describe("AtlasKeys", () => {
     it("GetTexture", () => {
         const key = "./assets/atlas/game/piece_normal_3.png";
-        const sprite: Sprite = TilingSprite.from(key);
+        const sprite: Sprite = TilingSprite.from(key, { width: 36, height: 36 });
         const textureCache: any = { "./assets/atlas/game/piece_normal_3.png": sprite.texture };
         AtlasKeys.update(textureCache);
         assert.equal(sprite.texture, AtlasKeys.getTexture(key));

diff --git a/games/match3/tsconfig.json b/games/match3/tsconfig.json
@@ -8,8 +8,8 @@
     /* Module Resolution Options */
     "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
     "types": ["reflect-metadata"] /* Type declaration files to be included in compilation. */,
-    "allowSyntheticDefaultImports": false /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */,
-    "esModuleInterop": false /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
+    "allowSyntheticDefaultImports": true /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */,
+    "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
     /* Basic Config Options */
     "allowJs": false /* Allow javascript files to be compiled. */,
     "checkJs": false /* Report errors in .js files. */,
@@ -39,5 +39,9 @@
     "emitDecoratorMetadata": true /* Enables experimental support for emitting type metadata for decorators. */
   },
   "include": ["./src/**/*.ts"],
-  "files": ["./node_modules/@robotlegsjs/pixi/definitions/pixi.d.ts"]
+  "paths": {
+    "mini-signals": [
+      "node_modules/resource-loader/typings/mini-signals.d.ts" /* Loaders needs this to use the more strict mini-signal types */
+    ]
+  }
 }