i just love isometric games
maybe it's just nostalgia but there's
just something about the hand-drawn art
style
with the illusion of dynamic 3d that i
just find really appealing
so in this video i'm going to show you
how isometric coordinates work
and i'll take you through the math to
project an isometric grid into screen
coordinates and back again
so let's start with a simple case in a
top down 2d game
we might have a sprite asset that looks
like this it's easy enough to tile this
asset
across the screen just use multiples of
the tile size and everything looks fine
but it's when we try to add some
perspective for the 3d effect that
things get a little weird if we draw a
3d box on a grid like this it looks fine
but if we now move that same asset
around on the grid it doesn't look quite
right
this is because of perspective things
closer to the point of view look
bigger than things further away this is
a problem for hand drawn art
because we would need to draw infinite
assets for infinite positions to move
them dynamically
but if we just move the camera back
really far away and zoom in at the same
time
the perspective becomes virtually
unnoticeable in fact if we move the
camera back
infinitely far away there's zero
perspective distortion
we call this an orthographic projection
the key here is that
all the lines are parallel let's take a
look at a hand drawn isometric cube
sprite
taking a closer look you can see where
the grid would line up against this cube
for every two pixels on the horizontal
axis we move vertically by one pixel
now this cube looks fine so what if we
try and tile it like we did before
this would make a nice bathroom wall but
it's not quite what we're looking for
the problem is that we need to transform
the coordinates of each sprite to align
it with the isometric grid we'll start
with our isometric grid and draw two
lines
one to represent the length of a single
grid tile in the x-axis
i-hat and one for a single grid tile in
the y-axis
j-hat what we need to do is visually
distort this grid
first we'll rotate it by 45 degrees and
then squash it in half
the original grid is shown underneath
because we'll need that next
to represent this distortion numerically
we now need to measure i
against the original grid i moves along
the x-axis by a single tile just as
before but it now
also moves down the y axis by half a
tile so we can write that out as a 2d
vector or two numbers
following the same process for j we see
that it moves in the negative
x direction by one tile and down by half
now these four numbers are
everything we need to describe this
transformation of our grid we can now
multiply
any x-coordinate on the isometric grid
by i-hat and the y-coordinate by j-hat
and add them together to get the screen
coordinate for example say
we wanted to find where grid coordinate
x3 y1 would appear on screen
we multiply 3 by i-hat and 1 by j-hat
this gives us a new 2d vector
representing the screen coordinate
so applying that math to our coordinates
it looks not quite right
that's because just like in the top down
example we need to account for the size
of our grid tile
in our i and j hat vectors we'll
multiply each
x value by the width of the sprite and
each y value by the height of the sprite
that looks better but there's now too
much space between each sprite
if we draw our sprite over the top of
the grid the problem becomes clear the
size of our sprite actually takes up
four tiles on our reference grid so we
actually need to halve
both the width and the height of the
sprite to get a value representing a
single reference tile
simplifying that we now get a new set of
numbers to represent the transformation
[Music]
and much better but we're not quite done
you'll notice at the top left the origin
of our isometric grid doesn't quite
match the top left of the screen
this is because the origin of each tile
actually appears in the center of the
sprite not on the top left so we need to
account for that by offsetting
everything by half the width of a tile
sprite and finally we can offset the
origin of the grid to the center of the
screen
okay so we've got our isometric grid and
how about interaction
if we wanted mouse interaction we'll
need to go the other direction to take
the screen coordinate of the mouse
and calculate which tile is being
selected fortunately maths can help us
again here we already have
our four numbers representing the
transformation from isometric grid to
screen
let's name them a b c and d for now if
we write them out in a grid like this we
have a matrix and the nice thing about
using a matrix is that there's a rule
for inverting a matrix converting it to
a new matrix that does the opposite
transformation of the original so by
simply reordering the numbers
changing the signs on two of them then
multiplying each number by the
determinant that's the bit out the front
we can get a new set of our four numbers
that works in the opposite direction
then we just multiply the cursor
coordinates by the new reversed i-hat
and j-hat
and that gives us the specific grid
coordinate and finally to add some depth
we can offset the screen y-coordinate by
some amount as a sort of third dimension
so i hope you found this useful if you
want to go into the math in a bit more
detail
check out three blue one brown's
excellent video on linear
transformations and matrices
that whole series has a lot of great
content that's it for this one and i'd
love to hear from you if you do end up
building something with this
[Music]