Empty Spiral's 2D Isographic Maps in Godot

Empty Spiral uses Godot's 2D Tilemap, which doesn't exactly have built-in support for isometric tilesets. In order to get them to work, I had to develop a sort of unique pipeline and methodology for creating quality-looking maps. This post is going to be more of a technical deep-dive rather than a design-focused one, just as a warning. I'm also not going to be writing this as a tutorial. I'm assuming that you know how most of Godot's basic 2D stuff works. Let's get going.

TileSet Resources have a dropdown enum that lets you set them as Isometric. Importing these into a TileMap or TileMap Layer will automatically set them to match the TileSet.

Isometric tilesets on their own are not that difficult. I actually found making iso tilesets somewhat easier compared to normal flat tilesets, but getting them to work in a moving game was a different story. If you don't know what isometric means, you can read about it here. In essence, it means that you lack any sort of depth perception gained from normal 3D cameras. Nothing "vanishes into the sunset" so to speak. Lines go on forever. This essentially means that in order to get any sort of depth, you need to rely on colors or shadows. Since Godot doesn't support shading isometric tilesets, I had to bake the lighting into my sprites the best I could and work from there. You can clearly see in the environment where I was trying to draw in the lighting. This works well for this shorter experience, but I also implemented a slight color randomization that gets applied uniformly across all tiles in order to give them a bit more variation.

These sprites for the canyon have shading baked in. The top is brightest, then the right side, then the left side.

Now, the next big problem with the maps was sorting. Think about your screen like a bulletin board. You pin a bunch of different notices all over it, and in doing so you create layers. Since each paper you've pinned to the board takes up space, you can clearly see where each one stops and starts. But, what if you had hundreds of papers to post? How would you prioritize what papers were in the front? That was the problem that needed to get solved, and it was actually significantly more complicated than I first anticipated.

The first step was to set up the tiles to actually sort correctly. In the bulletin board example, this is essentially making sure we pin up the papers in the right order so they make a cohesive picture. All I had to do was set each tile's Texture Origin and Y Sort Origin.

Doing this, I was essentially able to tell Godot that the "base" of the sprite was at the center of the bottom face (the one that can't be viewed from the isometric view), and that the whole tile should be shifted slightly to account for that. By making sure that my tilemap and its parents had Y Sort enabled, the tiles would all handle themselves and everything was perfect. Except, my game isn't a bulletin board.

See, the difference between a game and a bulletin board is that things move around. Now, if I was smart, I could have designed character sprites that fit within this 1x1x1 size. However, I wasn't really thinking, and I made a whole suite of fun character sprites that were 1x2x1. Now, in actuality, I was making a JRPG, which means there's probably going to be some monsters larger than a single tile, but I digress. Why does this actually matter? Well... Take a look at this diagram:

If we want to place our character, Lilah, next to a stack of three boxes, we run into a problem. First, Lilah always draws on top of these boxes. OK, no problem, we just make Lilah's Sorting Order lower. But then we run into a different problem when on the other side of the block. Ah, so what we should do, is make sure we set Lilah's Texture Offset and Y Sort Origin, just like we did for the tiles before. Hm, that almost works, but now we run into our main issue.

Since each tile has its own origin, and there isn't really a "height" that the engine is aware of, any part of Lilah's sprite above that origin draws behind the tile. So... How do we get tiles that the player can walk right up to that are also taller than them? And how do we make sure that there are walls that the player can walk behind? Well, someone with lots of time in the Godot Engine might spend a great deal of time programming a complex system to assign a height value into the 2D system. Or...

You can make taller tiles, but pay attention to their texture offset and sort origin. It gets a bit wacky.

Just make taller tiles. Look, when I was developing Empty Spiral, I gave myself four months to finish the Vertical Slice. I know Godot pretty well, but not well enough to get into extending its base classes with experimental functionality. I knew that there weren't going to be many location where my player would be weaving in and out anyway. One of the problems with isometric art styles is that characters can go missing if you hide them behind walls! I opted to make these taller tiles for a select few locations and sprites in my game because I knew that they would serve the same purpose without causing too many issues. Now, they do cause some issues- which is why I made my character colliders just a bit larger than I normally would. That small change hides the imperfections well enough, in my opinion. If I continued with the game, maybe I'd spend the time trying to make some sort of pseudo-3D tilemap layer, but honestly, this works well enough.

And that's pretty much all the hassle I had with sorting! I did have to make a custom "Elevation Line" script when my player went up or down stairs, but it was pretty minimal. I decided to use the open-source map editor called Tiled to make my maps just because it had a bit of a nicer flow for isometrics than Godot's built in editor (in my opinion). I dropped those map scenes into a parent scene, where I would apply post-processing, build my encounters, add entrance and exit objects, and pretty much anything else I needed to do to make the map "functional."

Final scene hierarchy for an actual map. The "Canyon Wilderness" node is the imported node from Tiled. This probably isn't the cleanest hierarchy, but it worked for me, so I stuck with it.

Final Thoughts

Would I recommend doing isometric art in Godot? Yes. It's a super unique style that I think few games pull off. I want to see more of it, and the hoops I had to jump through were worth it in my opinion. There's a bit of a learning curve, and certainly some limitations (I WANTED REAL LIGHTING SO BADLY), but overall it works well. Well enough, anyway.

If you want to see how these maps actually turned out, or some of the other maps, feel free to check out Empty Spiral's actual project page and give it a play!