Disclaimer 1: I am not the author of the autotiling functionality and I am not experienced enough to understand its source code. To write this tutorial, I basically played around with the functionality until I felt confident enough to explain it to others. There might still be errors in this tutorial. If you find any, please tell me!

Disclaimer 2: I am describing the autotiling functionality of Godot 3.0. It is still a little rough around the edges and I expect the functionality to change in the future.

I will first explain how Godot’s autotiling algorithm decides what tile to put where. Then I will explaing how to plan, set up and draw a new tileset. Last, I will show how to use autotiling in Godot.

The logic behind autotiling

We will consider tilesets with only two types of content: a background and a foreground. In a top-down game these could for example be water (background) and land/island (foreground). In a platformer they could be air/nothing (background) and solid walls (foreground). By clicking in the editor we want to place foreground tiles and by right-clicking we want to remove them and replace them by the background. We will call the foreground tiles “active” and the background tiles “inactive”.

So by clicking in the editor we would end up with a grid of active and inactive cells, such as this one (gray = active, white = inactive):

In addition to the active/inactive information in each cells, the algorithm also has information on each edge and on each corner. Similar to each cell, an edge and a corner can be active or inactive. However, we cannot directly toggle the edges’ and corners’ state in the editor. Their behavior is defined by the following logic:

An edge is active, if both of the neighboring cells are active (and inactive otherwise)

A corner is active, if all four of the neighboring cells are active (and inactive otherwise).

(Note: This logic is specific to the current implementation in Godot. It is also imaginable to have an editor which allows to edit the edges and corners directly.)

For the example grid above, we would get the following edge and corner data (green = active, white = inactive):

Next, the algorithm determines a so called bitmask for each cell. In Godot, there are currently two types of bitmasks available: 2×2 and 3×3. The 2×2 bitmask consists of the four corners of a cell, and the 3×3 bitmask consists of the four corners, the four edges and the cell itself. In Godot, the bitmasks are represented as small (2×2 or 3×3) grids of red (=active) and transparent (=inactive) squares. The following two images show the two types of bitmasks for our example.

2×2:

3×3:

Now, we are almost done. The autotiling module in Godot contains a list of tiles together with a bitmask for each one. To find the correct tile for a cell in the grid, it goes through all of the tiles and tries to find one that has the matching bitmask. If there are multiple tiles with the same matching bitmask, one tile is chosen randomly. If there is no tile with a matching bitmask, a default tile is selected.

Planning and drawing a tileset

Autotiling works best, if we have at least one tile for each possible bitmask. Otherwise, the algorithm might fall back to the default tile in some places and then the tile wouldn’t match perfectly. So, before drawing a tileset, it makes sense to make a list of all possible bitmasks.

In the 2×2-case, this is straight forward: The bitmask consists of 4 bits, so we get a total number of 2^4 = 16 bitmasks. We can nicely set the up in a small grid like this:

The precise order is not really important. I copied this arrangement from this great website about tiles.

Then, in our favorite image editing software, we can use such an image as a template. Just scale the template to the correct size, put it into the background and draw the tiles on top. Here is an example, how such a tileset could look like:

In the 3×3-case, everything is a bit more complicated. Having 9 bits, we theoretically get a list of 2^9 = 512 tiles. Fortunately, we do not have to draw all of them, because not all bitmasks are possible if we follow the cell-edge-corner logic explained above. Essentially, we can use the following simplifications:

The center bit (the cell bit) is always active. Because if it is inactive, the tile will not be drawn.

A corner can only be active, if the two adjacent edges are active.

Using these two simplifications, the number of relevant tiles reduces to 47. We will add a 48th tile to represent the pure background. We end up with the following collection of bitmasks:

This arrangement, again, is not my invention, but comes from this website. Check out this website to see an example tileset in this arrangement.

Using autotiling in Godot 3.0 – Step by step

1) Find or draw a tileset that fits one of the two templates shown above. For testing you may use the 2×2 example from above or the tileset, I linked to.

2) Create an empty scene. Insert a Node2D as a root node and then add the tileset image as a sprite.



These are the properties of the sprite:

3) Click Scene, Convert to, TileSet. Save the tileset in a tres file, for example, my_tileset.tres

You can now delete this scene. We will only use the created TileSet resource.

4) Create a new scene. This will be the main scene. Add a Node2D as root and a tilemap.

Click on the tilemap. In its properties, go to the “Tile Set” Property and load the my_tileset.tres (or alternatively, drag it from the filesystem on the left and drop it onto the property)

5) Click onto the tile set in the tilemap’s property to edit it. Activate the option “Is Autotile”.

6) Open the Autotiles tab on the bottom.

7) First select the bitmask mode (2×2 or 3×3) and enter the tile size (my tileset is a 2×2 tileset with a tile size of 100 x 100 and zero spacing).

8) In the tab “icon” select one tile that is representative for the tileset. It will appear in the top left on the “palette” of tiles. The selected tile will also define the “default” tile. That is the one that is selected, if no matching bitmask is found.

9) In the tab “bitmask” define the bitmasks as discussed above (“paint” everything red that is solid).

10) Switch back to the tilemap (by clicking on it in the scene tree). One last thing, we need to adjust is the tile size in the tilemap:

11) Thats it. You can start drawing now.

If you followed my steps and used the 2×2-tileset, you will notice that the tile will only be correct, if you place at least four tiles in a square. That is because of the tile selection logic, that I explained earlier. Overall, I suggest you use the 3×3-bitmask system. It will work better overall (with the downside that you have to draw many more tiles).

Conclusion

Thanks for reading. I hope you found the tutorial helpful. If you have any questions or suggestions please leave a comment.

In this tutorial, I have not covered, how to set up collision, occlusion and navigation with the autotiling module. I haven’t tried it myself, but I believe it is pretty much straight forward.