Skip to content
Browse the knowledge base

Rule

rules://71-isometric

Isometric (2:1)

Isometric fails at the first line: a true 30° edge makes an uneven 2,3,2,3 stair and the whole scene looks hand-wobbled. Everything below follows from one fact, pixel isometric is a 2:1 dimetric grid, and from one habit, never eyeball a cube, a circle or a roof. For the choice between projections see rules://70-perspective.

7 pixel templates rules/71-isometric.md
On this page

Rules

#
  1. The edge is 2:1. Two pixels across per one pixel up or down (26.57°). Allowed edge directions: vertical, 2:1 (both ways), 1:1, 1:2 steep (windscreens, tapers), horizontal only for the rare flat rim. Every receding edge in the scene is the same 2:1 line, runs of exactly 2,2,2. A 4,4,4 run is worse than 2,2,2; 2,3,2 is a bug.
  2. Draw lines with draw op line from a point to a point with dx = 2·dy, then look op ascii and confirm every row has the same run. Keep a ruler: one spare layer with one long 2:1 line you can slide against edges.
  3. A tile is a diamond twice as wide as tall, even sizes only: 16×8, 24×12, 32×16 (the default), 48×24, 64×32 (modern). Every tile in a set has one size. With a 4 px apex the row width is min(4·(row+1), 4·(H−row)); apex runs of 2, 3 or 4 px are all seen, pick one and never mix.
  4. A cube is the diamond plus a side of half its width: footprint W×W/2, side height W/2, silhouette W×W. Row width = min(W, 4·(row+1), 4·(W−row)). A slab of thickness h replaces the second W/2 by h: min(W, 4·(row+1), 4·(h+W/2−row)). Visible: 3 faces, 9 edges; the far corner is never drawn.
  5. Three values, one light, whole scene. Light from the upper left: top lightest, left face middle, right face darkest. Never flip it per object. Numbers (HSB brightness): top = base, convex edge +10%, left −15%, right −25% (two stacked 15% shifts make 27.75%, not 30%). Warm the top, cool the dark face.
  6. Edges: an outer convex edge gets a lighter 1 px line just inside the silhouette; inner concave edges stay darker but readable. Outline last, selective (rules://04-outlines-and-edges); "black" objects still need left/right values.
  7. Verticals stay vertical, 1 px per px. No vanishing point, no foreshortening: an object can be moved anywhere on the grid without redrawing.
  8. Grid arithmetic (tile W×W/2): one step along +x moves the screen by (+W/2, +W/4), along +y by (−W/2, +W/4), one cube up by (0, −W/2). Nearer tiles overlap the ones behind, so draw back to front: ascending x+y, then ascending height.
  9. Floor circles are 2:1 ellipses (16×8, 24×12, 32×16 …): table and templates in rules://72-3d-forms. draw op ellipse with that box draws the table exactly.
  10. Circles on a wall are skewed circles. Draw the flat circle, shear it by 1 px per 2 px across (left wall: slope down to the right, right wall: mirror) and repair the first and last rows by hand. Bounding box ≈ d wide by 1.12·d tall. Even tricky shapes (round windows, evenly spaced arches) are planned in front view first.
  11. Cylinder = two ellipses joined on the vertical. Top flat-lit; body shaded in columns, never rings; the bottom edge is the lower half of the same ellipse shifted down by the height; a taper uses a smaller top ellipse.
  12. Build from cuboids, then carve (arches, stairs, cut-outs), texture last. Cone and pyramid: base diamond, apex above its centre; find the apex by copying the diamond up and crossing the diagonals. A sphere is a circle anywhere.
  13. Stairs and ramps: one slope per object: 1 px up per 2 px along the floor axis (26.6°), or 1 px per 1 px for steep ones.
  14. Tall tiles (walls, towers) share the footprint and extend upward. A water tile is about half cube height so it sits lower. Each of the three faces of a terrain tile must loop on its four sides. Do not mix flat-colour, textured and hi-detail tile sets in one scene.
  15. Ground every object with a flat shadow: a 2:1 ellipse or diamond in one dark colour toward the lower right (light upper left). Floating objects look pasted without it.
  16. Characters: the footprint is the diamond; the body is free-hand, a 2:1 stair across a round body looks robotic. Thin body, slightly large head, one shoulder visible, one foot lower on screen, eyes 1 px each with 1 px between, interior lines lighter than the outline. A person is 24–32 px on a 32×16 grid. Mechs at 32 px: torso like a tank front, shoulders higher than the head, leg+foot one unit (skis, talons, not shoes).
  17. Do not convert flat art with transform. transform op rotate is clean only at 90° and scale is integer-only. Map by arithmetic instead: world tile (x, y) and height z in px → screen ((x−y)·W/2, (x+y)·W/4 − z), then draw.
  18. 45° dimetric (1:1 steps) is the alternative when tall structures must not block play; one choice per game, never mixed with 2:1. Iso is poor for twitch games (distances are hard to judge): say so when asked for an iso platformer.

By size

#
Size What survives
8 Not worth it: an 8×4 diamond is a smudge. Use plan or 3/4 view.
16 Tile 16×8 (diamond rows 4,8,12,16,16,12,8,4), cube 16×16 (template). Props ≤ 16 px, 3 values, no inner outline.
32 Tile 32×16, cube 32×32, character 24–32 px, 1 px edge highlights, ellipse shadows.
64 Tile 64×32 or 128×64 for detail, texture per face, cars 63×45, windows and trim lines.

Templates

#

iso-lines-2to1 — the four legal edge families (2:1 down, 2:1 up, 1:1, 1:2). Compare any hand line against these runs.

iso-lines-2to1 · 36×6
  • L line
Grid source
L = line           #4d3b6b
---
LL.....................LL.L......L..
..LL.................LL....L.....L..
....LL.............LL.......L.....L.
......LL.........LL..........L....L.
........LL.....LL.............L....L
..........LL.LL................L...L

iso-tile-32 — flat ground tile 32×16, 4 px apex, 2 px edge line; the row widths are min(4·(row+1), 4·(16−row)).

iso-tile-32 · 32×16
  • O tile-edge
  • T tile-fill
Grid source
O = tile-edge      #4d6b3f
T = tile-fill      #79a35a
---
..............OOOO..............
............OOTTTTOO............
..........OOTTTTTTTTOO..........
........OOTTTTTTTTTTTTOO........
......OOTTTTTTTTTTTTTTTTOO......
....OOTTTTTTTTTTTTTTTTTTTTOO....
..OOTTTTTTTTTTTTTTTTTTTTTTTTOO..
OOTTTTTTTTTTTTTTTTTTTTTTTTTTTTOO
OOTTTTTTTTTTTTTTTTTTTTTTTTTTTTOO
..OOTTTTTTTTTTTTTTTTTTTTTTTTOO..
....OOTTTTTTTTTTTTTTTTTTTTOO....
......OOTTTTTTTTTTTTTTTTOO......
........OOTTTTTTTTTTTTOO........
..........OOTTTTTTTTOO..........
............OOTTTTOO............
..............OOOO..............

iso-cube-16 — plain three-value cube, no outline. The base for blocks, crates, house volumes.

iso-cube-16 · 16×16
  • T top
  • L left-face
  • R right-face
Grid source
T = top            #e6d6ac
L = left-face      #b79a7d
R = right-face     #7e6574
---
......TTTT......
....TTTTTTTT....
..TTTTTTTTTTTT..
TTTTTTTTTTTTTTTT
TTTTTTTTTTTTTTTT
LLTTTTTTTTTTTTRR
LLLLTTTTTTTTRRRR
LLLLLLTTTTRRRRRR
LLLLLLLLRRRRRRRR
LLLLLLLLRRRRRRRR
LLLLLLLLRRRRRRRR
LLLLLLLLRRRRRRRR
LLLLLLLLRRRRRRRR
..LLLLLLRRRRRR..
....LLLLRRRR....
......LLRR......

iso-cube-16-outlined — outer outline plus lighter top-edge pixels (E). Stamp it, then retint roles.

iso-cube-16-outlined · 16×16
  • O outline
  • E top-edge
  • T top
  • L left-face
  • R right-face
Grid source
O = outline        #2d2233
E = top-edge       #f7efd2
T = top            #e6d6ac
L = left-face      #b79a7d
R = right-face     #7e6574
---
......OOOO......
....OOTTTTOO....
..OOTTTTTTTTOO..
OOTTTTTTTTTTTTOO
OETTTTTTTTTTTTEO
OLEETTTTTTTTEERO
OLLLEETTTTEERRRO
OLLLLLEEEERRRRRO
OLLLLLLLRRRRRRRO
OLLLLLLLRRRRRRRO
OLLLLLLLRRRRRRRO
OLLLLLLLRRRRRRRO
OOLLLLLLRRRRRROO
..OOLLLLRRRROO..
....OOLLRROO....
......OOOO......

iso-cubes-pair-16 — two neighbouring blocks (+x step = (8,4)); shows draw order and how the outline separates overlaps.

iso-cubes-pair-16 · 24×20
  • O outline
  • E top-edge
  • T top
  • L left-face
  • R right-face
Grid source
O = outline        #2d2233
E = top-edge       #f7efd2
T = top            #e6d6ac
L = left-face      #b79a7d
R = right-face     #7e6574
---
......OOOO..............
....OOTTTTOO............
..OOTTTTTTTTOO..........
OOTTTTTTTTTTTTOO........
OETTTTTTTTTTTTOOOO......
OLEETTTTTTTTOOTTTTOO....
OLLLEETTTTOOTTTTTTTTOO..
OLLLLLEEOOTTTTTTTTTTTTOO
OLLLLLLLOETTTTTTTTTTTTEO
OLLLLLLLOLEETTTTTTTTEERO
OLLLLLLLOLLLEETTTTEERRRO
OLLLLLLLOLLLLLEEEERRRRRO
OOLLLLLLOLLLLLLLRRRRRRRO
..OOLLLLOLLLLLLLRRRRRRRO
....OOLLOLLLLLLLRRRRRRRO
......OOOLLLLLLLRRRRRRRO
........OOLLLLLLRRRRRROO
..........OOLLLLRRRROO..
............OOLLRROO....
..............OOOO......

iso-cylinder-16 — barrel, drum, pillar: flat top, column bands (highlight stripe two columns in from the lit edge), 16×8 top ellipse, lower half-ellipse base one body height (9 rows) below it; a 1 px highlight rim marks the front edge of the top.

iso-cylinder-16 · 16×17
  • 0 core-shade
  • 1 shade
  • 2 mid
  • 3 light
  • T top-flat
  • H highlight
Grid source
0 = core-shade     #685a6e
1 = shade          #8c7480
2 = mid            #b29679
3 = light          #d4bb93
T = top-flat       #e6d6ac
H = highlight      #f3e7c4
---
....TTTTTTTT....
..TTTTTTTTTTTT..
.TTTTTTTTTTTTTT.
TTTTTTTTTTTTTTTT
TTTTTTTTTTTTTTTT
3TTTTTTTTTTTTTT0
33HHTTTTTTTTHH00
33HHHHHHHHHH1100
33HH333322221100
33HH333322221100
33HH333322221100
33HH333322221100
33HH333322221100
33HH333322221100
.3HH33332222110.
..HH3333222211..
....33332222....

iso-wall-circle-12 — a circle on the left wall face (flip horizontally for the right face): porthole, window, shield boss.

iso-wall-circle-12 · 12×13
  • C shape
Grid source
C = shape          #8c7bb0
---
.CCCCC......
CCCCCCCC....
CCCCCCCCC...
CCCCCCCCCC..
CCCCCCCCCC..
CCCCCCCCCCC.
.CCCCCCCCCC.
.CCCCCCCCCCC
..CCCCCCCCCC
..CCCCCCCCCC
...CCCCCCCCC
....CCCCCCCC
......CCCCC.

Procedure

#
  1. Choose tile size and light direction; create a ruler layer with one long 2:1 line.
  2. Stamp a cube/tile template with draw op grid (transparent: "skip" to overlay existing art), or compute the silhouette from rule 4 for other sizes.
  3. Block the mass from cuboids on one layer per part (layer op create); carve last.
  4. Colour faces top/left/right from one ramp (palette op ramp, rules://02-shading-and-light).
  5. Add a 1 px light edge on convex corners, a flat shadow ellipse on the ground.
  6. look op ascii on edges to verify 2,2,2 runs; look op preview at 1×; outline last (transform op outline side inside keeps the size); validate.

Mistakes

#
Symptom Cause Fix
Jagged, uneven edges Free-hand or 30° lines Redraw with draw op line at dx = 2·dy
Object looks pasted on No ground shadow Add a flat 2:1 shadow
Faces read as one blob Same value on left and right Left −15%, right −25%
Light flips between blocks Per-object lighting One light for the scene
Round things look oval and flat Circle eyeballed Use the ellipse/skew templates
Tiles show gaps or double pixels Mixed apex widths One apex width per set
Stair of cubes looks wrong Wrong draw order Ascending x+y, then height

Review

#
  • Every receding edge is 2:1 with regular runs; verticals are vertical.
  • Three face values, light from one fixed side across all objects.
  • Tile and object sizes even and consistent; apex style never mixed.
  • Floor circles are 2:1 ellipses; wall circles are skewed, not stretched.
  • Shadows on the ground in one direction; draw order back to front.
  • Colour and texture level match across tiles in the scene.

Sources

#
  • Slynyrd, Pixelblog 4, 41, 54, 61 (isometric, cubes, tiles, vehicles, mecha).
  • Pixel Logic (Ch. 6: 2:1 line, circles on planes, sprite-to-iso skew).
  • Drububu and Pixelbath isometric guides; Tuts+ isometric character and vehicle tutorials.
  • Saint11, Isometric tutorial; Cheishiru and Pixnote isometric room guides.
  • Robertson & Bertling, How to Draw (forms on a grid, ellipse degrees).