Procedural 2D Sprites & Pixel Art
Generate 2D pixel art assets for ZX games: sprites, UI elements, tilesets, and sprite sheets.
Output Requirements
- Format: PNG (RGBA or indexed)
- Color: Indexed palettes (4-256 colors) or full RGBA
- Compatible with:
draw_sprite(), draw_sprite_region()
Quick Decision Guide
| Need |
Algorithm |
Reference |
| Reduce colors |
Median cut |
references/palette-algorithms.md |
| Smooth gradients |
Floyd-Steinberg |
references/dithering-patterns.md |
| Retro look |
Bayer ordered dither |
references/dithering-patterns.md |
| Scalable panels |
9-slice |
references/ui-sprites.md |
| Auto-connecting terrain |
Autotile (16/47/256) |
references/tileset-generation.md |
| Character animations |
Sprite sheets |
references/sprite-organization.md |
Common Sprite Sizes
| Type |
Size |
Notes |
| UI icon |
16x16, 32x32 |
Power of 2 |
| Character |
32x32, 64x64 |
4-8 directions, 3-4 frames |
| Tile |
16x16, 32x32 |
Must tile seamlessly |
| Health bar |
64x8, 128x12 |
Segmented or continuous |
Autotile Systems
| System |
Tiles |
Complexity |
Use Case |
| 2-corner |
16 |
Simple |
Basic terrain |
| 4-corner |
47 |
Medium |
Standard RPG |
| Blob |
256 |
Complex |
Smooth transitions |
Basic Palette Quantization
from PIL import Image
def quantize_image(path, num_colors=16):
"""Quick palette extraction."""
img = Image.open(path).convert('RGB')
return img.quantize(colors=num_colors, method=Image.Quantize.MEDIANCUT)
For detailed algorithms, see references/palette-algorithms.md.
Basic Dithering
def apply_bayer_dither(img, palette):
"""Ordered dithering for retro look."""
bayer = [[0,8,2,10], [12,4,14,6], [3,11,1,9], [15,7,13,5]]
# Apply threshold matrix before quantizing
# See references/dithering-patterns.md for full implementation
ZX Integration
# nether.toml
[[assets.textures]]
id = "ui-sprites"
path = "generated/textures/ui_elements.png"
filter = "nearest" # Critical for pixel art
// Drawing sprites
draw_sprite(sprites, x, y);
// Drawing from sprite sheet (e.g., button state 2)
draw_sprite_region(sprites, x, y, state * width, 0, width, height);
File Organization
Author sprite sheets as texture specs under .studio/specs/textures/ and generate with:
python .studio/generate.py --only textures
References
references/palette-algorithms.md - Median cut, k-means, quantizationreferences/dithering-patterns.md - Bayer, Floyd-Steinberg, error diffusionreferences/ui-sprites.md - 9-slice, health bars, buttonsreferences/tileset-generation.md - Autotiles, variations, animated tilesreferences/sprite-organization.md - Sprite sheets, palette swaps
Related Skills
procedural-textures - Noise algorithms for sprite basessemantic-asset-language - Style tokens for sprite generation
1---2name: procedural-2d-sprites-pixel-art3description: Use this skill to GENERATE 2D assets for ZX games. **Triggers:** "pixel art", "sprite sheet", "tileset", "autotile", "9-slice", "UI sprite", "health bar", "dithering", "indexed palette" **Before generating:** Check `.studio/visual-style.md` for project style specs. **Load references when:** - Project structure, multiple sprites → `generator-patterns` skill - Palette quantization → `references/palette-algorithms.md` - Dithering patterns → `references/dithering-patterns.md` - UI elements (9-slice, buttons) → `references/ui-sprites.md` - Tilesets/autotiles → `references/tileset-generation.md` - Sprite sheets/organization → `references/sprite-organization.md` For 3D TEXTURES: use `procedural-textures` skill.4---5
6# Procedural 2D Sprites & Pixel Art
7
8Generate 2D pixel art assets for ZX games: sprites, UI elements, tilesets, and sprite sheets.
9
10## Output Requirements
11
12- Format: PNG (RGBA or indexed)
13- Color: Indexed palettes (4-256 colors) or full RGBA
14- Compatible with: `draw_sprite()`, `draw_sprite_region()`
15
16## Quick Decision Guide
17
18| Need | Algorithm | Reference |
19|------|-----------|-----------|
20| Reduce colors | Median cut | `references/palette-algorithms.md` |
21| Smooth gradients | Floyd-Steinberg | `references/dithering-patterns.md` |
22| Retro look | Bayer ordered dither | `references/dithering-patterns.md` |
23| Scalable panels | 9-slice | `references/ui-sprites.md` |
24| Auto-connecting terrain | Autotile (16/47/256) | `references/tileset-generation.md` |
25| Character animations | Sprite sheets | `references/sprite-organization.md` |
26
27## Common Sprite Sizes
28
29| Type | Size | Notes |
30|------|------|-------|
31| UI icon | 16x16, 32x32 | Power of 2 |
32| Character | 32x32, 64x64 | 4-8 directions, 3-4 frames |
33| Tile | 16x16, 32x32 | Must tile seamlessly |
34| Health bar | 64x8, 128x12 | Segmented or continuous |
35
36## Autotile Systems
37
38| System | Tiles | Complexity | Use Case |
39|--------|-------|------------|----------|
40| 2-corner | 16 | Simple | Basic terrain |
41| 4-corner | 47 | Medium | Standard RPG |
42| Blob | 256 | Complex | Smooth transitions |
43
44## Basic Palette Quantization
45
46```python
47from PIL import Image
48
49def quantize_image(path, num_colors=16):
50 """Quick palette extraction."""
51 img = Image.open(path).convert('RGB')
52 return img.quantize(colors=num_colors, method=Image.Quantize.MEDIANCUT)
53```
54
55For detailed algorithms, see `references/palette-algorithms.md`.
56
57## Basic Dithering
58
59```python
60def apply_bayer_dither(img, palette):
61 """Ordered dithering for retro look."""
62 bayer = [[0,8,2,10], [12,4,14,6], [3,11,1,9], [15,7,13,5]]
63 # Apply threshold matrix before quantizing
64 # See references/dithering-patterns.md for full implementation
65```
66
67## ZX Integration
68
69```toml
70# nether.toml
71[[assets.textures]]
72id = "ui-sprites"
73path = "generated/textures/ui_elements.png"
74filter = "nearest" # Critical for pixel art
75```
76
77```rust
78// Drawing sprites
79draw_sprite(sprites, x, y);
80
81// Drawing from sprite sheet (e.g., button state 2)
82draw_sprite_region(sprites, x, y, state * width, 0, width, height);
83```
84
85## File Organization
86
87Author sprite sheets as texture specs under `.studio/specs/textures/` and generate with:
88
89```bash
90python .studio/generate.py --only textures
91```
92
93## References
94
95- `references/palette-algorithms.md` - Median cut, k-means, quantization
96- `references/dithering-patterns.md` - Bayer, Floyd-Steinberg, error diffusion
97- `references/ui-sprites.md` - 9-slice, health bars, buttons
98- `references/tileset-generation.md` - Autotiles, variations, animated tiles
99- `references/sprite-organization.md` - Sprite sheets, palette swaps
100
101## Related Skills
102
103- `procedural-textures` - Noise algorithms for sprite bases
104- `semantic-asset-language` - Style tokens for sprite generation
majiayu000