Create music for each map! Try all maps! (#156)

Part of #23

index.html

@@ -122,6 +122,7 @@
                 <button id="debug-button" class="setting-btn">
                     Debug Mode
                 </button>
+                <button id="audio-button" class="setting-btn">Audio</button>
             </div>
             <div id="footer" class="bottom">
                 <div class="footer-head-info">

src/core/kaplay/sounds/index.js

@@ -0,0 +1,3 @@
+export const addSceneSounds = (sounds, k, map) => {
+    sounds.forEach((triggerSound) => triggerSound(k, map));
+};

src/scenes/arcade.js

@@ -2,6 +2,7 @@ import { k } from '../kplayCtx';
 import { initMap } from '../init/map.init';
 import gameObjects from '../gameObjects/map_arcade';
 import interactions from '../interactions/map_arcade';
+import sounds from '../sounds/map_arcade/';
 
 export async function arcade() {
     const objectConfig = {
@@ -21,5 +22,5 @@ export async function arcade() {
         k.vec2(29, 11)
     );
 
-    return [map, spawnpoint, gameObjects, interactions];
+    return [map, spawnpoint, gameObjects, interactions, sounds];
 }

src/scenes/bootstrap.js

@@ -1,5 +1,6 @@
 import { addGameObjects } from '../core/kaplay/gameObjects';
 import { attachInteractions } from '../core/kaplay/interactions';
+import { addSceneSounds } from '../core/kaplay/sounds';
 import { makePlayer } from '../factories/player.factory';
 import { k } from '../kplayCtx';
 import { getGameState } from '../utils/gameState';
@@ -9,7 +10,8 @@ export async function bootstrap(bootMapCb, mapArgs) {
     const gameState = getGameState();
     const player = makePlayer(gameState.player);
 
-    const [map, spawnpoint, gameObjects, interactions] = await bootMapCb();
+    const [map, spawnpoint, gameObjects, interactions, sounds] =
+        await bootMapCb();
 
     player.pos =
         (mapArgs?.enter_tag && spawnpoint[mapArgs?.enter_tag]) ||
@@ -22,4 +24,5 @@ export async function bootstrap(bootMapCb, mapArgs) {
     addPlayerControls(player);
     addGameObjects(gameObjects, map, spawnpoint).forEach((obj) => map.add(obj));
     attachInteractions(interactions, 'player');
+    addSceneSounds(sounds, k, map);
 }

src/scenes/campus_house_1.js

@@ -1,6 +1,7 @@
 import gameObjects from '../gameObjects/map_campus_house_1';
 import { initMap } from '../init/map.init';
 import interactions from '../interactions/map_campus_house_1';
+import sounds from '../sounds/map_campus_house_1';
 
 export async function campusHouse1() {
     const objectConfig = {
@@ -18,5 +19,5 @@ export async function campusHouse1() {
         './maps/map_campus_house_1.json'
     );
 
-    return [map, spawnpoint, gameObjects, interactions];
+    return [map, spawnpoint, gameObjects, interactions, sounds];
 }

src/scenes/city.js

@@ -1,6 +1,7 @@
 import gameObjects from '../gameObjects/map_city';
-import { initMap } from '../init/map.init';
 import interactions from '../interactions/map_city';
+import sounds from '../sounds/map_city';
+import { initMap } from '../init/map.init';
 
 export async function city() {
     const objectConfig = {
@@ -19,5 +20,5 @@ export async function city() {
         './maps/map_city.json'
     );
 
-    return [map, spawnpoint, gameObjects, interactions];
+    return [map, spawnpoint, gameObjects, interactions, sounds];
 }

src/scenes/forest.js

@@ -1,6 +1,7 @@
 import gameObjects from '../gameObjects/map_forest';
 import { initMap } from '../init/map.init';
 import interactions from '../interactions/map_forest';
+import sounds from '../sounds/map_forest';
 
 export async function forest() {
     const objectConfig = {
@@ -18,5 +19,5 @@ export async function forest() {
         './maps/map_forest.json'
     );
 
-    return [map, spawnpoint, gameObjects, interactions];
+    return [map, spawnpoint, gameObjects, interactions, sounds];
 }

src/scenes/forest_junction.js

@@ -1,6 +1,7 @@
 import gameObjects from '../gameObjects/map_forest_junction';
 import { initMap } from '../init/map.init';
 import interactions from '../interactions/map_forest_junction';
+import sounds from '../sounds/map_forest_junction';
 
 export async function forestJunction() {
     const objectConfig = {
@@ -18,5 +19,5 @@ export async function forestJunction() {
         './maps/map_forest_junction.json'
     );
 
-    return [map, spawnpoint, gameObjects, interactions];
+    return [map, spawnpoint, gameObjects, interactions, sounds];
 }

src/scenes/start.js

@@ -2,6 +2,7 @@ import { initMap } from '../init/map.init';
 import { k } from '../kplayCtx';
 import gameObjects from '../gameObjects/map_start';
 import interactions from '../interactions/map_start';
+import sounds from '../sounds/map_start';
 
 export async function start() {
     const objectConfig = {
@@ -21,5 +22,5 @@ export async function start() {
         k.vec2(0, 11)
     );
 
-    return [map, spawnpoint, gameObjects, interactions];
+    return [map, spawnpoint, gameObjects, interactions, sounds];
 }

src/sounds/map_arcade/index.js

@@ -0,0 +1,5 @@
+import { music } from './music.sounds';
+
+const sounds = [music];
+
+export default sounds;

src/sounds/map_arcade/music.sounds.js

@@ -0,0 +1,15 @@
+export const music = (k, map) => {
+    if (!k.getSound('arcade')) {
+        k.loadMusic('arcade', './assets/sounds/arcade.mp3');
+    }
+
+    const music = k.play('arcade');
+
+    music.onEnd(() => {
+        music.play();
+    });
+
+    k.onSceneLeave(() => {
+        music.stop();
+    });
+};

src/sounds/map_campus_house_1/index.js

@@ -0,0 +1,5 @@
+import { music } from './music.sounds';
+
+const sounds = [music];
+
+export default sounds;

src/sounds/map_campus_house_1/music.sounds.js

@@ -0,0 +1,15 @@
+export const music = (k, map) => {
+    if (!k.getSound('campus_house_1')) {
+        k.loadMusic('campus_house_1', './assets/sounds/campus_house_1.mp3');
+    }
+
+    const music = k.play('campus_house_1');
+
+    music.onEnd(() => {
+        music.play();
+    });
+
+    k.onSceneLeave(() => {
+        music.stop();
+    });
+};

src/sounds/map_city/index.js

@@ -0,0 +1,5 @@
+import { music } from './music.sounds';
+
+const sounds = [music];
+
+export default sounds;

src/sounds/map_city/music.sounds.js

@@ -0,0 +1,17 @@
+export const music = (k, map) => {
+    if (!k.getSound('city')) {
+        k.loadMusic('city', './assets/sounds/city.mp3');
+    }
+    const music = k.play('city', {
+        loop: true,
+        volume: 0.25,
+    });
+
+    music.onEnd(() => {
+        music.play();
+    });
+
+    k.onSceneLeave(() => {
+        music.stop();
+    });
+};

src/sounds/map_forest/index.js

@@ -0,0 +1,5 @@
+import { music } from './music.sounds';
+
+const sounds = [music];
+
+export default sounds;

src/sounds/map_forest/music.sounds.js

@@ -0,0 +1,17 @@
+export const music = (k, map) => {
+    if (!k.getSound('forest')) {
+        k.loadMusic('forest', './assets/sounds/forest.mp3');
+    }
+
+    const music = k.play('forest', {
+        loop: true,
+    });
+
+    music.onEnd(() => {
+        music.play();
+    });
+
+    k.onSceneLeave(() => {
+        music.stop();
+    });
+};

src/sounds/map_forest_junction/index.js

@@ -0,0 +1,5 @@
+import { music } from './music.sounds';
+
+const sounds = [music];
+
+export default sounds;

src/sounds/map_forest_junction/music.sounds.js

@@ -0,0 +1,18 @@
+export const music = (k, map) => {
+    if (!k.getSound('forest_junction')) {
+        k.loadMusic('forest_junction', './assets/sounds/forest_junction.mp3');
+    }
+
+    const music = k.play('forest_junction', {
+        loop: true,
+        volume: 0.1,
+    });
+
+    music.onEnd(() => {
+        music.play();
+    });
+
+    k.onSceneLeave(() => {
+        music.stop();
+    });
+};

src/sounds/map_start/index.js

@@ -0,0 +1,5 @@
+import { music } from './music.sounds';
+
+const sounds = [music];
+
+export default sounds;

src/sounds/map_start/music.sounds.js

@@ -0,0 +1,18 @@
+export const music = (k, map) => {
+    if (!k.getSound('start')) {
+        k.loadMusic('start', './assets/sounds/start.mp3');
+    }
+
+    const music = k.play('start', {
+        loop: true,
+        volume: 0.5,
+    });
+
+    music.onEnd(() => {
+        music.play();
+    });
+
+    k.onSceneLeave(() => {
+        music.stop();
+    });
+};

src/utils/settings.js

@@ -105,3 +105,17 @@ const toggleDebugMode = () => {
 
 const debugButton = document.getElementById('debug-button');
 debugButton.addEventListener('click', toggleDebugMode);
+
+// Audio related
+const toggleAudio = () => {
+    if (k.audioCtx.state.includes('running')) {
+        k.audioCtx.suspend();
+        audioButton.innerHTML = 'No Audio';
+    } else {
+        k.audioCtx.resume();
+        audioButton.innerHTML = 'Audio';
+    }
+};
+
+const audioButton = document.getElementById('audio-button');
+audioButton.addEventListener('click', toggleAudio);