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 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