Light and form

Why you need this

A pixel sprite has no geometry. The only thing that tells the player a round shield is round is where the light and dark pixels sit. Every page about shading in this cluster assumes you know the names of those regions and which is darker than which. This page is that vocabulary, plus the one anti-pattern nearly every beginner draws first.

The idea

One light source

Decide where the light is before placing a single shaded pixel. In this cluster it comes from the upper left, in front of the object: highlights face up and left, shadows fall down and right. One light is enough for almost every sprite; a second light is a deliberate effect, added later.

The five zones on a sphere

Light hits a sphere and the surface turns away from it gradually, so the value changes in bands.

Zone	Where	What it is
Highlight	Small spot facing the light, slightly toward the viewer	The brightest value, where the surface reflects the light source directly
Light side (midtone)	The broad area between the highlight and the terminator	The object's color as lit, the value that reads as "the color of the thing"
Terminator	The curve where the surface turns parallel to the light	The boundary between lit and unlit, where the value drops fastest
Core shadow	The band just past the terminator	The darkest part of the object itself, receiving no direct light
Reflected light	The rim farthest from the light, past the core shadow	Faint light bounced back from the floor or nearby surfaces; lighter than the core shadow, darker than the midtone

Then, on the ground, the cast shadow: the region the object blocks light from reaching. It falls away from the light, so down-right, and is usually the darkest value in the whole drawing, darkest right under the object.

The same on a cube

A cube has flat faces, so each face is one value. With the light upper-left and in front, three faces are visible: the top faces the light most directly and is brightest; the left face is partly lit, mid; the right face turns away and is darkest. Three faces, three values, and the eye reads a box. Swap any two values and it reads as a different, impossible box.

Local color and lit color

Local color is the color of the material with no lighting: the red of the apple. Lit color is what you draw: the local color pushed lighter and warmer on the light side, darker and usually cooler in shadow. A ramp is the local color's lit versions written dark to light, for instance #2b1d3a #6b3e5e #c96a5a #f2b784 where #c96a5a is the midtone. Value order carries the form. A shadow that shifts toward violet still reads as shadow as long as it is darker than the midtone; a shadow with the right hue but the same value as the midtone reads as a stripe of paint. Hue is flavor; value is structure. Color basics has the grayscale test that confirms an order.

Ambient light: shadows are never black

Light bounces. The sky, the floor, and the walls throw some light into every shadow, called ambient light, so the unlit side of an object is dark but never #000000. Pure black in a shadow reads as a hole cut in the sprite. The darkest ramp step with a cool shift is as dark as a form shadow goes; pure black is reserved, if anywhere, for the deepest part of a cast shadow or an outline.

Form shadow versus cast shadow

A form shadow is on the object, caused by its own surface turning away from the light: the core shadow and everything past the terminator. A cast shadow is on something else, caused by the object blocking the light. Form shadows have soft edges that follow the shape; cast shadows have edges shaped by the blocker, sharpest where they touch it. A sprite with a form shadow but no cast shadow floats; one with a cast shadow but no form shadow looks like a flat cutout with a shadow under it.

Worked example

A 9 by 9 sphere in four values

Light from the upper left. 4 is the ramp's lightest step, 1 the darkest.

. . . 3 3 3 . . .
. 3 3 3 3 3 3 2 .
. 3 4 4 3 3 3 2 .
3 3 4 3 3 3 2 2 1
3 3 3 3 3 2 2 1 1
3 3 3 3 2 2 1 1 2
. 3 3 2 2 1 1 2 .
. 3 2 2 1 1 2 2 .
. . . 1 1 2 . . .

. transparent, 1 core shadow, 2 shadow midtone and reflected light, 3 light-side midtone, 4 highlight.

Read it zone by zone. The highlight is the three 4 pixels at the upper left, off the rim, not on it. The 3 region is the light side, more than half the sphere because the light is in front. The diagonal where 3 meets 2 is the terminator, running from lower-left to upper-right, perpendicular to the light. The band of 1 past it is the core shadow. The 2 pixels along the bottom-right rim, outside the core shadow, are reflected light; they are what stop the shadow side from looking like a flat cut. If the sphere rested on a floor, its cast shadow would be a flat ellipse of 1 starting under the sphere and stretching to the right.

With the ramp above, 1 is #2b1d3a, 2 is #6b3e5e, 3 is #c96a5a, 4 is #f2b784. In gray those are about 36, 79, 133, 195: strictly increasing, which is the whole requirement.

The same sphere, pillow shaded

. . . 1 1 1 . . .
. 1 1 2 2 2 1 1 .
. 1 2 3 3 3 2 1 .
1 2 3 3 4 3 3 2 1
1 2 3 4 4 4 3 2 1
1 2 3 3 4 3 3 2 1
. 1 2 3 3 3 2 1 .
. 1 1 2 2 2 1 1 .
. . . 1 1 1 . . .

Same legend.

This is pillow shading: a dark ring at the edge, brighter toward the middle, every band the same distance from the outline. It uses the same four values and shows no form, because there is no light direction; the shape is a soft cushion whichever way the game's light points. It happens when you shade by following the outline inward instead of asking where the light is. The test: look at the drawing and say which side the light is on. If you cannot, it is pillow shaded.

A cube in three values

Isometric-style cube on a 10 by 8 grid, light upper-left-front.

. . . . 4 4 . . . .
. . 4 4 4 4 4 4 . .
4 4 4 4 4 4 4 4 4 4
3 3 4 4 4 4 4 4 2 2
3 3 3 3 4 4 2 2 2 2
3 3 3 3 3 2 2 2 2 2
. . 3 3 3 2 2 2 . .
. . . . 3 2 . . . .

. transparent, 4 top face (brightest), 3 left face (mid), 2 right face (darkest).

Three flat fills, no gradients, and the box is unmistakable. Add a 1 cast shadow spilling down-right from the bottom edge and it sits on a floor. Keep the value order and you can swap the hues freely: a warm 4 top, a neutral 3, a cool 2 is the usual choice.

In a game's art pipeline

Stage 1 writes the light direction down once for the whole game, because a chest lit from the upper left next to a barrel lit from the upper right looks like two games. Stage 2, drawing the still, applies these zones to every sprite and tile; Shading and lighting is the pixel-level how-to, and Dithering covers what to do when four values are not enough for a smooth terminator. Stage 4 uses the same zones at the scale of a whole scene: buildings lit on their upper-left faces, the far background lower in contrast. Stage 5, when adapting a purchased pack, starts by checking which direction the pack's light comes from and flipping or redrawing anything that disagrees.

Common mistakes

• Pillow shading. Symptom: every object looks like a soft bubble, and rotating the "light" changes nothing.
• Highlight on the outline. Symptom: a bright rim on the upper-left edge where the surface is actually turning away from the viewer; the highlight belongs a pixel or two inside.
• Pure black shadows. Symptom: holes in the sprite, especially on dark backgrounds where the shadow side merges into the void.
• Skipping reflected light. Symptom: the shadow side reads as a flat cut; the sphere looks like a half-moon.
• Cube faces in the wrong order. Symptom: the box reads as lit from the right, or as concave, or as two boxes fighting.
• A different light per sprite. Symptom: characters that look pasted into the scene, worst when two stand side by side.

Cost

Shading one 16-pixel sprite with a four-step ramp and a correct light takes an artist a few minutes once the zones are second nature; pillow shading takes about the same time, which is why it is not a shortcut, just a habit. Adding cast shadows costs a few pixels per sprite and often a separate transparent layer so the shadow can fall on any floor. The cost that hurts is inconsistency: a game that never fixed its light direction pays for it with a full pass over every sprite when the mismatch is finally noticed, and that pass is proportional to the whole sheet, not to the one sprite that looked wrong.

Going further

• Shading and lighting, for placing these zones pixel by pixel.
• Dithering, for smooth terminators with few colors.
• Palettes and ramps, for choosing the four values.
• Color basics, for the hue shifts inside a ramp.