CGPROD-3888 Add Voice Over to Gel Buttons

src/core/layout/gel-button.js

@@ -51,6 +51,7 @@ export class GelButton extends Phaser.GameObjects.Container {
 
 		this.setHitArea(metrics);
 		this.setClickSound(this.config.clickSound);
+		this.setHoverSound(this.config.hoverSound);
 		this.setupMouseEvents(config, scene);
 	}
 
@@ -78,10 +79,15 @@ export class GelButton extends Phaser.GameObjects.Container {
 		publish(config, { screen })();
 	}
 
+	onPointerOver() {
+		this.sprite.texture.frames["1"] && this.sprite.setFrame(1);
+		this._click.once(Phaser.Sound.Events.PAUSE, this._click.resume).play();
+	}
+
 	setupMouseEvents(config, screen) {
 		this.on("pointerup", () => this.onPointerUp(config, screen));
 		this.on("pointerout", () => this.sprite.setFrame(0));
-		this.on("pointerover", () => this.sprite.texture.frames["1"] && this.sprite.setFrame(1));
+		this.on("pointerover", () => this.onPointerOver());
 	}
 
 	setHitArea(metrics) {
@@ -117,6 +123,11 @@ export class GelButton extends Phaser.GameObjects.Container {
 		this._click = this.scene.sound.get(key) ? this.scene.sound.get(key) : this.scene.sound.add(key);
 	}
 
+	setHoverSound(key) {
+		this.config.hoverSound = key;
+		this._hover = this.scene.sound.get(key) ? this.scene.sound.get(key) : this.scene.sound.add(key);
+	}
+
 	setImage(key) {
 		this.config.key = key;
 		this.sprite.setTexture(assetPath({ ...this.config, key, isMobile: this.isMobile }));

test/core/layout/gel-button.test.js

@@ -251,6 +251,17 @@ describe("Gel Button", () => {
 			expect(mockSound.play).toHaveBeenCalled();
 		});
 
+		test("pointerover calls play on button hover sound after it has been changed", () => {
+			const mockSound = { play: jest.fn(), once: jest.fn(() => mockSound) };
+			mockScene.sound.add = jest.fn(() => mockSound);
+
+			const gelButton = new GelButton(mockScene, mockX, mockY, mockConfig);
+			gelButton.setHoverSound("test-key");
+
+			gelButton.onPointerOver(mockConfig, mockScene);
+			expect(mockSound.play).toHaveBeenCalled();
+		});
+
 		test("pointerup function calls once on button click to prevent pausing", () => {
 			const gelButton = new GelButton(mockScene, mockX, mockY, mockConfig);
 			gelButton.onPointerUp(mockConfig, mockScene);
@@ -298,6 +309,26 @@ describe("Gel Button", () => {
 		});
 	});
 
+	describe("setHoverSound function", () => {
+		test("sets the correct sound key in button config", () => {
+			const gelButton = new GelButton(mockScene, mockX, mockY, mockConfig);
+			const mockSound = { testProp: "testValue" };
+			(mockScene.sound.add = jest.fn(() => mockSound)), gelButton.setHoverSound("test-key");
+
+			expect(gelButton.config.hoverSound).toBe("test-key");
+			expect(gelButton._hover).toBe(mockSound);
+		});
+
+		test("gets the sound from sound manager when it already exists", () => {
+			const gelButton = new GelButton(mockScene, mockX, mockY, mockConfig);
+			const mockSound = { testProp: "testValue" };
+			(mockScene.sound.get = jest.fn(() => mockSound)), gelButton.setHoverSound("test-key");
+
+			expect(gelButton.config.hoverSound).toBe("test-key");
+			expect(gelButton._hover).toBe(mockSound);
+		});
+	});
+
 	describe("Set Image function", () => {
 		test("sets the correct key", () => {
 			const gelButton = new GelButton(mockScene, mockX, mockY, mockConfig);

themes/default/character-select/config.json5

@@ -1,4 +1,4 @@
-{
+{ 
     columns: 3, // Number of choices to show horizontally per page. Can be 1 - 4.
     rows: 2, // Number of choice rows to show per page. Can be either 1 or 2. When columns is 4 this is fixed to 1 row.
     ease: "Cubic.easeInOut", // Pagination transition type
@@ -27,7 +27,7 @@
             fontSize: "26px",
         },
         backgroundKey: "character-select.subtitle",
-        icon : {
+        icon: {
             key: "character-select.subtitle-icon",
         },
     },

themes/default/home/assets.json

@@ -16,6 +16,56 @@
                 "type": "audio",
                 "key": "backgroundMusic",
                 "url": "shared/background-music.mp4"
+            },
+            {
+                "type": "audio",
+                "key": "playSound",
+                "url": "shared/play.mp4"
+            },
+            {
+                "type": "audio",
+                "key": "pauseSound",
+                "url": "shared/pause.mp4"
+            },
+            {
+                "type": "audio",
+                "key": "settingsSound",
+                "url": "shared/settings.mp4"
+            },
+            {
+                "type": "audio",
+                "key": "howPlaySound",
+                "url": "shared/how_play.mp4"
+            },
+            {
+                "type": "audio",
+                "key": "exitSound",
+                "url": "shared/exit.mp4"
+            },
+            {
+                "type": "audio",
+                "key": "continueSound",
+                "url": "shared/continue.mp4"
+            },
+            {
+                "type": "audio",
+                "key": "skipSound",
+                "url": "shared/skip.mp4"
+            },
+            {
+                "type": "audio",
+                "key": "homeSound",
+                "url": "shared/home.mp4"
+            },
+            {
+                "type": "audio",
+                "key": "nextSound",
+                "url": "shared/next.mp4"
+            },
+            {
+                "type": "audio",
+                "key": "backSound",
+                "url": "shared/back.mp4"
             }
         ]
     }

themes/default/home/config.json5

@@ -1,6 +1,12 @@
 {
     music: "home.backgroundMusic",
-    "button-overrides": { play: { shiftY: 80 } }, //Use to shift buttons out of the way of logos etc.
+    "button-overrides": {
+        play: { shiftY: 80, clickSound: "home.playSound", hoverSound: "home.playSound" }, //Use to shift buttons out of the way of logos etc and give buttons audio.
+        settings: { clickSound: "home.settingsSound" },
+        howToPlay: { clickSound: "home.howPlaySound" },
+        exit: { clickSound: "home.exitSound" },
+    },
+
     background: {
         //Add, background images / animations / particle systems. More examples in /debug/examples
         items: [