Gamedev 2d Art Pixel Art Fundamentals

Pixel Art Fundamentals

Quick refs: dithering-patterns.md, antialiasing-rules.md

Pixel art = an aesthetic where individual pixels are intentional and visible. Different rules from "paint at any resolution then downscale" PSD work.

Resolution choices

Native res    Use case                                    Examples
160 × 144     GameBoy / handheld retro                    Link's Awakening (DX)
240 × 160     GBA-era handheld                            Pokemon GBA, Castlevania
256 × 224     SNES original                               Chrono Trigger
320 × 180     Modern lo-fi 16:9 (1080p × 6)               Celeste
320 × 240     Modern lo-fi 4:3 (480p × 2)                 Stardew Valley
384 × 216     1.2x SNES-ish                               Hyper Light Drifter (rendered higher)
480 × 270     1080p × 4 (clean integer scale)             Many indies

Native res = the resolution you draw at. Display scales it integer (2x, 3x, 4x...) for clean pixels. Non-integer scaling = blurry.

Choose smaller = retro, smaller team art budget. Choose larger = more expressive characters, larger animations, but more work per frame.

Pixel-perfect display

Always integer scale:

• 320×180 native × 6 = 1920×1080 (no blur).
• 320×180 × 5 = 1600×900 (works).
• 320×180 × 4.5 = blurry mess. Avoid.

Engine settings:

• Unity URP 2D: Pixel Perfect Camera component (com.unity.2d.pixel-perfect).
• Godot: Project Settings → Display → Stretch Mode = canvas_items or viewport.
• Custom: nearest-neighbor filter on final present pass; pin camera to integer world coords.

Anti-aliasing in pixel art

Pixel art AA is selective and manual. Three approaches:

1. No AA (1-bit / chunky)

Just black + 1 fill color. Style: GameBoy DMG, Minit. Great for very small sprites (≤16×16). Hard at larger sizes.

2. Selective AA (most common modern)

Place 1-2 intermediate-color pixels at:

• Diagonal jaggies (where 1-pixel staircase looks too sharp).
• Curve transitions.

NOT at:

• Vertical/horizontal edges (these look fine sharp).
• High-contrast silhouette edges (lose readability).

See quick-ref/antialiasing-rules.md for the canonical "where to AA" decision tree.

3. Ramp-based AA

Paint sprite using a defined color ramp (5-7 colors from dark to light). AA = pixels of intermediate ramp values along edges. Looks cohesive when palette is restricted.

Dithering

Dithering = placing pixels in a pattern to simulate intermediate colors between palette entries.

Bayer / Ordered (4×4 matrix)

Geometric, regular, retro look. Looks digital/clinical. Used in NES / early Mac. Works well in backgrounds.

Floyd-Steinberg / Error diffusion

Algorithmic, scattered, looks like noise. Used in image conversion tools. Avoid for hand-painted pixel art (looks generated).

Hand-placed checkerboard

Place dither pattern manually where light hits a surface gradient. Most expressive — used in Hyper Light Drifter, Owlboy. Time-consuming.

See quick-ref/dithering-patterns.md for the catalog of dither shapes (50%, 25%, 75%, gradient, edge).

When to dither

• Smooth gradients in restricted palettes (sky, water, lighting).
• Implied texture (rocky surfaces, foam, smoke).

When NOT to dither

• Small sprites < 32×32 (looks chaotic).
• High-contrast edges (creates jagged appearance).
• Frequently animated objects (dither shimmers between frames).

Outline philosophy

Three styles:

Full outline (NES / SNES era)

Every sprite edge gets a 1-pixel dark outline. Very readable, classic look. Use case: low-res sprites where readability beats subtlety.

Selective outline ("selout")

Outline only where sprite would otherwise blend with background. Modern indie standard. Style of Celeste, Hyper Light Drifter.

Inline / no outline

Outline replaced by darker shade of fill color (selout taken further). Or no outline at all. Painterly pixel art (Owlboy, Sword and Sworcery).

Gradient outline

Outline color shifts along the sprite (warm side / cool side). High visual quality but expensive to author.

Pixel hinting / sub-pixel rules

Pixel art breaks if you allow sub-pixel positioning during gameplay:

• Camera moves at fractional pixel → sprites jitter. Solution: snap camera position to integer pixel every frame.
• Sprite rotated 17° → arbitrary pixel positions, not "pixel art". Solution: pre-render rotation frames, or use 8-frame rotation atlas (45° increments).
• Animation eases between frames with floats → sub-pixel sprite position. Solution: floor() animation positions.

Modern engines have "pixel-perfect cameras" that handle this; on custom renderers, do it explicitly.

Common mistakes

Pillow shading

Light pixels in center, dark pixels around edges, regardless of light direction. Looks "puffy", uniform, no form. Fix: pick a light source direction (e.g., upper-left) and shade based on surface normal / prominence.

Banding

Long uniform-width stripes of single color along a curve. Breaks form. Fix: vary the stripe width along the curve or break it with intermediate shade pixels.

Jaggies (excessive AA missing)

Sharp "staircase" edges that should curve smoothly. Fix: selective AA on diagonals.

PSD-soft rendering

Pixel art that looks like a photo downsampled — full smooth gradients, soft outlines, anti-aliasing on every edge. Defeats the medium. Fix: restrict palette, use ramps, hand-place every edge pixel.

Broken anti-aliasing

AA pixels not in palette ramp (random gray pixels in a green ramp). Fix: AA only with colors that ARE in the ramp.

Inconsistent pixel grid

Some sprites at 1x, some scaled non-integer. Fix: every sprite at the same PPU, integer-only scaling.

Workflow recommendations

1. Sketch silhouette at target resolution. Black-only, judge readability.
2. Block flat colors from your palette ramp.
3. Add primary shading along light direction (1-2 darker shades).
4. Add highlights sparingly along light edge.
5. Selective outline where needed for separation.
6. AA pass on diagonals.
7. Compare at scale (zoomed in for detail, at 1x for actual feel).

See also

• palettes/SKILL.md — color ramps + restricted palettes
• animation-frames/SKILL.md — keep pixel discipline through frames
• character-design/SKILL.md
• tile-design/SKILL.md