diff --git a/puzzling-potions/package-lock.json b/puzzling-potions/package-lock.json index 2c9dc4b..03ff5b2 100644 --- a/puzzling-potions/package-lock.json +++ b/puzzling-potions/package-lock.json @@ -9,9 +9,9 @@ "version": "0.0.1", "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": { @@ -573,6 +573,11 @@ "node": ">=12" } }, + "node_modules/@esotericsoftware/spine-core": { + "version": "4.1.50", + "resolved": "https://registry.npmjs.org/@esotericsoftware/spine-core/-/spine-core-4.1.50.tgz", + "integrity": "sha512-TT+tFAq+HAyMG7CD4Ug2n9nG6NBn6OgB0Go32EPJGoRda6Y4aZNpegxHWVmuqx/gDbiAISvvcYWNHFRdfaidUQ==" + }, "node_modules/@ffmpeg-installer/darwin-arm64": { "version": "4.1.5", "resolved": "https://registry.npmjs.org/@ffmpeg-installer/darwin-arm64/-/darwin-arm64-4.1.5.tgz", @@ -1342,84 +1347,6 @@ "url": "https://github.com/sponsors/isaacs" } }, - "node_modules/@pixi-spine/base": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/@pixi-spine/base/-/base-4.0.3.tgz", - "integrity": "sha512-0bunaWebaDswLFtYZ6whV+ZvgLQ7oANcvbPmIOoVpS/1pOY3Y/GAnWOFbgp3qt9Q/ntLYqNjGve6xq0IqpsTAA==", - "peerDependencies": { - "@pixi/core": "^7.0.0", - "@pixi/display": "^7.0.0", - "@pixi/graphics": "^7.0.0", - "@pixi/mesh": "^7.0.0", - "@pixi/mesh-extras": "^7.0.0", - "@pixi/sprite": "^7.0.0" - } - }, - "node_modules/@pixi-spine/loader-base": { - "version": "4.0.4", - "resolved": "https://registry.npmjs.org/@pixi-spine/loader-base/-/loader-base-4.0.4.tgz", - "integrity": "sha512-Grgu+PxiUpgYWpuMRr3h5jrN3ZTnwyXfu3HuYdFb6mbJTTMub4xBPALeui+O+tw0k9RNRAr99pUzu9Rc9XTbAw==", - "peerDependencies": { - "@pixi-spine/base": "^4.0.0", - "@pixi/assets": " ^7.0.0", - "@pixi/core": "^7.0.0" - } - }, - "node_modules/@pixi-spine/loader-uni": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/@pixi-spine/loader-uni/-/loader-uni-4.0.3.tgz", - "integrity": "sha512-tfhTJrnuog8ObKbbiSG1wV/nIUc3O98WfwS6lCmewaupoMIKF0ujg21MCqXUXJvljQJzU9tbURI+DWu4w9dnnA==", - "peerDependencies": { - "@pixi-spine/base": "^4.0.0", - "@pixi-spine/loader-base": "^4.0.0", - "@pixi-spine/runtime-3.7": "^4.0.0", - "@pixi-spine/runtime-3.8": "^4.0.0", - "@pixi-spine/runtime-4.1": "^4.0.0", - "@pixi/assets": " ^7.0.0", - "@pixi/core": "^7.0.0", - "@pixi/display": "^7.0.0", - "@pixi/graphics": "^7.0.0", - "@pixi/mesh": "^7.0.0", - "@pixi/mesh-extras": "^7.0.0", - "@pixi/sprite": "^7.0.0" - } - }, - "node_modules/@pixi-spine/runtime-3.7": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/@pixi-spine/runtime-3.7/-/runtime-3.7-4.0.3.tgz", - "integrity": "sha512-zuopKtSqjRc37wjW5xJ64j9DbiBB7rkPMFeldeWBPCbfZiCcFcwSZwZnrcgC+f4HIGo0NeviAvJGM8Hcf3AyeA==", - "peerDependencies": { - "@pixi-spine/base": "^4.0.0", - "@pixi/core": "^7.0.0" - } - }, - "node_modules/@pixi-spine/runtime-3.8": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/@pixi-spine/runtime-3.8/-/runtime-3.8-4.0.3.tgz", - "integrity": "sha512-lIhb4jOTon+FVYLO9AIgcB6jf9hC+RLEn8PesaDRibDocQ1htVCkEIhCIU3Mc00fuqIby7lMBsINeS/Th0q3bw==", - "peerDependencies": { - "@pixi-spine/base": "^4.0.0", - "@pixi/core": "^7.0.0" - } - }, - "node_modules/@pixi-spine/runtime-4.0": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/@pixi-spine/runtime-4.0/-/runtime-4.0-4.0.3.tgz", - "integrity": "sha512-2Y8qhxRkg/yH/9VylGsRVAd5W+dXVPhHTjFk0RR9wEUzTCkdZ17pE+56s2nESi2X3sYNKkz8FowfaqIvXnVGxw==", - "peerDependencies": { - "@pixi-spine/base": "^4.0.0", - "@pixi/core": "^7.0.0" - } - }, - "node_modules/@pixi-spine/runtime-4.1": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/@pixi-spine/runtime-4.1/-/runtime-4.1-4.0.3.tgz", - "integrity": "sha512-jK433snCQMC4FUPiDgyIcxhiatvRNSxqgs0CgHjjQ0l8GlY6gPpkkdThQ6GsFNme1SUZ4uvnWwawXFIGjW1IpQ==", - "peerDependencies": { - "@pixi-spine/base": "^4.0.0", - "@pixi/core": "^7.0.0" - } - }, "node_modules/@pixi/assets": { "version": "7.3.3", "resolved": "https://registry.npmjs.org/@pixi/assets/-/assets-7.3.3.tgz", @@ -1525,16 +1452,6 @@ "@pixi/display": "7.3.3" } }, - "node_modules/@pixi/mesh-extras": { - "version": "7.3.3", - "resolved": "https://registry.npmjs.org/@pixi/mesh-extras/-/mesh-extras-7.3.3.tgz", - "integrity": "sha512-2TW1n97PpSZIZomfoEcKezGeGLPyd82ng2u8SXQoy9keCmB2yK361/RO88jvWbY4qpnJn/89LiLyYEBiJtSmWg==", - "peer": true, - "peerDependencies": { - "@pixi/core": "7.3.3", - "@pixi/mesh": "7.3.3" - } - }, "node_modules/@pixi/runner": { "version": "7.3.3", "resolved": "https://registry.npmjs.org/@pixi/runner/-/runner-7.3.3.tgz", @@ -1561,6 +1478,21 @@ "@pixi/core": "^7.0.0" } }, + "node_modules/@pixi/spine-pixi": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@pixi/spine-pixi/-/spine-pixi-1.0.4.tgz", + "integrity": "sha512-lshifdnxNr1N2E3PAei73f3GmzNB2awxf/BprSUr3+1VSaQljr51LQWQGVjFevU76qiKSA26bx1g9V6MgqHLTw==", + "dependencies": { + "@esotericsoftware/spine-core": "~4.1.50" + }, + "engines": { + "node": ">=16", + "npm": ">=8" + }, + "peerDependencies": { + "pixi.js": "^8.0.0-0" + } + }, "node_modules/@pixi/sprite": { "version": "7.3.3", "resolved": "https://registry.npmjs.org/@pixi/sprite/-/sprite-7.3.3.tgz", @@ -1911,9 +1843,9 @@ "dev": true }, "node_modules/@types/node": { - "version": "20.10.8", - "resolved": "https://registry.npmjs.org/@types/node/-/node-20.10.8.tgz", - "integrity": "sha512-f8nQs3cLxbAFc00vEU59yf9UyGUftkPaLGfvbVOIDdx2i1b8epBqj2aNGyP19fiyXWvlmZ7qC1XLjAzw/OKIeA==", + "version": "20.11.0", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.0.tgz", + "integrity": "sha512-o9bjXmDNcF7GbM4CNQpmi+TutCgap/K3w1JyKgxAjqx41zp9qlIAVFi0IhCNsJcXolEqLWhbFbEeL0PvYm4pcQ==", "dev": true, "dependencies": { "undici-types": "~5.26.4" @@ -6018,29 +5950,6 @@ "pixelmatch": "bin/pixelmatch" } }, - "node_modules/pixi-spine": { - "version": "4.0.4", - "resolved": "https://registry.npmjs.org/pixi-spine/-/pixi-spine-4.0.4.tgz", - "integrity": "sha512-XRq1yARVoi4av7RXnd9+P37SWI9+e4/f5yTScZPJGB+sY5VcRYN6BYkBQ+y8nUKI1aJIjlms9z+pGxqikm+eFQ==", - "dependencies": { - "@pixi-spine/base": "^4.0.3", - "@pixi-spine/loader-base": "^4.0.4", - "@pixi-spine/loader-uni": "^4.0.3", - "@pixi-spine/runtime-3.7": "^4.0.3", - "@pixi-spine/runtime-3.8": "^4.0.3", - "@pixi-spine/runtime-4.0": "^4.0.3", - "@pixi-spine/runtime-4.1": "^4.0.3" - }, - "peerDependencies": { - "@pixi/assets": "^7.0.0", - "@pixi/core": "^7.0.0", - "@pixi/display": "^7.0.0", - "@pixi/graphics": "^7.0.0", - "@pixi/mesh": "^7.0.0", - "@pixi/mesh-extras": "^7.0.0", - "@pixi/sprite": "^7.0.0" - } - }, "node_modules/pixi.js": { "version": "8.0.0-rc.3", "resolved": "https://registry.npmjs.org/pixi.js/-/pixi.js-8.0.0-rc.3.tgz", diff --git a/puzzling-potions/package.json b/puzzling-potions/package.json index d8e65ae..9531e88 100644 --- 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 index ae4d276..492a7c8 100644 --- 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 index af02e78..54194b1 100644 --- 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 index 3818fc7..6b26a29 100644 --- 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 index 6985073..df50c26 100644 --- 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 index 5e21fe0..316b5c7 100644 --- 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; } } diff --git a/puzzling-potions/src/ui/Dragon.ts b/puzzling-potions/src/ui/Dragon.ts index 3cbf823..e3a5a1f 100644 --- a/puzzling-potions/src/ui/Dragon.ts +++ b/puzzling-potions/src/ui/Dragon.ts @@ -1,13 +1,13 @@ import { Container } from 'pixi.js'; import gsap from 'gsap'; -// import { Spine } from '@pixi/spine-pixi'; +import { Spine } from '@pixi/spine-pixi'; /** * Spine-animated little dragon, that shows up in Home and Result screens. */ export class Dragon extends Container { /** The spine animation */ - // private spine: Spine; + private spine: Spine; /** Inner container for internal animations */ private container: Container; @@ -17,29 +17,31 @@ export class Dragon extends Container { this.container = new Container(); this.addChild(this.container); - // const skeleton = Assets.cache.get('common/dragon-skeleton.json'); - // this.spine = new Spine(skeleton.spineData); + this.spine = Spine.from({ + skeleton: 'common/dragon-skeleton.json', + atlas: 'common/dragon-skeleton.atlas' + }); // this.spine.autoUpdate = true; - // this.spine.scale.set(0.3); - // this.spine.x = -30; - // this.spine.y = 130; - // this.container.addChild(this.spine); + this.spine.scale.set(0.3); + this.spine.x = -30; + this.spine.y = 130; + this.container.addChild(this.spine); this.playIdle(); } /** Play dragon's idle animation, in loop */ public playIdle() { - // this.spine.state.setAnimation(0, 'dragon-idle', true); + this.spine.state.setAnimation(0, 'dragon-idle', true); } /** Play dragon's bubbles animation, in loop */ public playBubbles() { - // this.spine.state.setAnimation(0, 'dragon-bubbles', true); + this.spine.state.setAnimation(0, 'dragon-bubbles', true); } /** Play dragon's transition animation, in loop */ public playTransition() { - // this.spine.state.setAnimation(0, 'dragon-transition', true); + this.spine.state.setAnimation(0, 'dragon-transition', true); } /** Show the dragon */ diff --git a/puzzling-potions/src/ui/LargeButton.ts b/puzzling-potions/src/ui/LargeButton.ts index da5a913..5516473 100644 --- a/puzzling-potions/src/ui/LargeButton.ts +++ b/puzzling-potions/src/ui/LargeButton.ts @@ -1,5 +1,5 @@ import { FancyButton } from '@pixi/ui'; -import { NineSlicePlane, Texture } from 'pixi.js'; +import { NineSliceSprite, Texture } from 'pixi.js'; import { Label } from './Label'; import gsap from 'gsap'; import { sfx } from '../utils/audio'; @@ -22,17 +22,35 @@ export class LargeButton extends FancyButton { constructor(options: Partial = {}) { const opts = { ...defaultLargeButtonOptions, ...options }; - const defaultView = new NineSlicePlane(Texture.from('button-large'), 36, 42, 36, 52); - defaultView.width = opts.width; - defaultView.height = opts.height; + const defaultView = new NineSliceSprite({ + texture: Texture.from('button-large'), + leftWidth: 36, + topHeight: 42, + rightWidth: 36, + bottomHeight: 52, + width: opts.width, + height: opts.height, + }); - const hoverView = new NineSlicePlane(Texture.from('button-large-hover'), 36, 42, 36, 52); - hoverView.width = opts.width; - hoverView.height = opts.height; + const hoverView = new NineSliceSprite({ + texture: Texture.from('button-large-hover'), + leftWidth: 36, + topHeight: 42, + rightWidth: 36, + bottomHeight: 52, + width: opts.width, + height: opts.height, + }); - const pressedView = new NineSlicePlane(Texture.from('button-large-press'), 36, 42, 36, 52); - pressedView.width = opts.width; - pressedView.height = opts.height; + const pressedView = new NineSliceSprite({ + texture: Texture.from('button-large-press'), + leftWidth: 36, + topHeight: 42, + rightWidth: 36, + bottomHeight: 52, + width: opts.width, + height: opts.height, + }); super({ defaultView, diff --git a/puzzling-potions/src/ui/ModeSwitcher.ts b/puzzling-potions/src/ui/ModeSwitcher.ts index 587e32f..ee8e5eb 100644 --- a/puzzling-potions/src/ui/ModeSwitcher.ts +++ b/puzzling-potions/src/ui/ModeSwitcher.ts @@ -42,30 +42,26 @@ export class ModeSwitcher extends RadioGroup { text: i.text, style: { checked: new Graphics() - .beginFill(bgColor) - .drawRoundedRect(0, 0, width, height, radius) - .endFill() - .beginFill(fillColor) - .drawRoundedRect( + .roundRect(0, 0, width, height, radius) + .fill({ color: bgColor }) + .roundRect( padding, padding, width - padding * 2, height - padding * 2, radius - padding, ) - .endFill(), + .fill({ color: fillColor}), unchecked: new Graphics() - .beginFill(bgColor) - .drawRoundedRect(0, 0, width, height, radius) - .endFill() - .drawRoundedRect( + .roundRect(0, 0, width, height, radius) + .fill({ color: bgColor }) + .roundRect( padding, padding, width - padding * 2, height - padding * 2, radius - padding, - ) - .endFill(), + ), text: { fontFamily: 'Arial Rounded MT Bold', diff --git a/puzzling-potions/src/ui/RoundedBox.ts b/puzzling-potions/src/ui/RoundedBox.ts index bf37a39..ff0b480 100644 --- a/puzzling-potions/src/ui/RoundedBox.ts +++ b/puzzling-potions/src/ui/RoundedBox.ts @@ -1,4 +1,4 @@ -import { Container, NineSlicePlane, Texture } from 'pixi.js'; +import { Container, NineSliceSprite, Texture } from 'pixi.js'; const defaultRoundedBoxOptions = { color: 0x2c136c, @@ -16,26 +16,38 @@ export type RoundedBoxOptions = typeof defaultRoundedBoxOptions; */ export class RoundedBox extends Container { /** The rectangular area, that scales without distorting rounded corners */ - private image: NineSlicePlane; + private image: NineSliceSprite; /** Optional shadow matching the box image, with y offest */ - private shadow?: NineSlicePlane; + private shadow?: NineSliceSprite; constructor(options: Partial = {}) { super(); const opts = { ...defaultRoundedBoxOptions, ...options }; - this.image = new NineSlicePlane(Texture.from('rounded-rectangle'), 34, 34, 34, 34); - this.image.width = opts.width; - this.image.height = opts.height; - this.image.tint = opts.color; + this.image = new NineSliceSprite({ + texture: Texture.from('rounded-rectangle'), + leftWidth: 34, + topHeight: 34, + rightWidth: 34, + bottomHeight: 34, + width: opts.width, + height: opts.height, + tint: opts.color, + }); this.image.x = -this.image.width * 0.5; this.image.y = -this.image.height * 0.5; this.addChild(this.image); if (opts.shadow) { - this.shadow = new NineSlicePlane(Texture.from('rounded-rectangle'), 34, 34, 34, 34); - this.shadow.width = opts.width; - this.shadow.height = opts.height; - this.shadow.tint = opts.shadowColor; + this.shadow = new NineSliceSprite({ + texture: Texture.from('rounded-rectangle'), + leftWidth: 34, + topHeight: 34, + rightWidth: 34, + bottomHeight: 34, + width: opts.width, + height: opts.height, + tint: opts.shadowColor, + }); this.shadow.x = -this.shadow.width * 0.5; this.shadow.y = -this.shadow.height * 0.5 + opts.shadowOffset; this.addChildAt(this.shadow, 0); diff --git a/puzzling-potions/src/ui/SmallButton.ts b/puzzling-potions/src/ui/SmallButton.ts index 3a6e13d..04a7bc4 100644 --- a/puzzling-potions/src/ui/SmallButton.ts +++ b/puzzling-potions/src/ui/SmallButton.ts @@ -1,5 +1,5 @@ import { FancyButton } from '@pixi/ui'; -import { Container, NineSlicePlane, Texture } from 'pixi.js'; +import { Container, NineSliceSprite, Texture } from 'pixi.js'; import { Label } from './Label'; import gsap from 'gsap'; import { sfx } from '../utils/audio'; @@ -26,17 +26,35 @@ export class SmallButton extends FancyButton { constructor(options: Partial = {}) { const opts = { ...defaultSmallButtonOptions, ...options }; - const defaultView = new NineSlicePlane(Texture.from('button-small'), 16, 16, 16, 20); - defaultView.width = opts.width; - defaultView.height = opts.height; + const defaultView = new NineSliceSprite({ + texture: Texture.from('button-small'), + leftWidth: 16, + topHeight: 16, + rightWidth: 16, + bottomHeight: 20, + width: opts.width, + height: opts.height, + }); - const hoverView = new NineSlicePlane(Texture.from('button-small-hover'), 16, 16, 16, 20); - hoverView.width = opts.width; - hoverView.height = opts.height; + const hoverView = new NineSliceSprite({ + texture: Texture.from('button-small-hover'), + leftWidth: 16, + topHeight: 16, + rightWidth: 16, + bottomHeight: 20, + width: opts.width, + height: opts.height, + }); - const pressedView = new NineSlicePlane(Texture.from('button-small-press'), 16, 16, 16, 20); - pressedView.width = opts.width; - pressedView.height = opts.height; + const pressedView = new NineSliceSprite({ + texture: Texture.from('button-small-press'), + leftWidth: 16, + topHeight: 16, + rightWidth: 16, + bottomHeight: 20, + width: opts.width, + height: opts.height, + }); super({ defaultView, diff --git a/puzzling-potions/src/ui/VolumeSlider.ts b/puzzling-potions/src/ui/VolumeSlider.ts index 8e91d70..73b2163 100644 --- a/puzzling-potions/src/ui/VolumeSlider.ts +++ b/puzzling-potions/src/ui/VolumeSlider.ts @@ -22,23 +22,22 @@ export class VolumeSlider extends Slider { const backgroundColor = 0xcf4b00; const bg = new Graphics() - .beginFill(borderColor) - .drawRoundedRect(0, 0, width, height, radius) - .beginFill(backgroundColor) - .drawRoundedRect(border, border, width - border * 2, height - border * 2, radius); + .roundRect(0, 0, width, height, radius) + .fill({ color: borderColor }) + .roundRect(border, border, width - border * 2, height - border * 2, radius) + .fill({ color: backgroundColor }); const fill = new Graphics() - .beginFill(borderColor) - .drawRoundedRect(0, 0, width, height, radius) - .beginFill(fillColor) - .drawRoundedRect(border, border, width - border * 2, height - border * 2, radius); + .roundRect(0, 0, width, height, radius) + .fill({ color: borderColor }) + .roundRect(border, border, width - border * 2, height - border * 2, radius) + .fill({ color: fillColor }); const slider = new Graphics() - .beginFill(borderColor) - .drawCircle(0, 0, handleRadius + handleBorder) - .beginFill(meshColor) - .drawCircle(0, 0, handleRadius) - .endFill(); + .circle(0, 0, handleRadius + handleBorder) + .fill({ color: borderColor }) + .circle(0, 0, handleRadius) + .fill({ color: meshColor }); super({ bg,