tairu - an interactive exploration of 2D autotiling techniques

I remember since my early days doing programming, I’ve been interested in how games like Terraria handle automatically tiling their terrain.
- in Terraria, you can fully modify the terrain however you want, and the tiles will connect to each other seamlessly.
  - TODO: short videos demoing this here
once upon a time I heard of a technique called…
bitwise autotiling
- I learned about it back when I was building 2D Minecraft clones using Construct 2, and I wanted my terrain to look nice as it does in Terraria
 - Construct 2 was one of my first programming experiences and the first game engine I truly actually liked
- let’s begin with a tilemap. say we have the following grid of tiles: (the examples are interactive, try editing it!)
 
 <canvas is=”tairu-editor” data-tilemap-id=”bitwiseAutotiling” data-tile-size=”40”> Your browser does not support <canvas>. </canvas>
- for each tile, we can assign a bitset of cardinal directions like so:
 
 <canvas is=”tairu-editor-cardinal-directions” data-tilemap-id=”bitwiseAutotiling” data-tile-size=”40”> Your browser does not support <canvas>. </canvas>
- now given a tileset, such as the one below that I drew a while ago, we can assign each tile to a set of cardinal directions. I’ll indicate where there’s a connection between individual tiles with the letters N, E, S, W, standing for the cardinal directions North, East, South, and West.
 
 <ul class=”tileset-demo”> <li class=”full-image”> <img alt=”a 16-tile tileset of 8x8 pixel metal” src=”/static/pic/01HPHVDRV0F0251MD0A2EG66C4-tilemap-heavy-metal-16+pixel+width160.png”> </li> <li class=”tileset-pieces”> ES ESW SW S ESN ESWN SWN SN EN EWN WN N E EW W </li> </ul>
 - (it’s frustratingly hard to center individual letters like this in CSS. please forgive me for how crooked these are!)
- note that the state of connection for a given cardinal direction can be represented using two values: connected, and not connected. two values make one bit, so we can pack these four connection states into four bits, and use that as an array index!
 - for that to work though, we need to rearrange our tilemap somewhat such that we can index into it easily using our integer. assuming we pack our bits as NWSE (bit 0 is east, each next bit we go clockwise), therefore the final arrangement is this:
 
 <div class=”horizontal-tile-strip”> E S ES W EW SW ESW N EN SN ESN WN EWN SWN ESWN </div>
 
 packing that into a single tilesheet, or rather tile strip, we get this image:
- in JavaScript, drawing on a <canvas> using bitwise autotiling would look like this: javascript for (let y = 0; y < tilemap.height; ++y) { for (let x = 0; x < tilemap.width; ++x) { // Assume `tilemap.at` is a function which returns the type of tile // stored at coordinates (x, y). let tile = tilemap.at(x, y);
 
 // We need to treat some tile as an empty (fully transparent) tile. // In our case that’ll be 0. if (tile != 0) { let tileset = tilesets[tile];
 
 // Now it’s time to represent the tile connections as bits. // For each cardinal direction we produce a different bit value, or 0 if there is // no connection: let connectedWithEast = shouldConnect(tile, tilemap.at(x + 1, y)) ? 0b0001 : 0; let connectedWithSouth = shouldConnect(tile, tilemap.at(x, y + 1)) ? 0b0010 : 0; let connectedWithWest = shouldConnect(tile, tilemap.at(x - 1, y)) ? 0b0100 : 0; let connectedWithNorth = shouldConnect(tile, tilemap.at(x, y - 1)) ? 0b1000 : 0; // Then we OR them together into one integer. let tileIndex = connectedWithNorth | connectedWithWest | connectedWithSouth | connectedWithEast;
 
 // With that, we can draw the correct tile. // Our strip is a single horizontal line, so we can assume let tilesetTileSize = tileset.height; let tilesetX = tileIndex * tilesetTileSize; let tilesetY = 0; ctx.drawImage( tilesets[tile], tilesetX, tilesetY, tilesetTileSize, tilesetTileSize, x * tileSize, y * tileSize, tileSize, tileSize, ); } } }
- and that gives us this result:
 
 <canvas is=”tairu-editor” data-tilemap-id=”bitwiseAutotiling” data-tile-size=”40” > Your browser does not support <canvas>. <img class=”resource” src=”/static/pic/01HPMMR6DGKYTPZ9CK0WQWKNX5-tilemap-heavy-metal-bitwise-16+pixel+width640.png” data-tairu-tileset=”1”> </canvas>
- but if you play around with it (or have already played around with it, and are therefore left with a non-default tilemap)
 
 …something seems awful about it doesn’t it?
 - something’s off about the corners. let me give you a fresh example to illustrate what I mean:
 
 <canvas is=”tairu-editor” data-tilemap-id=”bitwiseAutotilingChapter2” data-tile-size=”40” > Your browser does not support <canvas>. <img class=”resource” src=”/static/pic/01HPMMR6DGKYTPZ9CK0WQWKNX5-tilemap-heavy-metal-bitwise-16+pixel+width640.png” data-tairu-tileset=”1”> </canvas>
 - see that tile in the bottom left corner of the L shape? it’s missing a corner. the top-right corner, to be exact, which makes it visually disjoint from the tiles to the north and the east.
 (I’m totally not trying to say this implementation is an L so far)
 - i’ll cut right to the chase here and say it outright - the issue is that we simply don’t have enough tiles to represent corner cases like this!
 see what I did there?
 - the solution here is to introduce more tiles to handle these edge cases.
 
 TODO Explain
bitwise autotiling is a really cool technique that I’ve used in plenty of games in the past
- as I mentioned before, I’ve known it since my Construct 2 days, but when it comes to my released games [Planet Overgamma] would probably be the first to utilize it properly
  
  TODO video of some Planet Overgamma gameplay showing the autotiling in action
  - this accursed game has been haunting me for years since; there have been many iterations. he autotiling source code of the one in the video can be found here.
but one day I found a really cool project called Tilekit
- (of course it’s really cool, after all rxi made it)
  - for context rxi is the genius behind the Lua-powered, simple, and modular text editor lite that I was using for quite a while
    after a while I switched to a fork - Lite XL, which had better font rendering and more features
    I stopped using it because VS Code was just more feature packed and usable; no need to reinvent the wheel, rust-analyzer just works.
    the LSP plugin for Lite XL had some issues around autocompletions not filling in properly
    it’s likely a lot better now, but back then I decided this is too much for my nerves. while tinkering with your editor is something really cool, in my experience it’s only cool up to a point.
the cool thing with Tilekit is that it’s more than just your average bitwise autotiling - of course it can do basic autotiling, but it can also do so much more
- if I had to describe it, it’s basically something of a shader langauge for tilesets. this makes it really powerful, as you can do little programs like
  - autotile using this base tileset
  - if the tile above is empty AND with a 50% chance
    then grass
  - if the tile above is solid AND with a 10% chance
    then vines
  - if the tile above is vines AND with a 50% chance
    then vines
- I mean, after all - bitwise autotiling is basically a clever solution to an if complexity problem, so why not extend that with more logic and rules and stuff to let you build more complex maps?
  - of course Tilekit’s solution is a lot more simple, streamlined, and user-friendly, but you get the gist.
ever since then I’ve been wanting to build something just like Tilekit, but in the form of an educational, interactive blog post to demonstrate the ideas in a fun way
- and what you’re reading is the result of that.
so let’s get going! first, we’ll build a basic tile editor using JavaScript.
- not my favorite language, but we’re on the Web so it’s not like we have much more of a choice.
  - I could use TypeScript, but this page follows a philosophy of not introducing complexity where I can deal without it. TypeScript is totally cool, but not necessary.
- I’ll be using Web Components (in particular, custom elements) combined with canvas to add stuff onto the page.