Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
- Course Overview 2:16
- What Is a Game Engine? 1:59
- What Is Phaser? 2:43
- My Development Setup 3:30
- What Will Be Built in This Stage 1:27
- Phaser Project Setup 6:29
- Loading Game Assets 6:06
- Setting up a Server 5:51
- Adding Grouped Images 4:53
- Phaser Explanation and Setup Quiz 5 questions
- Adding Paddle Movement 6:05
- Adding Physics 9:36
- Adding Basic Collisions 4:40
- Adding Logic on Collision 5:05
- Winning and Losing Text 13:58
- Adding Sound 8:02
- Final Thoughts 9:55
- Player Movement and Collision Quiz 6 questions
- How to Improve Our Game 4:41
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
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