"WordPress for Website Owners" was retired on June 9, 2017. You are now viewing the recommended replacement.
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