I thought it would be useful to write about coordinates for isometric games. Disclaimer: I have a degree in maths. You might not. Let me know if anything needs explaining more fully.

Firstly, grab a copy of my new game. It will help understand what I’m talking about. You might even enjoy it.

Ok let’s begin.

We want to describe a 3D world, and project that into 2D. This is a very common thing to do. 3D games do this all the time, using 3- and 4-dimensional vectors to store world-space coordinates and then use matrix transformations to project these onto the screen.

For now, let’s not worry about matrices and see what we can do with some simple geometry.

Let’s call our world-space coordinates (in any arbitrary units, though I use one unit per block) and our screen space coordinates (in pixels) .

So the points on our basic block, positioned at , would be:

Isometric projection means that 1 unit along any of the world space axes looks the same distance in screen space. This means that there is between each of the axes.

But in games, we don’t use actual isometric projection. We use something close, and call it isometric anyway. We want nice smooth lines so that for each 2 pixels along, we go 1 pixel up or down. This gives a line at angle to the vertical, instead of . Notice I’ve called this angle .

Though it is not true isometric projection, we probably do want a true rotation for it to look realistic. Later we will work out the correct value for , given . (Spoiler: it’s . This is not possible to get exactly right with pixels, so I’ve found pixels, pixels works well).

Taking a closer look, we can work out a few things we’ll need later:

For now, let’s work with so that all points lie in a plane. Consider some point on the screen with coordinates .

We find by projecting parallel to the y-axis from the point until we hit the x-axis. Then the distance along is .

We can do something similar to find and , but bearing in mind (a) these axes are scaled by on the screen and (b) we are below the u-axis, so is negative.

Putting these two diagrams together, it suddenly becomes easy to find and in terms of and .

Clearly we have

and

But if you think about it, it’s pretty clear that increasing by will just decrease by . So we have our final coordinate projection of:

That was fairly straightforward.

Now comes the trickier part: working out depth.

Depth should be thought of as the distance to the camera, and it is particularly important so that we can order the drawing of sprites.

Essentially, depth is a third coordinate to store the extra information lost when when converting 3D down into 2D . Let’s call depth .

Now we’re going to need to use matrices. We want to find a matrix such that

But we already know most of it, we only need to find , and :

This transformation should be a simple rotation of the axes, plus a scaling by some factor . This means that is an orthogonal matrix with determinant . Lost me yet? If you have, don’t worry, you can just use the result we find.

So we need

So we have and , so as foretold.

Also, so , and so .

Finally, so , using .

So we have, taking positive square root for determinant , , .

This gives:

along with:

You should now be able to use these formulae to draw depth-sorted sprites in isometric space. But be warned: sorting is not this simple when the bounding boxes of objects overlap in 3D space. For that, you’ll need to use depth buffers.

I will probably write another post soon about collisions in isometric games.

## Leave a comment