Bummer! You must be logged in to access this page.
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
Explore some optional improvements that could be made to improve the game as well as understanding how to debug the game using the built-in physics debugging UI.
This video doesn't have any notes.
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 some sound effects to our game.
0:00
In this video, we're going to go through
a few small improvements that we could use
0:04
to make our game a bit better.
0:08
The first thing we're going to do is
add some start text to the beginning
0:10
of our game.
0:13
This is so
that when a user first launches the game,
0:15
there are some instructions
telling them how to play it.
0:17
To do that, let's first create a variable
called startText at the top of our
0:21
file below our pingBrick variable.
0:26
We'll scroll down and
put our cursor at the end of line 31,
0:29
hit Enter and write let startText.
0:34
Now let's assign some text
to our startText variable.
0:38
Let's scroll down to the bottom of our
create function, below where we've put
0:42
the setVisible methods for
the youWinText variable on line 86.
0:47
And at the end of line 86,
hit Enter a few times,
0:51
then write startText = this.add.text and
add parentheses.
0:55
Just like the gamerOver and
1:02
youWinText, we want our start text
to be in the center of the screen.
1:04
So we can make use of our screenWidth and
screenHeight variables.
1:08
In the first argument,
write screenWidth / 2, and
1:13
in the second argument,
write screenHeight / 2.
1:16
In the third argument,
we want to tell the player what
1:20
controls they need to use to control
the paddle and also how to start the game.
1:23
To do that,
we're going to write a string of Use, and
1:28
then we're going to bring up some emojis
to make it look more visually appealing.
1:30
On the Mac, to bring up the emoji pop-up,
the shortcut is Ctrl+Cmd+Space bar.
1:34
When the popup shows, type the word left,
and then select the left arrow.
1:41
You'll notice the symbol that shows
doesn't match the emoji we selected.
1:46
This is because different fonts
render emojis differently.
1:51
So the emoji is not rendering
correctly in our text editor.
1:54
When the game is rendered in the browser,
however,
1:59
the emoji we selected will show correctly.
2:01
After the left arrow emoji, we'll write
the word and, and then bring up the emoji
2:04
popup again, and type the word
right to select the right arrow.
2:09
Then after that we'll write,
to move paddle, and
2:14
then do a \n to represent a new line.
2:18
Then write the word Press
with a capital P, but
2:21
without a white space
before the capital P.
2:24
This is because we don't want the new
line to start with a white space.
2:27
And then holding the shift
key on your keyboard,
2:31
write the word SPACE so
that all the characters are in uppercase.
2:34
And then to end, we'll write to start.
2:38
Then for the fourth optional argument,
2:42
we're going to add some
styles to our text.
2:44
Let's create an object by writing
some curly braces and then hit Enter.
2:46
First we're going to change the font size.
2:50
Let's write the code fontSize followed by
colon and then we'll make this 30 pixels.
2:53
This will make it slightly smaller
than the gameOver and youWinText.
2:58
Next we'll write align: and
then write center.
3:03
Because the start text is
going to be on two lines,
3:07
this makes sure the text on
both lines stay in the center.
3:10
Next we're going to
adjust the line spacing.
3:15
Let's write lineSpacing: and
give this a value of 10.
3:18
And finally because we want our text to
be positioned by the center of the box
3:22
around it, and not the top left corner,
let's change the origin.
3:27
At the end of line 97, hit enter and
3:32
write startText.setOrigin and
add (), cool.
3:35
Now we want this text to only be
displayed before the ball launches.
3:41
After the ball has been launched,
we want this text to disappear.
3:45
We can achieve this by removing
the visibility after the player presses
3:49
the space bar.
3:53
So let's scroll down to
our update function and
3:54
locate the if statement where
the space bar is pressed.
3:57
Place your cursor at the end of line 112.
4:02
Press Enter and
write startText.setVisible.
4:04
Add parenthesis, and
inside the parenthesis add false.
4:10
Awesome, let's see what this
looks like in the browser.
4:15
Very nice, just when we start the game,
4:19
players are given instructions on how to
move the paddle and how to start the game.
4:22
After we press space to launch the ball,
the start text disappears.
4:27
Perfect, let's go back to the code and
change a few more things.
4:32
Our game right now doesn't
have a lot of physics.
4:37
But if it did, we'd want to see
how the physics was working.
4:40
We can do this by enabling
the physics debugger for our game.
4:45
Let me show you how.
4:49
Let's scroll to the config
object at the top of the file.
4:50
Then at the end of line 17,
hit Enter and write debug: true.
4:54
Let's see what this does
to our game in the browser.
4:59
Now we can see that every
physics object in our game has
5:04
a purple outline around it.
5:07
And when I launch the ball,
5:10
there's a green line showing us
which direction it's going in.
5:11
This is really useful for
debugging physics in our game.
5:15
However, for some reason,
when we move the paddle,
5:19
there's no green line indicating
which direction it's moving in.
5:22
This is because we're not using
the physics engine to move the paddle.
5:26
Let's address this in the code.
5:31
Let's scroll down to our update function
to see how the paddle is being moved.
5:34
Right now, these two if statements
are being used to move the paddle based on
5:42
the key that's pressed on the keyboard.
5:46
We're using the x position of
the paddle to move the paddle,
5:49
whereas the ball is being
moved via velocity.
5:53
So the physics engine knows
where the ball is going.
5:57
Let's change the paddle so
it's being moved by velocity as well.
6:00
We'll first create a new constant variable
to control the speed of the paddle.
6:05
And then we'll change the if statement to
use the setVelocityX method instead of
6:10
using the x position on the paddle.
6:15
Let's scroll to the top of this file,
and at the end of line 35 press
6:18
Shift+Option+Up to duplicate that line and
change the word BALL to PADDLE.
6:23
We'll also change
the value from 400 to 350,
6:30
since we don't want the paddle
to move as fast as the ball.
6:33
But you're welcome to change
this based on your preference.
6:37
Next let's scroll down to
our update function and
6:41
replace line 104 with
paddle.setVelocityX add parentheses,
6:45
and inside the parentheses write,
-PADDLE_SPEED.
6:51
We'll do the same on line 108.
6:56
Replace it with paddle.setVelocityX,
add parentheses and
6:58
inside the parentheses add, PADDLE_SPEED.
7:03
Cool, right now because the paddle
has a velocity, if it moves based
7:08
on that velocity, it'll keep moving
in that direction just like the ball.
7:13
However, we want it to stop
moving when the key is released.
7:20
We can fix this by adding a velocity
of 0 outside of both if statements.
7:24
At the end of line 102, press Enter and
write paddle.setVelocityX,
7:30
give it parentheses, and
inside the parentheses put a value of 0.
7:36
Sweet, let's test this in the browser.
7:41
Okay, so because debug mode is on,
7:46
we still have the outline
across every physics object.
7:48
And when I move the paddle to the left,
7:51
you can see there's a green line telling
us which way the paddle is going.
7:53
When I release the left key,
the paddle stops.
7:58
And when I move the paddle to the right,
8:00
there's also a green line showing us
it's moving towards the right, cool.
8:03
This is a small change, but
8:09
it makes sure everything is being
controlled by the physics engine.
8:10
This of course will help us to
debug any physics in the game.
8:15
Let's talk about another improvement.
8:19
I'm gonna press the space
bar to launch the game.
8:21
The ball will bounce off a brick and
then go below the paddle,
8:24
which will trigger the Game Over text.
8:27
This is the way I would
like the game to work.
8:30
However, you may want the ball to go
below the lower screen boundary before
8:32
the Game Over text shows.
8:37
Let's go through how we
can do this in the code.
8:39
First let's scroll to
the top of the file and
8:43
remove the physics debug on line
18 since we don't need it anymore.
8:46
Then, let's scroll down to
the update function and
8:53
locate the if statement that checks if
the ball has gone below the paddle.
8:56
This should be on line 122.
9:01
Let's select paddle.body.y and
9:03
replace it with
this.physics.world.bounds.bottom.
9:07
What this does, is checks if the ball has
gone below the bottom screen boundary.
9:14
Let's see how this looks
like in the browser.
9:20
Okay, now when I launch the game
by pressing the space bar,
9:23
the ball hits a brick, bounces off and
then goes below the paddle and
9:26
even below the screen boundary
before the Game Over text shows.
9:30
Nice, we could go on and keep making
small improvements like this to the game,
9:35
but I'm really eager to show you
some more cool Phaser features.
9:40
So in a later video,
9:45
I'll talk about some improvements you
can make to this game on your own.
9:46
But next, let's have a short quiz
to test what you've learned so far.
9:50
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