add background music, start work on music manager but there is lots o…

…f room for improvement

README.md

@@ -8,6 +8,8 @@ This game is in active development. A beta version can be found on [Github](http
 
 Most assets used so far have been generated by DALE-3 w/ ChatGPT and Microsoft Designer.
 
+### Images / Backgrounds
+
 Some assets were from https://opengameart.org and https://itch.io and original files are included.
 
 Font from https://managore.itch.io/m6x11
@@ -19,7 +21,14 @@ Portal Images were cropped + resized using these commands (for helpful reference
 - `mogrify -crop 280x240+0+0 -gravity center -extent 280x240 -background none -alpha background -resize 50% *.png`
 - `montage *.png -tile 8x8 -geometry 140x120+0+0 -background none spritesheet.png`
 
+### SFX
+
 Some sound effects https://mixkit.co/
 
 - footsteps
 - door open
+
+### Music
+
+- [After The Disaster - Composed by One Man Symphony](https://onemansymphony.bandcamp.com/album/after-the-disaster-free) - onemansymphony.bandcamp.com
+- [A New Day's Hurry - Composed by One Man Symphony](https://onemansymphony.bandcamp.com/album/a-new-days-hurry-free) - onemansymphony.bandcamp.com

src/classes/Music.ts

@@ -0,0 +1,90 @@
+import { Scene, Sound, Tweens } from 'phaser';
+
+export const INTRO_MUSIC = 'music-intro';
+export const GAME_MUSIC = 'music-main';
+
+export let Music: MusicManager;
+export function createMusicInstance(sound: Sound.BaseSoundManager) {
+  Music = new MusicManager(sound);
+}
+
+type MusicKey = typeof INTRO_MUSIC | typeof GAME_MUSIC;
+
+class MusicManager {
+  sound: Sound.BaseSoundManager;
+  music?: Sound.BaseSound;
+  volume = 0.5;
+
+  scene: Scene;
+
+  constructor(sound: Sound.BaseSoundManager) {
+    this.sound = sound;
+
+    sound.on('mute', (_soundManager: unknown, muted: boolean) => {
+      if (this.music) {
+        if (muted) fadeOutMusic(this.scene, this.music);
+        else fadeInMusic(this.scene, this.music, this.volume);
+      }
+    });
+
+    sound.once('unlocked', () => {
+      if (this.music && !this.music.isPlaying) {
+        fadeInMusic(this.scene, this.music, this.volume);
+      }
+    });
+  }
+
+  start(music: MusicKey, volume?: number) {
+    if (this.music?.key === music && this.music?.isPlaying) return;
+
+    this.stop();
+    this.volume = volume || this.volume;
+
+    this.music = this.sound.get(music) || this.sound.add(music, { loop: true, volume: this.volume });
+    if (!this.sound.mute && !this.sound.locked) {
+      fadeInMusic(this.scene, this.music, this.volume);
+    }
+  }
+
+  stop() {
+    if (this.music) fadeOutMusic(this.scene, this.music);
+    this.music = undefined;
+  }
+
+  setScene(scene: Scene) {
+    this.scene = scene;
+  }
+}
+
+function fadeInMusic(
+  scene: Scene | undefined,
+  sound: Phaser.Sound.BaseSound,
+  volume: number = 0.5,
+  duration: number = 500
+) {
+  if (!scene) return;
+
+  if (sound && !sound.pendingRemove) {
+    sound.play({ volume: 0 });
+    scene.tweens.getTweensOf(sound).forEach((tween: Tweens.Tween) => tween.stop());
+    scene.tweens.add({
+      targets: sound,
+      volume,
+      duration,
+    });
+  }
+}
+
+function fadeOutMusic(scene: Scene | undefined, sound: Phaser.Sound.BaseSound, duration: number = 500) {
+  if (scene && sound.isPlaying) {
+    scene.tweens.getTweensOf(sound).forEach((tween: Tweens.Tween) => tween.stop());
+    scene.tweens.add({
+      targets: sound,
+      volume: 0,
+      duration,
+      onComplete: () => sound.stop(),
+    });
+  } else {
+    sound.stop();
+  }
+}

src/data/saves.ts

@@ -53,7 +53,7 @@ const defaultSave: SaveData = {
     zoomed: true,
     useShader: true,
     time: Date.now(),
-    muted: true,
+    muted: false,
   },
 };
 

src/scenes/Boot.ts

@@ -1,5 +1,6 @@
 import { Scene } from 'phaser';
 
+import { createMusicInstance } from '../classes/Music';
 import { Config } from '../config';
 import { saveKey } from '../data/saves';
 import { fontStyle } from '../utils/fonts';
@@ -20,6 +21,9 @@ export class Boot extends Scene {
 
   init() {
     this.add.image(0, 0, 'splash').setOrigin(0).setDisplaySize(Config.width, Config.height);
+
+    this.sound.pauseOnBlur = false;
+    createMusicInstance(this.sound);
   }
 
   preload() {

src/scenes/Game.ts

@@ -13,6 +13,7 @@ import { Prop } from '../classes/Environment/Prop';
 import { Slope } from '../classes/Environment/Slope';
 import { Walls } from '../classes/Environment/Walls';
 import { Warp } from '../classes/Environment/Warp';
+import { GAME_MUSIC, Music } from '../classes/Music';
 import { Player } from '../classes/Player/Player';
 import { Gamepad } from '../classes/UI/Gamepad';
 import { IconButton } from '../classes/UI/IconButton';
@@ -56,6 +57,9 @@ export class Game extends Scene {
     // skip creation if already restarting the scene (due to config changes)
     if (!this.shouldInit) return;
 
+    Music.setScene(this);
+    Music.start(GAME_MUSIC);
+
     const startTime = performance.now();
 
     // fade in on start
@@ -192,7 +196,9 @@ export class Game extends Scene {
 
         total++;
 
+        /* @ts-ignore */
         this.objectBounds.setTo(child.x, child.y, child.width || 1, child.height || 1);
+
         if (Geom.Intersects.RectangleToRectangle(this.cameraBounds, this.objectBounds)) {
           if (child instanceof Warp) child.updateLocked();
           else child.setVisible(true);

src/scenes/Intro.ts

@@ -1,5 +1,6 @@
 import { GameObjects, Scene } from 'phaser';
 
+import { INTRO_MUSIC, Music } from '../classes/Music';
 import { Config } from '../config';
 import { trainIntro } from '../data/cutscene';
 import { SaveType, saves } from '../data/saves';
@@ -20,6 +21,8 @@ export function preloadIntro(scene: Scene) {
   scene.load.image('player_portrait', 'characters/player_portrait.png');
 
   scene.load.svg('chevron-down', 'icons/chevron-down.svg', { width: 64, height: 64 });
+
+  scene.load.audio(INTRO_MUSIC, "sounds/music/A New Day's Hurry.m4a");
 }
 
 export class Intro extends Scene {
@@ -58,6 +61,9 @@ export class Intro extends Scene {
   }
 
   create() {
+    Music.setScene(this);
+    Music.start(INTRO_MUSIC);
+
     const scale = Config.zoomed ? 0.75 : 1;
 
     fadeIn(this, 350);

src/scenes/Preloader.ts

@@ -1,5 +1,6 @@
 import { GameObjects, Scene } from 'phaser';
 
+import { GAME_MUSIC } from '../classes/Music';
 import { Config } from '../config';
 import { saveKey } from '../data/saves';
 import { fadeOut } from '../utils/util';
@@ -156,6 +157,9 @@ export class Preloader extends Scene {
     this.load.audio('ladder', 'sounds/sfx/ladder.mp3');
     this.load.audio('door', 'sounds/sfx/door.mp3');
 
+    // music
+    this.load.audio(GAME_MUSIC, 'sounds/music/Night Time Scavenge II.m4a');
+
     // optionally preload intro
     if (!localStorage.getItem(saveKey)) {
       preloadIntro(this);