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
Understand how to add a second level to our game and link them together by adding an exit to our first level.
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 created a new scene called preload.
0:00
This was used to preload all our
assets instead of letting the LevelOne
0:04
scene do it.
0:09
In this video, we're going to add
a way to link our levels together.
0:10
Right now however, we only have one level
in our game, so there's nothing for
0:14
it to link to.
0:18
Let's create another level.
0:19
I've already created
a Tiled JSON file to use,
0:21
which you can download below,
under the teacher's notes.
0:25
Once you've downloaded it,
unzip the folder, and
0:29
place the file under the data
directory in the assets folder.
0:32
It should be called level_2.json,
just like this.
0:36
This level is very similar
to our first level,
0:41
it contains the same objects and
has the same name for layers.
0:44
The only difference is that
it's using different tiles and
0:48
these tiles are in different positions.
0:51
Let's load this level by going
to our preload class and
0:53
adding it below our level_1json line.
0:57
Put your cursor at the end of line 19 and
1:00
press Shift option Up
to duplicate that line.
1:03
Then change level_1 on
line 20 to level_2 and
1:06
change level_data to level_data_2.
1:11
Cool, since most of the code that's in
the LevelOne class right now can be
1:15
used in LevelTwo as well, let's create
a file that can contain the shared code.
1:20
In the scenes directory, let's create
a new file called BaseLevel.js.
1:26
Let's now go to our LevelOne file, press
command A to highlight all the code and
1:32
command C to copy, then we'll paste
that in our BaseLevel.js file.
1:38
Cool, let's first name LevelOne
on line 6 to BaseLevel.
1:43
And then let's scroll down and
get rid of the constructor on line 18.
1:49
Cool, next in our create method,
let's add two arguments,
1:54
one called tilemapKey and
another called collisionIndexArray.
2:00
These are the only things that
will change between our levels.
2:06
So, this is the information that we're
going to pass into our BaseLevel class.
2:10
Next let's double click on our
tilemapKey argument on line 22,
2:16
press command C to copy.
2:20
And on line 25,
let's replace level_data with tilemapKey.
2:21
Again, let's double click on
CollisionIndexArray on line 22,
2:28
press command C to copy.
2:32
And scroll all the way down to line 42 and
2:34
remove the array inside
the setCollision method.
2:37
And replace it with our
CollisionIndexArray argument by pressing
2:41
command V.
2:45
Cool, and that's it.
2:45
Let's use our new class
in our LevelOne scene.
2:47
On line 6, let's change the extents
from Phaser.Scene to BaseLevel.
2:51
And don't forget to check it that
BaseLevel is imported into this
2:56
file on line 5.
3:01
Now we can delete all the code
in our create methods.
3:02
So that's all the code from
line 66 all the way to line 28.
3:06
And we can replace that
with the following code.
3:11
On line 28, write super.create
3:14
(level_data, [1,
3:21
9, 10, 17]).
3:26
When we extend our BaseLevel class,
this class, so our LevelOne class,
3:31
will inherit all of its methods.
3:36
However, this isn't true if we create
a method in our LevelOne class
3:38
with the exact same name as
a method in the BaseLevel class.
3:43
Then the class in LevelOne will
override the class in BaseLevel.
3:47
So, if we want to run the create
method from our BaseLevel class,
3:52
we have to use the super keyword.
3:57
Nice, now let's remove some unused code.
3:59
We can remove all of our class fields,
so that's line 17 to line 9.
4:04
And we can remove all our imports
apart from the BaseLevel import, so
4:10
everything from line 4 to line 1.
4:15
We can also remove our update method,
and also our init method.
4:17
And that's it.
4:24
Now we can test all these
changes in the browser.
4:25
As you can see, our level still loads
in fine, we can move the character,
4:28
we can interact with coins, and
we can also trigger the game overstate.
4:33
Nice, this is a good place for
us to create our second level.
4:38
Let's go back to the code.
4:42
Let's open our explorer, and
in our scenes directory,
4:44
let's create a new file
called LevelTwo.js.
4:48
Now let's go back to our LevelOne file,
4:52
press command A to select all the code and
command T to copy.
4:55
Then in our LevelTwo file,
we can press command V to paste.
5:00
Now let's double click on
the first instance of LevelOne.
5:05
On line 3, press command D to
select the second instance and
5:08
change LevelOne to LevelTwo.
5:12
Next on line 10, we can change level
5:14
underscore data to
level_data to level_data_2.
5:18
And finally,
in the second argument of line 10, let's
5:22
remove all the items inside the array and
replace it with a new set of numbers.
5:26
The first will be 78, next 85,
5:31
next 77, next 69, and finally 70.
5:35
And that's it, that's how easy it is
to load a new level into our game.
5:40
Before we test this, let's add our new
level to our Phaser configuration.
5:45
Let's open up our main.js file.
5:50
And in the scenes key,
let's add our LevelTwo class,
5:52
make sure it's imported
at the top of the file.
5:56
Now, to make this easy to test,
let's go into our preload file and
6:00
replace LevelOne with LevelTwo.
6:05
Cool, now let's test this in the browser.
6:08
Nice, we have a new level
with a new set of tiles.
6:11
We can move the character around,
6:15
interact with coins ended up
on the platforms, very cool.
6:17
Now let's go back to our code and
connect our level one to our new level two.
6:21
To do that,
we're going to add a door image to our game.
6:27
To see what this image looks like,
we can open the open_door.png file.
6:30
As you can see,
it's a simple image of an open door.
6:36
We're going to make it so that when
the player overlaps with this door,
6:40
they'll be taken to the next level.
6:44
Let's go back to our preload file.
6:46
First, on line 26,
6:48
let's change the argument in the start
method from LevelTwo to LevelOne.
6:49
We can do this by pressing Cmd+Z.
6:54
Next, at the end of line 22, press
Shift option Up to duplicate that line.
6:56
And on line 23,
change displayBox to openDoor.
7:01
And in the second argument,
changeDisplay_box to open_door.
7:05
Next, let's go to our BaseLevel file.
7:11
And on line 22, at the end of
CollisionIndexArray, let's add a new
7:14
argument called options and we'll give
it a default value of an empty object.
7:19
Because we want the door to be
behind the player sprite but
7:24
in front of the background, the best place
to add it would be the BaseLevel class.
7:28
The first few arguments in the create
method of our BaseLevel class
7:33
are needed for the level to work but
the third argument will be optional.
7:37
This argument will be used to know
where to place the door image and
7:42
what level it should link
to when it's overlapped.
7:46
Now let's go to our level one file and
add some values for our exit door.
7:50
On line 10,
7:55
let's add a new argument after the second
one, and this will be an object.
7:56
So, let's add parentheses, hit enter.
8:00
And on line 11, write exit: {},
hit enter again.
8:03
Then on line 12,
a key of x with a value of 3582.
8:09
Then on line 13,
add a key of y with a value of 990.
8:15
And finally, on line 14, give this a key
of nextState and a value of levelTwo.
8:20
Cool, now,
let's go back to our base level file and
8:27
use these values to create our level exit.
8:31
Let's first create a new variable,
underscore value, called exitSprite.
8:34
This will hold the Sprite
object if it's created.
8:40
Then, above our enemies variable,
8:44
let's create an if statement to
check if the exit object exists.
8:47
At the start of line 37, hit enter and
8:52
write if (options.exit) {},
then hit enter.
8:57
And on line 39, write exitSprite
9:04
= this.physics.add,image(options.exit.x).
9:09
And then a second argument
of options.exit.y.
9:19
And a third argument of openDoor.
9:23
Right now,
because our image is a physics image,
9:26
it has to obey the physics
rules of our game.
9:30
Which means it's going to
fall through the floor.
9:33
We could go down the route of
giving our door collisions so
9:36
that it collides with the floor tiles.
9:39
But that's a lot of calculations for
the Arcade physics engine to make,
9:41
especially for an object that doesn't
need to be affected by physics.
9:45
To fix this, we can change
the image method to staticImage.
9:50
This will create an image
with a static body,
9:54
which means it won't be moved
by the physics engine, cool.
9:58
Next, let's scroll to the bottom
of the create method and
10:03
add an overlap between the player and
the exitSprite.
10:07
But only if the exit sprite exists.
10:11
At the end of line 57,
hit enter a few times and
10:14
write if (exitSprite) {} and hit enter.
10:21
Then on line 60,
10:27
write this.physics.add.overlap
10:29
(this.#player, exitSprite).
10:35
And our third argument is going
to be a callback function.
10:41
So, let's add our parenthesis and
write our arrow function.
10:44
And inside the arrow function,
10:48
we're going to write this.scene.start,
add parentheses, and
10:50
inside the parentheses add
options.exit.nextState and that's it.
10:56
What this is doing is when
the player overlaps with our door,
11:01
it's going to go to the scene that
we've specified in the options object.
11:05
Let's test this in the browser.
11:10
Okay, let's focus on getting
to the end of the level.
11:12
So, we'll move the character, jump on the
platform and try to collect all the coins.
11:15
And at the end of the level,
we can see our exit sprites.
11:20
Right now, the exit sprite isn't
in the perfect position, but
11:24
we'll talk about that later.
11:27
Let's walk towards the exit Sprite.
11:29
And when we overlap it,
we'll be taken to the next level.
11:31
This is really cool.
11:34
But as you saw before,
the door was in the wrong position.
11:35
This is something that's really easy to
fix and I'll give you the chance to fix
11:39
this yourself but
I won't go through the solution.
11:44
In the next video, we're going to
focus on adding some music and
11:47
sound effects to our game.
11:51
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