upgrade pixi.js to v6

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

Hide file tree

Showing 11 changed files with 45 additions and 41 deletions.
diff --git a/games/battleship/package.json b/games/battleship/package.json
@@ -34,7 +34,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/battleship/src/Game.ts b/games/battleship/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 "./battleship/configs/GameConfig";
 import { PalidorConfig } from "./battleship/configs/PalidorConfig";
 import { ViewsConfig } from "./battleship/configs/ViewsConfig";
 import { AtlasKeys } from "./battleship/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: 400, height: 600 });
-        this._stage = new PIXI.Container();
+        this._renderer = autoDetectRenderer({ width: 400, height: 600 });
+        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)
@@ -35,7 +32,7 @@ export class Game {
     }
 
     public onLoad(): void {
-        AtlasKeys.update(PIXI.utils.TextureCache);
+        AtlasKeys.update(utils.TextureCache);
     }
 
     public render = (): void => {

diff --git a/games/battleship/src/battleship/mediators/EnemyTileDisplayMediator.ts b/games/battleship/src/battleship/mediators/EnemyTileDisplayMediator.ts
@@ -13,7 +13,7 @@ export class EnemyTileDisplayMediator extends Mediator<EnemyTileDisplay> {
     public gameService: GameService;
 
     public initialize(): void {
-        this.eventMap.mapListener(this.view, "pointerup", this.onButtonUp, this);
+        this.eventMap.on(this.view, "pointerup", this.onButtonUp, this);
     }
 
     public onButtonUp(e: any): void {

diff --git a/games/battleship/src/battleship/mediators/GameOverPopupMediator.ts b/games/battleship/src/battleship/mediators/GameOverPopupMediator.ts
@@ -14,8 +14,8 @@ export class GameOverPopupMediator extends Mediator<GameOverPopup> {
 
     public initialize(): void {
         this.view.animationIn();
-        this.eventMap.mapListener(this.view.homeButton, "click", this.homeButton_onClick, this);
-        this.eventMap.mapListener(this.view.retryButton, "click", this.retryButton_onClick, this);
+        this.eventMap.on(this.view.homeButton, "click", this.homeButton_onClick, this);
+        this.eventMap.on(this.view.retryButton, "click", this.retryButton_onClick, this);
     }
 
     public destroy(): void {

diff --git a/games/battleship/src/battleship/mediators/GameViewMediator.ts b/games/battleship/src/battleship/mediators/GameViewMediator.ts
@@ -11,12 +11,7 @@ export class GameViewMediator extends Mediator<GameView> {
     public initialize(): void {
         this.view.createComponents();
         this.view.animationIn();
-        this.eventMap.mapListener(
-            this.view.pauseButton,
-            "click",
-            this.pauseButton_onTriggeredHandler,
-            this
-        );
+        this.eventMap.on(this.view.pauseButton, "click", this.pauseButton_onTriggeredHandler, this);
     }
 
     public destroy(): void {

diff --git a/games/battleship/src/battleship/mediators/HomeViewMediator.ts b/games/battleship/src/battleship/mediators/HomeViewMediator.ts
@@ -12,7 +12,7 @@ export class HomeViewMediator extends Mediator<HomeView> {
         this.view.interactive = true;
         this.view.buttonMode = true;
         this.view.animationIn();
-        this.eventMap.mapListener(this.view, "click", this.playButton_onClick, this);
+        this.eventMap.on(this.view, "click", this.playButton_onClick, this);
     }
 
     public destroy(): void {

diff --git a/games/battleship/src/battleship/mediators/PausePopupMediator.ts b/games/battleship/src/battleship/mediators/PausePopupMediator.ts
@@ -14,9 +14,9 @@ export class PausePopupMediator extends Mediator<PausePopup> {
 
     public initialize(): void {
         this.view.animationIn();
-        this.eventMap.mapListener(this.view.homeButton, "click", this._onClickHomeButton, 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.homeButton, "click", this._onClickHomeButton, 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/battleship/src/battleship/mediators/YouWinPopupMediator.ts b/games/battleship/src/battleship/mediators/YouWinPopupMediator.ts
@@ -18,8 +18,8 @@ export class YouWinPopupMediator extends Mediator<YouWinPopup> {
 
     public initialize(): void {
         this.view.animationIn();
-        this.eventMap.mapListener(this.view.homeButton, "click", this._onClickHomeButton, this);
-        this.eventMap.mapListener(this.view.retryButton, "click", this._onClickRetryButton, this);
+        this.eventMap.on(this.view.homeButton, "click", this._onClickHomeButton, this);
+        this.eventMap.on(this.view.retryButton, "click", this._onClickRetryButton, this);
     }
 
     public destroy(): void {

diff --git a/games/battleship/src/battleship/utils/PixiFactory.ts b/games/battleship/src/battleship/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 { CustomButton } from "../views/components/CustomButton";
 import { AtlasKeys } from "./AtlasKeys";
 import { Colors } from "./Colors";
@@ -8,8 +8,9 @@ export class PixiFactory {
     /* TEXTFIELDS */
     public static getText(text: string, color: number = Colors.TEXT): Container {
         let style = {
-            align: "center",
-            font: { name: MagicValues.FONT_FAMILY, size: MagicValues.FONT_SIZE_DEFAULT }
+            align: "center" as TextStyleAlign,
+            fontName: MagicValues.FONT_FAMILY,
+            fontSize: MagicValues.FONT_SIZE_DEFAULT
         };
         let label = new BitmapText(text, style);
         label.tint = color;
@@ -18,8 +19,9 @@ export class PixiFactory {
 
     public static getTextHUDSmall(text: string): Container {
         let style = {
-            align: "center",
-            font: { name: MagicValues.FONT_FAMILY, size: MagicValues.FONT_SIZE_HUD_SMALL }
+            align: "center" as TextStyleAlign,
+            fontName: MagicValues.FONT_FAMILY,
+            fontSize: MagicValues.FONT_SIZE_HUD_SMALL
         };
         let label = new BitmapText(text, style);
         label.tint = Colors.TEXT;
@@ -28,8 +30,9 @@ export class PixiFactory {
 
     public static getTitle(label: string): Container {
         let style = {
-            align: "center",
-            font: { name: MagicValues.FONT_FAMILY, size: MagicValues.FONT_SIZE_TITLE }
+            align: "center" as TextStyleAlign,
+            fontName: MagicValues.FONT_FAMILY,
+            fontSize: MagicValues.FONT_SIZE_TITLE
         };
 
         let title = new BitmapText(label, style);
@@ -43,8 +46,9 @@ export class PixiFactory {
 
     public static getButtonLabel(label: string): Container {
         let style = {
-            align: "center",
-            font: { name: MagicValues.FONT_FAMILY, size: MagicValues.FONT_SIZE_BUTTON }
+            align: "center" as TextStyleAlign,
+            fontName: MagicValues.FONT_FAMILY,
+            fontSize: MagicValues.FONT_SIZE_BUTTON
         };
 
         let title = new BitmapText(label, style);
@@ -120,8 +124,9 @@ export class PixiFactory {
     /* GAME */
     public static getTileLabel(text: string, color: number): Container {
         let style = {
-            align: "center",
-            font: { name: MagicValues.FONT_FAMILY, size: MagicValues.FONT_SIZE_BUTTON }
+            align: "center" as TextStyleAlign,
+            fontName: MagicValues.FONT_FAMILY,
+            fontSize: MagicValues.FONT_SIZE_BUTTON
         };
         let bmpText = new BitmapText(text, style);
         bmpText.tint = color;

diff --git a/games/battleship/src/battleship/views/IntroView.ts b/games/battleship/src/battleship/views/IntroView.ts
@@ -18,7 +18,10 @@ export class IntroView extends Container {
     }
 
     private _createImages(): void {
-        let logoImg: Sprite = TilingSprite.from(AtlasKeys.LOGO_TYPESCRIPT);
+        let logoImg: Sprite = TilingSprite.from(AtlasKeys.LOGO_TYPESCRIPT, {
+            width: 340,
+            height: 64
+        });
 
         logoImg.anchor.x = 0.5;
         logoImg.x = MagicValues.HALF_WIDTH;

diff --git a/games/battleship/tsconfig.json b/games/battleship/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 */
+    ]
+  }
 }