The Silhouette Is Most of the Drawing

You know what the four shades are for. Now the characters.

The instinct at this size is to start with a shape and then “add the detail”. That instinct is wrong, and there is a number that shows why.

The outline is not a border. It’s a third of the sprite.

Four real CC0 characters, each cropped to its own bounding box, measured by assets/build-examples.py:

Between 23% and 38% of every one of these characters is silhouette-edge pixels — pixels with transparency on at least one side. Lesson 01 established that on a character all of them are Ink.

So the silhouette isn’t the scaffolding you hang the drawing on. It is the drawing, and the interior is a small amount of clarification.

What that looks like

Same four characters, with every shade flattened to Ink. Nothing moved; only recoloured.

Be honest about what you’re seeing. The first two pass and the second two don’t.

The knight is unmistakably a standing figure — head, shoulders, a body, legs. Fluffy is unmistakably a round animal with feet. The ninja and the sensei are lumps. If you did not know what they were, you could not name them.

That is not a criticism of two working artists — those sprites read fine in their games, carried by interior detail, animation, and context. But it tells you where the line is:

The two that pass are 14×22 and 16×16. The two that fail are 15×11 and 14×13 — smaller, and closer to square, with no dominant axis for the eye to grab. If you must work that small, you are buying legibility back with animation and colour rather than with shape, and you should know you’re doing it.

Compare against the full-colour versions and watch how much the interior is being asked to rescue:

Two things every one of them does

They are solid. Across four characters there is exactly one enclosed gap — a single hole in the sensei. At this size a hole costs at least eight pixels (the gap plus its ring of Ink) and usually reads as a smudge rather than as a gap. Fluffy has none. The knight has none. Draw the space between an arm and a body only when you can afford three clear pixels for it.

They fill their box, but not completely. 61% to 87%. Below about 55% a sprite starts looking like a stick figure with gaps of nothing; at 100% it is a rectangle. Fluffy at 86.7% is deliberately near the top — it is a round animal, and roundness costs fill.

The shape doesn’t have to move to animate

A useful surprise, and a preview of a later lesson. Chloe Wolfe’s two Fluffy animations, measured frame to frame as a share of the two frames’ combined area:

The roll cycle has an identical outline in all four frames. The whole animation happens inside a fixed silhouette. That is only possible because the shape was doing the identifying work and the interior was free to carry the motion.

Draw one

The pad below gives you Ink only. No shading, no cheating — draw the shape and nothing else.

Draw a creature, a person, or a knight, 16×16. Then the honest test: look at it, look away for five seconds, look back. If you cannot immediately say what it is, go back to the shape — the interior can rescue it, but you will be spending pixels you don’t have.

Keep this drawing. The next lesson shades it.

Check yourself

Take it further

• Read next: SLYNYRD — Pixelblog 22: Top Down Character Sprites. Raymond Schlitter builds top-down characters from the shape outwards, at exactly the sizes you are working at.
• Do this once: open any Game Boy screenshot, and squint until it blurs. Everything still identifiable is being carried by silhouette.

Keep

• The Four-Shade Contract — the budgets, the outline law, and now the shape numbers.
• Glossary.

Next: Two Mids Do the Form — what to put inside the shape you just drew.

Stuck? Ask me. Send me a silhouette and I will measure its fill and holes rather than guess at whether it reads.