Merge pull request #108 from SpringRoll/feature/187532394-springroll-listeners

Feature/187532394 - Pixi template Springroll listeners

Author: jeremymccurdy-redspace

src/game.js

@@ -14,80 +14,75 @@ export class Game
         this.height = height;
 
         this.pixi = new PIXI.Application();
-        (async () => {
-            await this.pixi.init({
+        (async () => 
+        {
+            await this.pixi.init(
+            {
                 width,
                 height,
                 autoResize: true
             });
 
             document.getElementById('content').appendChild(this.pixi.canvas);
 
-            this.app = new Application(
+            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:
                 {
-                    // 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:
-                    {
-                        sfx: true,
-                        sound: true,
-                        music: true,
-                        vo: true,
-                        sfxVolume: true,
-                        soundVolume: true,
-                        musicVolume: true,
-                        voVolume: true,
-                        captionsMuted: true,
-                    }
-                });
+                    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});
-    
-            // Subscribe to required springroll States.
-            this.app.state.pause.subscribe((value) =>
+            
+            // 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 =>
             {
-                this.isPaused = value;
+                console.log('captionsMuted: ', result);
             });
 
-            this.app.state.soundVolume.subscribe((value) =>
+            this.application.state.soundVolume.subscribe(this.onMainVolumeChange.bind(this));
+            this.application.state.voVolume.subscribe(result =>
             {
-                sound.volumeAll = value;
+                console.log('voVolume: ', result);
             });
-    
-            this.app.state.sfxVolume.subscribe((value) =>
+            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')){
+                if(PIXI.Assets.cache.has('bounce'))
+                {
                     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));
+            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.app.state.ready.subscribe(() =>
+            this.application.state.ready.subscribe(() =>
             {
-                this.app.state.scene.value = new TitleScene(this);
+                this.application.state.scene.value = new TitleScene(this);
             });
 
             // Dispatch a ready event after initializing the app
@@ -101,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;
@@ -119,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;
         }

src/scenes/title.js

@@ -37,7 +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(