Next v8: Puzzling Potion - Resolve Deprecates (#18)

* Next v8: Puzzling Potion - Resolve Deprecates * Spine Fix (WIP) * Pixi Spine Update * Upgrade to pixi spine 1.0.3 * Upgrade to spine-pixi v1.0.4 --------- Co-authored-by: Baz Utsahajit <[email protected]>
pixijs · Mar 12, 2024 · e9a5e4e · e9a5e4e
1 parent 9052260
commit e9a5e4e
Show file tree

Hide file tree

Showing 13 changed files with 188 additions and 219 deletions.
diff --git a/puzzling-potions/package-lock.json b/puzzling-potions/package-lock.json
diff --git a/puzzling-potions/package.json b/puzzling-potions/package.json
@@ -15,9 +15,9 @@
     },
     "dependencies": {
         "@pixi/sound": "^5.2.2",
+        "@pixi/spine-pixi": "^1.0.4",
         "@pixi/ui": "^0.10.2",
         "gsap": "^3.12.2",
-        "pixi-spine": "^4.0.4",
         "pixi.js": "^8.0.0-rc.2"
     },
     "devDependencies": {

diff --git a/puzzling-potions/src/match3/Match3Board.ts b/puzzling-potions/src/match3/Match3Board.ts
@@ -46,12 +46,11 @@ export class Match3Board {
         this.piecesContainer = new Container();
         this.match3.addChild(this.piecesContainer);
 
-        this.piecesMask = new Graphics();
-        this.piecesMask.beginFill(0xff0000, 0.5);
-        this.piecesMask.drawRect(-2, -2, 4, 4);
+        this.piecesMask = new Graphics()
+            .rect(-2, -2, 4, 4)
+            .fill({ color: 0xff0000, alpha: 0.5});
         this.match3.addChild(this.piecesMask);
-        // TODO: Deprecated Graphics mask isn't drawn correctly - leaving for the subsequent PR
-        // this.piecesContainer.mask = this.piecesMask;
+        this.piecesContainer.mask = this.piecesMask;
     }
 
     /**

diff --git a/puzzling-potions/src/screens/HomeScreen.ts b/puzzling-potions/src/screens/HomeScreen.ts
@@ -1,4 +1,4 @@
-import { Container, NineSlicePlane, Texture } from 'pixi.js';
+import { Container, NineSliceSprite, Texture } from 'pixi.js';
 import { navigation } from '../utils/navigation';
 import { GameScreen } from './GameScreen';
 import gsap from 'gsap';
@@ -39,7 +39,7 @@ export class HomeScreen extends Container {
     /** Button that opens the settings panel */
     private settingsButton: RippleButton;
     /** The footer base, also used for transition in */
-    private base: NineSlicePlane;
+    private base: NineSliceSprite;
 
     constructor() {
         super();
@@ -51,7 +51,13 @@ export class HomeScreen extends Container {
         this.dragon.playIdle();
         this.addChild(this.dragon);
 
-        this.base = new NineSlicePlane(Texture.from('rounded-rectangle'), 32, 32, 32, 32);
+        this.base = new NineSliceSprite({
+            texture: Texture.from('rounded-rectangle'),
+            leftWidth: 32,
+            topHeight: 32,
+            rightWidth: 32,
+            bottomHeight: 32
+        });
         this.base.tint = 0x2c136c;
         this.addChild(this.base);
 

diff --git a/puzzling-potions/src/screens/LoadScreen.ts b/puzzling-potions/src/screens/LoadScreen.ts
@@ -25,10 +25,13 @@ export class LoadScreen extends Container {
         this.cauldron = new Cauldron();
         this.addChild(this.cauldron);
 
-        this.message = new Text(i18n.loadingMessage, {
-            fill: 0x5c5c5c,
-            fontFamily: 'Verdana',
-            align: 'center',
+        this.message = new Text({
+            text: i18n.loadingMessage,
+            style: {
+                fill: 0x5c5c5c,
+                fontFamily: 'Verdana',
+                align: 'center',
+            },
         });
         this.message.anchor.set(0.5);
         this.addChild(this.message);

diff --git a/puzzling-potions/src/screens/ResultScreen.ts b/puzzling-potions/src/screens/ResultScreen.ts
@@ -1,4 +1,4 @@
-import { Container, NineSlicePlane, Sprite, Texture } from 'pixi.js';
+import { Container, NineSliceSprite, Sprite, Texture } from 'pixi.js';
 import gsap from 'gsap';
 import { Label } from '../ui/Label';
 import { i18n } from '../utils/i18n';
@@ -42,7 +42,7 @@ export class ResultScreen extends Container {
     /** The animated stars that represent the grade */
     private stars: ResultStars;
     /** The footer base */
-    private bottomBase: NineSlicePlane;
+    private bottomBase: NineSliceSprite;
     /** Button that goes back to the game to play again */
     private continueButton: LargeButton;
     /** Button that opens the settings panel */
@@ -102,7 +102,13 @@ export class ResultScreen extends Container {
         this.stars.y = -10;
         this.panel.addChild(this.stars);
 
-        this.bottomBase = new NineSlicePlane(Texture.from('rounded-rectangle'), 32, 32, 32, 32);
+        this.bottomBase = new NineSliceSprite({
+            texture: Texture.from('rounded-rectangle'),
+            leftWidth: 32,
+            topHeight: 32,
+            rightWidth: 32,
+            bottomHeight: 32,
+        });
         this.bottomBase.tint = 0x2c136c;
         this.bottomBase.height = 200;
         this.addChild(this.bottomBase);

diff --git a/puzzling-potions/src/ui/Cauldron.ts b/puzzling-potions/src/ui/Cauldron.ts
@@ -3,7 +3,7 @@ import gsap from 'gsap';
 import { randomRange } from '../utils/random';
 import { registerCustomEase } from '../utils/animation';
 import { pool } from '../utils/pool';
-// import { Spine } from '@pixi/spine-pixi';
+import { Spine } from '@pixi/spine-pixi';
 
 /** Custom ease curve for splash drops y animation */
 const easeDropJumpOut = registerCustomEase('M0,0,C0,0,0.07,-0.63,0.402,-0.422,0.83,-0.152,1,1,1,1');
@@ -18,7 +18,7 @@ export class Cauldron extends Container {
     /** The optional cauldron shadow, displayed in game screen */
     private shadow: Sprite;
     /** The cauldron spine animation */
-    // private spine: Spine;
+    private spine: Spine;
     /** Optional content attached to the cauldron, that will follow its animation */
     private content?: Container;
 
@@ -38,14 +38,15 @@ export class Cauldron extends Container {
         this.shadow.visible = shadow;
         this.container.addChild(this.shadow);
 
-        // const data = Assets.cache.get('preload/cauldron-skeleton.json');
-        // console.log(data);
-
-        // this.spine = new Spine({ skeletonData: data });
-        // this.spine.autoUpdate = true;
-        // this.spine.y = 50;
-        // this.spine.state.setAnimation(0, 'animation', true);
-        // this.container.addChild(this.spine);
+        this.spine = Spine.from({
+            skeleton: 'preload/cauldron-skeleton.json',
+            atlas: 'preload/cauldron-skeleton.atlas',
+        });
+
+        this.spine.autoUpdate = true;
+        this.spine.y = 50;
+        this.spine.state.setAnimation(0, 'animation', true);
+        this.container.addChild(this.spine);
 
         this.onRender = () => this.renderUpdate();
     }
@@ -104,27 +105,27 @@ export class Cauldron extends Container {
 
     /** Make cauldron do a quick impact wobble */
     public async playWobble() {
-        // gsap.killTweensOf(this.spine.scale);
-        // const scaleX = randomRange(1.1, 1.2);
-        // const scaley = randomRange(0.8, 0.9);
-        // await gsap.to(this.spine.scale, { x: scaleX, y: scaley, duration: 0.05, ease: 'linear' });
-        // await gsap.to(this.spine.scale, { x: 1, y: 1, duration: 0.8, ease: 'elastic.out' });
+        gsap.killTweensOf(this.spine.scale);
+        const scaleX = randomRange(1.1, 1.2);
+        const scaley = randomRange(0.8, 0.9);
+        await gsap.to(this.spine.scale, { x: scaleX, y: scaley, duration: 0.05, ease: 'linear' });
+        await gsap.to(this.spine.scale, { x: 1, y: 1, duration: 0.8, ease: 'elastic.out' });
     }
 
     /** Add a sprite to the front of the cauldron that will follow up the spine animation */
     public addContent(content: Container) {
         if (!this.content) this.content = new Container();
-        // this.spine.addChild(this.content);
+        this.spine.addChild(this.content);
         this.content.addChild(content);
     }
 
     /** Auto-update every frame */
     public renderUpdate() {
-    //     if (!this.content) return;
-    //     const bone = this.spine.skeleton.bones[1] as any;
-    //     this.content.x = bone.ax;
-    //     this.content.y = -bone.ay - 5;
-    //     this.content.rotation = bone.arotation * -0.015;
+        if (!this.content) return;
+        const bone = this.spine.skeleton.bones[1] as any;
+        this.content.x = bone.ax;
+        this.content.y = -bone.ay - 5;
+        this.content.rotation = bone.arotation * -0.015;
     }
 }