Lesson 01 · Top-Down Pixel Art

The Top-Down Contract

Before you draw a single prop for the game, decide where the camera is — and write it down.

You are going to draw several hundred assets for this game, alone, over months. What will make them look like one world is not talent and not detail. It is that every one of them was drawn from the same camera, under the same sun. That agreement is the contract, and it has three clauses.

Two props, one camera

Here are a crate and a pot from the same artists' asset pack. Different shapes, different silhouettes — and the brackets show they were built to identical proportions.

This is what a contract buys you. The two sprites can be dropped into the same scene by different people, months apart, and they will agree.

Clause 1 — Depth compresses. Height doesn't.

You are looking down at the world at an angle, so you see both the top of a thing and its front. Three world directions map to the screen, and only one of them shrinks:

How much is a choice, not a law. You can measure it off real art: the crate above is 14 px wide, and a crate is about as deep as it is wide, so its 14 px of depth were drawn as a 9 px top face. That is a compression of 0.64 — near enough two-thirds. The pot lands on exactly the same number.

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

Do that arithmetic before you draw. It takes four seconds and it is the entire difference between an art set that holds together and one that drifts.

Here is the same crate with only that one number changed:

Different pack, different artist, same idea — look how far the ratio swings once the objects stop being cube-shaped:

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

At 16 × 16 with four colours, you cannot render light as a gradient. You have to render it as an order. Look again at the crate's palette, sorted light to dark:

• #ffad5d
  top face
• #e46d3a
  front face
• #965340
  base shadow
• #141b1b
  outline

The artist assigned those in order. The lid — pointing at the sky — takes the lightest value. The front face, turned away, takes the next one down. The base shadow takes the next. Nothing is lit by feel; each surface simply steps down as it turns away from the sky.

Once the ordering is right, you spend whatever colours are left on left–right bias. The pot does exactly this: two pixels of the lightest value on the lower-left of its body, and nothing on the right.

Pick a side once. Top-left is conventional and there is no reason to fight it. The check on any finished sprite: squint, sweep from the top-left corner to the bottom-right, and watch the values only ever get darker. If anything brightens along that diagonal, something is lit from the wrong side.

Clause 3 — Contact shadows, never cast shadows

Every object sitting on the ground gets a short dark smudge at its base. The crate spends its bottom two rows on one — its darkest non-outline value, hugging the base and nothing more.

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

This is a tilemap constraint, not a preference. Long shadows are gorgeous and you cannot have them, because you do not know at draw time what will be placed to the right of the object. Keep the shadow on its own layer so you can move or drop it later.

Drill 1 — Which clause broke?

Every sprite below is real public-domain art, or that same art with exactly one clause mechanically broken. Name the clause. Answer from memory rather than scrolling back up — the effort of retrieval is what makes this stick, and getting one wrong now is worth more than getting it right by looking.

Drill 2 — Copy the crate

Now make one. Study-copying a sprite you admire is the oldest exercise in this craft, and it is the fastest: you find out what you actually understand the moment your version stops looking like theirs.

Rebuild the crate from memory. Its palette is loaded and locked. Hold peek when you are stuck, but draw from the peek, not during it.

Take it into Aseprite

The browser canvas was a warm-up. The win is one real asset in your project folder — and it should be yours, not a copy.

1. Load the study palette. Download study-palette.gpl — the crate's own four colours — then in Aseprite open the palette menu (the small bars above the swatches) → Load Palette File.
2. Turn on Pixel-Perfect. Select the pencil, then tick Pixel-perfect in the tool bar. It suppresses the doubled corner pixels that cause jaggies.
3. New sprite, 16 × 16, RGB. File → New.
4. Three layers, bottom to top: shadow, form, outline. Draw the contact shadow on its own layer from the very first asset — retrofitting that across fifty sprites later is miserable.
5. Draw a dynamite crate, not the crate above. Same camera, same value ordering, your object: roughly 12 wide, 12 deep, 8 tall, so an 8 px lid and an 8 px front face. Four colours, no more.
6. Check it at 100%. View → Zoom → 100%, or press 1.
7. Save it into the game project as props/crate.aseprite and export crate.png. This is asset number one.

What this unlocked

• You can derive any prop's proportions from its world dimensions instead of guessing.
• You can assign values by asking which way a surface points, rather than by feel.
• You have a written spec — the contract — that a sprite drawn in month six can be checked against.
• You have the vocabulary to say why a sprite is wrong, which is what makes critique from other artists usable.

Next is almost certainly palette construction for bleached dread — your whole mood rests on it, and Clause 2 just showed you that value ordering is the load-bearing part — or silhouette and readability at 16×16, the constraint that decides whether a gallows reads as a gallows or as three sticks. Say which you want.