Chapter 6: Playing Sound Effects and Music

In this chapter, we will bring our game to life by adding sound effects and music that will enhance the game. Audio is a very important part of any game; it can alert you to key events happening in a game or create atmosphere. Imagine walking through a forest in a game and hearing a nearby river or the birds singing in the trees. It makes the whole game more immersive if the sound matches what you would expect to hear if you were in that forest.

It is important though that if the player puts the game in the background to, for example, check their email, that we stop the music or sound from playing, and that the sound resumes when they return to the game, otherwise the ongoing sound could be annoying for the player. To handle this, we will cover how to listen for these life cycle events so that we ensure the audio is paused and resumed correctly.

Audio also takes up memory and we will discuss how Flame uses an audio cache to help load...

Technical requirements

To examine the source from this chapter, you can download it from https://github.com/PacktPublishing/Building-Games-with-Flutter/tree/main/chapter06.

You can find additional information on Flame audio in the online documentation at https://docs.flame-engine.org/1.0.0/audio.html.

To get started playing sounds and music in our game, we must download the asset files and add them to our pubspec.yaml file. We can find all the sound files we want to add at the excellent free website https://freesound.org.

The sound effects and music we want to add are the following:

• Background music playing throughout the game
• A sound effect for when an enemy dies
• A sound effect when George moves around

Here are some I found while browsing the site, but feel free to browse the site and find other sounds you may prefer:

• Background music – https://github.com/PacktPublishing/Building-Games-with-Flutter/blob/main/chapter06/assets/audio/music...

Playing background music

In this section, we will add the music playback, which will load at the start of the game and continue playing while we play the game. The Flame audio library has a static class called Bgm (background music) that adds music to the audio cache and will pause and resume the music when the app is backgrounded or brought back to the front. We get this functionality built into the Bgm class, so it requires very little code to get the music loaded and playing. As you will see in the next section regarding the playing of sound effects, we must do a bit more work to ensure sound effects pause and resume when backgrounded. Unfortunately, this is how it currently works in the Flame library at this time, but hopefully, this will be improved in future versions of the library.

To add the music playback to the code, do the following:

1. Open the main.dart file and import the Flame audio library:

   import 'package:flame_audio/flame_audio.dart';

2. At the top...

Playing sound effects

As mentioned in the previous section, when playing sound effects, we need to handle the pausing and resuming of the sound effects if they are still playing when the app is put in the background, for instance, to check something else on your phone, as this is not currently handled by the library.

We will initially update our Character class, which is our top-level base class for all our sprites, to add onPaused and onResumed callbacks, which all our sprites can use.

We will then listen for life cycle change events in our game and if these are called, we will iterate over all our sprites and pass on these events.

And finally, as the sound effects are related to George, we will update the George class to play sounds and pause and resume these sound effects when needed. Let's get started:

1. Open up the character.dart file. At the bottom of the Character class, add the following function definitions:

   void onPaused() {}
   void onResumed() {}

...

Controlling the volume

Fixing the volume of the music and sound effects is very easy and only requires a few small changes. Let's take a look:

1. Open the main.dart file. In the onLoad function, where we added the call to play the background music, change this line to pass the volume parameter:

   await FlameAudio.bgm.play('music/music.mp3',
     volume: 0.1);

Here we set the music volume to 0.1, keeping it low so we can hear the sound effects better. The volume parameter can be any value between 0.0 and 1.0 (0.0 mutes the sound of the music or sound effect completely, whereas 1.0 plays the sound at full volume).

2. Open the george.dart file and let's update the calls to play each sound effect to use the volume parameter. In the onCollision function, update the enemy dying sound effect like this:

   FlameAudio.play('sounds/enemy_dies.wav', volume: 1.0);

3. In the update function, change the two calls to play the running sound effect, and...

Summary

In this chapter, we introduced music and sound effects to make the game better. We handled the playback and paused the sound when the app is in the background, and resumed it when the player returns to the game, by handling the life cycle events.

In the next chapter, we will go beyond the limits of the physical screen and learn how to make game levels that use maps that we can scroll around as we move around the map.

Questions

1. Which library do we use to add audio to our games?
2. Why is it beneficial to load the audio into the audio cache?
3. Why do we need to clear the audio buffer after the components are removed from the game?
4. Which life cycle change states do we need to handle when the game is backgrounded?
5. What class do we use to keep a reference to a longer sound effect?
6. How do we change the default volume for music or sound effects?