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
- this technique involves assigning the cardinal directions (north, south, east, west) to a bitset. then for each tile you look at which adjacent tiles should be connected to
  - this connection condition can be whatever you want - in most cases it’s just “is the adjacent tile of the same type as the current tile?”
    for example, “is the tile to the left a dirt tile?”
- and then you use this bitset to index into a lookup table of tiles
  - for example, say we have the following grid of tiles:
    TODO editable grid on javascript
    
    for each tile, we can assign a bitset of cardinal directions like so:
    TODO grid linked with the other grid to show which adjacent tiles each tile connects to
- in JavaScript it would look something like this: javascript // TODO code example
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?
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.