Next v8: Bubbo Bubbo

bubbo-bubbo/package.json

@@ -18,23 +18,21 @@
         "types": "tsc"
     },
     "dependencies": {
-        "@pixi/sound": "^5.2.2",
-        "@pixi/ui": "^0.9.1",
         "gsap": "^3.12.2",
         "pixi-filters": "^5.2.1",
-        "pixi.js": "^7.3.2",
+        "pixi.js": "^8.0.0-rc.2",
         "typed-signals": "^2.5.0"
     },
     "devDependencies": {
-        "@assetpack/cli": "^0.7.0",
-        "@assetpack/core": "^0.7.0",
-        "@assetpack/plugin-compress": "^0.7.0",
-        "@assetpack/plugin-ffmpeg": "^0.7.0",
-        "@assetpack/plugin-json": "^0.7.0",
-        "@assetpack/plugin-manifest": "^0.7.0",
-        "@assetpack/plugin-mipmap": "^0.7.0",
-        "@assetpack/plugin-texture-packer": "^0.7.0",
-        "@assetpack/plugin-webfont": "^0.7.0",
+        "@assetpack/cli": "^0.8.0",
+        "@assetpack/core": "^0.8.0",
+        "@assetpack/plugin-compress": "^0.8.0",
+        "@assetpack/plugin-ffmpeg": "^0.8.0",
+        "@assetpack/plugin-json": "^0.8.0",
+        "@assetpack/plugin-manifest": "^0.8.0",
+        "@assetpack/plugin-mipmap": "^0.8.0",
+        "@assetpack/plugin-texture-packer": "^0.8.0",
+        "@assetpack/plugin-webfont": "^0.8.0",
         "@typescript-eslint/eslint-plugin": "^6.8.0",
         "@typescript-eslint/parser": "^6.8.0",
         "eslint": "^8.52.0",

bubbo-bubbo/src/assets.ts

@@ -2,9 +2,9 @@ import {
     Assets,
     extensions,
     ExtensionType,
+    Resolver,
     resolveTextureUrl,
     ResolveURLParser,
-    settings,
     UnresolvedAsset,
 } from 'pixi.js';
 
@@ -13,8 +13,7 @@ import manifest from '../src/manifest.json';
 export const resolveJsonUrl = {
     extension: ExtensionType.ResolveParser,
     test: (value: string): boolean =>
-        // @ts-expect-error should be fixed in the next version of pixi (RETINA_PREFIX is of type RegEx)
-        settings.RETINA_PREFIX.test(value) && value.endsWith('.json'),
+        Resolver.RETINA_PREFIX.test(value) && value.endsWith('.json'),
     parse: resolveTextureUrl.parse,
 } as ResolveURLParser;
 

bubbo-bubbo/src/game/Game.ts

@@ -1,5 +1,5 @@
 import gsap from 'gsap';
-import { DisplayObject, Point } from 'pixi.js';
+import { Point } from 'pixi.js';
 import { Container, Rectangle } from 'pixi.js';
 
 import { navigation } from '../navigation';
@@ -55,22 +55,22 @@ export class Game {
     }
 
     /**
-     * Adds `DisplayObject`s to the game container.
-     * @param displayObjects - The `DisplayObject`s to add to the game container.
+     * Adds views (Containers, Sprites, etc.) to the game container.
+     * @param views - The views to add to the game container.
      */
-    public addToGame(...displayObjects: DisplayObject[]) {
-        displayObjects.forEach((displayObject) => {
-            this.gameContainer.addChild(displayObject);
+    public addToGame(...views: Container[]) {
+        views.forEach((view) => {
+            this.gameContainer.addChild(view);
         });
     }
 
     /**
-     * Removes `DisplayObject`s from the game container.
-     * @param displayObjects - The `DisplayObject`s to remove from the game container.
+     * Removes views (Containers, Sprites, etc.) from the game container.
+     * @param views - The views to remove from the game container.
      */
-    public removeFromGame(...displayObjects: DisplayObject[]) {
-        displayObjects.forEach((displayObject) => {
-            displayObject.removeFromParent();
+    public removeFromGame(...views: Container[]) {
+        views.forEach((view) => {
+            view.removeFromParent();
         });
     }
 

bubbo-bubbo/src/game/entities/Bubble.ts

@@ -1,5 +1,5 @@
 import gsap from 'gsap';
-import type { IPointData } from 'pixi.js';
+import type { PointData } from 'pixi.js';
 import { Container, Graphics } from 'pixi.js';
 
 import { sfx } from '../../audio';
@@ -82,7 +82,7 @@ export class Bubble extends SpoofBubble {
         // Used to debug the visuals of the physics body, only accounts for body radius and centers on bubble view
         if (designConfig.debugBody) {
             this.view.addChild(
-                new Graphics().beginFill(0xffffff, 0.5).drawCircle(0, 0, this.body.radius),
+                new Graphics().circle(0, 0, this.body.radius).fill({ color: 0xffffff, alpha: 0.5 }),
             );
         }
     }
@@ -133,7 +133,7 @@ export class Bubble extends SpoofBubble {
      * @param direction - The x and y direction of the impact animation.
      * @returns - A gsap animation object.
      */
-    public impact(direction: IPointData) {
+    public impact(direction: PointData) {
         return gsap.to(this.bubbleView.view, {
             x: direction.x,
             y: direction.y,

bubbo-bubbo/src/game/entities/BubbleView.ts

@@ -27,7 +27,7 @@ export class BubbleView {
      */
     constructor(type?: BubbleType) {
         // Initialize the sprite for the bubble
-        this._sprite = Sprite.from(type ? `bubble-${type}` : Texture.WHITE);
+        this._sprite = type ? Sprite.from(`bubble-${type}`) : new Sprite(Texture.WHITE);
         this._sprite.anchor.set(0.5);
         this._sprite.width = boardConfig.bubbleSize;
         this._sprite.height = boardConfig.bubbleSize;
@@ -52,7 +52,9 @@ export class BubbleView {
         this._shine.visible = false;
 
         // Add the shine effect to the bubble sprite
-        this._sprite.addChild(this._shine);
+        this.view.addChild(this._sprite, this._shine);
+        // TODO: Confirm Transform Hierarchy
+        // this._sprite.addChild(this._shine);
 
         // Add the shadow and bubble sprite to the root container
         this.view.addChild(this._shadow, this._sprite);
@@ -110,6 +112,10 @@ export class BubbleView {
         // Update the texture of the sprite based on the new type
         this._sprite.texture = Texture.from(`bubble-${this._type}`);
 
+        // TODO: Resolve sizing issue when setting size on Texture.WHITE Sprite before setting texture
+        this._sprite.width = boardConfig.bubbleSize;
+        this._sprite.height = boardConfig.bubbleSize;
+
         // Update the tint of the shadow based on the new type
         this._shadow.tint = boardConfig.bubbleTypeToColor[value] ?? 0x606060;
 

bubbo-bubbo/src/game/systems/AimSystem.ts

@@ -1,5 +1,5 @@
 import gsap from 'gsap';
-import { Container, IPointData, Point, Sprite } from 'pixi.js';
+import { Container, PointData, Point, Sprite } from 'pixi.js';
 
 import { boardConfig } from '../boardConfig';
 import { designConfig } from '../designConfig';
@@ -299,7 +299,7 @@ export class AimSystem implements System {
             const n = Math.ceil(distance / stepSize); // rounding up
 
             // Initialise an array to hold the new points
-            const points: IPointData[] = [];
+            const points: PointData[] = [];
 
             // Calculate the step values for x and y
             const stepX = (end.x - start.x) / n;

bubbo-bubbo/src/game/systems/EffectsSystem.ts

@@ -1,4 +1,5 @@
-import { ShockwaveFilter } from 'pixi-filters';
+// TODO: Filters v8 Types?
+import { ShockwaveFilter } from '@pixi/filter-shockwave';
 
 import { sfx } from '../../audio';
 import { randomRange } from '../../utils/maths/rand';
@@ -82,9 +83,8 @@ export class EffectsSystem implements System {
         this._activeShockwave = false;
 
         // Remove any filters from the game container
-        if (this.game.gameContainer.filters?.length) {
-            this.game.gameContainer.filters.length = 0;
-        }
+        // TODO: Better way to clear filters??
+        this.game.gameContainer.filters = [];
 
         // Set the game container position back to its original position
         this.game.gameContainer.x = this.game.gameContainerPosition.x;

bubbo-bubbo/src/game/systems/HudSystem.ts

@@ -1,5 +1,5 @@
 import gsap from 'gsap';
-import { Container, Graphics, NineSlicePlane, Sprite, Texture } from 'pixi.js';
+import { Container, Graphics, NineSliceSprite, Sprite, Texture } from 'pixi.js';
 
 import { IconButton } from '../../ui/buttons/IconButton';
 import { HelperPanel } from '../../ui/HelperPanel';
@@ -40,12 +40,12 @@ export class HudSystem implements System {
 
     // All the visuals for the hud elements
     private _laserLine!: LaserLine;
-    private _topTray!: NineSlicePlane;
+    private _topTray!: NineSliceSprite;
     private _roundedTray!: Sprite;
     private _hiddenTitle!: Title;
-    private _bottomTray!: NineSlicePlane;
-    private _leftBorder!: NineSlicePlane;
-    private _rightBorder!: NineSlicePlane;
+    private _bottomTray!: NineSliceSprite;
+    private _leftBorder!: NineSliceSprite;
+    private _rightBorder!: NineSliceSprite;
     private _pauseButton!: IconButton;
     private _scoreCounter!: ScoreCounter;
     private _helperPanel!: HelperPanel;
@@ -79,7 +79,7 @@ export class HudSystem implements System {
 
         // Create the top section of the hud
         // Create the top hud element
-        this._topTray = new NineSlicePlane(Texture.from('top-tray'));
+        this._topTray = new NineSliceSprite({ texture: Texture.from('top-tray')});
         this._topTray.x = -designConfig.content.width * 0.5;
         this._topTray.width = designConfig.content.width;
 
@@ -97,7 +97,7 @@ export class HudSystem implements System {
         this._roundedTray.addChild(this._hiddenTitle.view);
 
         // Create the bottom section of the hud
-        this._bottomTray = new NineSlicePlane(Texture.from('bottom-tray'));
+        this._bottomTray = new NineSliceSprite({ texture: Texture.from('bottom-tray')});
         this._bottomTray.height = boardConfig.bounceLine - 30;
         this._bottomTray.pivot.y = this._bottomTray.height;
         this._bottomTray.x -= designConfig.content.width * 0.5;
@@ -107,11 +107,11 @@ export class HudSystem implements System {
         this._scoreCounter = new ScoreCounter();
 
         // Create the visual representation of the left bounds
-        this._leftBorder = new NineSlicePlane(Texture.from('game-side-border'));
+        this._leftBorder = new NineSliceSprite({ texture: Texture.from('game-side-border')});
         this._leftBorder.x = -(designConfig.content.width * 0.5) - this._leftBorder.width;
 
         // Create the visual representation of the right bounds
-        this._rightBorder = new NineSlicePlane(Texture.from('game-side-border'));
+        this._rightBorder = new NineSliceSprite({ texture: Texture.from('game-side-border')});
         this._rightBorder.x = designConfig.content.width * 0.5;
 
         // Get a reference to the pause system
@@ -128,13 +128,13 @@ export class HudSystem implements System {
 
         // Create a mask and fit it to the game bounds
         this._mask = new Graphics()
-            .beginFill(0x030320)
-            .drawRect(
+            .rect(
                 -designConfig.content.width * 0.5,
                 -designConfig.content.height,
                 designConfig.content.width,
                 designConfig.content.height,
-            );
+            )
+            .fill({ color: 0x030320});
 
         // Create the tutorial popout
         this._helperPanel = new HelperPanel();

bubbo-bubbo/src/game/systems/SpaceDecorSystem.ts

@@ -1,4 +1,4 @@
-import { Container, IPointData, Sprite } from 'pixi.js';
+import { Container, PointData, Sprite } from 'pixi.js';
 
 import { device } from '../../utils/device';
 import { distance } from '../../utils/maths/point';
@@ -282,7 +282,7 @@ export class SpaceDecorSystem {
      * Creates new decor elements at the specified points.
      * @param points An array of points where the new decor elements will be placed.
      */
-    private _createDecor(points: IPointData[]) {
+    private _createDecor(points: PointData[]) {
         // Loop through all the points
         points.forEach((point) => {
             // Determine whether to create a BubbleOrbit or Satellite decor element

bubbo-bubbo/src/main.ts

@@ -11,10 +11,7 @@ import { storage } from './storage';
 import { getUrlParam } from './utils/utils';
 
 /** The PixiJS app Application instance, shared across the project */
-export const app = new Application<HTMLCanvasElement>({
-    resolution: Math.max(window.devicePixelRatio, 2),
-    backgroundColor: 0xffffff,
-});
+export const app = new Application();
 
 let hasInteracted = false;
 
@@ -33,8 +30,8 @@ function resize() {
     const height = windowHeight * scale;
 
     // Update canvas style dimensions and scroll window up to avoid issues on mobile resize
-    app.renderer.view.style.width = `${windowWidth}px`;
-    app.renderer.view.style.height = `${windowHeight}px`;
+    app.renderer.canvas.style.width = `${windowWidth}px`;
+    app.renderer.canvas.style.height = `${windowHeight}px`;
     window.scrollTo(0, 0);
 
     // Update renderer  and navigation screens dimensions
@@ -45,8 +42,16 @@ function resize() {
 
 /** Setup app and initialise assets */
 async function init() {
-    // Add pixi canvas element (app.view) to the document's body
-    document.body.appendChild(app.view);
+    // Initialize the app
+    await app.init({
+        // TODO: Fix a couple of WebGPU only issues
+        preference: 'webgl',
+        resolution: Math.max(window.devicePixelRatio, 2),
+        backgroundColor: 0xffffff,
+    });
+
+    // Add pixi canvas element to the document's body
+    document.body.appendChild(app.canvas);
 
     // Whenever the window resizes, call the 'resize' function
     window.addEventListener('resize', resize);

bubbo-bubbo/src/navigation.ts

@@ -1,4 +1,4 @@
-import { Assets, Container } from 'pixi.js';
+import { Assets, Container, Ticker } from 'pixi.js';
 
 import { areBundlesLoaded } from './assets';
 import { app } from './main';
@@ -8,7 +8,7 @@ export interface AppScreen<T = any> extends Container {
     prepare?: (data?: T) => void;
     show?: () => Promise<void>;
     hide?: () => Promise<void>;
-    update?: (delta: number) => void;
+    update?: (time: Ticker) => void;
     resize?: (w: number, h: number) => void;
 }
 

bubbo-bubbo/src/screens/GameScreen.ts

@@ -1,5 +1,5 @@
 import gsap from 'gsap';
-import { Container, Texture, TilingSprite } from 'pixi.js';
+import { Container, Texture, Ticker, TilingSprite } from 'pixi.js';
 
 import { designConfig } from '../game/designConfig';
 import { Game } from '../game/Game';
@@ -19,9 +19,15 @@ export class GameScreen extends Container implements AppScreen {
         super();
 
         // Create the background
-        this._background = new TilingSprite(Texture.from('background-tile-space'), 64, 64);
-        this._background.tileScale.set(designConfig.backgroundTileScale);
-
+        this._background = new TilingSprite({
+            texture: Texture.from('background-tile-space'),
+            width: 64,
+            height: 64,
+            tileScale: {
+                x: designConfig.backgroundTileScale,
+                y: designConfig.backgroundTileScale,
+            },
+        });
         this.addChild(this._background);
 
         // Create an instance of the game and initialise
@@ -58,10 +64,10 @@ export class GameScreen extends Container implements AppScreen {
 
     /**
      * Called every frame.
-     * @param delta - The time elapsed since the last update.
+     * @param time - Ticker object with time related data.
      */
-    public update(delta: number) {
-        this._game.update(delta);
+    public update(time: Ticker) {
+        this._game.update(time.deltaTime);
     }
 
     /**