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 add a heads up display, how to keep score and how to load the enemies we added to or level in Tiled.
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
collectable coins to our level and
0:00
made them disappear when
the player overlapped them.
0:04
In this video, we're going to
add a score to the coins and
0:07
show the score on the screen.
0:11
Let's start by adding the score text.
0:12
Let's scroll down to the create function
and go below all the player-related code.
0:15
Then at the end of line 49, hit Enter and
write this.add.text, add parentheses.
0:20
And in the parentheses,
we want to give it a first argument of 30,
0:27
a second argument of 30.
0:31
And the third argument will
be a string of SCORE:0.
0:33
Make sure there are no spaces
between the colon and the 0.
0:37
Next, we're going to add
the fourth optional argument,
0:40
which will be an object
that will contain styles.
0:43
And the first style that we'll add is
the fontSize, which will change to 50px.
0:46
Next, we'll add a fontStyle,
and we'll make that bold.
0:52
Next, we'll add a stroke, and
0:56
we'll make that #afafaf,
which is a darkish gray.
0:59
And finally, we're going to add
a strokeThickness of a number,
1:04
which will be 10.
1:08
Cool, feel free to adjust any of
these settings to your liking.
1:09
Let's see what this looks
like in the browser.
1:13
Okay, so we can see, first of all,
that our text is cut off.
1:16
If we look at the top left
corner of the screen,
1:20
we can see that some of our text exists,
but we can't see the rest of it.
1:23
The other issue is that if we were to play
the game, so if I hold on to the right key
1:28
and start jumping on top of platforms,
you'll see that the text disappears.
1:32
We see it briefly, but then goes away.
1:37
Let's fix both of these
issues in the code.
1:39
Let's first fix the issue
with positioning by changing
1:42
the second argument in
the add.text method from 30 to 80.
1:46
Next, let's fix the issue where
the text is moving around when
1:51
the player moves in the level.
1:54
Because we want the score text
to be visible at all times and
1:56
not only when the camera is looking at it,
2:00
we'll need to use a method provided
by Phaser called scroll factor.
2:02
Scroll factor controls how much
an object is influenced by the camera.
2:06
The scroll factor method takes two
arguments between the value of 0 and 1.
2:11
The first argument is for the x value and
the second argument is for y value.
2:17
A value of 1 for either the x or
2:22
y argument means that an object is
completely influenced by the camera.
2:25
So if the camera is not looking directly
at an object, you won't be able to see it.
2:31
If an object has a score factor of 0,
2:36
this means that the object will not
be influenced by the camera at all.
2:38
It would be as if there's no camera for
that specific object, and the object will
2:43
always be visible in the position it was
set no matter where the camera is looking.
2:48
Let's update our score text
to make use of scroll factor.
2:53
At the end of line 56,
just before the closing semicolon,
2:57
write .setScrollFactor, add parentheses,
and give it a value of 0.
3:01
Now, I did say the scroll factor
method takes in two arguments, one for
3:07
x and one for y, but the x argument is
mandatory and the y value is optional.
3:13
If the y value isn't set,
3:19
the setScrollFactor method will take
the x value and use that for the y.
3:21
Because we want both the x and
y value to be 0,
3:26
we can just set the x value and
the y value will also be 0.
3:29
Let's see if this worked.
3:34
Okay, as you can see, the score text
is visible, which it wasn't before.
3:35
And now, if I move the player and
jump on a few platforms,
3:40
the score text comes along with me because
it's not influenced by the camera.
3:44
Nice, now let's add some
values to the score text when
3:48
the player overlaps with a coin.
3:52
This is fairly simple to do since we
already have a callback in our overlap
3:54
between the player and a coin.
3:59
First, let's add a variable to
the top of the create method,
4:01
which will keep track of our score.
4:05
Let's scroll up to the create method,
and at the end of line 23,
4:07
hit Enter and write let scoreValue = 0.
4:12
Then let's assign our score
text to a variable so
4:15
that we can update it in
our overlap callback.
4:18
Let's scroll down to where
we add the score text, and
4:22
at the beginning of line 52,
let's write const scoreText =.
4:26
Cool, now let's scroll down to our overlap
function and update the callback so that
4:32
we can increment the value of scoreValue
and update the value of scoreText.
4:38
At the end of line 78, press Enter and
write scoreValue += 10.
4:43
What this line is doing is similar
to scoreValue = scoreValue + 10.
4:49
But what we've written is
a more concise way of doing it.
4:57
Then at the end of line 79, hit Enter and
5:01
write scoreText.setText().
5:05
And inside parentheses,
let's add backticks and
5:09
write SCORE : add a $ sign,
then add curly braces.
5:14
And inside the curly braces,
we'll put our scoreValue variable.
5:18
And that should be it.
5:23
Let's see what this looks
like in the browser.
5:24
Okay, if I press the right
key to overlap a coin,
5:27
you can see the points are going up.
5:30
And if we collect all 10 coins,
we should get 100 points.
5:33
Nice, this is really cool.
5:38
But the level right now is a bit too easy.
5:41
Let's make it more challenging
by adding some enemies.
5:44
We can do this in the Tiled map editor.
5:47
Let's make sure we've opened
the level_1.json file inside
5:50
the data folder in our assets folder so
that if we make any changes here and
5:55
save the file,
it should be updated in the right place.
6:00
Let's create a new object
layer called enemies.
6:04
Let's click on the icon to create a new
layer, then select Object Layer, and
6:08
give it the name enemies.
6:12
Then where our tilesheets are,
let's click on the level_object tab.
6:14
And we're going to add a new
image to this section.
6:19
Let's click on the wrench icon,
then in this new tab, let's click
6:23
on the blue plus icon and locate our
enemy.png file in our images folder.
6:28
Press Open and
we should see a new image in our window.
6:33
Save and close this tab, and
now we should see our pink enemy
6:37
inside the tilesheet section
of the right sidebar.
6:42
Let's click on it, and
then in the top toolbar,
6:46
make sure the tile tool is pressed, which
looks like an image with a tree on it.
6:50
This should make our enemy image
show up on our mouse cursor.
6:56
We're going to place three enemies in
the game in between platforms where
7:00
the player is going to jump.
7:04
I'll place one in between
the first two platforms,
7:06
then in between the next two platforms,
then in between the last two platforms.
7:10
Okay, and that's it.
7:17
Let's save this level and go back to
VS Code to load our enemies into the game.
7:19
The process of loading enemies
into our game is exactly the same
7:26
as what we did to load
coins into our game.
7:30
In fact, I'd recommend you pause this
video here and try to do it for yourself.
7:32
Once you're done, you can play
the video to see how I did it.
7:37
And we're back, I'm sure you managed
to figure it out on your own, but
7:41
let's go through it anyway.
7:45
The first thing to do is to load
the enemy image in the preload method.
7:47
So let's scroll up to that method, and
instead of writing the code from scratch,
7:52
we're going to put the cursor on
line 18 and duplicate that line.
7:57
Then on line 19, let's change
the first argument from coin to enemy,
8:01
and in the second argument,
let's change coin_ gold to enemy.
8:06
Cool, next we'll go to the create method.
8:11
What we need to do here is get the enemies
object layer and create an enemies group.
8:15
And then loop over each enemy object
in the object layer, and use the x and
8:21
y position to position
the enemies in the correct place.
8:26
It's exactly the same as what we did for
the coins.
8:29
In fact, let's copy all the code for
8:33
the coins to line 67 to line 60 and
paste it just beneath the coins.
8:36
First, let's double-click on
collectablesLayer on line 69, then press
8:41
Cmd+D to select the next occurrence,
and then change it to enemiesLayer.
8:46
We'll do the same with collectables
on line 69 and change it to enemies.
8:51
And finally, we'll double-click on coins,
8:55
press Cmd+D to select the next
instance and change it to enemies.
8:59
We'll also do that for the coins
variable inside our forEach callback.
9:03
We'll change coin to enemy.
9:09
Nice, and that's pretty much it,
9:11
we should have the enemies
loaded in our level correctly.
9:14
Let's test this in the browser.
9:18
Cool, and as you can see, the enemies
are showing up in the right position.
9:20
However, if we were to
move the player around and
9:24
then overlap an enemy,
you'll see that nothing happens.
9:28
In the next video,
9:33
we're going to trigger a game over
screen when the player touches an enemy.
9:34
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