Isometric Projection

Isometric projection displays three-dimensional scenes from a fixed angle where all three axes are equally foreshortened — no axis is preferred over another. On 8-bit computers, this created the impression of explorable 3D space while using only 2D sprite and tile techniques. Knight Lore (Spectrum, 1984), Marble Madness (arcade, 1984), and Solstice (NES, 1990) defined the look. The strategy genre adopted it (Civilization, SimCity 2000) and never let go — modern indies (Hades, Disco Elysium) keep it alive.

The mathematics

True isometric

True isometric uses 30° angles for the X and Z axes (measured from horizontal) with the Y axis straight up:

• X-axis: 30° from horizontal (right and slightly down)
• Z-axis: 30° from horizontal (left and slightly down)
• Y-axis: 90° (vertical)

Each unit step in any axis projects to the same screen distance — true iso-metric (equal measure).

“Pixel isometric” (2:1 ratio)

Most computer games used a 2:1 ratio rather than true 30°:

• For every 2 pixels horizontal, 1 pixel vertical along the X axis (and the same for Z, opposite direction).
• Slightly off-true (the actual angle is atan(1/2) ≈ 26.57° rather than 30°).
• Simpler maths — multiplications and divisions by 2 are shifts on 8-bit hardware.
• Visually nearly identical to true isometric.

This is what Knight Lore, Solstice, and basically every 2D isometric game uses. Calling it “isometric” is technically inaccurate (purists call it dimetric or 2:1 projection), but the term has stuck.

The ratio is countable in the picture. Follow any receding edge and it moves two pixels across for every one pixel down — no anti-aliasing, no interpolation, just a staircase, because that is what the projection reduces to once tile_width / 2 is a shift.

Measuring every edge in the room this crop was taken from: of 642 leading-edge runs, 321 are exactly two pixels long — half of them, against 10% for the next most common length. That distribution is the 2:1 projection, visible as a statistical fingerprint of the arithmetic above.

It also shows why the 2:1 ratio won over true 30° isometric. A true isometric edge needs a slope of tan(30°) ≈ 0.577, which no whole number of pixels gives you; every edge would need rounding, and neighbouring edges would round differently and stop lining up. At 2:1 every edge is exact, every wall meets every floor cleanly, and the maths is a shift.

Coordinate conversion

Convert from 3D world (tile_x, tile_y, tile_z) to 2D screen coordinates:

screen_x = (tile_x - tile_z) * (tile_width / 2)
screen_y = (tile_x + tile_z) * (tile_height / 2) - tile_y * tile_height

Where tile_width and tile_height are the on-screen dimensions of one tile (typically 32×16 for 2:1 isometric). Note tile_y is up, so it subtracts.

Inverse — screen back to tile (for click detection, mouse picking):

tile_x = (screen_x / (tile_width / 2) + screen_y / (tile_height / 2)) / 2
tile_z = (screen_y / (tile_height / 2) - screen_x / (tile_width / 2)) / 2

Rendering order

Objects must be drawn back-to-front (painter’s algorithm) so closer objects overlay farther ones:

for z from far to near:
    for x from left to right:
        draw_tile(x, y, z)
        draw_objects_at(x, y, z)

For free-position objects (not tile-aligned), sort by depth = tile_x + tile_z + tile_y and draw in order.

See Y-Depth Sorting for the depth-sort details.

Collision detection

Keep world coordinates separate from screen coordinates:

• Store position in 3D (x, y, z) (or 2D (x, z) plus height).
• Calculate screen position only for display.
• Collide in 3D space, not screen space — diagonal-on-screen sprites that are perpendicular in world space shouldn’t collide based on screen overlap.

This is the lesson that Knight Lore established and every isometric game inherits: screen position is not world position.

The Filmation engine

Ultimate Play the Game’s Filmation engine — Knight Lore, Alien 8, Pentagram, Nightshade, Gunfright — is the canonical 8-bit isometric implementation:

Feature	Implementation
Solid objects	Z-ordered sprite masking (write-mask + write-data per object)
Room-based world	Each room rendered fresh as the player enters
Object interaction	Physics computed in 3D space, displayed in 2D
Memory efficiency	Compact room data; objects shared across rooms

See Filmation Engine for the deep dive.

Tile-based isometric

Common in strategy games (Civilization, SimCity 2000, Theme Hospital, Diablo):

Element	Structure
Ground tiles	Diamond-shaped (parallelogram-projected square)
Objects	Placed at tile positions, may overhang neighbouring tiles
Height	Stacked tiles or vertical offset
Multi-tile objects	Big buildings span 2×2, 3×3 tile footprints

Challenges

Depth sorting in complex scenes

Objects can overlap in non-trivial ways:

• A character moving diagonally between two pillars must be sorted between them.
• Multi-tile objects must be sorted by their entire footprint, not just their anchor.
• Different heights complicate things further (a flying creature behind a wall but above it in Y).

Standard solution: depth = tile_x + tile_z + tile_y with tie-breakers for stable rendering.

Click / touch detection

Convert screen-space input to world-space tile via the inverse formula. UI complications: clicks on tile boundaries need rounding rules.

Movement

Eight-direction movement is natural — diagonals along the X/Z axes feel “natural” because they correspond to game-world directions:

• Up arrow → moves toward back corner (decreasing screen Y, but in world space a diagonal between -X and -Z).
• Left arrow → moves left-screen, which in world space is “decrease X and increase Z”.
• Rotational input via four-way controllers mapping to world axes is its own design problem.

Notable games

Game	Year	Platform	Innovation
Qbert**	1982	Arcade	Early commercial isometric
Zaxxon	1982	Arcade	Isometric shoot-em-up; popularised the look
Ant Attack	1983	ZX Spectrum	One of the first 8-bit isometric games
Knight Lore	1984	ZX Spectrum	Filmation engine; defined 8-bit isometric
Marble Madness	1984	Arcade	Atari’s isometric ball-rolling masterpiece
Alien 8	1985	ZX Spectrum	Filmation engine refinement
Batman	1986	ZX Spectrum	Jon Ritman and Bernie Drummond for Ocean; CRASH found it “viewed and played in the same fashion” as Knight Lore
Head Over Heels	1987	ZX Spectrum, Commodore 64	Two-character isometric puzzle; ZZAP! 64 Gold Medal for the C64 version
Solstice	1990	NES	Late console-era isometric
Populous	1989	Various	Bullfrog’s god game popularised isometric on 16-bit

On the Commodore 64

By the end of 1987 ZZAP! 64 had a settled name for the look. Its Christmas 1987 compilation round-up files Strike Force Cobra as “isometric forced perspective action”, Bobby Bearing as a “3D isometric perspective arcade adventure with fabulous feel” and The Great Escape as an “isometric perspective wartime romp”, and the same issue previews The Edge’s Inside Outing as “a full colour Fairlight clone” with “fast isometric perspective 3D action”.

The C64 version of Ocean’s Head Over Heels (1987) took a ZZAP! Gold Medal. The magazine’s description is the game’s design in miniature: two spies “travelling about on each other’s shoulders”, where “Head can jump great heights and turn in mid air, while Heels is a flyer on the ground but not so good a jumper”, working through “300 odd rooms” in which “seemingly innocuous floors are fatal to the touch and innocent-looking creatures turn nasty at the drop of a hat”.

Modern use

Isometric persists in many genres:

• City builders: SimCity 2000 / 3000 / 4, Tropico, Cities: Skylines (modern uses true 3D but isometric-feeling camera).
• Tactical RPGs: Final Fantasy Tactics, Tactics Ogre, Disgaea, XCOM.
• Action RPGs: Diablo series, Path of Exile, Torchlight.
• Strategy: Civilization II / III used true isometric; later moved to 3D-with-isometric-camera.
• Indie: Hades, Bastion, Transistor, Pyre (Supergiant).
• Atmospheric / narrative: Disco Elysium.

See also

• Knight Lore
• Filmation Engine
• Head Over Heels
• Y-Depth Sorting
• Ultimate Play the Game