Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
- What Will Be Built in This Stage 1:48
- Project Setup Using Vite 14:11
- Add Player Sprite and Movement 18:52
- Adding Gravity and Jump 12:16
- Create a Level Using Tiled 13:00
- Loading Tiled Level 11:39
- Animation and Level Design Quiz 5 questions
- Adding Collisions and a Background 8:04
- Adding Collectables 9:32
- Adding a HUD and Enemies 9:39
- Game Over Screen 12:03
- Adding Prefabs 13:45
- More on Prefabs 10:55
- Centralized Preloading 7:08
- Add an Exit and Another Level 11:53
- Music and Sound Effects 14:13
- Refactoring and Scene Management Quiz 5 questions
- Deployment and Game Improvements 10:07
- Game Development with Phaser Wrap-Up 1:38
Preview
Video Player
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
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