Enchant.js Guide

by Patrick Casao, Cal Poly


09 Sound

The codeleap for this section may be accessed here. In this section, we will discuss Sounds and their application. Following this explanation, we will implement background music and sound effects.

Subsections
01 A Word on Sound
02 Background Music
03 Sound Effects


09.01 - A Word on Sound

The use of sounds in a game can really help enrich the player’s experience. They can be added as background music and sound effects like player reactions or general game sounds. Sound can really help get the player into the game, and might even have the player seeking the next in-game goal just to get the satisfaction of a rewarding sound effect.

So far, the most universal format for sounds that I’ve found is the OGG format. In my experience, when MP3s don’t work, they prevent the entire game from loading. WAV files also work across browsers, but if a WAV file is long enough, it ends up taking up too much space.

If you need to convert sound files across different formats, I highly recommend Audacity.

You can download it from here.

In order to use sounds, we must first add them to the preloader. Once they’ve been preloaded, we can reference them by name in the game’s assets.
  i.e.) game.assets[‘SOME_FILE.ogg’].play() will play the preloaded sound file SOME_FILE.ogg


09.02 - Background Music

Background music can really contribute to a game’s mood. It can raise or alleviate tension, build up excitement, or even put the player in a state of panic. We will add a longer sound file to the preloader and use it as background music that loops as soon as it’s done playing.

Let’s implement a Sound in our example code. (Once again, you can access it from here.)

CODE EXAMPLE: Adding Background Music

First, let's add a music file to the preloader. Under 09.2 Preloader, add it to the preloader like so:

game.preload('icon0.png', 'bg.png', 'space3.png', 'diamond.png', 'unreal.ogg');		
	
Now that it's been preloaded, let's actually play some music. Under 09.2 Play BGM add this:

game.assets['unreal.ogg'].play();		
	
This should start the music playing as soon as the game is initialized. Confirm that the background music works by clicking on the RUN button.


09.03 - Sound Effects

We will implement sound effects by preloading one, then calling the play() method from within a Gem sprite class when the player collides with a Gem sprite. In our example, the player can be moved around by clicking on a destination for the player sprite to move to.

CODE EXAMPLE: Adding Sound Effects

Again, we'll start by preloading the sound file. Under 09.2 Preloader, add it to the preloader like so:
 
game.preload('icon0.png', 'bg.png', 'space3.png', 'diamond.png', 'unreal.ogg', 'ping.wav');
	
In the Gem class's onenterframe function, under 09.3 Add Sound Effect add:
 
game.assets['ping.wav'].play();
	
This should play the sound effect every time the player "collects" a Gem. Confirm that the sound effect works by clicking on the RUN button and testing it out.

In the next section, I will describe how I combined elements from previous sections in order to make a sidescrolling game.