Isometric pixel art
Most isometric pixel art is drawn on a 2:1 grid: lines that go two pixels across for every one pixel up. It is not true isometric, and that is on purpose.
What it is
Isometric games show the world from above and to one side, along a diagonal, with no perspective: parallel lines stay parallel and things far away are not smaller. Floors become diamonds, and walls run off at two matching slopes.
In true isometric projection those slopes are 30° from horizontal. Pixel art nearly always uses a slightly flatter slope instead, where each line steps two pixels across and one pixel up. That slope is about 26.6°, and it is usually called 2:1 isometric (strictly, it is a dimetric projection).
Why 2:1
On a pixel grid, a line looks clean only when its steps repeat evenly. A 2:1 line is a perfect staircase: two pixels, step, two pixels, step. A 30° line has no such simple pattern and comes out as uneven runs of one and two pixels, which looks jagged.
2:1 also makes tiles simple. A floor tile is a diamond twice as wide as it is tall, for example 32×16 or 64×32, and tiles fit together without gaps.
The camera angles
If you render from 3D, the camera should be orthographic (no perspective), turned 45° round the model so it looks along a diagonal, and tilted down by 30°. With that tilt, a square floor tile projects to a diamond exactly twice as wide as it is tall, so the floor edges fall on clean 2:1 lines. A steeper or flatter tilt gives other ratios that do not line up as neatly.
Common mistakes
- Doubled pixels on lines. A 2:1 line should be exactly two pixels per step. Runs of three, or stacked pixels at the step, make edges look thick.
- Mixing angles. One building at 2:1 and another at a steeper slope breaks the grid.
- Forgetting height. Vertical edges stay vertical. Height on a 2:1 grid is measured in whole pixels; pick how many pixels tall a metre is and keep it.
- Perspective cameras. Rendering with perspective makes lines converge, so tiles stop fitting.
How to draw it by hand
- Draw a tile diamond on 2:1 lines, for example 32×16.
- Build objects as boxes on that grid: diamond top, vertical sides.
- Shade the two visible sides differently: one lit, one in shadow.
- Keep every slanted edge on the 2:1 staircase.
- Draw characters in the four diagonal directions first; add the other four if needed.
How Pixor does it
In Pixor every side is a camera. The isometric view uses a 2:1 setup, and you can also choose side, three-quarter or top-down views, or set any pitch. Rings of 4, 8 or 16 cameras give each direction. With one fixed Pixels/m on the cameras, buildings, props and characters render in proportion on the same grid.
Related
- Sprite sizes: tiles and characters
- Outlines
- Directions and the scene manual
Questions
Why is pixel-art isometric 2:1 and not 30 degrees?
A 30 degree line on a pixel grid gives an uneven staircase. A 2:1 line, about 26.6 degrees, repeats two pixels across and one up, so it stays clean.
What camera angle gives 2:1 isometric?
Look along a diagonal (45 degrees round) and down at 30 degrees, with an orthographic camera. The floor grid then draws as clean 2:1 lines.
How many directions do isometric characters need?
Usually 4 (the diagonals) or 8. Many games render 4 or 5 and mirror the rest.