Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Discover how to create smooth animations and transitions for displaying "Game Over" text and images when the player collides with an enemy.
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 some text
to the screen to show the score, and
0:00
added some enemies to our level.
0:04
In this video, we're going to learn how
to add a Game Over screen to our game.
0:07
This won't be as simple as the Game Over
screen we created in the previous stage,
0:13
this one will be a bit more complicated.
0:18
We're gonna do a bunch of things
like darken the background,
0:21
animate some text, and
add a background image onto the screen.
0:24
We're gonna be using Phaser's
tweening system to do this.
0:29
If you're not sure what tweening is,
0:33
it's basically a way to
animate objects in a game.
0:36
It comes from the word in between,
which is the process of
0:39
generating frames in between the start and
end of an animation.
0:43
This gives the illusion of movement.
0:48
Don't worry if this sounds confusing.
0:51
This will make a bit more
sense when we start coding.
0:54
Let's first add some logic
to trigger the game over
0:58
screen when the player overlaps an enemy.
1:03
Let's scroll down to the bottom
of the create method.
1:07
And at the end of line 91, hit Enter and
1:12
type this.physics.add.overlap() and
inside the parentheses,
1:15
we're going to give it a first
argument of this.#player.
1:22
A second argument of enemies and a third
argument that takes a callback function.
1:28
So let's go ahead and add parentheses,
create the arrow function and open it up.
1:34
Now, there are a few things we want
to happen when this overlap occurs.
1:40
First, we want the player to appear
as if they're frozen in place.
1:44
The player shouldn't be able to move
anymore once they've overlapped an enemy.
1:49
Then we're going to darken the background.
1:55
Then we want the background
image to appear,
1:57
which we want the Game Over
text to be on top of.
2:00
So, four things.
2:03
Let's start by freezing the player.
2:05
We can use a method called disableBody
to stop the player from responding to
2:08
the world physics.
2:12
Let's write that now.
2:14
At the beginning of 993,
write this .#player.disableBody,
2:16
add parentheses and inside the parentheses
we're going to add a value of true.
2:21
This is a good start, but
2:27
the player animations will still
play if the arrow keys are pressed.
2:29
To fix this, we can create a private
class field, which will be set to
2:35
false by default, and set to true
when the player overlaps an enemy.
2:40
We can use this class field to prevent
animations from playing in the update
2:45
method.
2:50
Let's scroll to the top of this file.
2:51
And at the end of line 9,
hit Enter, and write #isGameOver.
2:54
We'll set this to false by default.
2:59
Now, let's scroll down to our player and
enemy overlap.
3:03
And at the end of line 94,
write this.#isGameOver, and
3:07
we'll set that to true.
3:12
Now let's go down to our update function.
3:14
At the start of line 102, hit Enter and
write if and add parentheses and
3:18
inside the parentheses, write
this.#isGameOver add curly braces and
3:24
inside the curly braces,
write the keyword return.
3:30
The if statement on line 103 uses
a programming technique called a guard
3:35
clause.
3:40
This is a statement that prevents or
guards the code below from executing.
3:41
If the GameOver class is true,
it's just going to return and
3:46
not execute the code below.
3:50
Because the guard clause
is in the update method,
3:52
it's going to keep checking
this condition on every frame.
3:55
So that's 60 times a second.
3:59
Let's check if this has
worked in the browser.
4:01
Okay, I'm going to press the right button
on the keyboard to move the player
4:05
then jump on the first platform and
then overlap an enemy.
4:09
And as you can see,
the player is frozen in place.
4:13
Even if I press any other keys on
the keyboard, the player does not move.
4:17
This is the best time to
show the game over screen.
4:21
Let's do that now.
4:24
First we're going to darken the background
by covering the whole game with a slightly
4:25
transparent black rectangle.
4:30
Let's do that in the createMethod.
4:32
Above the code for
our player an enemy overlap on line 92.
4:34
Let's hit Enter and write const
backgroundRect = this.add.rectangle,
4:40
add parentheses, and this is going
to take a bunch of arguments.
4:46
For the first argument,
we'll give it a value of 0.
4:53
The second argument will
also give it a value of 0.
4:55
For the third argument,
we'll give it a value of 1920.
5:00
And for the fourth argument,
we'll give it a value of 1080.
5:04
For the fifth argument, we're going to
give it a value of 0x and six zeros.
5:08
This is hexadecimal code to
represent the color black.
5:15
And finally, for the fifth argument,
we're going to give it a value of 0.5.
5:20
This is the alpha or transparency.
5:26
Let's talk about for code on line 93.
5:29
We've just used a method provided
by Phaser, called a rectangle, and
5:32
this creates a rectangle in the game.
5:36
The first two arguments refer to the x and
y position.
5:39
Which have been set to zero, which means
the rectangle will be positioned in
5:43
the top left corner of the screen.
5:47
Then the next few arguments
are the width and height,
5:49
which is set to the game screen.
5:52
Then the fifth argument is the color
value, which as I mentioned before,
5:54
is a hex decimal value.
5:59
You may be used to writing hex values in
CSS with a hashtag, but in JavaScript and
6:01
many other programming languages,
they start with a zero and x.
6:06
Then adding six zeros gives
the hexadecimal value that refers to
6:11
the color black.
6:14
Finally, we add a value of 0.5,
which refers to the opacity or alpha.
6:16
Which means the rectangle
will be a bit transparent.
6:22
Cool.
6:26
Next let's add a set origin value to
make sure it starts in the top left
6:26
hand corner of the screen.
6:31
At the end of line 93, hit Enter and
write backgroundRect.setOrigin,
6:33
add parentheses and
inside the parentheses, add a value of 0.
6:39
Then, because we want the rectangle
to not be influenced by the camera,
6:44
we're going to give it a scrollFactor.
6:49
Of the end of line 94, hit Enter and
write backgroundRect.setScrollFactor,
6:52
add parentheses and give it a value of 0.
6:57
Finally, because we don't want
the rectangle to be visible straight away,
7:01
we want it to be hidden by default.
7:05
To do that, on line 96,
7:08
write backgroundRect.visible and
we'll make that equal false.
7:09
Then let's scroll down to the player,
an enemy overlap and
7:15
at the end of line 100, hit Enter and
write backgroundRect.visible = true.
7:20
This is going to show our transparent
rectangle when the player
7:27
overlaps with an enemy.
7:31
Let's test this in the browser.
7:32
Okay, so, I'm going to run in the game,
I'm going to jump on the platform, and
7:35
then overlap with an enemy.
7:39
And now you can see, our rectangle
appears, and makes the game look darker.
7:41
Nice.
7:45
Now let's add our background image.
7:47
First let's scroll to the preload
method and load in our image.
7:49
At the end of line 22, hit Enter and
write this.load.image, add parentheses.
7:54
And for the first argument,
write display box.
8:01
For the second argument,
write assets/images/display_box.png.
8:05
In case you're wondering
what this image looks like,
8:10
let's go to it now by pressing Command P,
type D and select the first option.
8:15
As you can see, it's a simple green
rounded rectangle with a yellow border.
8:21
Let's go back to our level1.js file.
8:27
Now let's scroll down to where we've
added the new player and enemy overlap.
8:30
And at the end of line 97,
press Enter a few times and
8:36
write const displayBox equals
this.add.image, add parentheses.
8:40
And inside the parentheses,
let's give it a first argument of 0,
8:45
a second argument of 540, and
a third argument of displayBox.
8:51
We've given our displayBox
a y position of 540,
8:58
because it's half of our
screen width at 1080.
9:02
This means the image will start
off halfway down the screen, but
9:05
we're going to animate it to the top of
the screen using Phaser's Tween Manager.
9:09
Next, we'll give the box
a scrollFactor of 0,
9:14
and we'll also give it a setOrigin of 0.
9:17
Cool.
9:20
Although Phaser image objects
have a visibility property,
9:21
just like our rectangle, for the display
box we're going to set an alpha of
9:25
0 instead of using visibility because
the alpha can be animated with a tween.
9:29
So, at the end of line 99, hit Enter and
9:35
write displayBox.alpha and
we'll make that equal 0.
9:38
Now, let's write our first tween.
9:42
At the end of line 100,
hit Enter a few times and
9:45
write const displayBoxFadeIn =
this.tweens.add and then add parentheses.
9:50
The tweens.add method takes
an object of options as an argument.
9:58
So inside the parentheses, we're going
to write the curly braces and hit Enter.
10:02
And the first property is going to be
targets with a value of displayBox.
10:07
This is the displayBox variable,
we created on line 99.
10:12
Next, because we want to
animate the transparency,
10:16
we're going to give it a property
of alpha with a value of 1.
10:19
This means that when the box comes in,
the value of the alpha is going to change
10:23
from 0 to 1,
which means it'll be made visible.
10:27
Next, we're going to give it a y value of
0, which means it'll be animated upwards.
10:30
So because it starts at 540,
we're going to push it up to 0.
10:34
Then we'll give it a duration of 200.
10:39
This is the duration of
the tween in milliseconds.
10:41
And finally,
we'll give it a pause of true.
10:45
This means that the tween
is going to start paused,
10:48
which means we can control when it
starts with a method called play.
10:50
If pause was false, that would mean the
tween would start as soon as it's created.
10:54
Cool.
11:01
Now let's scroll down to our player and
enemy overlap.
11:01
And that's the end of line 113,
hit Enter and
11:04
write displayBoxFadeIn.play and
add parentheses.
11:08
This is going to play our tween when
the player overlaps with the enemy.
11:12
Nice.
11:17
Let's test this in the browser, okay?
11:18
So I'm gonna move the player
again by pressing the right key.
11:21
I'm gonna jump on the platform and
interact with an enemy.
11:24
And whenever I do, the screen gets darker,
11:27
but also the display box
fades in from bottom to top.
11:30
The next thing to do is add some text
that says Game Over with an option to
11:34
restart the game by pressing
the R key on the keyboard.
11:39
Since we've added text to a game before,
11:43
I'm going to give you the chance to
figure out how to do that on your own.
11:45
And in the next video,
I'll go through my solution.
11:49
All you have to do is show the text and
make it fade in just like the displayBox.
11:52
Don't worry about implementing
the restart logic,
11:58
we'll go through that in the next video.
12:00
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