Ch016 - Polish: Adding our Own Sound Effects

Polish: Adding our Own Sound Effects

Adding our own sound effects can be a great way to bring our own creativity to a game that we are making or altering. There are lots of fun ways to create or even record your own sounds.

Your game may already play a sound when we reach a coin or hit an enemy. So in this quick guide we first over how to replace these sounds with your own new sounds and then look at how to create a new sound to the game when you reach a new level.

Swapping over existing Sounds

You can create your own sounds in many ways. One good online tool is ChipTone - http://sfbgames.com/chiptone/

Play around and when you have a sound you like click on SAVE WAV to save the sound to your computer

Now upload your sound to the assets section of your Glitch remix project you can find the assets link on the left of your screen, after clicking on that look for the little upload button on the main part of the page.

You can now click on the image of the uploaded sound and click on the Copy Button this will copy the location of the image ready for you to paste it later.

Now return to your game code and change over the URL of the coin sound in the preload section.

Going over the code

The code for a minimal example of how to add your own sounds to the game mechanic is shown here - https://jamm-labs.github.io/ggcp/polish-add-your-own-sounds/game.js

First we need to add a new variable into our list of game variables at the start of our code before any of the functions.

  var jumpNoise;

Then let’s load a jump sound into the game in the Playstate.preload function of our main game.

    game.load.audio("jump", "https://cdn.glitch.com/80a5a58a-af34-4348-81df-7c05260f8ceb%2Fjump.wav");

If you want to add your own sound then be sure to replace the link in this code with your own link from your Assets section.

Next let’s add this sound to the game, ready to be used. Add the following anywhere in the Playstate.create function.

  jumpNoise = game.add.audio("jump");

Finally, we need to find where to trigger this jump sound to play. In this case, we want it to be in our update function in the if / conditional statement which checks to see if the player is pressing the jump key and if they are then increases the velocity to ping the player up in the air. Find the following code in Playstate.update function and alter it by adding in the jumpNoise.play() code as shown below.

  if (game.input.keyboard.isDown(Phaser.Keyboard.UP) && player.body.touching.down === true) {
     player.body.velocity.y = -300
     jumpNoise.play()
  }