From b90401b44e6951539da29ea26e66f38acfa78d9f Mon Sep 17 00:00:00 2001 From: Tiago Schenkel Date: Fri, 13 May 2022 20:13:06 +0100 Subject: [PATCH] upgrade pixi.js to v6 --- games/battleship/package.json | 2 +- games/battleship/src/Game.ts | 17 +++++------- .../mediators/EnemyTileDisplayMediator.ts | 2 +- .../mediators/GameOverPopupMediator.ts | 4 +-- .../battleship/mediators/GameViewMediator.ts | 7 +---- .../battleship/mediators/HomeViewMediator.ts | 2 +- .../mediators/PausePopupMediator.ts | 6 ++--- .../mediators/YouWinPopupMediator.ts | 4 +-- .../src/battleship/utils/PixiFactory.ts | 27 +++++++++++-------- .../src/battleship/views/IntroView.ts | 5 +++- games/battleship/tsconfig.json | 10 ++++--- 11 files changed, 45 insertions(+), 41 deletions(-) diff --git a/games/battleship/package.json b/games/battleship/package.json index ad87efed2..9a7f791ee 100644 --- 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 index 858e0baf0..ab8a15cb9 100644 --- a/games/battleship/src/Game.ts +++ b/games/battleship/src/Game.ts @@ -1,23 +1,20 @@ -/// - 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) @@ -25,7 +22,7 @@ export class Game { .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 index 047f92245..de04722a7 100644 --- 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 { 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 index 7ec6798a3..2257cff8c 100644 --- 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 { 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 index 1e21dd610..a857c0f1f 100644 --- 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 { 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 index b02a2a76c..a2c15f71e 100644 --- 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 { 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 index 41c1f156e..036237504 100644 --- 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 { 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 index 39d7e8d83..8c4f7aa7d 100644 --- 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 { 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 index fd749ee60..50411dcba 100644 --- 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 index 2a63bd10e..eab4cfd82 100644 --- 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 index 50dbc28f5..97cd7e708 100644 --- 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 */ + ] + } }