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 load a Tiled level into your game using Phaser. This includes importing the Tiled map data, tilesets, and specific layers into our Phaser game.
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 learnt how to
design a simple level using Tiled.
0:00
In this video, we're going to learn
how to load that level into our game.
0:05
Let's start by looking at the file
that was created by Tiled.
0:10
This is actually a JSON file,
but it has a .tmj extension,
0:15
so that Tiled can recognise it.
0:19
However, if we give
this a .json extension,
0:23
Tiled would still be able to open it, and
0:26
would also benefit from some syntax
highlighting, so, let's do this now.
0:28
I'm going to right-click on the file,
select Rename, and remove tmj and
0:35
replace it with json.
0:40
Nice, now we're getting
some syntax highlighting.
0:42
You'll notice straight away that there
are a lot of numbers in the data array on
0:45
line 6.
0:50
This is all the information that Tiled
outputs for our ground tilelayer.
0:51
All these numbers in the data array
represent the cells on the grid, and
0:58
if the number is greater than zero,
that means a tile was placed in that cell.
1:02
You can see that there
are a bunch of 9s on line 14.
1:08
This represents the tile,
that was used to cover the whole floor.
1:11
It has a number 9, because it's
the 9th tile, in our tile set.
1:16
Let's take a look at our tile set and
confirm this.
1:21
I'm going to press Command P, and navigate
to the spritesheet_ground.png file.
1:24
Let's zoom in by clicking on this file.
1:30
And we can see that the first tile in
the top left corner is tile number 1.
1:32
The second is number 2,
the third is number 3, and so on.
1:38
This image is actually a bit deceiving,
because there's a gap on the far right.
1:42
Which can also be used to represent
a tile because a tile is a space
1:47
that is 128 by 128 pixels.
1:52
So the eighth tile is
a block on the far right,
1:56
which means the first tile on
the second row is tile number 9.
1:59
Let's go back to our level_1.json file.
2:04
We can then conclude that number 17,
9, and
2:08
1 represent the platforms
that we added to our level.
2:11
Phaser will use this data to place
the tiles in the correct positions.
2:16
If we scroll down and compare how tiles
are represented in a collection layer,
2:20
you can see that on line 28, the name
of the layer that we're on is called
2:26
Collectibles, which is
the name we gave it in Tiled.
2:30
And from line 29 onwards,
2:34
these are the objects that have
been placed by us in Tiled.
2:36
This is the main difference between
a tile layer and an objects layer.
2:41
For object layers, we'd have to loop
over each object in the array and
2:45
place the images using the x and
y positions provided for each object.
2:50
You can see now that line 147 and
line 148, give us x and
2:55
y coordinates for this specific object.
2:59
This is why SKUs are not recommended for
3:02
object layers because they don't
seem to get captured in the object.
3:05
Let's go ahead and
load this level into our game.
3:09
We need to preload three assets for
our level.
3:12
The spritesheet_ground.png file,
3:15
the coin_goals.png file and
the level_1.json file.
3:19
Let's go ahead and load all these assets
in the preload method below where
3:25
we load in the assets for our player.
3:29
Of the end of line 16,
hit Enter and type this.load.image.
3:32
Add parentheses and
inside the parentheses,
3:37
we're going to give it a first
argument of ground_tiles,
3:42
and a second argument of
assets/images/spritesheet_ground.png.
3:47
Then at the end of line 17,
hit Enter and type this.load.image,
3:54
add parentheses, and
inside the parentheses,
4:00
we're going to give it
a first argument of coin and
4:04
a second argument of
assets/images/coin_gold.png.
4:09
Next we need to preload the JSON file for
our level.
4:14
To do that,
4:18
we're going to use a method from the load
property called tilemapTiledJSON..
4:19
At the end of line 18, hit Enter and
type this.load.tilemapTiledJSON.
4:25
Make sure JSON is all in capital letters.
4:33
Then add parentheses, and
inside the parentheses,
4:36
we're going to add a first
argument of level_data.
4:39
And in the second argument,
4:43
let's write assets/data/level_1.json.
4:46
I've noticed tilemap has
a blue squiggly line,
4:51
which means it isn't recognised
by our spellchecker.
4:54
So let's go ahead and highlight the word,
then click on the yellow lightbulb icon
4:58
on the left side, then click on,
Add: " tilemap" to user settings, nice.
5:03
Next, in our Create method,
we need to create a new tilemap object.
5:08
Let's scroll down and
at the end of line 46,
5:14
let's press Enter a few times and
type this.make.tilemap.
5:18
Add parentheses, and
then inside the parentheses add
5:24
curly braces, then add key: 'level_data'.
5:29
Okay, since we're going to be
passing this tilemap object around,
5:34
let's assign it to a variable.
5:38
At the beginning of line 48,
write const map =, cool.
5:41
Now let's create something called
a tileset object out of our
5:46
spritesheet_ground image, so that Phaser
can use it to create the ground tiles.
5:50
This is so that it knows what
number corresponds to what tile.
5:56
For this we're going to use a method
called addTileSetImage which is
6:01
available on the tilemap object
we assigned to the map variable.
6:05
At the end of line 48, hit Enter and
write const groundTiles
6:09
= map.addTileSetImage,
then add parentheses, and
6:15
inside the parentheses add a first
argument of ground_tilesheet,
6:20
then add a second
argument of ground_tiles.
6:27
It looks like the word tilesheet isn't
recognized by our spell check plugin,
6:31
so let's go ahead and fix that, cool.
6:36
So the first argument in
the addTileSetImage method needs to match
6:39
the name that we gave
the tile set in Tiled.
6:44
And the second argument needs to match
the name that we gave our tile set
6:47
image in the preload method of this file.
6:51
Now that Phaser has created
a tilemap object and
6:55
has the correct tilemap image to use,
all we have to do
6:58
now is to tell Phaser which layer we
want to create from our map data.
7:02
Of course, Phaser has a helpful
method to do this called createLayer.
7:07
At the end of line 49, press Enter and
write map.createLayer.
7:12
Add parentheses, and inside
the parentheses add a first argument of
7:18
ground and
a second argument of groundTiles.
7:23
The first argument in the createLayer
method is a string for
7:27
the name of the layer.
7:30
This name needs to match the name we
gave the layer in the tiled map editor.
7:32
The second argument, is the tile set
that we want to use for the layer.
7:37
And of course,
we're using our groundTiles variable.
7:42
Sweet, this will use the layer data to
add the correct tiles to the screen, and
7:45
that's it.
7:49
Let's see what this looks
like in the browser.
7:51
Very cool, the level that we made in
Tiled is now showing up in our game.
7:54
This is great, but
it does have a few issues.
7:59
The first is that the tiles aren't
exactly in the right position.
8:03
If we have a look at the floor, we should
see a lot more of the ground tile, but
8:07
we just see half of it.
8:12
The second issue is,
if we hold on to the right key and
8:14
keep walking to try to get to the end
of the level, it seems that we can't.
8:17
We get to the right screen boundary and
stop.
8:23
Let's see how we can fix
these issues in our code.
8:26
The reason our tiles are not in
the right position vertically is
8:29
because the height of
our map is 1152 pixels.
8:33
But the height of our screen is 1080, so
8:37
our level tiles are being
cut off at the bottom.
8:40
We can fix this in many ways.
8:44
But the best solution in our case is
to update the dimensions of the main
8:46
camera to match the dimensions of our map.
8:50
You can imagine the camera and Phaser to
be like a window into the game world.
8:53
Every game has one, and
we can customize it to fit our needs.
8:58
We can also change the camera so
9:01
it follows the player which will
allow us to see more of the level.
9:03
At the end of line 50,
let's press Enter a few times and
9:08
write this.cameras.main.setBounds,
add parentheses,
9:13
and In the parentheses as
a first argument of 0,
9:18
a second argument of 0,
a third argument of map.widthInPixels,
9:22
and a fourth argument
of map.heightInPixels.
9:28
Make sure on line 52 you're
using the plural of camera,
9:33
so cameras and not camera without an s.
9:38
The first two arguments in the set bounds
method refer to the x and y coordinates.
9:41
Because we want that to stay in the top
left corner, we keep those values 0.
9:46
The next two arguments, so the third and
fourth arguments are the width and height,
9:51
and we want these to have
the dimensions of the map.
9:56
That's why we've placed the width and
height from the map as the third and
9:59
fourth arguments.
10:03
Cool, next, let's add some code for
the camera to follow our player.
10:04
At the end of line 52, press Enter and
10:09
write this.cameras.main.startFollow,
add parentheses and
10:12
inside the parentheses,
put in an argument of this.#player.
10:18
The startFollow method takes an argument
of the objects we want the camera to
10:24
follow, and in this case it's our player.
10:28
Before we test this out,
10:31
let's match the physics world bounds of
our scene to the dimensions of our map.
10:33
We can do this using the setBounds method.
10:37
At the end of line 53,
press Enter a few times and
10:41
right this.physics.world.setBounds.
10:45
Add parentheses, and in the parentheses,
add a first argument of 0,
10:48
a second argument 0,
a third argument of map.widthInPixels,
10:54
and a fourth argument
of map.heightInPixels.
10:58
Sweet, it almost feels as a Phaser
has a method for everything we need.
11:02
Okay, let's see what this
looks like in the browser.
11:07
This is looking better,
the tiles are now in the right position.
11:10
And if we move the player to the right
by holding on to the right key,
11:15
the camera starts to follow the player.
11:18
Which means we can go past
the screen boundary all the way
11:21
to the end of the level.
11:25
Perfect, now all we need to do is add
some collision detection to our tiles,
11:27
so we can jump on the platforms.
11:32
But before we do that it's time for
a quiz to test what you've learned so far.
11:34
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