Projections and views

Why you need this

Stage 1 of the art pipeline picks a view, and every tile, sprite, and background is drawn for that view and no other. A tree drawn for a side-scroller looks wrong on a top-down map, and a character drawn at true isometric will not sit on a 2:1 tile. This page names the four views, gives the numbers behind them, and explains the one bit of trigonometry that decides how isometric pixel art is drawn.

The idea

Orthographic versus perspective

A projection is the rule for flattening a three-dimensional scene onto a flat screen. In a perspective projection, the way cameras and eyes work, things farther away are drawn smaller, and lines that are parallel in the world (the two rails of a track) converge toward a point on the horizon. In an orthographic projection, distance does not change size, and parallel lines in the world stay parallel on screen. Almost all 2D pixel games are orthographic: a tile at the top of the screen is the same size as a tile at the bottom, so tiles can repeat on a grid at all. Perspective, when it appears, is faked: a distant background layer is simply drawn smaller and scrolled slower (Backgrounds and parallax).

The four views

Side view. The camera looks horizontally at the scene. You see height (up and down) and horizontal distance (left and right). Depth, toward or away from the camera, is hidden: everything is on one plane, or on a few parallel layers. Platformers, fighting games, and run-and-gun games use it. A floor tile is a square seen edge-on; a character shows a profile or a slight turn.

Top-down. The camera looks straight down. You see the layout, $x$ and depth, and nothing of height: a wall is a strip of roof, a character is a head and shoulders. Pure top-down is used by twin-stick shooters, some strategy games, and racing games seen from above. It is the easiest view for tiles because a floor tile really is a square.

Three-quarter view. This is what most games described as "top-down" actually use, and it deserves its own name. The camera is tilted, roughly halfway between horizontal and straight down, so you see the fronts of characters and objects and the tops of things at the same time. The tilt squashes distances along the ground: a floor tile one unit deep is drawn one tile tall, while a wall of the same height standing on it is drawn about 1.5 to 2 tiles tall, because the wall faces the camera more directly than the floor does. Characters show their faces and stand 1 to 2 tiles tall on a 1-tile footprint. Role-playing games, action-adventure games, and farming games use it. The view is a cheat: floors are drawn as if top-down, walls and characters as if side view, and the eye accepts both at once.

Isometric (in practice, dimetric). The camera looks down at a corner of the world so three faces of every box are visible: top, left, right. In true isometric projection the ground lines rise at 30 degrees from horizontal. Pixel art cannot draw a clean 30-degree line: its slope is $\tan 30^\circ = 0.577$, so the line steps up after 1 pixel across, then after 2, then 1, then 2, in a pattern that never settles and looks ragged. Instead pixel art uses the 2:1 line, two pixels across for every one pixel up, slope $1/2$, angle $\arctan(1/2) = 26.57^\circ$. Two axes are then at one scale and the vertical at another, which is technically dimetric, but everyone calls it isometric. A floor tile becomes a diamond twice as wide as it is tall, $2w$ by $w$: 32 by 16, or 64 by 32. Strategy games, city builders, and tactics games use it. Isometric pixel art is the drawing manual.

Comparison

View	Shows	Hides	Typical tile	Typical genre
Side view	Height, horizontal distance, profiles	Depth toward the camera	Square, 16 by 16 or 32 by 32	Platformer, fighting, run-and-gun
Top-down	Layout, distances in every ground direction	Height, faces	Square	Twin-stick shooter, overhead racer, some strategy
Three-quarter	Layout plus the fronts of things and the tops	Backs of objects, exact heights	Square floor tile; walls and characters 1.5 to 2 tiles tall	RPG, action-adventure, farming
Isometric (2:1)	Three faces of everything, layout and height together	Whatever stands behind a tall object; the far two faces	Diamond, $2w$ by $w$, 32 by 16 or 64 by 32	Strategy, city builder, tactics RPG

Horizon line and eye level

The horizon line is where the ground plane would meet the sky at infinite distance, and it sits at the viewer's eye level: raise the camera and the horizon rises on the screen. In a side view the horizon is a fixed row, usually in the top third, and the background layers stack around it: distant hills touch it, near ground sits below it. Top-down and isometric views have no horizon on screen, because the camera never looks toward it. Three-quarter view implies a horizon above the top of the screen, which is why its skies are usually a flat color or absent.

Foreshortening

Foreshortening is the shrinking of a shape along the direction it points toward the camera: a road running away from you occupies less screen height than its real length. In orthographic views the shrink is a fixed ratio per axis. In three-quarter view every ground depth is squashed by the same factor; in 2:1 isometric every vertical is drawn at full scale while ground lines run at the 2:1 slope. That fixed ratio is what lets a tile drawn once be repeated everywhere.

Worked example

The same unit cube in each of the four views. T is the top face, F the front, L the left face, R the right face.

Side view. Only the front face, a square; a cube and a flat square are drawn identically.

F F F F F F
F F F F F F
F F F F F F
F F F F F F
F F F F F F
F F F F F F

Top-down. Only the top face, also a square, so a cube and a flat floor tile look the same until they are shaded.

T T T T T T
T T T T T T
T T T T T T
T T T T T T
T T T T T T
T T T T T T

Three-quarter. The top face is squashed to half height and sits on a full-height front face, so a one-tile cube is drawn one tile wide and 1.5 tiles tall. This is the "wall taller than floor" rule in one picture.

T T T T T T
T T T T T T
T T T T T T
F F F F F F
F F F F F F
F F F F F F
F F F F F F
F F F F F F
F F F F F F

Isometric, 2:1. The top is a diamond 10 wide and 5 tall; every edge steps two across for one down. Three faces, three values when shaded.

. . . . T T . . . .
. . T T T T T T . .
T T T T T T T T T T
L L T T T T T T R R
L L L L T T R R R R
L L L L L R R R R R
. . L L L R R R . .
. . . . L R . . . .

. transparent.

Count the steps on the top-left edge of the diamond: from row 2 to row 0 the fill starts at column 0, then 2, then 4. Two across, one up, every time. That regularity is the entire reason for 26.57 degrees.

In a game's art pipeline

Stage 1 writes the view down next to the resolution and the light direction, and it is the hardest rule to change later because every asset embodies it. Stage 2 draws each sprite for that view: a three-quarter character shows a face and a hint of the top of the head, an isometric crate shows three faces. Stage 4 builds tiles in the view's tile shape, square or diamond, and places the horizon for side-view backgrounds. Stage 5, adapting a purchased pack, begins by identifying the pack's view; a side-scroller pack and a top-down tileset cannot share a screen, and a "top-down" pack is almost always three-quarter, which decides how tall its walls are.

Common mistakes

• Mixing views on one screen. Symptom: a top-down floor with side-view furniture, so tables appear to lie on their backs.
• Walls one tile tall in three-quarter view. Symptom: the room looks like a floor plan; characters stand taller than the walls.
• Drawing isometric at true 30 degrees. Symptom: ragged edges that step 1, 2, 1, 2, and tiles that will not line up on a grid.
• Parallel lines that converge. Symptom: a tile drawn with a hint of perspective repeats into a floor that bulges.
• Horizon in the wrong place. Symptom: background layers that float above or sink below the ground the player stands on.
• Characters drawn from straight ahead in a three-quarter game. Symptom: heads too tall and feet too big; the character is standing in a different room from the tiles.

Cost

Side view and top-down are the cheapest to draw: one face per object. Three-quarter costs a partial second face (the top) and a taller canvas for anything with height. Isometric costs the most: three faces per object, four or eight facings for characters instead of two, and diamond tiles whose transparent corners waste half of every tile image. It starts to hurt at the character sheet: an eight-direction isometric walk at 6 frames is 48 drawings where a side-view walk is 6 and a flip.

Going further

• Isometric pixel art, for drawing on the 2:1 line and stacking tiles.
• Backgrounds and parallax, for the horizon and faked depth in side view.
• Character design for sprites, for how many facings each view needs.
• Tile grids for artists, for tile sizes in each view.