Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Game Development with Phaser!
You have completed Game Development with Phaser!
Preview
Learn how to enhance your game by adding background music and interactive sound effects, to create a more engaging game.
Download Audio Files
Resources
Audio Credit
- 8-bit March by Twin Musicom
- Jump sound by Dklon
- GameOver sound by EKM Audio
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
In the last video,
we added a second level to our game and
0:00
linked it to our first level
using an image of a door.
0:03
In this video, we're going to add
some sound and music to our game.
0:07
To get access to all the audio
we're going to use for this game,
0:11
click on the link to download the audio
folder from the teacher's notes below.
0:15
Unzip this folder and
put it in the assets directory.
0:19
This should give you two new folders,
one called sound and one called music.
0:23
Let's take a look at these
folders in our explorer.
0:29
As you can see, in the assets folder we
have two new folders, one called music
0:33
which contains one file and one called
sounds, which contains three files.
0:39
Let's start by adding music to our game.
0:44
This will be the background
music that will play throughout.
0:46
We want the music to continue playing from
where it left off whenever we change or
0:50
restart a level.
0:54
Let's start by loading the music into
our game using our preload class.
0:56
By the end of line 23, hit Enter and write
1:01
this.load.audio, add parentheses and
inside the parentheses,
1:04
we're going to give it a first
argument of backgroundMusic.
1:09
And a second argument of
1:14
assets/music/8-bit_March-Twin_Musicom.mp3.
1:18
Actually, I've made a mistake.
1:27
There should be an underscore
between the word Twin and Musicom.
1:29
So let's go back and
change the hyphen to an underscore.
1:33
This song is from the YouTube audio
library and I've kept the long name for
1:37
the audio to give the creator credit.
1:41
Okay, now let's add this music
to our base level class.
1:44
Because the music object is going
to be used in both the create and
1:47
update methods,
let's create a private class field for it.
1:52
At the end of line 15,
hit Enter, and write, #music.
1:56
Let's give this a type.
2:00
At end of line,
hit Enter write /** and do two stars,
2:02
hit Enter and on line 17, write, @type,
2:07
add some curly braces, and
inside these curly braces,
2:11
we're going to write
Phase.sound.WebAudioSound.
2:16
Cool, now let's scroll down to the bottom
of our init method and add our music.
2:21
At the end of line 22, hit Enter and
2:27
write this.#music = this.sound.add,
then add parentheses.
2:31
And inside the parentheses,
we're going to write backgroundMusic.
2:38
We want the music to loop so
the game is never silent, so
2:44
at the end of line 23 hit Enter and
2:49
write this.#music.setLoop
add parenthesis and
2:52
inside the parentheses
add a value of true.
2:56
We also want to reduce the volume so
3:00
it doesn't overpower the sound
effects we have in the game.
3:02
At the end of line 24, hit Enter and
write this.#music.setVolume,
3:06
add parenthesis and inside the parenthesis
we'll give it a value of 0.7.
3:11
Finally we want to play the music when
the game starts, so at the end of line 25,
3:17
hit Enter and write this.#music.play and
add parentheses.
3:24
Okay, if we were to test our game now,
the music would play fine.
3:29
But if we change levels or we started
a level, another background music
3:34
object would be created and
start playing on top of the first one.
3:38
You're welcome to test this
out in the browser but
3:43
I don't want to hurt your ears so
I won't do it in this video.
3:46
What we want to do is pause
the music when we change or
3:50
restart levels then resume that exact
same track when we start a new level.
3:54
Let's scroll down a tiny bit to
our player level exit overlap and
4:00
pause the music in the callback.
4:05
At the end of line 67, hit Enter and write
this.#music.pause and add parentheses,
4:08
this means the music will pause when
the player interacts with the exit sprite.
4:15
Then, let's scroll down
to the update method and
4:21
pause the music when
the level is restarted.
4:25
At the end of line 87, hit Enter and
4:28
write this.#music.pause and
add parentheses.
4:31
Now we need a way of checking
when to resume the music.
4:36
The int method is going to create and
4:40
play a new music object each time
a level is started or restarted but
4:43
we want to play the existing
music object if one exists.
4:48
As you can imagine,
phaser has a helpful method for that.
4:52
We can use the sound get method to get
the previously created music object.
4:56
Let's scroll up to our init method.
5:02
And at the end of line 22,
hit Enter a few times and
5:08
write const previouslyAddedMusic
= this.sound.get,
5:13
add parenthesis and inside
the parenthesis write background music.
5:20
So, if our previously added music
variable has a value, this means that
5:27
we've already added a music object and
this music object has been paused.
5:32
Let's create an if statement to check
if previously added music exists.
5:38
At the end of line 24, hit Enter a few
times and write if add parentheses and
5:42
inside the parentheses
write previouslyAddedMusic,
5:48
then add curly braces, then hit Enter.
5:51
And on line 27 write this.#music
= previouslyAddedMusic.
5:54
If previouslyAddedMusic has a value,
6:02
then we can assign it to our
music private class field.
6:05
Then at the end of line 27, hit Enter and
6:08
write this#music.resume and
add parentheses.
6:11
Then at the end of line 29,
write else add curly braces, and
6:15
we're gonna wrap the rest of our
music code in this else block.
6:20
Sweet, now let's test this in the browser.
6:24
Straightaway, we can hear
that the music is playing.
6:27
If you can't hear any music, you may have
to interact with the page in the browser.
6:30
Okay, if I move the character and
overlap an enemy,
6:36
the music still plays if
the game over screen shows.
6:40
And when I restart the level, the music
continues from where it left off, perfect.
6:45
Now let's go to the end of the level.
6:50
So I'm going to move the character,
jump on a few platforms, and
6:52
overlap our level exit image, and the
music continues from where it left off.
6:56
Nice, now that the music is working,
let's add some sound effects.
7:01
Let's go to our preload class, and
at the end of line 24, hit Enter and
7:06
write this.load.audio,
add parentheses, and for
7:11
the first arguments,
we're gonna write coinSound.
7:14
For the second argument, we're going
to write assets/sounds/coin_grab.mp3.
7:18
Since the next lines of code
are going to be very similar,
7:26
let's duplicate line 25 by pressing
shift option and the up arrow twice.
7:30
Now on line 26,
change coinSound to jumpSound and
7:35
online 27 change coinSound
to gainOverSound.
7:39
Let's go back to line 26 and
change the words coin grab and
7:43
the second argument to jump at online
27 will change coin grab to game_over.
7:48
Nice, now let's add the sounds
to our base level class.
7:54
We'll start with the coin
sound sound effect.
7:58
In our create method,
let's scroll down to the overlap for
8:01
the player and coins, and
at the end of line 67,
8:05
let's create our sound object
by hitting Enter a few times and
8:09
write const coinSound = this.sound.add,
8:14
then add parentheses and
inside the parentheses write coinSound.
8:17
Now let's play the sound
effects in the overlap.
8:23
At the end of line 71, hit Enter, and
write coinSound.play and add parentheses.
8:25
Cool, let's test within the browser.
8:32
[MUSIC]
8:34
Cool, we can hear the background music,
or when I'm with the player by pressing
8:35
the right key and overlap for coin,
we can hear our coin sound effect.
8:39
Nice, now let's add the jump sound.
8:43
For this to work, we need to add
the jump sound in our base level class,
8:46
then pass it to our player class.
8:51
And then when the player
jumps we play the jump sound.
8:53
Let's first scroll up to where
we add the player variable and
8:57
create a variable above
it called jumpSound.
9:01
At the end of line 42,
hit Enter a few times and
9:03
right const jumpSound = this.sound.add,
add parentheses and
9:08
inside the parentheses give
it a value of jumpSound.
9:15
Now if we were to add this as an argument
to our player class our player class will
9:20
have five arguments, personally,
I think that's too many arguments, so
9:25
instead of adding another argument, let's
9:29
just have one argument which is an object
that contains all the other arguments.
9:32
We'll first make this
change in our player class.
9:37
In the constructor on line 6,
let's highlight all the arguments
9:40
in the parentheses and
replace them with one called options.
9:44
Then below that we can destructor
the options object to get the arguments.
9:48
At the end of line 6, hit Enter and
write const, then add curly braces and
9:53
inside the curly braces write scene,
x, y, texture,
10:00
jumpSound and then outside of
the curly braces write = options.
10:05
Because we need to use
the jumpSound in the update method,
10:11
let's create a private class field called
jumpSound below the keys class field.
10:15
At the end of line five,
hit Enter, and write #jumpSound.
10:20
Let's assign this to the jumpSound
argument in constructor.
10:24
At the end of line nine, hit Enter and
10:29
write this.#jumpSound = jumpSound.
10:32
Actually, my mistake,
10:36
the this keyword should only be
used under the super method.
10:38
So let's select all the code on line nine,
press Cmd+X to cut it, and
10:41
we'll put it below the super method.
10:46
Nice, now let's scroll down to
the bottom of our update method.
10:48
And at the end of line 56, hit Enter and
10:52
write this.#jumpSound.play and
add parentheses..
10:56
Cool, now let's go back to
our base level class and
11:01
pass in the jumpSound as an argument.
11:05
Let's create a new variable called player
options to store all the arguments we need
11:07
to pass into our player class.
11:12
At the end of line 44, hit Enter and
11:14
write const playerOptions =,
add curly braces and hit Enter.
11:17
We'll give it a key of seen which
will have the value of, this,
11:22
another key of x which
will have a value of 100.
11:26
Another key of y which
will have a value of 800.
11:29
Another key if texture, which will have
a value of player which is a string.
11:32
And a final key have jumpedSound
will be using on jumpSound variable.
11:36
Cool, let's double-click
pay options on line 54.
11:41
Press Cmd+C to copy and on line 52,
select all the arguments and
11:45
replace them with playerOptions.
11:50
Nice, let's test this in the browser.
11:52
Okay, the background music is playing and
when I stand still and jump, you can hear
11:55
the jump sound when I move and jump,
you can also hear the jump sound.
12:00
And I'm going to jump one
more time standing up so
12:05
we can hear the sound again.
12:07
Nice, now let's add the final sound,
which is the game over sound.
12:09
Let's scroll down to the part of
the code where we have the player and
12:15
enemy overlap.
12:18
So that should be online 95,
and on line 94,
12:19
let's create a variable
called GameOverSound.
12:23
At the beginning of line 94,
12:26
write const GameOversound =
this.sound.add parentheses and
12:29
inside the parentheses,
give it a value of gameOversound.
12:34
Cool, now inside the player and enemy
overlap, let's play the game over sound.
12:39
Let's first double-click on
the game sound variable on line 94,
12:45
then press Command C to copy, and
at the end of line 97, hit Enter,
12:50
press Cmd+V to paste, then write,
got play and add parentheses.
12:55
Then hit Enter, and press Cmd+V again
to paste the gameOverSound text,
12:59
then write .setVolume,
add parentheses, and
13:04
inside the parentheses,
give it a value of 0.6.
13:07
And that's it.
13:11
Let's test this in the browser.
13:12
Okay, so the background music is playing,
when we move the player and
13:15
overlap with a coin the sound plays,
when we jump the sound plays and
13:19
when we overlap with an enemy
we can hear the game over sound.
13:22
Very cool, although,
13:26
I think it would be better if the music
stopped when the game over sound plays.
13:27
Let's change that in our base level class.
13:32
At the end of line 99, hit Enter and
13:34
write this.#music.pause(),
that should do it.
13:38
Let's hear what this sounds like by
testing the game in the browser.
13:43
Okay, I'm going to move the character
by pressing the right key,
13:47
jump on the platform and
overlap with the enemy again.
13:50
And we can hear that when the game over
sound plays, the background, music stops,
13:53
much better.
13:58
Our game is pretty much complete, but
13:58
right now we have to run the Vite
dev server to play the game.
14:01
In the next video we'll learn how to
build the game for production and
14:04
deploy it to a web server in the cloud so
that anyone can play our game.
14:08
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up