tile image

A Step-by-Step Guide to the Automapping Process in Tiled 1.10

By Subpar Senior Developer, James Pryor

Tiled updated Automapping in version 1.9, it’s not very different, but it’s different enough I found older tutorials confusing (maybe I’m the only one). This is a quick tutorial for how to use them in 1.10, which is the latest when this post was written.

If you’re not familiar with Automapping, that’s okay. We start from the beginning. Automapping will let you design a level quickly without having to worry about which tiles to use (left picture), then will generate a map with the appropriate tiles (right picture).

This is for demo purposes, sorry I’m no artist.

Create a New Project

We’ll start from a blank project directory. It can be wherever and named whatever you’d like, Ours will be in a project folder in our user directory named tiled-automapping-demo.

The only files we won’t be creating in this demo are two tilesheets images downloadable from our repository on GitHub. Place them in the project directory.

Open Tiled, use the menu to create a new project.

File -> New -> New Project…

Name it anything you’d like, we’ll name ours the same as the project directory. After clicking save you’ll see there are four files in the project directory.

.tiled-project holds all the information about this project.

.tiled-session holds information about your current tiled session.

Create Tilesets

Now that the project is set up and tilesheets downloaded, the next step is to create tilesets. There are a lot of terms starting with tile here, let’s get on the same page about what they mean.

  • Tilesheet – the image that makes up the tiles, the png downloaded in the previous section
  • Tileset – explaining to Tiled how to use the image as tiles
  • Tile Map – the thing (level or world) we want to build with the tiles

Now we have some terms, let’s go back to Tiled and make a tileset.

File -> New -> New Tileset…

In the dialog: name it Ground, set the source to the GroundThilesheet.png in the project directory, change tile width and height to 128 px, and set spacing to 1 px.

Click Save As… and by default, it will want to save the tileset to our project directory as Ground.tsx, this is fine for this demo.

If all went well, you should see the amazing tiles I created in MS Paint! These are released under a creative commons license, so if you don’t want to make a pretty game, you can use them in your project too!

If things don’t quite look right, double-check the tile width, tile height, or spacing.

Repeat the process to create the Prototype tileset.

There are more tiles than what will be used for this demo. Maybe we’ll get around to making follow up demos that use the slopes (it’s actually kind of cool). For now, we’ll use the first two on the Prototype tileset (the red and pink ones), and the first 13 in the Ground tileset (the 9 that make up the surface and edges and the 4 corners).

The two tilesets will be open, shown as tabs at the top of the Tiled editor. Leave them open for now.

Create a Map

Now we need a level to run the automap rules on.

File -> New -> New Map…

Most of the defaults in this dialog are fine, except you will need to change the tile size width and height to 128 px so it matches the Tilesets.

After you click OK, you will be presented with a blank map. If you left the tileset’s open from the previous step, the map should show both tilesets in the Tilesets panel at the bottom right.

Above that—at the top right—is the Layers panel. Change the name of the only layer there to Prototype. This is important if we ever get to the automapping part of our automapping tutorial.

In the tileset panel, select the Prototype tab and click on the pink tile. Then use the Bucket Fill Tool (paint bucket icon) to fill the whole map with pink tiles.

The pink tile will represent the places we don’t want a tile (don’t worry it will make sense soon).

Switch to the Stamp Brush tool (looks like a stamp, two icons left of the bucket) and select the red tile. Now you get to draw what you want your level to look like. There are some minor restrictions. For example, the minimum width and height of any part of the level needs to be 2 tiles (this is because the tilesheet I made is very basic, you’d need a lot of tiles to have single-width sections).

As long as your level looks something like this, everything should be fine. I do recommend some stairs though, they are fun.

When you’re done, save the map (Ctrl + S or File -> Save). Name it Level.tmx.

Setup Automapping

Okay, now we’re finally talking about the thing you came here for. Automapping uses a map (the tmx file just like the one used to make the level) to create rules. So make another map.

File -> New -> New Map…

Use the same settings as before, this time you probably won’t need to change anything but double check the tile sizes are still 128 px.

Rename the layer to input_Prototype. Then add a new Tile Layer (document icon at the bottom of the Layers panel) and name this one output_Ground.

Save this map (Ctrl + S or File -> Save) with the name of Rules.tmx.

So now we can Automap?

No, there is still one more thing to do. We have to tell Tiled this map is a rules map. This process is a little unexpected, but easy. Go back to the project directory in explorer or finder or whatever you use. An easy way to get there is to right click on the top level folder in Tiled and go to Open Containing Folder… .

We have quite a few files here now, and we’re going to add a new one named Rules.txt.

Open Rules.txt with your favorite text editor (you picked a favorite right?), and add a single line to it ./Rules.tmx. Then save and close this file.

This file is a list of rule maps, more precisely, it is a list of paths to rule maps. The line starts with a ./ so  Tiled knows to look for this file is in the same directory as this text file. More complex rules can be separated into multiple files and be listed here.

Back in Tiled go to Project -> Project Properties. This dialog will have an Automapping rules field because Automapping rules. Click the three dots, and pick the text file we just made, then click OK.

Now, finally, Automapping will work! Right after we create a rule…

Finally, Automapping

Back in the Rules.tmx, it’s a blank map with two layers.

Be sure you are on the input_Prototype layer, it will be highlighted if you are. Place a single red prototype tile in the top left corner, but not touching an edge.

Click on the output_Ground layer to select it. Switch to the Ground tab in the Tileset panel, and choose the all blue tile in the middle of the first 9 tiles. Now place it right on top of the red tile. You can toggle the visibility of a layer with the eye icon to the right of the layer name to verify the red tile is still there.

Be sure to save this Rules map.

What did we just do?

The input layer is a single red block, the output layer is the single blue block. When we run the automapping rules on Level.tmx, it is going to create a new layer with a blue block in every place we have a red block.

Switch to the Level Map tab. Run Automap with Map -> Automap or Ctrl + M. If everything is correct it should look something like this:

The red tiles haven’t been replaced, a new layer named Ground was created with a blue tile everywhere there was a red tile. That’s neat, but we need to make more rules to make it really neat. A quick undo (Ctrl + Z) will remove the Ground layer and return the map to its Prototype goodness.

Top and Bottom Middle Rules

Let’s add the surface tile in places we’d expect to see a surface tile. Go back to the Rules map, be sure the input layer is selected and draw this.

We’re telling it every time you see a red block with a pink block above it, output something else. To add something else, select the output layer and add the blue center surface tile on top of the red tile.

Save the Rules map, switch back to the Level map, and run Automap again.

OMG now we have surfaces! Undo and switch back to the Rule map.

No doubt you can figure out the rule for the bottom center tile now.

Repeat the processes to verify it worked. If it doesn’t here are two things that I’ve found are are easy to overlook:

  • Did you save the Rule Map?
  • Are the right tiles on the right layers?

The Side Rules

We have rules for all the center top, middle, and bottom tiles. How about some sides? Here is a rule for the surface left corner.

Obviously the prototype tiles are on the input layer and the ground tile is on the output layer. In this rule we’re saying the space above and to the left must be empty, but below and right must be not empty. Generally rules are all about what tiles are around the ones we want to place so this plus sign is a common pattern. Tiled rules are defined by any number of contiguous (stuck together) tiles. This is why the rules must have at least one empty tile between them.

Repeat the undo, save, and automap process to check it.

If you put up with my writing this long you’re probably pretty smart so you can figure out the other corner rules without much help.

How to Organize These Rules

This is a good time to talk about how to place rules in the rules map. If you’ve followed along to this point you should have seven rules and they’re probably scattered about. But let’s say they looked like this:

You might say, “wow that looks so organized, James you’re a wizard!”, but if you ran the rules you’d notice the bottom left and right corner don’t work (some wizard you were). This can be frustrating if you didn’t read the documentation to know how the rules are processed (or even if you did and missed it like I did).

This doesn’t work because rules are applied top to bottom, then left to right.

The surface tiles work because the middle tile’s highest point is the same level as the surface left and right tile. So it’s placed first, then the corners replace it where needed.

The bottom corner rules have part of their rule block one tile higher than the bottom center block. So they get placed first, then the bottom center rule is applied and copies over those corners.

I like to set rules up in a column, then only place new rules in a row as I need variations on the rules. That will not be needed for any of the 13 rules we’ll make in this demo, but will come up if we make a tutorial with the sloped tiles.

Here are the same rules in a single column.

The rule map will need to be resized (Map -> Resize Map…).

To move the rules around:

  • Hold shift and click on the input and output layers to select them both
  • Use the rectangle tool to draw a box around the rule (or rules) you want to move
  • Ctrl + X to cut the rule
  • Ctrl + P to paste, the rule will be a block of tiles to put wherever you’d like

While you’re arranging rules, be sure to add the last two left and right middle tiles we forgot to make in the previous section. Now there are 9 rules and only the corners are left. You might already have a good idea how to do them, but it’s worth a read for a free trick.

The Corner Rules

The corners aren’t super complicated, but let’s pretend we’re not sure who to go about setting up this rule. I’ll start by looking at where I want the tile to be in the level map.

Below I’ve selected the tiles around where the corner should be. Since it’s already selected, I could copy these and paste them into my rule map… I mean it’s the same tileset so it seems simple enough.

Then I put the output tile on and BOOM, done right?

In this case, yes it works just fine because our limited tileset will always have this pattern for corners (remember the thing about everything having to be at least 2 wide and high?), but there will be cases where this won’t work, but it’s a good start when you’re unsure of what rule to make. One thing for sure is this rule could be simpler, it will work just fine as a 2×2 rule. There is an advantage to keeping rules simple.

Go ahead and make the last four corner rules.

Let’s go back to the center surface rule we made a long long time ago. It was only two tiles.

Now that we have all these rules you might think “man wouldn’t it be cool if they were all plus signs? I can change this simple rule to look like the picture below because there should always be a red tile below it and to the left and right! Right?”

And you would be right, this rule will work for almost every case. Go ahead, change the rule, save the rule map, then run it on the level map. Look carefully.

Look what happened at the edge of the map. It didn’t find the red tile to the right so it’s still using the first rule for that spot. There are other ways to deal with this, but I like to start with making the rules as simple as possible, then we can add more complexity to the project when we need it.

Conclusion

For our project, we couldn’t get by with Unity’s built in tile rules, so we moved to Tiled. The advantage of a tool like Tiled is it is designed to do one thing very well. After creating levels in Tiled they can be imported into Unity, but that’s a post for another day.

If this walk-through was too long, check out the repo that has all the steps already done: https://github.com/subpar-software/tiled-automapping-demo.

Similar Posts

Leave a Reply

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