Feature/187532394 - Pixi template Springroll listeners

CHANGELOG.md

@@ -5,6 +5,13 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.4.0] - TBD
+
+### Changed
+
+- Updated pixi.js to 8.1.0
+- Updated @pixi/sound to 6.0.0
+
 ## [1.3.1] - 2023-03-28
 
 ### Fixed

package.json

@@ -29,8 +29,8 @@
     "springroll": "^2.4.4"
   },
   "dependencies": {
-    "@pixi/sound": "^5.0.0",
-    "pixi.js": "^7.0.4",
+    "@pixi/sound": "^6.0.0",
+    "pixi.js": "^8.1.0",
     "springroll": "^2.4.4"
   }
 }

src/game.js

@@ -9,77 +9,85 @@ export class Game
 {
     constructor(width, height)
     {
+        this.emitter = new PIXI.EventEmitter();
         this.width = width;
         this.height = height;
-        this.app = new Application(
+
+        this.pixi = new PIXI.Application();
+        (async () => 
         {
-            // This feature list matches the Springroll states subscribed to below
-            // Note: features will only work if the Container environment also supports controls for that feature.
-            features:
+            await this.pixi.init(
             {
-                sfx: true,
-                sound: true,
-                music: true,
-                vo: true,
-                sfxVolume: true,
-                soundVolume: true,
-                musicVolume: true,
-                voVolume: true,
-                captionsMuted: true,
-            }
-        });
-
-        this.pixi = new PIXI.Application({ width, height, autoResize: true });
-        document.getElementById('content').appendChild(this.pixi.view);
-
-        this.resize = this.resize.bind(this);
-        this.scaleManager = new SafeScaleManager({width, height, safeWidth: 1024, safeHeight: 660, callback: this.resize});
-
-        // Subscribe to required springroll States.
-        this.app.state.pause.subscribe((value) =>
-        {
-            this.isPaused = value;
-        });
-
-        this.app.state.soundVolume.subscribe((value) =>
-        {
-            sound.volumeAll = value;
-        });
-
-        this.app.state.sfxVolume.subscribe((value) =>
-        {
-            // this will break if done before sounds are loaded.
-            // in a full game this should be handled gracefully.
-            PIXI.Assets.get('bounce').sound.volume = value;
-        });
-
-        this.app.state.musicVolume.subscribe(result =>
-        {
-            console.log('musicVolume: ', result);
-        });
-
-        this.app.state.voVolume.subscribe(result =>
-        {
-            console.log('voVolume: ', result);
-        });
-
-        this.app.state.captionsMuted.subscribe(result =>
-        {
-            console.log('captionsMuted: ', result);
-        });
-
-        // add a extra state property for storying the current scene. Whenever the scene is changed, this class
-        // will swap out the container attached to the stage
-        this.app.state.scene = new Property(null);
-        this.app.state.scene.subscribe(this.onChangeScene.bind(this));
-
-        // wait for the app to be ready, then set the new scene
-        this.app.state.ready.subscribe(() =>
-        {
-            this.app.state.scene.value = new TitleScene(this);
-
-        });
+                width,
+                height,
+                autoResize: true
+            });
+
+            document.getElementById('content').appendChild(this.pixi.canvas);
+
+            this.application = new Application(
+            {
+                // This feature list matches the Springroll states subscribed to below
+                // Note: features will only work if the Container environment also supports controls for that feature.
+                features:
+                {
+                    captions: true,
+                    sound: true,
+                    soundVolume: true,
+                    vo: true,
+                    voVolume: true,
+                    music: true,
+                    musicVolume: true,
+                    sfx: true,
+                    sfxVolume: true,
+                }
+            });
+
+            this.resize = this.resize.bind(this);
+            this.scaleManager = new SafeScaleManager({width, height, safeWidth: 1024, safeHeight: 660, callback: this.resize});
+
+            // Listen for container events from the application.
+            this.application.state.ready.subscribe(this.onApplicationReady.bind(this));
+            this.application.state.pause.subscribe(this.onApplicationPause.bind(this));
+
+            this.application.state.captionsMuted.subscribe(result =>
+            {
+                console.log('captionsMuted: ', result);
+            });
+
+            this.application.state.soundVolume.subscribe(this.onMainVolumeChange.bind(this));
+            this.application.state.voVolume.subscribe(result =>
+            {
+                console.log('voVolume: ', result);
+            });
+            this.application.state.musicVolume.subscribe(result =>
+            {
+                    console.log('musicVolume: ', result);
+            });
+            this.application.state.sfxVolume.subscribe((value) =>
+            {
+                //Check to see if sound exists in the cache before changing its volume
+                if(PIXI.Assets.cache.has('bounce'))
+                {
+                    PIXI.Assets.get('bounce').sound.volume = value;
+                }
+
+            });
+
+            // add a extra state property for storying the current scene. Whenever the scene is changed, this class
+            // will swap out the container attached to the stage
+            this.application.state.scene = new Property(null);
+            this.application.state.scene.subscribe(this.onChangeScene.bind(this));
+
+            // wait for the app to be ready, then set the new scene
+            this.application.state.ready.subscribe(() =>
+            {
+                this.application.state.scene.value = new TitleScene(this);
+            });
 
+            // Dispatch a ready event after initializing the app
+            this.emitter.emit('ready');
+        })();
     }
 
     run()
@@ -88,6 +96,23 @@ export class Game
         this.pixi.ticker.add(this.update.bind(this));
     }
 
+    onApplicationReady() 
+    {
+        console.log('The app is ready. All plugins have finished their setup and preload calls');
+    }
+
+    onApplicationPause(isPaused) 
+    {
+        console.log('Is the game paused?', isPaused);
+        this.isPaused = isPaused;
+    }
+
+    onMainVolumeChange(value) 
+    {
+        sound.volumeAll = value;
+    }
+
+
     onChangeScene(newScene, oldScene)
     {
         this.currentScene = null;
@@ -106,7 +131,7 @@ export class Game
     update(deltaTime)
     {
         // if the game is paused, or there isn't a scene, we can skip rendering/updates
-        if (this.isPaused || this.app.state.scene.value === null)
+        if (this.isPaused || this.application.state.scene.value === null)
         {
             return;
         }
@@ -123,7 +148,7 @@ export class Game
         // -- PIXI -- //
         const renderer = this.pixi.renderer;
 
-        renderer.view.style.width = `${GAMEPLAY.WIDTH * scaleRatio}px`;
-        renderer.view.style.height = `${GAMEPLAY.HEIGHT * scaleRatio}px`;
+        renderer.view.canvas.style.width = `${GAMEPLAY.WIDTH * scaleRatio}px`;
+        renderer.view.canvas.style.height = `${GAMEPLAY.HEIGHT * scaleRatio}px`;
     }
 }

src/gameobjects/ball.js

@@ -15,11 +15,12 @@ export class Ball extends PIXI.Sprite
         this.hitSound = PIXI.Assets.get('bounce');
     }
 
-    update(deltaTime)
+    update(ticker)
     {
-        this.velocity.y += GAMEPLAY.GRAVITY * deltaTime;
-        this.position.y += this.velocity.y * deltaTime;
-
+
+        this.velocity.y += GAMEPLAY.GRAVITY * ticker.deltaTime;
+        this.position.y += this.velocity.y * ticker.deltaTime;
+
         if(this.position.y > 680)
         {
             this.position.y = 679;

src/index.js

@@ -2,5 +2,9 @@ import './styles.css';
 import { Game } from './game';
 import { GAMEPLAY } from './constants';
 
+// eslint-disable-next-line no-unused-vars
 const template = new Game(GAMEPLAY.WIDTH, GAMEPLAY.HEIGHT);
-template.run();
+template.emitter.once('ready', () =>
+{
+    template.run();
+});

src/scenes/gameScene.js

@@ -11,8 +11,8 @@ export class GameScene extends PIXI.Container
 
     async preload()
     {
-        PIXI.Assets.add('ball', './assets/Ball.png');
-        PIXI.Assets.add('bounce', './assets/bounce.mp3');
+        PIXI.Assets.add({alias: 'ball', src: './assets/Ball.png'});
+        PIXI.Assets.add({alias: 'bounce', src: './assets/bounce.mp3'});
 
         await PIXI.Assets.load(['ball', 'bounce']);
     }
@@ -31,10 +31,10 @@ export class GameScene extends PIXI.Container
         this.addChild(this.ball2);
     }
 
-    update(deltaTime)
+    update(ticker)
     {
         // bounce the balls
-        this.ball.update(deltaTime);
-        this.ball2.update(deltaTime);
+        this.ball.update(ticker);
+        this.ball2.update(ticker);
     }
 }

src/scenes/title.js

@@ -13,7 +13,7 @@ export class TitleScene extends PIXI.Container
 
     async preload()
     {
-        PIXI.Assets.add('testBG', './assets/BG1320x780-2.png');
+        PIXI.Assets.add({alias: 'testBG', src: './assets/BG1320x780-2.png'});
 
         this.backgroundTexture = await Assets.load('testBG');
     }
@@ -24,9 +24,11 @@ export class TitleScene extends PIXI.Container
         this.addChild(scalerBackground);
 
         // a clickable label to cause a scene change
-        const text = new PIXI.Text('Click me!',
-        {
-            fill: 0xffffff
+        const text = new PIXI.Text({
+            text:'Click me!',
+            style:{
+                fill: 0xffffff
+            }
         });
         text.interactive = true;
         text.anchor.set(0.5, 0.5);
@@ -35,8 +37,7 @@ export class TitleScene extends PIXI.Container
         {
             // when the label is clicked, preload the game scene and then tell the app to switch scenes
             const nextScene = new GameScene(this.game);
-            this.game.app.state.scene.value = nextScene;
-
+            this.game.application.state.scene.value = nextScene;
         });
 
         this.game.scaleManager.addEntity(new Anchor(