After creating a small game for a game jam entry that utilized an isometric perspective, it’s become more apparent that the style is really quite interesting and further exploration would be beneficial.
Since then, I’ve migrated my in-progress deckbuilding roguelike from a standard top down perspective to a more dynamic isometric one, and I’m really liking how it looks.
Before
After
In this post, I want to consider the reasons for using and history of isometric perspectives, the complexity of building art for it, and the problem of shifting a whole codebase that references standard rectangular coordinates to isometric coordinates.
Video
Check out the video! I’m learning to edit better, so hopefully this video will be more fun to watch.
Rationale
It’s important to make a distinction between a real and simulated isometric perspective. Real isometric projections require you to simply tilt the camera in a 3D scene, and set its projection mode to Orthographic, where all parallel lines remain so and don’t converge. Simulated isometric projections, on the other hand, involve faking the effect in a 2D scene, rather than a 3D one. Instead of using 3D assets, I use 2D sprites that are drawn from the isometric perspective.
From my non-artistic perspective, it’s not easy to draw in an isometric perspective, or in any kind of perspective really. That requires a lot of practice and a good eye for proportion, which comes with time and effort. A top down point of view is much easier to picture, and also, I think, more common in games due to its ease of replication. That being said, many incredible games come in the isometric variety, including Transistor by Supergiant Games, Into the Breach by Subset Games and Monument Valley, by Ustwo Games.
My reason for using this perspective is because it enhances the artificiality of the game, creating a real sense that the player is working with a “game board”, rather than travelling in an immersive world. I’ve already created another abstraction - control by cards - to further increase that sense of artificiality. While it’s not an aesthetic everyone enjoys, I quite like the style and I think it opens up a lot of possibility.
Pixel Art
While this won’t create a mathematically perfect model, the best way to make an isometric tile is to use a 2:1 horizontal to vertical pixel ratio - that is, for every two pixels you go left or right, go one pixel up or down. This creates a diagonal that’s close to, but not exactly, 30 degrees to the horizontal. It will tile nicely, and that’s the important bit. At higher resolutions, any tiling artifacts will be reduced, so it’s something to consider. I’ll give a more detailed overview of this in the video, but the final result looks like this, less the outline.
What’s Really Going On
In order to transform between a top down view and an isometric one, we’re actually describing a particular shift of the coordinate grid. In fact, it’s called a Linear Transformation. 3blue1brown has an excellent series of videos on linear algebra, and this one discusses it in detail. We’re essentially taking our axes and warping them in such a way as to translate all of our coordinates from their normal places on a grid, to a skewed position on an isometric graph.
This is our standard grid, with unit vectors showing the axes,
And this is the transformed grid. The darker underlying grid has not been modified.
The video has an animated transition, around where I start talking about the maths. It took an embarassing amount of time to make in Blender, but it does look quite interesting :)
Describing the transformation can be done by a simple matrix multiplication, where we take the dot product of the rows of our transformation matrix with an input vector, in order to stretch and squeeze that vector in such a way that it goes into our isometric space. That matrix multiplication is described below, where the x’ y’ vector is the isometric output, and the x y vector is the standard input.
It can also, and perhaps more clearly, be defined in the following set of functions:
And applied to the following table to convert between points on a unit square:
Now, it might not be more performant, from a programming perspective, to implement this transformation as a matrix multiplication, but it does better describe the abstract mathematical operation and how it acts on the underlying structures of the game world, than a set of equations can.
Programatically
Thought it might seem initially simple, it gets rather complex from a code-architecture perspective to implement such a system. Distances, pathfinding, collisions and many more fundamental features we might take for granted break due to the fact that this transformation isn’t distance preserving. The same distance between two points in the isometric system isn’t constant. We would need an ellipse to find all points within a distance of an entity, for an AOE attack or some such, and this is complex to describe.
It makes more sense to bank on the fact that the isometric perspective is an interpretation of a rectilinear grid and its fundamental structure is still grid based. Most things in a game can be processed on an internal “grid” system, and the conversion between the internal, standard grid, and the external, screen-space isometric grid, can be done using simple methods. It’s always helpful to be consistent with parameters always taking in one type or another, so as to not result in strange errors. The code is really quite simple.
Wrap Up
Isometric projections are a very cool and interesting effect to create, but they do cause some minor complications in the code, and rather more significant complications creating art. It can be daunting to transition between the styles, and it must be done carefully so as to avoid creating insane bugs and wonky, out of perspective graphics. Best of luck to anyone trying to create something in this style, and I hope this post has been of use to you!