Week 54: Custom autotiling

My new tile-set system uses custom cell-neighbor binding logic to choose different internal subtiles depending on the arrangement of neighboring cells.

tl;dr: I'm creating a new tile-set system with custom binding logic for internal-vs-external subtiles and for 45-degree and 90-degree subtile combinations.

The problem with tile-sets

They take a long time to create!

• Most 2D games use tile-sets in order to construct the level.
• When creating the art for a tile-set, it's important to make sure that the art transitions seamlessly from one tile to the next.
• Transitions need to be smooth both when a single tile is repeating, and between two different adjacent tiles.
• The tile-set artist not only needs to draw art for all of the different tile shapes in the game, but for many of the possible combinations of tile-pairs (in order to make sure that the art will transition well across a given pair of tiles).
• This means that there could easily be thousands of possible tiles to draw!
• However, most tile-pair possibilities won't actually be needed in the game, since they'll correspond to very odd level shapes.
• So, when designing a tile-set, it's important to identify up-front which tiles are likely to be needed and to only draw a less-likely tile when you actually encounter a need for it.

Interior vs exterior tiles

Tile-sets usually only show interesting and high-contrast art along the collision edges. They then usually fade-out away from the edges. I usually have them fade to a solid color in the interior, rather than a repeating texture.

I've decided that I want my fade-out to be a little wider than the size of a single tile—I think this will look better. However, this is a big problem for making tile art transition smoothly across neighboring tiles! This greatly increases the number of possible adjacent tile-pair possibilities!

Also, Godot provides an API for "autotiling", which makes it much easier to draw topography once your tile-set is configured. All you need to do, is drag your mouse across the level editor, and Godot will automatically choose the correct tiles to draw in each cell, according to which of the cell's neighbors are populated.

The problem with autotiling, is that it isn't designed to handle this fade-out across multiple tiles! So I also need to write custom logic for selecting the correct tile to draw according to the where the tile fits in the fade-out.

My new tile-set system uses custom cell-neighbor binding logic to choose different internal subtiles depending on the arrangement of neighboring cells.

What happened last week?

Highlights

• Created a new tile-set system with custom binding logic for internal subtiles.
• I'm overriding Godot's TileSet._forward_subtile_selection function in order to implement this.
• Started adding custom binding logic for 45-degree and 90-to-45-degree angles.

Laundry list

• Researched alternate tile-set structures.
• Possibility of art extending beyond the boundaries of the subcell?
• I had thought I remembered this being possible with Godot's tile system, but I think it actually isn’t.
• I can make the collision shape extend beyond the boundaries of the subcell, but that isn’t useful.
• Consider possible use-cases for Godot's 3x3 (full) autotile bitmask mode.
• It seems like 3x3-full use-cases would be uncommon and not as intuitive (which means that the author would probably be more likely to just go with 3x3 (min) and then manually add one-off sub-tiles as needed).
• Here’s an example of when 3x3 full might be useful.
• Let’s say we have a top-down street view.
• Each sub tile contains a road.
• The roads lead into any neighbor in a cardinal direction.
• If we have a straight vertical road subtile, we might want to show the same road shape, but conditionally show a stop sign on the right side of the subtile, depending on whether there are neighbors in the two top corners.
• 3x3 full lets us do this.

In this example, the 3x3-full autotile bitmask mode would be able to distinguish between the bottom two road tiles.

• Overriding Godot's TileSet._forward_subtile_selection function.
• This is what I decided to go with.
• Add a custom signal for detecting when TileMap cells are changed.
• Create a new tile-set system, with custom binding logic for internal subtiles.
• Start creating a new tile-set system, with custom binding logic for odd angles.
• Create art for most possible 90-degree-to-45-degree combinations.
• Encode most 90-to-45 join subtile positions for accessing in GDScript.
• Create more (but not all) angle-combinations for 27-degree tile-set art.
• Restructure custom cell-binding logic to handle more new angle-combination cases.
• Implement custom-binding logic for 45-degree exterior tiles.

My new tile-set with support for 90-degree and 45-degree angles.
(The tiles at the bottom are scratch work.)

What's next?

• Finish my new tile-set system with support for 90-degree, 45-degree, and 26.56-degree angles, and fades to interior subtiles.

🎉 Cheers!