Sound effects are crucial for adding feedback and immersion to your game. When bullets strike an asteroid or make it explode, playing the right sound effect can let the user know what’s happened even if they’re not looking at the correct part of the screen.

Task Definition

This task uses techniques that you learned when adding music to the game earlier in the project. You will use similar audio objects that you used then.

Basic Solution: A basic solution to this task will see your game playing the following sound effects when certain events occur;

  • player_fire_01.mp3: Whenever the player fires a bullet.
  • asteroid_hit_01.mp3: Whenever one of the player’s bullets hits an asteroid.
  • asteroid_death_01.mp3: Played whenever you do enough hits to an asteroid to destroy it.

Advanced Solution: A more advanced solution to this task will build upon the basic solution by loading multiple sound effects for a given event and picking one at random. It can get boring and repetetive if you play the same sound effect over and over for events that occur regularly, which is why we have provided multiple sounds for some events.

In the Asset Pack you will notice that there are 6 different sound files which you can pick from whenever the player shoots a bullet (player_fire_01.mp3, player_fire_02.mp3, …, player_fire_06.mp3).

Hints

Some of the functions you will need to make use of to preload and play audio effects are listed below;

game.load.audio([name], [path]): This preloads an audio file into your game in the same way that you preload images in earlier steps.

game.add.audio([name]): This will add an audio object to your game. An audio object is a sound effect that you can re-use over and over again. Initially, the audio object will not do anything (it won’t play the sound), but you can use the next method to make the sound effect play.

sfx.play(): Once you have created a sound effect object, you can call ‘play()’ on it to cause the sound effect to start playing.

Walkthrough

We’re going to focus on the advanced solution in this task breakdown, but feel free to use the basic solution if you would prefer. The basic solution is very similar to the music task - you just need to add audio objects when you create the game and use them later to play the sound effects.

1. Preload all of the audio files

You should be familiar with preloading assets now and this will require adding a bunch more lines to your preload method. Load the audio files that you intend to use in your solution using game.load.audio([name], [path]).

mainGameState.preload = function() {
    ...

    // Add this code to your game's preload function to load the sound effects
    game.load.audio('player_fire_01', 'assets/audio/player_fire_01.mp3');
    game.load.audio('player_fire_02', 'assets/audio/player_fire_02.mp3');
    game.load.audio('player_fire_03', 'assets/audio/player_fire_03.mp3');
    game.load.audio('player_fire_04', 'assets/audio/player_fire_04.mp3');
    game.load.audio('player_fire_05', 'assets/audio/player_fire_05.mp3');
    game.load.audio('player_fire_06', 'assets/audio/player_fire_06.mp3');
},

2. Create all of the audio objects

In your create method you should create one different audio object for each possible sound effect. Creating the audio object will not cause it to play immediately, but will give you the option of playing it later on.

As you create these audio objects, you should add them to an array, such as this.playerFireSfx that you can use later to pick one at random.

mainGameState.create = function() {
    ...
    
    // Add this to your create function to add the sound effect to your world
    // Note that it will not play until you tell it to play later
    this.playerFireSfx = [];
    this.playerFireSfx.push(game.add.audio("player_fire_01"));
    this.playerFireSfx.push(game.add.audio("player_fire_02"));
    this.playerFireSfx.push(game.add.audio("player_fire_03"));
    this.playerFireSfx.push(game.add.audio("player_fire_04"));
    this.playerFireSfx.push(game.add.audio("player_fire_05"));
    this.playerFireSfx.push(game.add.audio("player_fire_06"));
},

3. Play a random SFX

Now, when you come to play a sound effect after the player has fired a bullet, you should pick one of the sound effects at random from the array. For this, you can use game.rnd.integerInRange(min, max);. Note that ‘max’ should not be bigger than the last index in the array (ie. if the array has length of 5 then the last index is 4)!

mainGameState.spawnPlayerBullet = function() {
    ...
    var index = game.rnd.integerInRange(0, sfxArray.length - 1);
    sfxArray[index].play();
}

Extensions

Some ideas for how you might extend this feature are as follows;

  • Try to make a ‘playRandomSfxFromArray’ that you can use again and again to do this if you need too.
  • Given you know there are 6 audio files with the same name, you could load them using a for loop and string concatenation. That makes it much nicer if you one day have 20 sound effects!
  • Prevent the same sound effect from playing twice in a row.

Finished Solutions

Basic Solution

A simple version of the basic solution will load one of each possible sound effect during the ‘preload’ stage of your game and then play them whenever you fire a bullet or trigger another action.

mainGameState.preload = function() {
    ...
    game.load.audio('player_fire_01', 'assets/audio/player_fire_01.mp3');
}

mainGameState.create = function() {
    ...
    this.playerFireSfx = game.add.audio("player_fire_01");
}

mainGameState.spawnPlayerBullet = function() {
    ...
    this.playerFireSfx.play();
}

Advanced Solution

For a more advanced solution we will create an array of sound effects and pick one at random to play whenever the player fires a bullet.

mainGameState.preload = function() {
    ...

    // Add this code to your game's preload function to load the sound effects
    game.load.audio('player_fire_01', 'assets/audio/player_fire_01.mp3');
    game.load.audio('player_fire_02', 'assets/audio/player_fire_02.mp3');
    game.load.audio('player_fire_03', 'assets/audio/player_fire_03.mp3');
    game.load.audio('player_fire_04', 'assets/audio/player_fire_04.mp3');
    game.load.audio('player_fire_05', 'assets/audio/player_fire_05.mp3');
    game.load.audio('player_fire_06', 'assets/audio/player_fire_06.mp3');
}

mainGameState.create = function() {
    ... 

    // Add this to your create function to add the sound effect to your world
    // Note that it will not play until you tell it to play later
    this.playerFireSfx = [];
    this.playerFireSfx.push(game.add.audio("player_fire_01"));
    this.playerFireSfx.push(game.add.audio("player_fire_02"));
    this.playerFireSfx.push(game.add.audio("player_fire_03"));
    this.playerFireSfx.push(game.add.audio("player_fire_04"));
    this.playerFireSfx.push(game.add.audio("player_fire_05"));
    this.playerFireSfx.push(game.add.audio("player_fire_06"));
}
    
mainGameState.spawnPlayerBullet = function() {
    ...

    var index = game.rnd.integerInRange(0, this.playerFireSfx.length - 1);
    this.playerFireSfx[index].play();
}