The isometric look can seem like sorcery, but underneath it is a small, friendly piece of geometry. Artists and developers work on a grid of diamond-shaped tiles, and every position in the world is just a pair of grid coordinates that gets converted into a screen position.
The conversion is short. To turn a grid cell into a point on screen, you take the difference of the two grid coordinates for the horizontal position, and the sum of them for the vertical position, then scale each by half the tile's width and height. Because most games use a 2:1 tile (twice as wide as it is tall), the diamonds line up perfectly and tiles snap together with no gaps.
Stacking and height
Height is handled by simply sliding things upward on screen. A block that sits one unit higher is drawn a fixed number of pixels above its base tile, which is how you get those satisfying stacks of cubes, towers and stairs. Shadows are then painted on the ground to anchor everything, because without them it can be hard to tell what is floating and what is resting.
The last ingredient is draw order. Objects further "back" must be painted before objects in front, so they overlap correctly. Sort everything by the sum of its grid coordinates, draw back to front, and the scene assembles itself like a tiny model city. That is the entire trick — a grid, a little arithmetic and a careful painting order.
← Back to all articles