Posted July 08, 2022 by stales
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:
Other:
------------------
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;
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