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
Discover how to create a central place to preload all the assets in our game to prevent duplicate preloading.
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 refactored our
code by breaking things up into prefabs.
0:00
In this video,
we're going to continue refactoring by
0:05
moving our preload methods
into its own class.
0:08
Right now, our game only has one scene,
so it's okay to put all the assets
0:11
to preloads in the preload
method of our level 1 scene.
0:16
But if we had more scenes we'd have
to create a preload method for
0:20
each scene to load similar assets each
scene will need collectibles enemies
0:24
a player and so on so it's wasteful
to load these assets multiple times.
0:30
It makes much more sense to put all
our assets to preload in one place.
0:35
Then when someone first loads our game,
all the assets only need to load once.
0:40
Let's do that now.
0:46
Let's open up our file explorer,
and in the scenes directory,
0:47
let's create a new file called Preload.js.
0:52
Inside this file let's create
a new class called preload
0:56
on line one let's write export
default class Preload and
1:01
this will extend the Phaser.Scene class.
1:07
Next, let's create
a method called preload.
1:11
And for now, leave it empty.
1:15
Let's hit Enter and on line 2,
write preload at parentheses and
1:17
then add curly braces.
1:22
Now let's go back to our level one file.
1:24
Let's scroll down and select all
the code in our current preload method,
1:27
so that's line 29 to line 19.
1:33
Press Command X to cut this code and
we'll go back to our Preload.js file and
1:36
paste it inside our preload method.
1:41
Sweet we're halfway there,
now we need to tell this file to go
1:44
to the level one scene after
it's done loading the assets.
1:49
We can do this using the scene start
method, however, this only works inside
1:53
a create method, so let's add a create
method below our preview one.
1:58
At the end of line 14,
hit Enter a few times and write create,
2:04
add parentheses, add curly braces and
inside the curly braces,
2:08
we're going to write this.scene.start,
add parenthesis, and
2:12
inside those parenthesis, we're
going to write level one.
2:17
Now if we were to test this in
the browser, it wouldn't work because we
2:22
haven't told Phaser that our level
one file has the key of level one.
2:26
Let's do that now.
2:30
In our level 1 file, let's double click
on the word preload on line 18 and
2:33
replace it with the word constructor.
2:37
Now inside our constructor,
let's write super, add parenthesis,
2:39
inside the parenthesis add curly braces
and we'll give it a key of level one.
2:44
Cool.
2:50
Now that we've done this,
2:51
other scenes can refer to this
scene by using the key level1.
2:53
You may be wondering why we've
never used the constructor or
2:56
super method in a phaser scene before,
but instead we use the create method.
3:00
This is because a constructor method
is only called once when a class is
3:05
instantiated.
3:10
But as we know, scenes can be restarted
with the scene restart method.
3:12
If we created all our scene
elements in the constructor and
3:17
restarted the scene,
the objects would not be recreated,
3:20
whereas the create method is called every
time a scene is started or restarted.
3:24
So it's better to use the correct method
to create our scene elements okay we've
3:30
done everything we need to in this file
let's now go to our main.js file and
3:35
include the preload scene
in our games config.
3:40
In the scene property on line 13 let's
double click on level one, and then press
3:45
the square brackets key on your keyboard
to wrap level one in square brackets.
3:50
Then in front of level one,
we'll add the word preload.
3:55
Don't forget to check that the preload
class has been imported correctly at
3:59
the top of this file.
4:03
Sweet.
4:05
Now let's test this in the browser.
4:05
Nice, as we can see, the game and
all the assets still load in correctly.
4:08
This is good, but my internet
connection at home is quite fast.
4:13
Let's see what would happen for
someone with a slower internet connection.
4:17
I'm going to right click on
the browser and click on inspect.
4:21
Then I'm going to click on
these two grey arrows,
4:25
which you won't have on your inspector
tools because I'm zoomed in on my browser,
4:28
and I'm going to select network.
4:32
From here, I'm going to click the drop
down that says no throttling,
4:34
and change it to fast 3g.
4:38
Now if we refresh the page,
you'll see that it goes white for
4:41
a few seconds while it
loads the javascript.
4:44
Then we see grey for a fraction of
a second and then the game is loaded.
4:48
It would be nice to let users know that
the game is loading when this happens.
4:52
So let's add some loading
text to our preload scene.
4:57
We can add text in the preload method
the same way we add text in the create
5:00
method.
5:05
So this should be very easy.
5:06
At the end of line two hit Enter and
write this.add.text, add parentheses and
5:08
hit Enter again, we're going to add
a lot of arguments to this method.
5:14
On line four, and
that's right 1920 / 2, and
5:20
on line five, let's write 1080 / 2.
5:24
On line six,
we write the text loading with three dots.
5:28
And then on line seven,
let's add curly braces and hit enter.
5:32
We're going to increase
the font size of this text.
5:36
On line 8, let's write fontSize and
we'll give that a value of 60 pixels.
5:39
Then at the end of line 10, let's
write .setOrigin, add parentheses and
5:44
inside the parentheses we're
going to give it a value of 0.5.
5:50
Since we want the text to be
in the center of the screen,
5:54
we're using half of the screen dimensions.
5:57
We've hard coded the values 1920 and 1080.
6:00
But we could have also used
this.game.config.width or dot height.
6:04
This text could have been placed
anywhere in the preload method, but
6:11
I like to put it at the top so
that is the first thing that loads cool.
6:16
Let's test this in the browser.
6:20
Don't forget to make sure that in
the dev tools in the Network tab,
6:23
fast 3G has been selected
from the drop down.
6:27
Now refresh the page, and
6:30
you should be able to see the loading
text we added in the preload scene.
6:31
Nice.
6:36
Let's go back to our code.
6:37
Our level one scene now looks way more
manageable without a preload method.
6:39
We could continue refactoring this class,
but let's leave it for now and
6:44
move on to the next feature.
6:48
Right now,
when the player collects all the coins and
6:51
gets to the end of the level,
there's no way to get to the next level.
6:54
In the next video we're going to add a
door that will take the player from level
6:59
1 to level 2 and
we'll also add a second level to the game.
7:03
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