upgrade pixi.js to v6

RobotlegsJS · May 13, 2022 · 03a38ab · 03a38ab
1 parent adb5c11
commit 03a38ab
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 24 deletions.
diff --git a/games/scratchcard/package.json b/games/scratchcard/package.json
@@ -21,7 +21,7 @@
     "@robotlegsjs/pixi": "^3.0.0",
     "@robotlegsjs/pixi-palidor": "^3.0.0",
     "@robotlegsjs/signals": "^2.0.0",
-    "pixi.js": "^5.2.1",
+    "pixi.js": "^6.3.2",
     "reflect-metadata": "^0.1.13",
     "tslib": "^2.3.0"
   },

diff --git a/games/scratchcard/src/Game.ts b/games/scratchcard/src/Game.ts
@@ -1,39 +1,36 @@
-/// <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 { ScratchConfig } from "./configs/ScratchConfig";
 import { AssetKeys } from "./utils/AssetKeys";
 import { MagicValues } from "./utils/MagicValues";
 
-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({
+        this._renderer = autoDetectRenderer({
             width: MagicValues.MAX_WIDTH,
             height: MagicValues.MAX_HEIGHT
         });
-        this._stage = new PIXI.Container();
+        this._stage = new Container();
         this._context = new Context();
         this._context
             .install(PalidorBundle)
             .configure(new ContextView(this._stage))
             .configure(ScratchConfig)
             .initialize();
 
-        PIXI.Loader.shared.add(AssetKeys.ATLAS_PNG).add(AssetKeys.ATLAS_XML).load(this.onLoad);
+        Loader.shared.add(AssetKeys.ATLAS_PNG).add(AssetKeys.ATLAS_XML).load(this.onLoad);
 
         document.body.appendChild(this._renderer.view);
     }
 
     public onLoad(): void {
-        AssetKeys.update(PIXI.utils.TextureCache);
+        AssetKeys.update(utils.TextureCache);
     }
 
     public render = (): void => {

diff --git a/games/scratchcard/src/mediators/FeedbackPopupMediator.ts b/games/scratchcard/src/mediators/FeedbackPopupMediator.ts
@@ -13,7 +13,7 @@ export class FeedbackPopupMediator extends Mediator<FeedbackPopup> {
         this.view.interactive = true;
         this.view.buttonMode = true;
         this.view.createMSG(this._model.feedback);
-        this.eventMap.mapListener(this.view, "click", this._onClick, this);
+        this.eventMap.on(this.view, "click", this._onClick, this);
     }
 
     public destroy(): void {

diff --git a/games/scratchcard/src/mediators/HUDViewMediator.ts b/games/scratchcard/src/mediators/HUDViewMediator.ts
@@ -21,8 +21,8 @@ export class HUDViewMediator extends Mediator<HUDView> {
         this.view.updateRemaining(this._model.attempts);
         this.eventMap.mapListener(this.eventDispatcher, GameEvent.START, this._onStart, this);
         this.eventMap.mapListener(this.eventDispatcher, GameEvent.END, this._onEnd, this);
-        this.eventMap.mapListener(this.view.playButton, "click", this._onPlayButton, this);
-        this.eventMap.mapListener(this.view.endButton, "click", this._onEndButton, this);
+        this.eventMap.on(this.view.playButton, "click", this._onPlayButton, this);
+        this.eventMap.on(this.view.endButton, "click", this._onEndButton, this);
     }
 
     public destroy(): void {
@@ -33,9 +33,9 @@ export class HUDViewMediator extends Mediator<HUDView> {
         this.view.updateRemaining(this._model.attempts);
         this.view.scratchArea.buttonMode = true;
         this.view.scratchArea.interactive = true;
-        this.eventMap.mapListener(this.view.scratchArea, "mousedown", this._onMouseDown, this);
-        this.eventMap.mapListener(this.view.scratchArea, "mouseup", this._onMouseUp, this);
-        this.eventMap.mapListener(this.view.scratchArea, "mousemove", this._onMouseMove, this);
+        this.eventMap.on(this.view.scratchArea, "mousedown", this._onMouseDown, this);
+        this.eventMap.on(this.view.scratchArea, "mouseup", this._onMouseUp, this);
+        this.eventMap.on(this.view.scratchArea, "mousemove", this._onMouseMove, this);
     }
 
     private _onEnd(e: any): void {
@@ -44,9 +44,9 @@ export class HUDViewMediator extends Mediator<HUDView> {
         this.view.scratchArea.interactive = false;
         this.view.playButton.visible = true;
         this.view.endButton.visible = false;
-        this.eventMap.unmapListener(this.view.scratchArea, "mousedown", this._onMouseDown, this);
-        this.eventMap.unmapListener(this.view.scratchArea, "mouseup", this._onMouseUp, this);
-        this.eventMap.unmapListener(this.view.scratchArea, "mousemove", this._onMouseMove, this);
+        this.eventMap.off(this.view.scratchArea, "mousedown", this._onMouseDown, this);
+        this.eventMap.off(this.view.scratchArea, "mouseup", this._onMouseUp, this);
+        this.eventMap.off(this.view.scratchArea, "mousemove", this._onMouseMove, this);
         this._tickManager.stop();
     }
 

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

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