Web Class: Creating Levels with Tiled for a Top Down RPG

You can access the latest Phaser courses here: HTML5 Game Development Mini-Degree

Transcript 1

Welcome: in this course I’ll be showing you how to make this Phaser 3 top-down game.

I’ll be showing you how we can handle player input to move our player around the map. We’ll be handling collision between the player and game objects in the game. I will show you how to pick up, or we can add collectibles that the player can pick up. And we’ll also add in mechanics for allowing the player to shoot the enemies, and also when he collides with the enemies, he’ll take damage. And we’ll also add in logic to transition between Phaser scenes, so we can have multiple levels in our game, and we can also transition back. And lastly I’ll be showing you how we can actually pass data between the scenes, so that way our game will keep the same state as we’re loading between levels.

The maps in the game here were created with Tiled. I’ll be showing you how we can create a tile map in the Tiled Map Editor, and how we can export that data out, and load that into Phaser for our game.

And lastly, we’ll be using Webpack and Babel in our Phaser game. That way we can utilize newer JavaScript features, and we’ll be using Webpack so we can actually separate our code into multiple files and then have Webpack bundle all of our code into one build file.

Let’s get started.

Transcript 2

For our game, we will be using the Tiled map editor to create our levels. If you’re not familiar with Tiled, it is a fantastic 2D level editor that will allow you to edit your tiled maps, place images. You can also use it to add metadata to your levels. And all of that can be exported out to a JSON object, which we can use to import into our Phaser game. You can find Tiled at mapeditor.org, and you’ll be taken to this page here. And to download Tiled, go ahead and click on the download itch.io and then here you can click on the download now button. Tiled is a free tool, but you can help support the developer by making a donation.

You can either pay for the program or you can make a different contribution down here. If you don’t want to pay anything just click this link here and it’ll take you to the downloads page and from here, you just need to choose the appropriate installer for your development machine and then go ahead and click on download.

While that’s downloading, one thing I do recommend is you can take a look at the documentation here The documentation gives you little tutorials on how to get started with Tiled, it goes through all of the different tools that are available in the application. So, it’s definitely a good reference for while you’re working with the program. Once Tiled is downloaded go ahead and run the executable, and while you wait for it to install go ahead and pause the video. Alright now that Tiled is installed I’m going to go ahead and boot up the application you should be presented with a screen like this.

So the first thing we’re gonna do is we’re going to create our map. So when you do, you’re given a few different options, the orientation of your map, so Tiled supports a few different Tiled maps, orthogonal, isometric, hexagonal for our map we’re just gonna do orthogonal. And then they give you your tile layer format, we’re gonna leave that at CSV, and the tile render order, we’ll just leave it at right down, so it’s gonna start in the right corner and then render it down. Next is your map size, this will determine how many tiles are actually gonna appear in your map.

So you have you’re width and height, we’re gonna leave it at 10 for right now. Next is your tile size, when you’re importing your sprite sheets into Tiled each square, each tile, will be this many pixels wide by this many pixels high, so if you import a sprite sheet that is 32×32, I recommend that you do that, so that way your sprites will fit the tile itself. For the map I’m using it is 64×64, so we’re going to hit save as, and then you just enter in the name of your level and the this will take you into Tiled, so there’s lot going on here, so we’ll kind of do a high level review of what the different sections are and then we’ll start building our level and we’ll cover the individual tools we’re using at that time.

The first thing you can see up here is your tool bar, this is all of the different tools that are available to you while you’re editing your map, and also while you’re inserting objects. Over here is your properties, so this is the properties of your map, and this will change depending on if you’re looking at an at an individual object or if you’re looking at individual layers, this is just the metadata that’s tied to it. Over here is your layers, so Tiled supports multiple layers and what we’re gonna be using it for is we’re gonna have a layer that’s gonna include background, and this is just gonna be the background layer that we presented to the user in our game.

And then we’re gonna have a second layer, which will be our blocked layer, and these are gonna be our sprites that are gonna block the player’s path while they’re moving around the game. And the reason we’ll use the layers is when we import those into Phaser, we can treat each layer as a different sprite group. And then that way we can easily add gliders between the player and the blocked objects.

And then down here, this is where you can import your tile set that you’ll be using to put the tiles into your game. So what we’ll do is we’re gonna do a new tile set and you wanna browse to the sprite sheet. So, in this project start folder, you’ll see the RPG pack sheet, tile sheet, was wondering why I hadn’t opened that yet. And then down here you wanna specify the appropriate tile dimensions and then the margin and spacing if there is any. The tiles in this sprite sheet are 64×64 and then there’s no margin or spacing.

And the next you can go ahead, we’re gonna leave the name as RPGpack_sheet the name is important here, because this is the key that we need to specify in Phaser when we import our JSON object that has our Tiled map data. Lastly you’ll wanna check the embedded map option. This will embed the sprite sheet inside our Tiled map and then that way it’s part of the export that we’ll use when we load the data into our game in Phaser.

So we’ll go ahead and click okay, and then you’ll see that our sprite sheet has been loaded down here, and each tile will be created based on the properties we inserted, so as long as you chose the right dimensions, your individual sprites should be cut properly. And the first tool we’re gonna look at is gonna be the stamp brush, what that does is it allows you to click on an individual tile, and you can add in the sprite you have selected here into that tile space. You can click and drag your mouse to easily add multiple sprites at a time, but if you want to do like a larger selection, these are other tools, so just for example if I wanted to have this grass sprite cover all of the tiles here, what we could do is use the bucket fill tool.

So we’ll go ahead and delete our layer and add a new one. And if you grab the bucket, go ahead and apply this, select a sprite and see the group of sprites that you click on. So for example let’s say you have these sprites here, what the paint bucket will allow you to do is it finds similar sprites that are in that group, so as you can see, where I’m highlighting I would be changing those sprites that I have selected. The next tool is the eraser, so if you want to remove a sprite, you just go ahead and cover it like this, you can easily erase sprites.

The next tool we have is the rectangular select tool, and what that allows you to do is select the tiles on your map, and then when you are editing your map, you can only edit tiles that are in that selection. So you see if I’m outside here it’s not actually applying my sprite. The magic wand tool is similar, except the main difference is it selects sprites based on if they’re similar of not, so as you can see, like I selected this group here, or I could select that group, and then similarly I can only edit sprites that are in that selection. The next tool you have is the select same tile, what that does is it selects any tiles that are the exact same sprite, and then that way for that selection you’re only editing those tiles.

Alright, so I’m gonna go ahead and delete that layer, and we’re gonna add a new layer, and we’re gonna add a new layer and then we’re gonna call it background. We’ll go ahead and just use a grass tile, and we’re just gonna apply that for all of our background sprites here. So, the next thing we’re gonna do is we’re gonna add in our blocked sprites layer, so we’ll make another layer and we’ll call it blocked. And one of the nice things you can do here, is do you see this eye icon and these locks, it’ll toggle the display of the layer that you’re on, and you can also lock it so that way you don’t accidentally edit it when you’re trying to edit another layer.

And what we’re gonna do here is we’re gonna take some of these sprites and we’re gonna add, so what we’re gonna do is we’re gonna take some of the sprites here and we’re gonna add some obstacles for our player in our game. So we’ll chose that sprite, let’s put one here. And for any sprites that are bigger than one tile, you can go ahead and select multiple tiles, and then in your level you can just click to add both of those sprites to your level. So you see we can add multiple trees like that, we don’t have to select each tile individually. So next we’re gonna look at adding objects to our game, so objects allow for us to specify positions of where we want to place objects in our game.

And what we can do in Phaser is when we load in that object layer we can then associate a sprite with it and we can automatically use the position from the metadata that’s pulled in to place that sprite where we want it in our game. So to get started with layers, the first thing we’ll do is we’ll click on the new button here, and we’re gonna click on object layer, and the first thing you’ll notice is our tool set has actually changed to the object tool set instead of our normal tile tool set, and you can place objects in a few different ways, so first what we’re gonna look at is the insert tiles tool, and that allows you to use a sprite as a representation of your object. So we’re going to click here.

So one thing to know with the object is they will appear where you actually click on your map, so if you need to move your object around you can click on the select object tool, and this will let you drag it around. Your second option is you can also input your x- and y-coordinates here, and then that will move the object to where you want it to be. So some of the other tools available are you can use the rectangle, the point, the ellipse, or the polygon tools to represent the objects that you want to place in the game.

So I’m gonna go ahead and delete our object layer, and we’re gonna add a new layer, a new object layer, we’ll call it layer. So we’re gonna use this layer to represent the player’s starting point in our game. So for this I’m just gonna go ahead and use a point. Let’s say the player’s gonna start right here. So when your object’s selected it has the metadata here. So I’m gonna go ahead and give it a name of just StartingPosition, and I’m also gonna use that for the type as well.

So where types are useful if you’re gonna put many different types of object on one layer, you can use the type field to differentiate between them, and then when we load that metadata into Phaser, we can then get our objects based on that type. You can also add custom properties to your object and those will be imported… those will also be exported in the JSON object that we’ve imported to Phaser.

One example is let’s say if we had multiple sprites we could associate with our enemies, we could add a new property called sprite, and here we could put in the name of the sprite that we wanted to use, so we’ll say enemy1. Then that way we can use different sprites based on this property here. Then you can also remove any properties if you don’t need them. So similar to your other tile layers, you can go ahead and turn off the display, you can also lock them. Alright, so we’re gonna go ahead and add a few more object layers to our game. In our game we’re gonna have enemies, we’re gonna have some collectable coins that you can pick up. And we’re also gonna have a portal, that we’ll use for transitioning to the next level of our game.

So we’re gonna create a layer for each of these. Enemies, and then coins, and then we’ve got portal. So you could easily put all of these objects on one layer, and then use your type field to differentiate between them. But for this example we’re gonna go ahead and separate them into different layers here, since in Phaser, they have, in Phaser 3 they have a nice import from layer function, and we can use that to easily create our groups of objects based on these individual layers without having to loop through our objects. So we’re gonna go ahead and just for our portal, we’re gonna add another point, we’re just gonna call this portal. And we’re gonna lock the layer so we don’t accidentally edit it.

Next we’re gonna go ahead and add a point for our coin object. We’ll put this over here, I’m gonna call it coin. And one of the things you can do is you can use the select tool to select our game object and then you can copy it and then move it around the map to where you see fit. That way you don’t have to manually specify the name, type, and place it each time.

Then it makes it a little bit easier if you’re gonna have multiple game objects like this coin right here. And then I’ll lock that. Then finally we’re gonna add a point for our enemy. And then same thing, I’m gonna go ahead and select our enemy, and just place a few of them around our map. Alright, we’re gonna lock that layer. We’ll go ahead and save our level. And then finally, once you have your level finished, you can go ahead and click on file and you go to export. You’ll want to make sure you chose a JSON map file so it’ll have the .json file type. And then go ahead and name your level, and then click save.

This will export it to a JSON file, which then we can easily import into Phaser. Now that we’ve covered the basics of Tiled, I’m gonna go ahead and challenge you to make your own map. Some things to remember, if you are going to use the maps that you create in your game, you’ll wanna make sure you pay attention to what you name layers, and your sprite sheet, because we’ll have to use those keys when we load it into Phaser.

Transcript 3

All right, now that you’ve created your own levels, you’re welcome to use those in the following tutorials, but if you look in the Project N folder, you will see there are two complete levels for you to use, so you’ll see that we have our first level here and that we have our second level here.

And that brings this video to an end. In our next video, we’re gonna start setting up our Phaser project.

Interested in continuing to learn Phaser? Check out our HTML5 Game Development Mini-Degree.

Share this article