Adding Sound to Your Phaser3 Game

Games are best with great sound. Some would say the best games are mostly because of the sound. Thankfully it is pretty easy to add sounds to Phaser3 games.

But First …

Move Downloaded Sound Files Into assets/snd Directory

Make sure you are in your game directory (and not your codebook, for example).

If you don’t already have one add an assets directory to your main project. Do this from the terminal command line to practice your terminal skills.

Open the VSCode terminal using the Terminal menu or ctrl + ` shortcut.

Make a new assets directory. What’s an asset?]

mkdir assets

Now let’s make a snd subdirectory for the sounds.

mkdir assets/snd

TODO move all the files from Downloads into assets/snd

Load the Sound Files in the preload() Method

  

Create Sound Objects in the create() Method

Make some space near the top of the create() method.

Add one this.sound.add for each sound. Keep in mind that you can set the volume and whether or not it should loop when you actually play it later.

  let bgmusic = this.sound.add('bgmusic')
  let pickup = this.sound.add('pickup')
  let over = this.sound.add('over')
  let jump = this.sound.add('jump')
  let bump = this.sound.add('bump')

Your names will obviously be different.

Play the Sounds When Needed

Usually you will be playing the sounds from within the create() method. If not, you will need to make the sound object variable a global by removing the let and adding a let to the top of the file.

Playing Background Music

Background music can be started right away and we will set the volume and make it loop.

  bgmusic.play({
    volume: .3,
    loop: true
  })

TODO