Hey and welcome to this new devlog that is full of T I L E M A G I C !
I'm Malika and this devlog is all about the tile magic in Aethermancer! First off, there are two reasons why we use tiles in Aethermancer. For one, the level generation requires a flexible tool box to put together the environment, and tiles work as the basic Lego bricks to set the foundation. On the other hand, it saves time. Even if I were to draw the entire environment by hand, I would copy-paste certain unimportant and repetitive segments to save time. Tiles do just that.
Broadly speaking, tiles can be described as images that are arranged in a grid. Most commonly they are rectangular, but in fact they can come in many varying shapes. There's even 3D variants placed in a three-dimensional grid.
The above is a classic example of dungeon tiles from the old Pokemon Mystery Dungeon: Explorers of Sky But we're getting off track. The tiles used in Aethermancer are 2D sprites and placed on a square shaped grid and can be separated into three types:

• Borders - they include fences and similar objects that are used as a separator
• Terrain - it defines the ground texture
• Walls - the walls are basically the separator to indicate higher elevated terrain

I'll be focusing on the Border type fence tiles going forward and it's going to get a lot more technical as I will be introducing Tile Magic aka Auto Tiling to you. While tiles can theoretically be placed without care for their neighbors, this wouldn't look very polished. Just look at these lonely fence tiles.
Instead, it makes sense to have tiles change depending on their surroundings. After all, these interconnected fences look much nicer.
Ensuring that a placed fence tile automatically adjusts itself to its neighbors is what auto tiling is all about. And making auto tiling work requires both a comprehensive set of rules that work in all different placement scenarios and a full tileset that covers all variants needed to visually represent the changes. In the fences' case, I use a tiling method known as Wang tiles. More specifically, the fences use the 2-edge version.
Think about it: In the previous example with the fences, each fence tile wants to add a connection to the side where it has a neighbor. Since they are square, they can have 4 sides and respectively up to 4 neighboring fences that they could connect to. That's why, if you look at it more abstractly, each fence tile can be divided into 4 parts like so:
Each segment can either be connecting or not connecting. This makes for a total of 15 different cases - the amount of different tiles that is required to cover all cases (If you were to rotate your tiles, it would be even less for a total of 6 cases. But that wouldn't work with the perspective of these fences). It's because of the 2 different states (connecting or not connecting) applying to each edge, that this tiling method is called 2-edge Wang tiles. Here's the resulting fence tileset.
You might notice that there are two completely non-connecting fence pieces. They are basically the same in terms of rules. It's a case of: the single fence pole looked weird, so I added another version but couldn't bear to throw away the first approach. It might come in handy, right right? The auto tiling requires one rule for each tile. Here is what this looks like in unity:

As with so many things in game development, the set in its current state has one major downside:
The tiling rules are telling the fences to behave this way: to connect to all neighbors. Still, nobody would build fences like this. Instead, it should look somewhat like the following picture.
It took quite a bit of trial and error, but in the end I solved this issue with more auto tiling magic by adding another set of rules to the same tileset. What if we could tell the tiles that there is an inside and an outside to a fenced off area? To do this, I added a 16th tile to the set that was ~drum roll~ empty!
Then I added additional rules that checked if the neighbors and corner neighbors are also fences.
Take this new rule as an example. Before it would have created a three-way connector if it had a top, right and bottom neighbor. Now it also places a straight piece. This is because it knows that its right-hand neighbor fence also has a north and south connector. In addition to these alternate rules for existing tiles in the case that all the surroundings are occupied by fences, including the corners, an empty tile will be used instead. I know this is all rather confusing. And I'll admit that the whole thing gets a bit complicated. It took me a few trials and failed approaches to complete a working set of rules. But I'll spare you the gritty details and demonstrate the auto tiling of this awesome set with 16 tiles and 31 tiling rules.
I can guarantee that drawing fences with auto tiling is weirdly satisfying.

I hope you had fun reading about tile magic despite it getting a bit technical! Maybe you're even ready to create your own satisfying auto tiling set?

[ 2024-02-07 12:54:58 CET ] [ Original post ]