upgrade pixi.js to v8

package.json

@@ -20,11 +20,11 @@
   "dependencies": {
     "@capacitor/android": "^4.7.0",
     "@capacitor/core": "^4.7.0",
-    "@pixi/gif": "^2.0.1",
-    "@pixi/sound": "^5.0.0",
+    "@pixi/gif": "^3.0.0",
+    "@pixi/sound": "^6.0.0",
     "@tweenjs/tween.js": "^18.6.4",
     "dat.gui": "^0.7.9",
     "matter-js": "^0.18.0",
-    "pixi.js": "^7.0.4"
+    "pixi.js": "^8.0.1"
   }
 }

src/GameLauncher.ts

@@ -5,6 +5,9 @@ import { getStageSize } from "./main";
 import { MonsterRaidersGame } from "./monster-raiders/MonsterRaidersGame";
 import { SpaceInvadersGame } from "./space-invaders/SpaceInvadersGame";
 import { TreeGenerator } from "./tree-generator/TreeGenerator";
+import { monsterRaiderPreload } from "./monster-raiders/monsterRaiderPreload";
+import { spaceInvadersPreload } from "./space-invaders/spaceInvadersPreload";
+import { castleFallsPreload } from "./castle-falls/castleFallsPreload";
 
 export class GameLauncher extends Container {
 
@@ -16,13 +19,16 @@ export class GameLauncher extends Container {
         this.createButton('小樹枝上開朵花', 80, () => {
             new TreeGenerator(app);
         });
-        this.createButton('經典小蜜蜂', 160, () => {
+        this.createButton('經典小蜜蜂', 160, async () => {
+            await spaceInvadersPreload();
             new SpaceInvadersGame(app);
         });
-        this.createButton('怪獸掃蕩隊', 240, () => {
+        this.createButton('怪獸掃蕩隊', 240, async () => {
+            await monsterRaiderPreload();
             new MonsterRaidersGame(app);
         });
-        this.createButton('魔王城的隕落', 320, () => {
+        this.createButton('魔王城的隕落', 320, async () => {
+            await castleFallsPreload();
             new CastleFalls(app);
         });
     }

src/castle-falls/CastleFallsGame.ts

@@ -1,7 +1,6 @@
 import { Engine, Events, IEventCollision, Runner } from "matter-js";
 import { Container, Sprite, Text } from "pixi.js";
 import { CastleFalls } from "./CastleFalls";
-import bgImg from "../images/castle-gamebg.png";
 import { ICastleFallsLevelData, ICFObject } from "./CastleFallsLevelData";
 import { Slingshot } from "./Slingshot";
 import { MatterRender } from "../lib/matter/MatterRender";
@@ -46,7 +45,7 @@ export class CastleFallsGame extends Container {
         return this.gameApp.app;
     }
     addBackground() {
-        var bg = Sprite.from(bgImg);
+        var bg = Sprite.from('gameBgImg');
         bg.zIndex = 0;
         this.addChild(bg);
     }
@@ -124,11 +123,16 @@ export class CastleFallsGame extends Container {
         // 取得遊戲舞台尺寸
         const stageSize = getStageSize();
         // 建立過關文字
-        let text = new Text("The Castle has Fallen", {
-            fontSize: 32,
-            fill: 0xFFFFFF,
-            stroke: 0x000000,
-            strokeThickness: 5,
+        let text = new Text({
+            text: "The Castle has Fallen",
+            style: {
+                fontSize: 32,
+                fill: 0xFFFFFF,
+                stroke: {
+                    color: 0x000000,
+                    width: 5,
+                },
+            }
         });
         // 調整軸心至文字中央的底部
         text.pivot.set(text.width / 2, text.height / 2);

src/castle-falls/LevelsUI.ts

@@ -1,14 +1,13 @@
 import { CastleFalls } from "./CastleFalls";
 import { Container, Sprite } from "pixi.js";
-import castleBgImg from "../images/castle-bg.jpg";
 import { PixiButton } from "../lib/PixiButton";
 
 export class LevelsUI extends Container {
 
     constructor(public gameApp: CastleFalls) {
         super();
         // 加入介面背景圖
-        let bg = Sprite.from(castleBgImg);
+        let bg = Sprite.from('castleBgImg');
         bg.scale.set(0.5);
         this.addChild(bg);
         // 建構選關按鈕

src/castle-falls/MatterObject.ts

@@ -1,12 +1,7 @@
 import { Bodies, Body, Composite, Events, Pair, Vector } from "matter-js";
-import { Container, Sprite, TilingSprite } from "pixi.js";
+import { Assets, Container, Sprite, TilingSprite } from "pixi.js";
 import { CastleFallsGame } from "./CastleFallsGame";
 import { BodyOptionsMap, ICFObject } from "./CastleFallsLevelData";
-import groundImg from "../images/castle-ground.png";
-import brickImg from "../images/castle-brick.png";
-import woodImg from "../images/castle-wood.png";
-import bossImg from "../images/castle-boss.png";
-import rockImg from "../images/castle-rock.png";
 import poofGif from "../images/poof.gif";
 import { gifFrom } from "../lib/PixiGifUtils";
 
@@ -16,7 +11,7 @@ export class MatterObject extends Container {
 
     body: Body;     // Matter.js剛體
 
-    sprite: Sprite; // PIXI精靈圖
+    sprite: Container; // PIXI精靈圖
 
     constructor(public game: CastleFallsGame, public data: ICFObject) {
         super();
@@ -76,11 +71,11 @@ export class MatterObject extends Container {
             throw new Error('Unknown body shape.');
         }
     }
-    private createSprite(data: ICFObject): Sprite {
+    private createSprite(data: ICFObject): Container {
         if (data.type == 'ground') {
             const rect = data.rect!;
             let sprite = TilingSprite.from(
-                groundImg,
+                Assets.get('groundImg'),
                 { width: rect.width, height: rect.height }
             );
             sprite.pivot.set(sprite.width / 2, sprite.height / 2);
@@ -91,7 +86,7 @@ export class MatterObject extends Container {
         }
         if (data.type == 'brick') {
             const rect = data.rect!;
-            let sprite = Sprite.from(brickImg);
+            let sprite = Sprite.from('brickImg');
             sprite.pivot.set(42, 21);
             sprite.width = rect.width;
             sprite.height = rect.height;
@@ -100,7 +95,7 @@ export class MatterObject extends Container {
         }
         if (data.type == 'wood') {
             const rect = data.rect!;
-            let sprite = Sprite.from(woodImg);
+            let sprite = Sprite.from('woodImg');
             sprite.pivot.set(42, 21);
             sprite.width = rect.width;
             sprite.height = rect.height;
@@ -109,15 +104,15 @@ export class MatterObject extends Container {
         }
         if (data.type == 'boss') {
             const circle = data.circle!;
-            let sprite = Sprite.from(bossImg);
+            let sprite = Sprite.from('bossImg');
             sprite.pivot.set(36, 48);
             sprite.scale.set(circle.radius / 32);
             this.zIndex = 3;
             return sprite;
         }
         if (data.type == 'rock') {
             const circle = data.circle!;
-            let sprite = Sprite.from(rockImg);
+            let sprite = Sprite.from('rockImg');
             sprite.pivot.set(38, 36);
             sprite.scale.set(circle.radius / 36);
             this.zIndex = 6;

src/castle-falls/Slingshot.ts

@@ -3,8 +3,6 @@ import { ICFSlingshot } from "./CastleFallsLevelData";
 import { Sprite } from "pixi.js";
 import { wait } from "../main";
 import { CastleFallsGame } from "./CastleFallsGame";
-import slingshotImg from "../images/slingshot.png";
-import slingshotFrontImg from "../images/slingshot_front.png";
 import shootSnd from "../sounds/missile-launch.mp3";
 import { playSound } from "../lib/SoundUtils";
 
@@ -88,12 +86,12 @@ export class Slingshot {
     }
     private createSprites(data: ICFSlingshot): void {
         // 彈弓主體
-        let backSprite = Sprite.from(slingshotImg);
+        let backSprite = Sprite.from('slingshotImg');
         backSprite.zIndex = 0;
         backSprite.position.set(data.x - 35, data.y - 15);
         this.game.addChild(backSprite);
         // 能遮住石塊的木段
-        let frontSprite = Sprite.from(slingshotFrontImg);
+        let frontSprite = Sprite.from('slingshotFrontImg');
         frontSprite.zIndex = 10;
         frontSprite.position.copyFrom(backSprite.position);
         this.game.addChild(frontSprite);
@@ -118,7 +116,7 @@ export class Slingshot {
         });
     }
     private createMouseConstraint(): MouseConstraint {
-        let canvas = this.game.app.view as HTMLCanvasElement;
+        let canvas = this.game.app.canvas as HTMLCanvasElement;
         // 建立Matter滑鼠，使用Pixi畫板接收滑鼠事件
         let mouse = Mouse.create(canvas);
         // 調整Matter滑鼠的位置 

src/castle-falls/castleFallsPreload.ts

@@ -0,0 +1,27 @@
+import gameBgImg from "../images/castle-gamebg.png";
+import castleBgImg from "../images/castle-bg.jpg";
+import groundImg from "../images/castle-ground.png";
+import brickImg from "../images/castle-brick.png";
+import woodImg from "../images/castle-wood.png";
+import bossImg from "../images/castle-boss.png";
+import rockImg from "../images/castle-rock.png";
+import slingshotImg from "../images/slingshot.png";
+import slingshotFrontImg from "../images/slingshot_front.png";
+import { Assets } from "pixi.js";
+
+export async function castleFallsPreload() {
+
+	let assets = [
+        { alias: 'gameBgImg', src: gameBgImg },
+        { alias: 'castleBgImg', src: castleBgImg },
+        { alias: 'groundImg', src: groundImg },
+        { alias: 'brickImg', src: brickImg },
+        { alias: 'woodImg', src: woodImg },
+        { alias: 'bossImg', src: bossImg },
+        { alias: 'rockImg', src: rockImg },
+        { alias: 'slingshotImg', src: slingshotImg },
+        { alias: 'slingshotFrontImg', src: slingshotFrontImg },
+    ];
+    Assets.add(assets);
+    await Assets.load(assets.map(asset => asset.alias));
+}

src/lib/PixiButton.ts

@@ -38,20 +38,22 @@ export class PixiButton extends Container {
         const labelColor = options.labelColor;
         // 幫按鈕加上圓角方形的背景
         let bg = new Graphics();
-        bg.beginFill(0xFFFFFF);
-        bg.drawRoundedRect(
+        bg.roundRect(
             0, 0,
             options.width, options.height, 
             options.cornerRadius
         );
-        bg.endFill();
+        bg.fill(0xFFFFFF);
         // 預設的按鈕背景底色
         bg.tint = backgroundColor.default;
         this.addChild(bg);
         // 加再上遊戲名字作為按鈕標籤
-        let label = new Text(options.label, {
-            fontSize: options.labelSize,
-            fill: labelColor.default,
+        let label = new Text({
+            text: options.label,
+            style: {
+                fontSize: options.labelSize,
+                fill: labelColor.default,
+            }
         });
         label.resolution = 2;
         // 置中按鈕標籤

src/lib/PixiGifUtils.ts

@@ -8,7 +8,7 @@ export async function gifFrom(
     // 如果source是ArrayBuffer
     if (source instanceof ArrayBuffer) {
         // 直接產生AnimatedGIF
-        let gif = AnimatedGIF.fromBuffer(source);
+        let gif = AnimatedGIF.fromBuffer(source, options);
         return Promise.resolve(gif);
     } else {
         // 使用Pixi的Assets資源管理系統載入GIF