pixel-art-sprites

Files (6)

• README.md
• SKILL.md
• evals.json
• animation-techniques.md · references/
• palette-recipes.md · references/
• tileset-patterns.md · references/

SKILL.md (first lines)

## Key principles

1. **Every pixel is intentional** - At 16x16 or 32x32 resolution, there is no room for ambiguity. Each pixel must serve the silhouette, shading, or detail. If removing a pixel does not hurt readability, it should not be there. Start with the silhouette (solid fill), then add internal detail only where it improves recognition at 1x zoom.

2. **Constrain your palette ruthlessly** - Limiting colors to 8-16 is not a nostalgic affectation - it enforces visual cohesion across all sprites in a project. Pick a palette before drawing the first sprite. Every color in the palette must have a clear role: base, shadow, highlight, outline, and at most 2-3 accent hues. Adding a color mid-project breaks consistency.

3. **Animate volume, not lines** - Beginners animate by shifting outlines. Good sprite animation preserves the volume (total pixel mass) of the character across frames. A walk cycle should not make the character appear to grow and shrink. Check by toggling between frames rapidly - the silhouette should feel stable.

4. **Tiles must be seamless at every edge** - A tileset that looks good in isolation but produces visible seams when repeated has failed its only job. Design tiles from the edges inward: lock the border pixels first, then fill the interior. Test with a 3x3 grid of the same tile before considering it done.

5. **Respect the grid** - Pixel art lives on a strict grid. Rotation by non-90-degree angles, non-integer scaling, and sub-pixel positioning in engines all destroy pixel crispness. Export at 1x and scale with nearest-neighbor interpolation only. Configure the game engine's texture filter to "point/nearest" not "bilinear".

---

## Core concepts

### Sprite sizes and common canvases

| Size | Use case | Notes |
|---|---|---|
| 8x8 | Small items, tiny icons, minimal tiles | NES-era constraint |
| 16x16 | Standard characters, items, basic tiles | Most common indie size |
| 32x32 | Detailed characters, large tiles | Good balance of detail and constraint |
| 48x48 / 64x64 | Boss sprites, detailed portraits | Approaches illustration territory |

A character sprite sheet typically uses one fixed canvas per frame. All frames in an animation must share the same canvas size to prevent jitter during playback.

### Anatomy of a sprite sheet

A sprite sheet is a single image containing all animation frames laid out in a grid. Each row is usually one animation state (idle, walk, attack). Each column is one frame in that animation.

```
[idle-0][idle-1][idle-2][idle-3]
[walk-0][walk-1][walk-2][walk-3][walk-4][walk-5]
[attack-0][attack-1][attack-2][attack-3]
```

The game engine slices the sheet by cell size (e.g., 32x32) and plays frames in sequence. Metadata (frame count per row, frame duration) is defined in the engine, not the image.

### Tileset structure

Tilesets use a fixed grid (usually 16x16 or 32x32 per tile). Standard tileset categories:

- **Ground** - grass, dirt, stone, water (need seamless tiling)
- **Edges/transitions** - where two terrain types meet (requires 47 auto-tile variants for full coverage, or 16 for simplified)
- **Decoration** - flowers, rocks, signs (placed on top of ground tiles)
- **Walls/obstacles** - collision-relevant tiles

### Color ramp anatomy

A color ramp is a sequence of 3-5 colors from shadow to highlight for a single hue:

```
[dark shadow] -> [shadow] -> [base] -> [highlight] -> [bright highlight]
```

Each step shifts not just lightness but also hue. Shadows shift toward cool (blue/purple). Highlights shift toward warm (yellow/white). This "hue shifting" creates vibrant, natural-looking shading that flat lightness scaling cannot achieve.

---

## Common tasks

### Create a character sprite with proper shading

Start with silhouette, then layer shading using a 3-4 step color ramp with hue shifting.

**Workflow:**
1. Draw the silhouette as a solid color block on transparent background
2. Verify the silhouette is readable at 1x zoom - if you cannot tell what it is, redesign
3. Pick a base color, then create the ramp: shadow (darker + hue shift cool), base, highlight (lighter + hue shift warm)
4. Apply light source from top-left (convention in 2D games) - upper-left edges get highlight, lower-right edges get shadow
5. Add the darkest outline color on exterior edges only; interior lines use the shadow color, not black

> Never use pure black (#000000) for outlines. Use a very dark, slightly saturated color (e.g., dark navy or dark brown) that complements the palette. Pure black creates a harsh, flat look.

### Build a walk cycle animation

A standard walk cycle uses 4-6 frames. The key poses are: contact, passing, and their mirrors.

**4-frame walk cycle:**
1. **Frame 1 (Contact)** - Front leg extended forward, back leg extended back, body at lowest point
2. **Frame 2 (Passing)** - Legs cross under body, body at highest point (1-pixel vertical bob)
3. **Frame 3 (Contact mirrored)** - Opposite leg forward
4. **Frame 4 (Passing mirrored)** - Mirror of frame 2

**Rules:**
- Maintain consistent volume across all frames - the character should not grow or shrink
- Add 1-pixel vertical bob on passing frames (body rises slightly when weight is on one leg)
- Arms swing opposite to legs
- Frame timing: 100-150ms per frame for a natural pace

### Design a seamless tileset

**Edge-first workflow:**
1. Define the tile size (16x16 is standard)
2. Draw the left and top edges first
3. Copy left edge to right edge, top edge to bottom edge (guarantees seamless)
4. Fill the interior with detail, avoiding patterns that create obvious repetition
5. Test by placing 5x5 copies of the tile side-by-side
6. Add 2-3 variations of the same tile to break repetition in the map

**Terrain transitions (auto-tiling):**
- Simplified: 16 tiles per transition (4-bit bitmask for cardinal neighbors)
- Full: 47 tiles per transition (8-bit bitmask for cardinal + diagonal neighbors)
- Draw the inner corners, outer corners, and straight edges; the engine handles placement via bitmask lookup

### Build and manage a color palette

**Step 1: Choose constraints**
- Total colors: 8 (minimal), 16 (standard), 32 (detailed)
- Decide if you are emulating a hardware palette (NES: 54 colors, Game Boy: 4 shades, PICO-8: 16 fixed)

**Step 2: Build ramps**
- For each major hue in your game (skin, foliage, metal, sky), create a 3-5 step ramp
- Apply hue shifting: shadows lean toward blue/purple, highlights lean toward yellow/orange
- Include one dedicated outline color (near-black, slightly warm or cool depending on mood)

**Step 3: Test across all sprites**
- Every sprite in the game must use only palette colors

From mkurman/zorai, MIT.

More from mkurman/zorai