Isometric Rendering

This is part of a series on how this game was implemented technically, as part of the Game Jam it was developed for. It is recommended to read them roughly in-order as later blog entries may refer to earlier ones.

Technical:

1. State Machine
2. Pathfinding/Movement
3. Isometric Rendering
4. API
5. Control Sources
6. AI
7. Networking
8. Fog of War
9. Bit Packing
10. Palette Shifting

Other:

• Portraits
• Scrapped Ideas
  

------------------

Isometric Rendering

It was difficult to decide which viewport to use in this game. A top-down square grid, or an Isometric diamond grid. 

The game was initially implemented using the top-down approach, as this is simple to implement. This can be seen in the minimap in the top-left of the screen. This minimap is actually a complete implementation of the game, just from a different angle.

You can even click on these cells and play the game using just the minimap (assuming it doesn't overlap with the actual game grid)

Despite having this implementation, I had a bunch of isometric sprites from a starter pack on itch.io asset store that I've never used. 

I decided to trial implementing an Isometric grid, and if it turned out too hard I would revert to a square grid. 

Pro's and Con's

There's several con's for an isometric viewport. The main ones are;

• No obvious "left right up down", since it's "diagonal left, diagonal right" only. This makes arrow-key controls confusing
• Wasted space without scrolling, screens are rectangular, compared to a diamond grid, so the corners are blank space
• False "depth", tiles stacked on top of each other are indistinguishable from tiles further away stacked next to each other.

The Pro's are purely for aesthetic reasons.

Matrix Algebra

It is "relatively" easy to convert a square grid to an isometric one, you can just offset your sprites while rendering by their isometric tile size and use a normal "for" loop to render them (i.e. increase the sprite's Y as the cell's X increases). This works, but is a one-way transform, it can't tell you given an X,Y on the screen (e.g. a mouse position) how to find out which tile is under the mouse.

This needs a more in-depth implantation, and the most useful approach is to use linear algebra/matrices. 

By using a matrix and an inverse matrix, you can convert between the isometric and non-isometric coordinate spaces relatively easily. I was hesitant to implement this, as it was a reasonably non-trivial feature to implement in limited time. To my surprise, it worked quite well. To resolve the problem with "false depth" above, I only implemented a single isometric layer (blocks cannot stack on top of each other) which was enough of a simplification to get the isometric grid running with just 1 matrix multiplication and its inverse.

If you're interested in the complete details, I'd strongly recommend the following tutorials:

https://pikuma.com/blog/isometric-projection-in-games