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
Learn how to further break down our game into prefabs.
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 logic to
restart the game by pressing the RKey.
0:00
We also started refactoring our code
by breaking things up into prefabs.
0:05
In this video, we're going to
continue refactoring our code.
0:10
If we look at our LevelOne file,
0:15
the biggest chunk of code is
related to the gameOver screen.
0:17
You can see it starts at the bottom,
at line 132, and
0:21
it goes all the way up to line 80.
0:25
Let's break this up into a prefab.
0:28
Let's open up our file explorer,
right click on the prefabs folder to
0:31
create a new file, and
we'll call it GameOver.js.
0:36
Let's create a new class by
writing export default class,
0:40
GameOver and then add curly braces.
0:44
For this class we're not creating a new
game object, we're just moving a bunch of
0:48
related logic into one place, so there's
no need to extend anything from Phaser.
0:53
Let's start by creating a constructor
method that takes the scene as
0:59
an argument.
1:03
On line 2 write the word constructor,
then add parentheses and
1:04
inside the parentheses,
write the word scene.
1:08
Then write curly braces and hit enter.
1:11
Then, at the beginning of line 2, hit
enter a few times and write #scene, this
1:14
private class field is going to be given
the value of scene from the constructor.
1:19
Let's give this a type, so
we're going to do /** hit enter, and
1:24
then on line 3, write @type,
at parentheses, and do Phaser.Scene.
1:29
This server VS code can help
autocomplete methods and
1:35
properties from the Phaser Scene class.
1:39
Now let's go to our LevelOne file and
1:42
scroll up to where we have
the backgroundRect variable on line 80.
1:44
Copy that code all
the way down to line 132.
1:48
Then press Command X to cut that code and
1:55
we'll paste it in the constructor
of our gameOver class.
1:58
Now that this variable inside this code is
referring to a scene that doesn't exist.
2:02
So, let's select all the instances of this
dot and replace it with this .#scene.
2:08
The next thing we want to do is
we want to trigger all the tween
2:15
animations in a separate
method called fade-in.
2:19
But in order to do that our fade in method
will need access to all the things we
2:22
need to change.
2:27
So, let's create four private
class fields below the scene one.
2:29
We'll call one backgroundRect,
we'll call another one displayBoxFadeIn,
2:33
we'll create another one and
call it gameOverTitleFadeIn,
2:40
and we'll make a final one
called gameOverTextFadeIn.
2:45
Next we need to update the four
constant variables in this
2:52
file with the same name with
our private class fields.
2:56
Now to save you from watching
me type all this coding,
2:59
I'm going to fast forward to the bit
where I've already done that,
3:02
but you can pause the video here and make
those changes yourself before continuing.
3:06
Okay, now that the backgroundRect
displayBoxFadeIn, gameOverTitleFadeIn,
3:11
and gameOverTextFadeIn variables
are using our private class fields,
3:16
we can go ahead and
create our fade in method.
3:21
At the of the end of line 65 hit enter
a few times and right to fadeIn,
3:25
add parentheses,
then add curly braces and hit enter.
3:29
The purpose of this method is to
make the backgroundRect visible and
3:33
play all the tween animations.
3:37
So let's do that now.
3:39
On line 68, let's write
this.#backgroundRect.visible = true.
3:41
Then hit enter and
write this.#displayBoxFadeIn.play and
3:48
add parenthesis.
3:55
Then after that hit enter and
3:57
write this.#gameOverTitleFadeIn.play,
add parenthesis.
3:59
Then after that hit enter and
4:05
write this.#gameOverTextFadeIn.play and
add parentheses.
4:08
Whew, that was a lot of code.
4:14
Now let's go back to our LevelOne file and
update our code.
4:17
Let's remove the code related
to playing all the tweens and
4:22
showing the backgroundRect,
so that's line 88 to line 85.
4:25
And we'll scroll up a bit and
4:29
create a new constant that will
instantiate our gameOver class.
4:31
So on line 81,
write const gameOver = new gameOver,
4:34
then add parentheses and
inside the parentheses add the word this.
4:40
Cool, now that we've
instantiated our class,
4:46
we can then go into our player and
enemy overlap and run our fadeIn method.
4:49
So, let's first double click on
the word gameOver on line 82,
4:54
then at the end of line 86, hit enter,
press command V to paste it,
4:59
then write .fadeIn and add parentheses.
5:04
Cool, now let's go back to
our gameOver class, and
5:07
inside our constructor,
I forgot to assign our private scene
5:10
class field to our scene
argument from the constructor.
5:14
So let's do that now.
5:17
At the end of line 11, hit enter and
write this.#scene = scene.
5:18
I also forgot to update line 14, 15 and
16 to make use of our private class field.
5:24
So, let's select those three
instances of backgroundRect and
5:30
write this.# in front of them.
5:35
Nice, now let's check if our
GameOver class works in the browser.
5:37
Cool, the game seems to work fine.
5:42
So I'm going to move the player
by pressing the right key,
5:44
jump onto the first platform,
then interact with an enemy and
5:47
we can see that the game over
animations are working fine.
5:50
Nice, okay, let's go back to our code and
create one more prefab.
5:53
An obvious prefab to make would
be the one for the collectibles,
5:58
since if we had multiple levels,
we'll need collectibles in each level.
6:01
This is fairly easy to do.
6:06
First, let's open up our explorer,
right click on our prefabs folder and
6:08
create a new file called Collectibles.js.
6:13
Inside this file,
we're going to create a new class.
6:16
So write export default
class Collectibles and
6:19
this will extend
the Phaser.Physics.Arcade.StaticGroup.
6:25
Because we want this class to end
up with a static group of coins,
6:32
we extend the Phaser StaticGroup class.
6:37
Now inside our Collectables class,
let's create a constructor.
6:40
Let's open up the class, and on line 2,
write constructor, then add parentheses,
6:44
and inside the parentheses we're
going to give it two arguments,
6:49
one called scene and one called map,
then add curly braces.
6:53
Since we're extending a class we
need to call the super method inside
6:57
a constructor.
7:01
The StaticGroup constructor takes in
two arguments, the physics world and
7:03
the scene.
7:07
So, we can pass those two
arguments into the super method.
7:08
Let's open up the constructor and
on line 3 write super,
7:13
add parentheses and inside the parentheses
write scene.physics.world,
7:17
and after that we'll give it
a second argument of scene, nice.
7:23
In case you're wondering what the
arguments for the StaticGroup class look
7:28
like, we can option click on the
StaticGroup to open the type definition
7:33
file and we can see that the constructor
takes in an argument of World and
7:38
scene, and
an optional argument of children, cool.
7:43
Now let's go to our LevelOne.js
file to copy some code.
7:47
Let's scroll down to the code that's
related to the collectibles so
7:51
that's all of line 56 to line 49,
press Command X to cut it, and then let's
7:55
go into our Collectables.js file and
we'll paste it inside our constructor.
8:00
Because the Collectables
class is the StaticGroup,
8:05
our coins variable on line
6 doesn't make sense,
8:08
because it doesn't make sense to create a
StaticGroup inside of another StaticGroup.
8:11
So let's get rid of it.
8:17
And because we no longer
have a coins variable,
8:18
on line 8 we can replace the word
coins with the word this.
8:21
And so on line 8 we're creating coins
that will go into this group which is
8:25
called collectibles.
8:30
Let's go back to our LevelOne file and
instantiate our collectibles class.
8:31
One line 51 just write const
coins = new Collectables,
8:37
add parentheses and inside the parentheses
let's give it two arguments.
8:42
The first argument will be this and
the second argument will be map.
8:48
The coins variable here is used for
the overlap method between the player and
8:52
the coin.
8:57
Cool, let's test if this
works in the browser.
8:58
Okay, it looks like the coins
are showing up fine, and
9:02
if I overlap them with the player,
you can see the score is incrementing and
9:06
the coins are disappearing.
9:10
Cool, this refactoring
is going really well.
9:12
Let's see if we can do a bit more.
9:15
The next obvious prefab to
create is one for enemies.
9:17
Since this is really similar to the way
we created the Collectables prefab,
9:21
I'll give you the chance
to do it yourself.
9:25
What you'd need to do is create a new
file in the prefabs folder called
9:28
enemies.js and repeat the steps we
took to create the Collectables class.
9:32
You can pause the video here and
resume it once you're done.
9:38
And we're back.
9:43
Hope that wasn't too difficult.
9:44
I'm going to fast forward the video to
show you my completed enemies class.
9:46
Okay, and we can see on line 51 that
I've instantiated my enemies class and
9:51
assigned it to a variable called enemies.
9:56
Let's go into the enemies.js
file to see what I've done.
10:00
So here is my completed Enemies class, and
10:04
you can see it's pretty much
identical to the Collectibles one.
10:06
I'm extending the Phaser StaticGroup
class, and on line 8,
10:10
you can see that I'm creating a new
object and adding it to this group, nice.
10:15
Let's check if this has
worked in the browser.
10:21
Okay, the game seems to be
running fine without any errors.
10:23
And if I move the player and
interact with the coins, they will work.
10:27
And if I overlap an enemy,
the game over animation place,
10:32
which means that enemies are working fine,
nice.
10:36
Now if we look through this file,
the next big thing that could be
10:39
reflected is everything
related to the preload method.
10:44
In fact we could take this method out of
this class and give it its own class,
10:48
let's do that in the next video.
10:52
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