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 to incorporate audio files, in this case just sound effects, to enhance the immersive experience for players, adding another layer of engagement to your game.
Resources
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 logic and
0:00
display text to tell the user
if they've won or lost the game.
0:03
In this video, we are going to add
some sound effects to our game.
0:07
Let's open up the Explorer in
VS Code by pressing Cmd+B and
0:10
open up the assets folder.
0:13
In this folder,
you'll notice there are three images and
0:16
there are also three MP3 files.
0:19
These are the sound effects that will
play for different events in our game.
0:22
The first you'll see is
called ping_brick and
0:25
this should play when
the ball hits a brick.
0:28
The next is called ping_paddle, and this
will play when the ball hits a paddle.
0:31
Finally, there's ping_wall,
0:37
and this should play when
the ball hits a screen boundary.
0:39
Let's start by adding
the ping_paddle sound effect.
0:43
This process is going to look very similar
to the way we've added images to our game.
0:47
Let's close the Explorer on
the left by pressing Cmd+B, and
0:52
then let's scroll down
to our preload function.
0:55
At the end of line 37, hit the Enter
button and type this.load.audio().
0:58
The load audio method works in a similar
way to the load images method.
1:05
The first argument is the name we'll give
to reference for audio or sound effects.
1:10
The second argument is the path for
our sound file.
1:15
So for the first argument,
we're going to write ping_paddle, and
1:19
for the second argument, we're going
to write 'assets/ping_paddle.mp3'.
1:24
Next, let's scroll down
to our create function.
1:30
And on line 52, let's press Enter
a few times to make some space and
1:33
write the code const pingPaddle =
this.sound.add, and then add parentheses.
1:39
And inside the parentheses,
we'll add the argument 'ping_paddle'.
1:47
Sweet, finally, in the collider
function for our ball and our paddle,
1:53
let's add a third argument to play
our pingPaddle sound, which will
1:57
be an arrow function expression,
since it will only be one line of code.
2:02
Let's put our cursor at the end of paddle
and write comma, add parentheses, and
2:07
then an arrow function and then write
pingPaddle.play and add parentheses.
2:12
The play method, as you might have
guessed, will play the sound effects.
2:18
Along with the play method, there is
also a stop method to stop the sound,
2:21
a pause method to pause the sound, and
2:27
a resume method to resume
previously paused sounds.
2:30
Cool, let's test this in the browser.
2:34
Now, when the ball hits the paddle,
we hear a sound effect.
2:37
Cool, let's go back to our code and
add the two other sound effects.
2:41
We'll start by preloading all of our
sound effects in the preload function.
2:46
At the end of line 38,
press the shortcut Shift option up or
2:51
Shift option down to
duplicate the current line.
2:55
We'll duplicate line 38 twice.
2:59
Then on line 39, we're going to
double-click on the word ping_paddle,
3:02
press Cmd+D to select the next occurrence,
and replace the word paddle with brick.
3:07
We'll do the same on line 40,
double-click on ping_paddle,
3:12
press Cmd+D to select the next occurrence,
and change the word paddle to wall.
3:17
Next, let's focus on adding
the ping_wall sound effect and
3:22
then we'll focus on adding
the ping_brick sound effects.
3:26
Let's scroll down to the create method,
and
3:29
we'll duplicate line 55 by putting
the cursor at the end of it and
3:32
pressing the keyboard shortcut,
Shift option up or Shift option down.
3:36
Then on line 56, let's change the variable
name from pingPaddle to pingWall,
3:41
and let's change the argument that
goes into the add method from
3:46
ping_paddle to just ping_wall.
3:51
Cool, now, to play a sound when
the ball hits a wall is pretty tricky.
3:53
Because we don't have a collider
function for this event,
3:59
we're going to have to use one of
phases built in event listeners.
4:03
At the end of line 59, let's to enter and
4:06
write this.physics.world.on,
and add parentheses.
4:11
The on method is an event listener
that takes in two arguments.
4:16
The first argument is the name of
the event you want to listen for, and
4:21
the second argument is the callback
function you want to run when the event is
4:24
triggered.
4:28
This works similar to the add event
listener function provided by
4:29
the document object
model in a web browser.
4:33
So because we want to trigger an event
when the ball hits the screen boundary,
4:37
for the first argument,
let's write worldbounds.
4:41
For the second argument,
4:45
we're going to use an arrow function
to play the pingWall sound.
4:46
So let's create our arrow
function by writing parentheses,
4:50
pressing equals and greater than,
and adding curly braces.
4:54
Inside our curly braces, let's write
pingwall.play, and add parentheses.
4:58
Nice, you may notice a blue squiggly
line under the word worldbounds.
5:05
This is because our VS Code's spell
checker plugin does not have this word in
5:10
its settings.
5:14
To change that, click on the word,
5:16
then click on the yellow lightbulb
that appears on the left-hand side.
5:18
Click the last option to add
it to the user settings, and
5:22
then you'll see that the blue
line will disappear.
5:26
We're almost there, but
there's one more thing we have to do.
5:29
Right now, the SetCollideWorldBounds
method on line 52 for
5:33
the ball hasn't been configured
to emit the worldbound event.
5:38
So if the ball hits the wall, it won't
be picked up by our event listener.
5:43
To enable this,
5:48
we need to add a fourth argument to
the setColliderWorldBounds methods.
5:49
Annoyingly, even though we don't
need the first three arguments,
5:54
we still have to add them
to get to the fourth.
5:59
If you want to know more about
what each of these arguments do,
6:01
I'll add a link to the Phaser
documentation in the teacher's notes.
6:05
For now, let's update the
setCollideWorldBounds method for the ball.
6:10
Let's give the first argument a value of
true, the second argument a value of 1,
6:15
the third argument a value of 1, and
the fourth argument a value of true.
6:20
Cool, now that we've enabled
the SetCollideWorldBounds method to
6:25
emit a worldbound event,
this should all be working fine.
6:30
Before we test this in the browser,
let's go ahead and
6:34
add our final sound effect, the one that
will trigger when a ball hits a brick.
6:37
Let's scroll up in our file,
and at the end of line 30,
6:42
hit Enter and write let pingBrick.
6:47
Because we're going to create the sound
object in the create method and
6:49
trigger it in the update method
in the hitBrick function,
6:54
it makes sense to have a variable
outside both of these functions.
6:57
Next, let's scroll down to
our create function, and
7:01
at the end of line 57, hit Enter and
write pingBrick = this.sound.add,
7:06
open parenthesis and
add ping_brick as an argument.
7:13
Next, let's scroll down to our hitBrick
function in our update function,
7:17
and at the end of line 121, hit Enter and
7:23
write pingBrick.play
followed by parentheses.
7:26
Cool, now, let's test all of
these changes in the browser.
7:30
I'm gonna move the paddle to the left, and
then press space bar to launch the ball.
7:37
And you'll notice when the ball
hits a brick, it makes the sound,
7:42
when it hits a paddle,
it makes the sound as well.
7:45
And when the ball hits a screen boundary,
it also makes the sound.
7:48
Perfect, we are so
close to finishing this game.
7:52
We just need to add a few more
small things before it's done.
7:55
Let's do that in the next video.
7:59
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