Learning

Top-Down Pixel Art · Reference

The Top-Down Contract

The three clauses every asset in the game must obey. Print this and pin it above the desk.

The whole thing in one line

Depth compresses to two-thirds and height doesn't. Value steps down as a surface turns away from the sky. Everything grounded gets a short contact shadow.

Clause 1 — Depth compresses to ⅔. Height doesn’t.

The camera is an oblique 3/4 top-down projection. Three world axes map to the screen:

World axis Screen result Scale
Width (left–right) Screen X 1 : 1 — never compressed
Height (up) Screen Y, upward 1 : 1 — never compressed
Depth (away from camera) Screen Y, downward × ⅔ — always

Before drawing a single pixel:

top face height = depth × ⅔
front face height = object height
sprite height = (depth × ⅔) + height

Where ⅔ came from

Measured off shipped, public-domain art rather than invented. Both of these are 14 px wide, and a crate and a pot are both about as deep as they are wide:

Sprite Width Top face Front face Compression
Crate — Ninja Adventure (CC0) 14 px 9 px 4 px 0.64
Pot — Ninja Adventure (CC0) 14 px 9 px 4 px 0.64

Published top-down art mostly sits between ½ and ⅔. The specific value stops mattering the moment it is written down; drift is what costs you.

Planning table for this game

Object W × D × H Top face Front face Sprite
Dynamite crate 12 × 12 × 8 8 px 8 px 12 × 16
Coffin, lying 10 × 16 × 4 11 px 4 px 10 × 15
Water trough 14 × 6 × 5 4 px 5 px 14 × 9
Grave slab 8 × 3 × 9 2 px 9 px 8 × 11
Fence post 2 × 2 × 10 1 px 10 px 2 × 11
Why this and not a fixed ratio

A memorised ratio like “9 pixels of top, 4 of front” only works for objects shaped like the one you memorised it on. Flat things show almost all top face; tall thin things show almost none. The ratio changes with every object; the compression never does. Learn the compression.

Clause 2 — Value steps down as a surface turns away from the sky

At 16 × 16 with four or five colours, light is not a gradient. It is an ordering. Sort the palette by brightness and assign it by surface direction:

Surface Points at Value
Top face The sky Lightest
Front face The camera, sideways One step down
Occluded / underside Nothing Two steps down
Contact shadow — Darkest non-outline value
Outline — Reserved. Never used as a fill.

Do not ask “where is my light?” per pixel. Ask which way does this surface point, and take the value that goes with it. That is repeatable on your two-hundredth prop; hand-feeling the light is not.

Then: left–right bias

Clause 3 — Contact shadow, not cast shadow

Do Don’t
A short dark smudge hugging the base, one or two rows deep. A long directional shadow stretching across the tile.
One value — the darkest non-outline colour. A soft gradient. It will not survive being tiled.
Contained inside the object’s own tile footprint. Running off the tile edge into whatever gets placed next door.
On its own layer, always. Baked into the sprite, so it can never be moved or dropped.

Shadows should be “subtle and not cast out long in any particular direction, as to minimize conflicts with overlapping adjacent tiles.” Raymond Schlitter, SLYNYRD — Pixelblog 21: Top Down Objects

Project constants

Decision Value
Base tile 16 × 16 px
Projection Oblique 3/4 top-down
Depth compression × ⅔
Light direction Top-left, fixed
Value assignment By surface direction, not by feel
Contact shadow Mandatory on grounded objects; short; own layer
Prop footprint Snap to 16 px increments
Editor Aseprite
Engine Godot
Palette Not yet chosen
Outline style Not yet chosen

The study palette

Lessons borrow the four-colour palette of the Ninja Adventure crate, so that the value ordering can be practised before the game’s own colours exist. It is not the game’s palette.

Four colours is not a beginner constraint — it is the whole discipline. Every value you add is one more thing that has to stay consistent across several hundred sprites.