Reference · Project style guide
The Top-Down Contract
The three clauses every asset in the game must obey. Print this and pin it above the desk.
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 |
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
- The sun is on the top-left. It never moves. Not for a “more dramatic” prop, not for one hero asset.
- Spend leftover colours on a highlight to the left and a deepening to the right, within a surface — after the surface ordering is already correct.
- Squint test: sweep from the top-left corner to the bottom-right. Values should only ever get darker. If anything brightens along that diagonal, something is lit from the wrong side.
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.
- Light
#ffad5d - Mid
#e46d3a - Dark
#965340 - Ink
#141b1b
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.