This week I did some foundational work and fiddled with a video editor.

Checklist

  • finished up (for now) the auto-tiling system I’ll be using for Five Words of Power
  • got some video editing software and made myself learn enough to make a video for Escape From Evil Island
  • worked on the Alice is Dead conversation system

Tile Transitions

I’ve been thinking a lot over the last year or so about tile systems. I’ll probably write about this more in the future, but the short version is that the way I was approaching maps for Black Mountain (as described in a devlog from 3.5 years ago) is probably not going to actually work for me, when I do get back to working on it. Since coming to that realization, I’ve been trying to figure out how to maintain as much of the look of the old prototype and screenshots, but having the flexibility and ease of changes that a ore traditional tilemap gives me. A big part of what makes or breaks a tile set (in my opinion at least) is how it handles transitions between different types of terrain – the edging between grass and dirt, for example.

I had an idea about how to build an auto-tiling system that would leverage half-sized tiles, drawing them offset from the actual tile grid, to make the transitions between terrains a little nicer and composable. I prototyped it for a bit but determined that there were just enough concessions I needed to make to make it work. It was too finicky to work with, required many overlapping layers of tiles, and was just generally not actually much of an improvement. I also experimented with going to other way and using oversized tilesets, drawing a 48x48 tile laid on a 24x24 grid, so there would be a 12 pixel margin around every tile for spilling out onto the surrounding tiles. This kind of worked but it had issues with certain shapes of tiles, and no good way to actually fix that without doing a bunch of extra special handling.

A bit ago, after I released Escape From Evil Island, I decided to actually see how anyone else had solved this problem, and discovered that there was actually a good solution, that was something kind of in between what I did. I found a video by jess::codes that explains a system she calls a “Dual-Grid System”.

I did a quick prototype of my own based on her example, and kind of liked it! Decided I should take a closer look at it next time I was working on a game that would benefit from it!

Offset-Tile Layer

So, with The Five Words of Power, I decided I’d give it a try. I’ve been leveraging both “bothering to learn from someone else instead of beating my head against a problem until I give up”, but also everything I’ve learned about working with Godot through the other games I’ve been making. The video above is a good, thorough explanation, so rather than rehash it I’ll talk briefly (?) about my specific implementation, which I called OffsetTileMapLayer. In case you haven’t watched through the video but kept reading anyway, the very quick explanation is that I lay down tiles on the normal grid of the TileMapLayer, but I draw the tiles offset by half a tile. This means that for every tile I draw, four of the underlying tiles each contribute one corner to it.

The OffsetTileMapLayer is based on the standard TileMapLayer, with a custom draw function that draws the offset tiles (what I call the “draw layer”) and hides the tiles actually in the layer (what I call the “layout layer”). I’ve organized my tilesets so that each autotile set is organized in exactly the same way, including the empty tile (the layout has 15 tiles, so in a 4x4 block there’s an empty spot) used as the “layout” tile for it.

A tileset, with four different 'pinwheel' shapes for tiles, two each for dirt and grass.

I’ve set it up so that, mostly for debugging purposes, in the editor I can toggle displaying just the layout tiles, the actual drawing tiles, and the grid of the drawing layer (in cyan). You can, as with normal TileMapLayers, turn on the underlying grid as well (in orange.)

A map, made with the dirt and grass tileset from above. This is the standard view, as it would appear in the game. The same map, showing only the 'layout' tiles. It looks a lot less interesting this way. The same map, drawing normally again, with an orange grid superimposed over the map showing the underlying tilemap's grid. The same map again, with a cyan grid superimposed on top showing the draw layer's grid. And the same map yet again, with both the orange and cyan grids.

Drawing each tile is a bit of a process, so I do it as little as possible (I have a configurable update rate, defaulting to 4 FPS; during the game it shouldn’t ever have to update unless I modify the tiles.) For each draw tile, I loop through all of the terrain sets in the tileset in order. For each terrain, figure out the four underlying tiles involved (one for each corner), and calculate which tile in the tileset that mask corresponds to. I draw that terrain, and move onto the next. This lets me control the stacking draw order of terrains based on the order they appear in the tileset – I can put dirt first, then grass, then long grass, etc.

A diagram showing the steps of the tile drawing process. The first step, labelled 'Layout tiles', shows a small map with simple solid colour tiles. Next, the 'Overlay Grid' step overlays a cyan grid, offset by half a tile in both the x and y directions. Next, the 'Determine Mask' has highlighted one tile in the middle, with a green (grass) in the upper left, and every other corner is brown (dirt). Next, it shows pulling out the appropriate dirt tile and grass tile from the tileset based on those corners. Lastly, the 'Composite Layers' step shows drawing those on top of each other, with the dirt under the grass.

Note that since I’m just calculating the offset of the tiles directly internally, I barely use the terrain system. I just mark the layout tile with a single center-bit, and that’s all I need to do; if I mark multiple tiles with that same center bit I can use that as a way to randomly place different variants of the terrain. This is actually way easier than setting up the whole terrain set on every possible set of variants, but it comes at the cost of some flexibility.

Aside: Reordering Terrains

Turns out, re-ordering terrains in Godot 4 is broken, at least for now! When you reorder terrain, it will correctly update all of the “peering bits” (where you set how the edges of tiles line up to each other), except for the center bit (the one I’m using). I’ve submitted a PR to fix it, so hopefully it will be fixed in the next release.

Moving Pictures

I post a lot of still screenshots for things, but a lot of the time a video really does tell the story better. I tend to avoid dealing with video, because I’ve had annoying problems with encoding and such in the past. I’ve been thinking I should fix that, though, and just… record (and edit) more video so I get better at it! In fact, in retrospect, I bet a video would have explained the OffsetTileMapLayer stuff a little better…

Anyway, instead of doing that, I knocked out another “I should really do that” thing that’s been hanging around for a while: I made a trailer for Escape From Evil Island!

I didn’t let myself mess with it a lot, or for especially long, but I think it works fairly well to demonstrate the game, and looks okay! Follow me for more great marketing tips like releasing a trailer for a game more than half a year after the game comes out.

Alice is Dead Conversations

Once things were somewhat solid with Five Words, I picked up some work I’d put down for adding a feature to the Alice is Dead conversation system – allowing for certain dialog options to be available (or not) based on story flags or other choices. This led me down a rabbit hole of refactoring the conversation system a bit and, well, that’s where I still am with it. Sometimes I feel like I’ll find any reason to write a parser for something. Not a lot to report on that, otherwise!

Have a good week, everyone!