Start of 2017 and Level Building with Tiled

So despite January being a pretty shitty month regarding personal life with break ups, etc (yeah game devs are humans too, funnily enough :P), the plus side is that I devoted a lot of time and energy into my project that I have been working on for like a million years. “But wait!”, I hear you cry, “your game was an isometric 3D cool looking thing. What is this pixel art thing I see above?” Well I got to a point with the old project where I realised that quite frankly, it was too much for a project I was working on in my free time. I mean, come on. I am working on this awesome game in my day job ūüėČ Anyway the pixel art is not final, it will be top down 2D but it was me learning how to draw and my favorite artist is also getting involved (and not just with Art, with story, design, and all manner of cool things! I am even trying her how to code… kind of :P), along with others so I have a toe firmly up my backside and have people who are skilled at other things to help out. Hopefully we will have something playable in a couple of weeks to see if it is fun and what we need to change to make it fun.

Anyway, on to the technical stuff. Yes the above is still Unity with a combination of 2D toolkit, but we are doing some cool stuff with loading levels, which will also allow us to “hot reload” levels whilst the game is playing. What this means is I can give a standalone build to a designer and Tiled and he/she will be able to hot reload the level.

So OK, what even is Tiled?

Tiled is a powerful Map Editor that allows you draw maps using tile sets. It has been used in a variety of games which I THINK includes Titan Souls and Hack and Slash. If you want to know how it works, Games From Scratch has a really good tutorial on how you can make cool Tile Maps. Essentially it allows us to make layered tile maps that we can use to make cool levels. Note: What I am about to explain is the specific way that I am using Tiled and Unity. There are many ways to do it, but this is the setup for my specific project. This is also unlikely to be super detailed, it is meant to be an overview of what I am doing, not a tutorial.

Above is my setup for my really really basic test level. As you can see I have 4 layers. The top, the middle and the bottom grid layers. Any tiles in the background and foreground layers are visual layers (the foreground layer been drawn in front of level characters such as the player, and anything in the middle level is deemed as a collision object as it is in the same level as the player and other objects are. The Object layers is actually where we set up THINGS or objects in the level. These also have metadata. If I select a waypoint for example.

You will see it has a name, a type and a load of custom properties that I use to hook up the enemies.

I then export this to JSON and it looks kind of like this:

You can view the whole Tiled JSON format here.

OK, I have a load of data, how do I actually get the game to understand it

Obviously, we first load the file as Json.¬†I used MiniJSON to do this and then deal with it. You could do some clever auto-mapping using Unity’s in-built parser or Newtonsoft, but for this I like to have control of what data I actually need and what I am going to do with it.

First I have a prefab that is a tile. This contains three tk2DSprites that represent the foreground, background and middle.¬†We build a number of these tiles the correct distance apart using the width and height of the map defined in the JSON. We then¬†go into the giant data array, convert it to a 2D array using the width and height. and use the indices to set the sprites.¬†All of the spritesheets/tilesets map one to one in Unity and Tiled. The tileset you see in Tiled is exactly the same as the one I use in Unity and 2D toolkit. The indexes in the sprite sheet in the data ALMOST match up to the 2D toolkit sprite indices (out by 1). Using the data level in each layer we set the correct image on the tile. Simple huh. We also set any of the tiles that are populated in the middle layer to “non-walkable” in our¬†A* Pathfinding system.

The slightly more interesting thing is the Soldier. Tiled’s object system is very powerful and can be used for a load of cool things. Unfortunately in our use case it represents object positions in pixel space rather than the tile systems grid space.¬†I have set rules for the designers that the objects must be one tile size large (which is 32 x 32) in our case and must be snapped to a tile position. You can draw objects anywhere in the object layer of any size, however that is not the way our game is using the tool. Like I said, if you look in the image above in the player object we get the x and y in pixel space. How do we find the grid position? Divide it by the tile width and height respectively. Using this data, it loads prefabs and populates them in the correct places on the map. These objects then use the propertiesd ata that we set up in the metadata in Tiled:

To populate things like what waypoints belong to which enemy, what AI behavior should that enemy use, etc, etc.

Anyway, I know that was quite a bare bones overview, but I hope you found it interesting at least and a bit of help if you are using Tiled with Unity or any game engine!


Leave a Reply

Your email address will not be published. Required fields are marked *

Verify that you are not a robot! (If you are unlucky) *