Just like images or sprites, sound also plays a vital role in games. The right background music can set the mood for the game. Similarly, including sound effects for things like a crash or gunfire will make the game much more interesting.

You can also add scenes to your game to make it more organised. For example, instead of directly showing the game screen to users, you can first show them the home screen where they can choose a difficulty level for the game or increase/decrease the volume of background music. 

In this tutorial, you will learn how to add sounds and scenes to your games using Crafty.

Adding Sounds

The process for adding sounds to a game is similar to adding sprite sheets. You need to create an asset object and then supply an array of audio files for different sound effects. Crafty will then load the first file that is supported by the browser. Here is an example:

var game_assets = {
  "audio": {
    "back_music": ["back_music.wav", "back_music.ogg", "back_music.mp3"],
    "gun_shot": ["gun_shot.wav", "gun_shot.ogg", "gun_shot.mp3"]
  }
};

Crafty.load(game_assets);

Once you have added the audio files, you can play them using Crafty.audio.play(String id, Number repeatCount, Number volume). The first parameter is the Id of the file we want to play. To play the background music, you can pass "back_music" as Id. 

You can control how many times an audio file is played using the second parameter. When this parameter is not specified, the file is played only once. You would probably want to continuously keep playing some sounds. One such example is the background music of a game. This can be achieved by setting the second parameter to -1. 

The third parameter controls the volume of the given audio file. It can have any value between 0.0 and 1.0. This is the code to play background music:

Crafty.audio.play("back_music", -1, 0.5);

You can also play audio files based on some events like collision between entities or a key press.

walking_hero.bind('KeyDown', function(evt) {
  if (evt.key == Crafty.keys.UP_ARROW) {
    walking_hero.animate("jumping", 1);
    Crafty.audio.play("gun_shot", 1);
  }
});

Keep in mind that you need to add the Keyboard component to your hero before it can detect the KeyDown event. The above code binds the KeyDown event to the hero and checks if the key was pressed using evt.key. If the Up Arrow key is pressed, a jumping animation is played for the hero once. A gunshot sound is played as well.

Try pressing the Up Arrow key in the following demo and you will see it all in action. I have commented out the line that plays the background music, but you can just uncomment it while playing with the demo. 

The background music in the demo has been created by Rosalila, and the gunshot sound is by Luke.RUSTLTD.

There are a lot of other methods that you can use to manipulate the sounds played by Crafty. You can mute and unmute all the audio files that are being played in the game by using .mute() and .unmute() respectively. You can also pause and resume audio files based on their Id by using the .pause(Id) and .unpause(Id) method.

There is a limit on the maximum number of sounds that can be played simultaneously in Crafty. The default limit for this value is 7. Each of the different sounds playing simultaneously is a channel. However, you can set your own value by using Crafty.audio.setChannels(Number n). You can also check if a given audio file is currently playing on at least one channel using the .isPlaying(string ID) method. It will return a Boolean indicating if the audio is playing or not.

Scenes in Crafty

The game screen is generally not the first thing that you see in a game. Usually, the first screen that you see is the loading screen or the main menu screen. Then, once you have set different options like audio or difficulty level, you can click the play button to move on to the actual game screen. Finally, when the game is over, you can show users a game over screen.

These different game screens or scenes make your game more organized. A scene in Crafty can be created by calling Crafty.defineScene(String sceneName, Function init[, Function uninit]). 

The first parameter is the name of the scene. The second parameter is the initialization function, which sets things up when the scene is played. The third parameter is an optional function which is executed before the next scene is played and after all the entities with 2D component in the current scene have been destroyed.

Here is the code for defining the loading screen:

Crafty.defineScene("loading_screen", function() {
    
  Crafty.background("orange");
  
  var loadingText = Crafty.e("2D, Canvas, Text, Keyboard")
    .attr({ x: 140, y: 120 })
    .text("Scenes Demo")
    .textFont({ size: '50px', weight: 'bold' })
    .textColor("white");

  loadingText.bind('KeyDown', function(evt) {
    Crafty.enterScene("game_screen");
  });
});

In the above code, I have defined a "loading_screen" scene. The initialization function set the background color to orange and shows some text to give the user some information about what's coming next. You can include a logo and some menu options in an actual game here. Pressing any key while the canvas is in focus will take you to the actual game screen. The .enterScene(String sceneName) method has been used here to load the "game_screen". 

In the following demo, you can press the UP key 10 times to go to the final screen.

Conclusion

After completing this tutorial, you should be able to add a variety of sound effects to your game and be able to control the audio output. You can now also show different screens to a user in different situations. I should remind you that I have used Crafty version 0.7.1 in this tutorial, and the demos might not work with other versions of the library. 

In the next and final tutorial of this series, you will learn how to improve collision detection in Crafty.