I'm completely new to Phaser and I've encountered an issue with adding a start menu to my main platformer scene. The gameplay scene plays music seamlessly, but when I introduce a start menu, things start to go wrong. Here's a snippet of the menu code:
public create(): void {
super.create();
this.newGameText = this.add
.text(+this.game.config.width / 2, +this.game.config.height / 2 - 72, "New game", { fontSize: "72px", color: "#fff" })
.setOrigin(0.5, 0.5)
.setInteractive();
this.exitGameText = this.add
.text(+this.game.config.width / 2, +this.game.config.height / 2 + 72, "Exit game", { fontSize: "72px", color: "#fff" })
.setOrigin(0.5, 0.5)
.setInteractive();
this.music = this.sound.add(Keys.Musics.MainMenu, { loop: true });
this.music.play();
}
public update(time: number, delta: number): void {
super.update(time, delta);
this.newGameText.on(Keys.MouseEvents.PointerDown, () => this.startGame());
this.exitGameText.on(Keys.MouseEvents.PointerDown, () => this.exitGame());
}
private startGame(): void {
this.scene.start(Keys.Scenes.Game);
}
private exitGame(): void {
this.game.destroy(true, true);
}
The issue arises when the game scene starts playing its own music within the create function, like this:
this.sound.play(Keys.Musics.Level1, {
loop: true,
volume: 0.3,
});
Upon clicking "New game," the new scene loads but the sound quality is distorted. Adding this.music.destroy() in the startGame() function of the main menu scene resolves the sound issue, but leads to the error:
phaser.js:107083 Uncaught TypeError: Cannot read properties of null (reading 'disconnect')
at WebAudioSound.destroy (phaser.js:107083:1)
The error occurs in the following section of the source code:
https://i.sstatic.net/OBK3Z.png
I'm wondering what I might be doing wrong in this scenario. Any insights or suggestions would be greatly appreciated.
You can access the source code here.
Additionally, removing the music from the main menu did not resolve the issue.