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 the basics of Tiled, a popular map editor for game development, by creating a level.
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 gravity and
the ability to jump to our game.
0:00
In this video,
0:05
we're going to learn how to design
a level using a program called tiled.
0:06
Tiled is a free and
open source map editor and
0:10
it's one of the most popular
editors out there for 2D games.
0:13
It's been used to make some well
known games like Stardew Valley,
0:18
Shovel Knight, and Axian Verde.
0:23
To download it, you can visit this
site called mapeditor.org and
0:25
click on this green button
that says download on itch,
0:30
then click on this purple
button that says Download Now.
0:34
You're welcome to support
the developer by donating, but
0:38
you can also click on this
link to download it for free.
0:42
Find the version that matches
your operating system and
0:46
click on the red Download button.
0:50
Since I've already got Tiled installed,
I don't need to download it again.
0:52
Once it's downloaded,
all you have to do is unzip the folder and
0:57
you'll see the application.
1:01
If you're on a Mac, you may want to move
the tiled app to your applications folder,
1:03
so it can be found by Spotlight,
but that's an optional step.
1:09
Now let's open up Tiled.
1:14
At the time of recording,
the latest version of Tiled is 1.10.1.
1:17
You can see that in the top right
hand corner of the screen, but
1:22
your version may be different.
1:26
Also, I've changed the default font
size in my Tiled to be a bit bigger,
1:28
so it's easier to read.
1:33
And it may be bigger than
the font size you have, but
1:35
that's nothing to worry about.
1:38
Okay, let's build our first level.
1:39
Go ahead and click on the New Map
button on the left-hand side and
1:42
you should see a window pop-up.
1:46
Let's leave the three
drop-downs as they are.
1:48
So orientation should be orthogonal.
1:51
Tile layer format should be CSV and
tile render order should be right down.
1:54
For the tile size box on the bottom right,
make sure the width
2:00
is set to 128 pixels and
the height is also set to 128 pixels.
2:06
This is the size of the tile in
the spritesheet_ground.png image.
2:12
You can take a look at that in the images
folder under assets if you're more
2:18
interested.
2:23
For the bottom left
section called Map Size,
2:24
let's keep the radio button on fixed and
not infinite and
2:28
let's make sure the width has 30 tiles and
the height has 9 tiles.
2:32
I want the first level to be twice the
width of our game screen which is 1,920,
2:38
but I don't want the level to be
much taller than the screen height.
2:43
Once you're done changing the settings,
press OK and
2:48
you'll be taken to a different screen.
2:51
If you've ever used a design
tool like Photoshop or
2:54
Figma, you'll notice that
tiled has a similar layout.
2:58
The middle lighter gray section is where
we're going to be placing our tiles and
3:02
images to create our level.
3:06
You can zoom up by pressing command and
scrolling the mouse wheel, and
3:08
you can pan holding the space
bar clicking, and moving around.
3:12
The squares on the grid here match
the size of the tile height and
3:19
width that we set earlier.
3:23
The left sidebar shows information
about a tile that's on the map.
3:25
Right now, it's showing
information about the whole map.
3:30
The right sidebar shows
information about the layers,
3:34
which you can see at the top section.
3:37
Near the bottom of the right sidebar,
3:40
we can see information about
the tiles that we can use.
3:42
Right now we haven't set any, but
we will later in this video and
3:46
the top bar shows all the tools
that are available to us.
3:51
Since this isn't a course about tiled,
I won't go through all the features in
3:55
detail, but I'll talk about the ones
that we're going to use for this course.
4:01
Okay, let's start by renaming the default
layer from tiled layer one to ground.
4:06
You can do that by simply double-clicking
on the layer name and then typing ground.
4:13
Next, let's add a Tileset.
4:18
Click on the new Tileset button below
the layers section on the right sidebar.
4:21
This should show a new window.
4:27
Let's change the type from collection
of images to based on Tileset image and
4:29
make sure embed in map is checked.
4:34
If we didn't embed the Tileset in a map,
then the Tileset would be saved as
4:38
a separate file which would make
things a bit more difficult to manage.
4:42
Next, let's make sure the tile
width is 128 and the tile height is
4:47
also 128 to match the sizes of the tiles
in the image we're going to use.
4:52
Then let's click on the Browse button and
4:58
locate the spreadsheet_ground.png
file in the images folder,
5:01
which is in the assets folder of our game.
5:07
Once you found it, press Open and
you'll see the name has been
5:10
automatically filled based on the name
of the file that we're using.
5:14
Let's change the name from what
it's set to ground_ tilesheet.
5:18
Nice, once all that's done,
we can press OK.
5:25
Now, we can see all our tiles
at the bottom right-hand side.
5:30
If they look a bit better big for you,
5:34
you can change the percentage value
from the drop-down that says 100%.
5:36
Let's change it to something like 25%.
5:41
No wait, that's a bit too small.
5:45
Let's make it a bit bigger say, 50%.
5:46
Okay, that works.
5:49
Nice, let's select the first
tile from the second row.
5:51
This is what's going to be used for
the ground for our first level.
5:56
Let's hover this on the bottom left
square of our grid, then hold on
6:01
to the Shift key and drag this all the way
to the bottom right square of our grid.
6:05
Cool and just like that,
our level has a ground.
6:11
Now I have a habit of
saving my work often, so
6:15
let's save this map before
we add any more tiles.
6:18
Press Cmd+S on a Mac and
Ctrl+S on Windows to save.
6:21
Let's navigate to our assets data
folder and call the map level_1.
6:25
Make sure it's been saved as a JSON and
not an XML.
6:31
We can change that using
the drop-down at the bottom.
6:37
Once that's done, press Save.
6:42
And you should see on
the tab at the top left,
6:45
it's been saved as
level_1.tmj instead of .json.
6:49
We can change the extension later.
6:55
For now, let's add some platforms to
our level for our character to jump on.
6:57
To add our platforms,
7:02
we're going to use three specific
tiles from our ground tile sheet.
7:04
One that has rounded corners, just on
the top and bottom right-hand side.
7:08
This is the title, but
in the top left hand corner,
7:14
then we're going to use one that
doesn't have any rounded corners.
7:18
That's the one that's currently
selected and we're also
7:22
going to use one that has rounded
corners just on the left-hand side.
7:26
You'll also see that on our grid,
for every ten squares,
7:30
there's a thick black line.
7:34
This is going to help us know what
positions to place our tiles in.
7:36
Let's add a platform to the second thick
black line one square up from the ground.
7:40
The game has been configured, so that
the character can jump three squares high.
7:47
Let's make this platform three tiles long.
7:52
And for the middle of the platform,
let's add a tile with no rounded corners.
7:55
For the end of the platform,
8:01
let's add a tile with rounded
corners just on the right-hand side.
8:02
And for the beginning of the platform,
8:07
let's add the tile with rounded
corners on the left-hand side.
8:09
Let's add another platform
two squares above and
8:14
two squares from the right of
the platform we just created.
8:17
This platform is going
to be four tiles long.
8:21
Again, the tile on the left will
be the one with rounded corners on
8:24
the left-hand side.
8:28
We'll have two tiles in the middle,
which will have no rounded corners and
8:30
we'll have one tile on the right-hand side
which is going to have rounded corners
8:34
just on the right.
8:39
Then on the same height and
two squares to the right of that platform,
8:40
let's add another platform that's
going to be two tiles wide.
8:46
Finally, let's add one more platform which
is going to be one square wide and we're
8:50
going to put that one square to the right
and one square below our latest platform.
8:56
Cool, don't worry if you haven't
positioned the platforms exactly like
9:01
mine, you can always remove
the ones I have suggested and
9:06
add once that you want
to suit your tastes.
9:09
You can easily remove a tile by
pressing the eraser button in
9:11
the top tools bar and then clicking
on the tile you want to remove,
9:16
and you can add a tile by
pressing on the stamp icon, and
9:22
then selecting the tile you want to add.
9:26
While we're here,
let's add some collectibles to our level.
9:33
Let's first create a new layer by
clicking on the new layer icon and
9:37
selecting an object layer
instead of a tile layer,
9:43
then change the name of
this layer to collectables.
9:47
The reason we are using an object
layer instead of tile layer is
9:51
because tiles have to stick to the grid.
9:55
We cant add tiles between the grid,
but we can with objects.
9:57
Objects can go wherever we want, which
is perfect for our collectable items.
10:02
Let's add a collectable
image to our tilesets.
10:07
First, click on the icon in the bottom
left of the tileset section.
10:11
Then from the drop-down, change based on
tileset image to collection of images.
10:15
In the name section,
give it the name of level_objects.
10:21
Make sure that the embed in map
checkbox is checked and press OK.
10:25
Next in the tileset section,
click on the level_objects tab.
10:31
Then at the bottom, click on the icon
with the wrench to edit this tileset.
10:36
You should be taken to a new window.
10:41
Then in the top toolbar,
click on the blue plus button and
10:44
navigate to the coin_gold.png image in
the images folder in our assets folder.
10:48
Select that and press OK.
10:54
You should see the coin
appear inside our tileset.
10:56
Now, save and
close this tab to go back to our level and
11:00
we should see that the gold coin is inside
our tileset section in the right sidebar.
11:03
Now, we can place this coin anywhere
in our level without needing to snap
11:09
to the grid.
11:13
Let's place ten coins all over our
level in places that it's easy for
11:15
the player to get.
11:18
If the coin doesn't show
it on your mouse coaster,
11:21
you can click on this picture icon in
the top toolbar to get it to show.
11:23
If you still want to snap the coin
to the grid, you can do so
11:27
by holding the command key and
selecting where you want the coin to go.
11:31
I'm going to place one three
tiles from the beginning and
11:35
then three tiles after that, and
then I'm going to place one on the first
11:39
tile of the platform, and then above
the last tile of the first platform.
11:43
And then I'm going to place one in between
the first and the second platform,
11:48
and then I'm going to place one here above
the second tile of the second platform,
11:52
and then I'm going to place one above
the last tile of the second platform.
11:57
And I'll also place one
in between the second and
12:01
third platform, then I'll place
one above the third platform.
12:05
And then finally,
I'll place one above the fourth platform.
12:10
No, I'll place one at the bottom
on the ground and that's it.
12:14
Of course,
you can put your coins wherever you want.
12:18
And if you want to adjust the position
of a coin, you can do so by first,
12:22
clicking on that coin and then clicking
on the icon with two purple shapes.
12:26
This should give you some
arrows to adjust your coin.
12:32
You can change the position of
your coin by moving it around and
12:35
you can also change the SKU and
size of your coin.
12:39
However, I wouldn't advise changing
the SKU since it could cause some issues
12:42
when it comes to adding
these coins in our game.
12:47
Nice and this is a great start
to our platformer level.
12:51
In the next video,
12:55
we're going to learn how to load
this level into our game in Phaser.
12:56
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