In Isometric games like the one I've been working on for the last few weeks, the projection required is quite different than a normal 2D or 3D game. Usually, those games have perspective projection, which is how you typically see the world (objects further away appear smaller and objects closer appear larger). In an [[Orthographic]] projection objects at different positions appear the same size. Isometric use this projection type on-top of changing the angles such that all lines are parallel. A typical [Isometric](https://en.wikipedia.org/wiki/Axonometric_projection) perspective in games involves a 2 to 1 ratio between the X an Y coordinates. That means for every Y value you move 2 X values. ![[Screen Shot 2022-02-20 at 5.15.37 PM.png]] This type of change to the way objects and items are laid out completely changes the way you go about making a game. For example, if we were to simply push the player upward by simply increasing the Y value, we would actually move the character diagonally. These are the kinds of things that you need to account for. Which brings me to the purpose of this post. I've been struggling with wrapping my brain around this concept (and learning game development while I do it). In order to not forget the perils, I'm jotting down what I've learned. ### Visualizing an Isometric Grid ![[Screen Shot 2022-02-23 at 5.47.09 PM.png]] In this case we are assuming a 2:1 Isometric projection. ### Translating Cartesian coordinates to Isometric coordinates To represent the Isometric project, if we're moving down (i^) the X axis by 1 pixel then that represents an additional move down the Y axis by 0.5 pixels. Following this same principle, for j^ we would get -1 and 0.5. We can represent both of these as a pair of 2D vectors: ``` [1, 0.5] [-1, 0.5] ``` Using this we can now multiple any `x` value by `[1, 0.5]` and any `y` value by `[-1, 0.5]`. ``` x * Vector(1, 0.5) + y * Vector(-1, 0.5) ``` For example, let's say we wanted to know where a normal coordinate `(3, 1)` is on our Isometric grid we can do: ``` 3 * Vector(1, 0.5) + y * Vector(-1, 0.5) = Vector(3, 1.5) + Vector(-1, 0.5) = Vector(2, 2) ``` However, this wont work by itself. This formula doesn't account for the width and height of the tiles. In order to get this to account for your tile size you need to multiply every `x` change by `width/2` and every `y` change by `height/2`. This gives you a new formula: ``` (x * 0.5w + y * -0.5w) (x * 0.25h + y * 0.25h) ``` ![[Screen Shot 2022-02-23 at 6.05.28 PM.png]] While the above equation works, it adds too much spacing between tiles, instead we need to take just half of our asset size: ![[Screen Shot 2022-02-24 at 12.26.14 PM.png]]