I finally understand Autotiles!

Hey hey!

DISCLAIMER

This is not a tutorial on how to use Autotiles in Godot's Tileset Editor, this is just an explanation on how they work 

Getting back to the post...

I've been working on improving the Godot Sandbox lately and something that I've updated is how the Tilesets work now, taking advantage of the amazing Tileset Editor Mariago Suligoy and other contributors added in Godot 3.1.

It turns out I had no idea of how one of the main features works...Autotiles are not that intuitive...besides they are...but I didn't get how they work anyway, I'm slow, OK?

Anyway, I wanted to share my experiments trying to understand how this feature works!

A grid inside a tile

So let's be straight and direct to the point here: there is no secret, when you create an AutoTile region in the Tileset Editor the tiles of this region will also carry a "logic" grid inside of them, this grid is what we use to draw their Bitmask (we will get into it soon). The logic behind that is that this grid will tell the Tilemap when a giving tile should be used.

Bitmask is a conditional statement

OK we know that there is a grid, for instance in the above image we are using a 3x3 (minimal) Autotiling, this means that the grid is 3x3 and uses a simple bitmask logic.

But how the Tilemap understands what tile to use? It doesn't. You have to tell it by drawing the Bitmask. Now let's understand how this works.

You can think about this grid as being an array of 9 binary elements.

When you "draw" the Bitmask you are setting the value of these elements to true, when you erase the drawing you are setting it to false. For instance, in the example below, the elements 1, 4 and 7 are set to true, 0, 2, 3, 5, 6, and 8 are false.

OK, I get it, but what that means?

You might be thinking, right? I thought that as well, good to know geniuses think the same.

I forgot to explain what that grid represents right? When we are programming things should always be an abstraction of something else.

In this case the grid represents surrounding tiles. Whaaaaaaaat?

Yes, this grid tries to represent what are the surroundings of the tile you will draw using the Tilemap node.

So for instance if you were about to draw the tile highlighted below:

From its perspective, there is a tile on top of it and another on its right. The bitmask for this tile would look something like this:

You might be thinking, as I did, and since we're both geniuses I can assume you are thinking the same as I did:

Why the 5th bit (represented by the number 4) is also set to true?

Good question! But is kinda obvious. The 5th element represents the very position the current tile is, meaning it will (don't take this as necessarily truth, but...) always be occupied and for this tile to be automatically set by the Tilemap you need to always have this bit set to true.

Fact being that during my researches I found that most engines with similar features provide an interface that assumes that the "middle", i.e. 5th, tile of this bitmask grid is set to true. For instance this is the interface Unity uses:

I dunno exactly the difference of leaving a tile blank and drawing an "x" on it means, but nonetheless if you leave it blank in the middle it always assumes that you meant "5th tile = true OK?

Anyway, in our case, our bitmask is basically telling the Tilemap:

Hey, if there is a tile above this one, on the right and if we draw a tile (i.e. if there is a tile in the center), this is the actual tile/sprite you should use!

So, yeah, it is basically you programming what tile from the current Autotile in the selected Tileset the Tilemap should use depending on its surroundings.

But what if 2 conditions match??

Well, yeah, I also wanted to experiment with that. Turns out that ideally you should not have matching bitmasks in the same Autotile region. Unless...you want them to be used in the same circumstances and let the Tilemap randomize them.

This can be done by defining their priority in the Tileset Editor:

If an Autotile has tiles with the same bitmask, you can select those tiles and define which one will be drawn by the Tilemap more often. For that you can use the SpinBox to tell the proportion in which they should appear:

In this case the tile I have selected will appear 7 out of 11 times this bitmask condition is matched, meaning...*getting my calculator*...63.63% of them will use this tile instead of the others that also match this bitmask condition!

So, yeah. That's the result of my experiments. I hope this was useful. You can thank my patrons for sponsoring this research! :P

That's it, thank you a lot. I hope you enjoyed it, keep developing and until the next time!