Initial commit
This commit is contained in:
Zhongwei Li
376
skills/pixel-art-professional/SKILL.md
Normal file
376
skills/pixel-art-professional/SKILL.md
Normal file
@@ -0,0 +1,376 @@
|
||||
---
|
||||
name: Pixel Art Professional
|
||||
description: Apply advanced pixel art techniques including dithering, palette optimization, shading, antialiasing, and color theory. Use when the user mentions "dithering", "dither", "Bayer", "Floyd-Steinberg", "palette", "colors", "reduce colors", "optimize palette", "color limit", "shading", "shadows", "highlights", "lighting", "light source", "antialiasing", "smooth", "smoothing", "anti-alias", "AA", "color ramp", "gradient", "hue shifting", "saturation", "value", "contrast", or wants to "refine", "polish", "improve", "enhance", "make better", "add depth", "add dimension" to existing pixel art. Trigger on retro palette names (NES, Game Boy, C64, PICO-8), texture terms ("metal", "fabric", "stone", "wood"), and visual quality terms ("professional", "clean", "smooth", "vibrant").
|
||||
allowed-tools: Read, Bash, mcp__aseprite__get_sprite_info, mcp__aseprite__draw_pixels, mcp__aseprite__set_palette, mcp__aseprite__get_palette, mcp__aseprite__quantize_palette, mcp__aseprite__apply_auto_shading, mcp__aseprite__draw_with_dither, mcp__aseprite__add_layer, mcp__aseprite__flatten_layers
|
||||
---
|
||||
|
||||
# Pixel Art Professional
|
||||
|
||||
## Overview
|
||||
|
||||
This Skill provides advanced pixel art techniques for refining and polishing sprites. It handles dithering patterns, palette optimization, color theory, shading techniques, and antialiasing for professional-quality pixel art.
|
||||
|
||||
## When to Use
|
||||
|
||||
Use this Skill when the user:
|
||||
- Wants to apply "dithering" or mentions dither patterns
|
||||
- Asks about "palette optimization" or "color reduction"
|
||||
- Mentions "shading", "highlights", "shadows", or "lighting"
|
||||
- Requests "antialiasing", "smoothing", or "edge refinement"
|
||||
- Talks about "color ramps", "gradients", or "color theory"
|
||||
- Wants to "polish" or "refine" existing pixel art
|
||||
- Mentions specific techniques like "Bayer dithering" or "Floyd-Steinberg"
|
||||
|
||||
**Trigger Keywords:** dithering, palette, shading, antialiasing, smooth, gradient, color ramp, polish, refine, color theory, quantize
|
||||
|
||||
## Instructions
|
||||
|
||||
### 1. Understanding Dithering
|
||||
|
||||
**Dithering** creates the illusion of additional colors by mixing pixels of available colors in patterns.
|
||||
|
||||
**When to Use Dithering:**
|
||||
- Reducing color count (e.g., 256 colors → 16 colors)
|
||||
- Creating smooth gradients with limited palettes
|
||||
- Simulating textures (fabric, metal, stone)
|
||||
- Retro aesthetic (classic games used dithering extensively)
|
||||
|
||||
**Dithering Algorithms:**
|
||||
|
||||
**Ordered Dithering (Bayer Matrix):**
|
||||
- Uses fixed pattern matrix (2x2, 4x4, 8x8)
|
||||
- Predictable, regular pattern
|
||||
- Best for: textures, backgrounds, retro look
|
||||
- Fast and consistent
|
||||
|
||||
**Error Diffusion (Floyd-Steinberg):**
|
||||
- Distributes color error to neighboring pixels
|
||||
- More organic, less regular pattern
|
||||
- Best for: gradients, natural images, smooth transitions
|
||||
- Slower but higher quality
|
||||
|
||||
**Common Dithering Patterns:**
|
||||
- **Checkerboard**: Simple 2-color alternating pattern
|
||||
- **Bayer 2x2**: Basic ordered dithering
|
||||
- **Bayer 4x4**: More subtle ordered dithering
|
||||
- **Bayer 8x8**: Very subtle, near-gradient appearance
|
||||
- **Floyd-Steinberg**: Error diffusion for smooth gradients
|
||||
|
||||
### 2. Palette Management
|
||||
|
||||
**Color Quantization:**
|
||||
Use `mcp__aseprite__quantize_palette` to reduce sprite colors intelligently:
|
||||
- Analyzes sprite colors
|
||||
- Finds optimal limited palette
|
||||
- Remaps pixels to new palette
|
||||
- Preserves visual quality
|
||||
|
||||
**Palette Optimization Workflow:**
|
||||
1. Get current sprite info and palette
|
||||
2. Decide target color count (4, 8, 16, 32, 64, 256)
|
||||
3. Apply quantization with optional dithering
|
||||
4. Review and adjust palette if needed
|
||||
|
||||
**Common Palette Sizes:**
|
||||
- **4 colors**: Game Boy, ZX Spectrum per-sprite
|
||||
- **8 colors**: CGA, early arcade
|
||||
- **16 colors**: NES, Master System, early VGA
|
||||
- **32 colors**: SNES per-background, Amiga OCS
|
||||
- **64 colors**: Genesis, PC Engine
|
||||
- **256 colors**: VGA, SNES full palette, Amiga AGA
|
||||
|
||||
**Palette Theory:**
|
||||
- **Color Ramps**: Gradual transitions from dark to light for shading
|
||||
- **Hue Shifting**: Changing hue slightly in shadows/highlights for vibrant look
|
||||
- **Saturation**: Higher saturation in midtones, lower in shadows/highlights
|
||||
- **Contrast**: Ensure sufficient contrast between key elements
|
||||
|
||||
### 3. Shading Techniques
|
||||
|
||||
**Types of Shading:**
|
||||
|
||||
**Flat Shading (No Shading):**
|
||||
- Single color per surface
|
||||
- Simple, iconic look
|
||||
- Best for: UI icons, simple sprites, minimalist style
|
||||
|
||||
**Cell Shading (Hard Shading):**
|
||||
- Distinct color bands with hard edges
|
||||
- 2-3 colors per surface (base, shadow, highlight)
|
||||
- Best for: cartoon style, bold graphics, readable sprites
|
||||
|
||||
**Soft Shading (Dithered Shading):**
|
||||
- Gradual transitions using dithering
|
||||
- Smooth appearance with limited colors
|
||||
- Best for: realistic look, smooth surfaces, gradients
|
||||
|
||||
**Pixel Clusters:**
|
||||
- Manual dithering with strategic pixel placement
|
||||
- Organic, hand-crafted appearance
|
||||
- Best for: metal, fabric textures, custom look
|
||||
|
||||
**Shading Workflow:**
|
||||
1. Identify light source direction
|
||||
2. Determine base color
|
||||
3. Create darker shade for shadows (hue shift toward blue/purple)
|
||||
4. Create lighter shade for highlights (hue shift toward yellow/white)
|
||||
5. Apply shadows on surfaces away from light
|
||||
6. Apply highlights on surfaces toward light
|
||||
7. Add reflected light in deep shadows (subtle)
|
||||
|
||||
**Common Shading Mistakes:**
|
||||
- Pure black shadows (use dark hue-shifted colors instead)
|
||||
- Pure white highlights (use light tinted colors instead)
|
||||
- No hue shifting (shadows/highlights same hue as base)
|
||||
- Pillow shading (shading around edges instead of from light source)
|
||||
|
||||
### 4. Antialiasing
|
||||
|
||||
**Purpose**: Smooth jagged edges and diagonal lines by adding intermediate colors.
|
||||
|
||||
**When to Use Antialiasing:**
|
||||
- Diagonal lines look jagged
|
||||
- Curves appear stepped
|
||||
- Edges need smoothing
|
||||
- Higher resolution sprites (64x64+)
|
||||
|
||||
**When NOT to Use Antialiasing:**
|
||||
- Very small sprites (16x16 or smaller)
|
||||
- Intentional pixelated aesthetic
|
||||
- High-contrast situations (AA reduces contrast)
|
||||
- Limited palette (need intermediate colors)
|
||||
|
||||
**Manual Antialiasing Technique:**
|
||||
1. Identify jagged edge
|
||||
2. Find intermediate color between edge and background
|
||||
3. Place intermediate pixels at edge "steps"
|
||||
4. Use 1-pixel wide AA (avoid thick fuzzy edges)
|
||||
5. AA selectively (not every edge needs it)
|
||||
|
||||
**Automated Antialiasing:**
|
||||
- Some tools offer automatic edge smoothing
|
||||
- Use with caution (can blur intended sharpness)
|
||||
- Manual AA gives better control
|
||||
|
||||
### 5. Color Theory for Pixel Art
|
||||
|
||||
**HSV/HSB Model:**
|
||||
- **Hue**: Color type (red, blue, green, etc.)
|
||||
- **Saturation**: Color intensity (vivid vs. gray)
|
||||
- **Value/Brightness**: Lightness (dark vs. light)
|
||||
|
||||
**Creating Color Ramps:**
|
||||
1. Start with base color (midtone)
|
||||
2. Create shadow: lower value, optionally shift hue toward cool (blue/purple)
|
||||
3. Create highlight: raise value, optionally shift hue toward warm (yellow/white)
|
||||
4. Create midtone between base and shadow
|
||||
5. Create midtone between base and highlight
|
||||
6. Result: 5-color ramp (deep shadow, shadow, base, highlight, bright highlight)
|
||||
|
||||
**Hue Shifting:**
|
||||
- Shadows: shift toward blue, purple, or complementary color
|
||||
- Highlights: shift toward yellow, orange, or light source color
|
||||
- Creates vibrant, lively colors instead of flat gradients
|
||||
|
||||
**Contrast:**
|
||||
- Ensure important elements have high value contrast
|
||||
- Background should contrast with foreground
|
||||
- Silhouette should be readable in solid black
|
||||
|
||||
**Color Harmony:**
|
||||
- **Monochromatic**: Variations of single hue
|
||||
- **Analogous**: Adjacent hues on color wheel
|
||||
- **Complementary**: Opposite hues on color wheel
|
||||
- **Triadic**: Three evenly spaced hues
|
||||
|
||||
### 6. Professional Workflows
|
||||
|
||||
**Workflow 1: Palette Reduction with Dithering**
|
||||
|
||||
User Request: "Reduce this sprite to 16 colors with dithering"
|
||||
|
||||
Approach:
|
||||
1. Get current sprite info
|
||||
2. Check current palette size
|
||||
3. Use `mcp__aseprite__quantize_palette` with:
|
||||
- target_colors: 16
|
||||
- algorithm: "median_cut" or "kmeans"
|
||||
- dither: true (enables Floyd-Steinberg dithering)
|
||||
4. Review result and adjust if needed
|
||||
|
||||
**Workflow 2: Adding Shading to Flat Sprite**
|
||||
|
||||
User Request: "Add shading to this sprite with light from top-left"
|
||||
|
||||
**Option A - Automatic Shading (Quick):**
|
||||
1. Use `mcp__aseprite__apply_auto_shading` with:
|
||||
- light_direction: "top_left"
|
||||
- intensity: 0.3-0.7 (adjust to preference)
|
||||
- style: "smooth", "hard", or "pillow"
|
||||
- hue_shift: true (for vibrant results)
|
||||
2. Tool automatically detects regions and adds shading
|
||||
3. Review and manually refine if needed
|
||||
|
||||
**Option B - Manual Shading (Precise):**
|
||||
1. Analyze sprite structure
|
||||
2. Identify base colors
|
||||
3. Create shadow colors (darker, hue-shifted)
|
||||
4. Create highlight colors (lighter, hue-shifted)
|
||||
5. Update palette with new colors
|
||||
6. Draw shadows on bottom-right surfaces
|
||||
7. Draw highlights on top-left surfaces
|
||||
8. Add subtle reflected light in deep shadows
|
||||
|
||||
**Workflow 3: Smoothing Jagged Edges**
|
||||
|
||||
User Request: "Smooth out the edges on this character"
|
||||
|
||||
Approach:
|
||||
1. Identify jagged diagonal lines and curves
|
||||
2. Find edge color and background color
|
||||
3. Create intermediate colors (1-2 shades between)
|
||||
4. Place AA pixels at edge steps
|
||||
5. Review and refine (avoid over-smoothing)
|
||||
|
||||
**Workflow 4: Converting to Retro Palette (Full Palette Conversion)**
|
||||
|
||||
User Request: "Convert this to NES palette"
|
||||
|
||||
Approach:
|
||||
1. Use `mcp__aseprite__quantize_palette` with retro palette colors
|
||||
2. Specify target palette (e.g., 54 NES colors, 4 Game Boy colors, 16 C64 colors)
|
||||
3. Algorithm maps each pixel to nearest palette color
|
||||
4. Pixels are remapped to new palette indices
|
||||
5. Optionally apply dithering for smoother transitions
|
||||
6. Verify all colors match target palette
|
||||
|
||||
**IMPORTANT**: Use `quantize_palette`, NOT `set_palette`. The `set_palette` tool only replaces the color table without remapping pixel data, which will produce incorrect colors in indexed mode.
|
||||
|
||||
Example:
|
||||
```
|
||||
quantize_palette(
|
||||
sprite_path: "sprite.aseprite",
|
||||
target_colors: 54, # NES full palette
|
||||
algorithm: "median_cut",
|
||||
convert_to_indexed: true,
|
||||
dither: false # or true for Bayer dithering
|
||||
)
|
||||
```
|
||||
|
||||
### 7. Dithering Patterns Reference
|
||||
|
||||
**2-Color Patterns:**
|
||||
|
||||
**Checkerboard (50% mix):**
|
||||
```
|
||||
A B A B
|
||||
B A B A
|
||||
A B A B
|
||||
B A B A
|
||||
```
|
||||
|
||||
**25% Pattern:**
|
||||
```
|
||||
A A B A
|
||||
A A A A
|
||||
B A A A
|
||||
A A A A
|
||||
```
|
||||
|
||||
**75% Pattern:**
|
||||
```
|
||||
B B A B
|
||||
B B B B
|
||||
A B B B
|
||||
B B B B
|
||||
```
|
||||
|
||||
**Bayer 2x2:**
|
||||
```
|
||||
Threshold matrix:
|
||||
0 2
|
||||
3 1
|
||||
|
||||
If pixel value > threshold, use lighter color
|
||||
```
|
||||
|
||||
**Bayer 4x4:**
|
||||
```
|
||||
0 8 2 10
|
||||
12 4 14 6
|
||||
3 11 1 9
|
||||
15 7 13 5
|
||||
```
|
||||
|
||||
**Note**: See `dithering-patterns.md` for comprehensive pattern library.
|
||||
|
||||
### 8. Technical Details
|
||||
|
||||
**Quantization Parameters:**
|
||||
- Target colors: 2-256
|
||||
- Dithering: optional, specify algorithm
|
||||
- Alpha handling: preserve transparency or flatten
|
||||
|
||||
**Palette Constraints:**
|
||||
- RGB mode: No palette constraints
|
||||
- Indexed mode: Max 256 colors
|
||||
- Grayscale: 256 shades of gray
|
||||
|
||||
**Performance:**
|
||||
- Quantization: ~100-500ms depending on sprite size
|
||||
- Dithering: ~200-800ms depending on algorithm and size
|
||||
- Manual pixel operations: <50ms per operation
|
||||
|
||||
### 9. Common Patterns
|
||||
|
||||
**Pattern: Quick Polish**
|
||||
For "make this look better" requests:
|
||||
1. Check palette (reduce if too many colors)
|
||||
2. Add basic shading (light source from top-left)
|
||||
3. Add selective antialiasing on curves
|
||||
4. Adjust contrast if needed
|
||||
|
||||
**Pattern: Retro Conversion**
|
||||
For "make this look retro" requests:
|
||||
1. Reduce to appropriate palette (4, 8, or 16 colors)
|
||||
2. Apply ordered dithering (Bayer)
|
||||
3. Remove antialiasing (make edges sharp)
|
||||
4. Ensure pixel-perfect alignment
|
||||
|
||||
**Pattern: Smooth Gradient**
|
||||
For "smooth out the colors" requests:
|
||||
1. Analyze color distribution
|
||||
2. Apply Floyd-Steinberg dithering
|
||||
3. Optional: slight quantization to clean up palette
|
||||
4. Verify smooth transitions
|
||||
|
||||
## Integration with Other Skills
|
||||
|
||||
- **Start with pixel-art-creator** for base sprite before polishing
|
||||
- **Use pixel-art-animator** for animation, then polish with this Skill
|
||||
- **Hand off to pixel-art-exporter** when refinement is complete
|
||||
|
||||
## Error Handling
|
||||
|
||||
**Quantization fails:**
|
||||
- Target color count must be 2-256
|
||||
- Sprite must have content (not blank)
|
||||
|
||||
**Dithering issues:**
|
||||
- Requires sufficient color depth
|
||||
- May not work well with very limited palettes
|
||||
- Some algorithms better for certain content
|
||||
|
||||
**Palette conflicts:**
|
||||
- Indexed mode has strict limits
|
||||
- Converting to indexed may require quantization first
|
||||
|
||||
## Success Indicators
|
||||
|
||||
You've successfully used this Skill when:
|
||||
- Dithering applied produces smooth gradients or textures
|
||||
- Palette reduced while preserving visual quality
|
||||
- Shading adds depth and dimension
|
||||
- Antialiasing smooths edges without blurring
|
||||
- Colors follow good color theory principles
|
||||
- Sprite has professional, polished appearance
|
||||
346
skills/pixel-art-professional/dithering-patterns.md
Normal file
346
skills/pixel-art-professional/dithering-patterns.md
Normal file
@@ -0,0 +1,346 @@
|
||||
# Dithering Patterns Library
|
||||
|
||||
Comprehensive reference of dithering patterns for pixel art.
|
||||
|
||||
## 2-Color Patterns (50% Mix)
|
||||
|
||||
### Checkerboard
|
||||
```
|
||||
A B A B A B A B
|
||||
B A B A B A B A
|
||||
A B A B A B A B
|
||||
B A B A B A B A
|
||||
A B A B A B A B
|
||||
B A B A B A B A
|
||||
A B A B A B A B
|
||||
B A B A B A B A
|
||||
```
|
||||
|
||||
**Use**: Even 50/50 mix, very regular, obvious pattern.
|
||||
|
||||
### Diagonal Lines
|
||||
```
|
||||
A B . . A B . .
|
||||
B A . . B A . .
|
||||
. . A B . . A B
|
||||
. . B A . . B A
|
||||
A B . . A B . .
|
||||
B A . . B A . .
|
||||
. . A B . . A B
|
||||
. . B A . . B A
|
||||
```
|
||||
|
||||
**Use**: Directional texture, fabric weave.
|
||||
|
||||
### Crosshatch
|
||||
```
|
||||
A B A . A B A .
|
||||
B . B A B . B A
|
||||
A B A . A B A .
|
||||
. A . B . A . B
|
||||
A B A . A B A .
|
||||
B . B A B . B A
|
||||
A B A . A B A .
|
||||
. A . B . A . B
|
||||
```
|
||||
|
||||
**Use**: Rough texture, sketch-like appearance.
|
||||
|
||||
## 2-Color Patterns (25% Mix)
|
||||
|
||||
### Sparse Dots
|
||||
```
|
||||
A A B A A A B A
|
||||
A A A A A A A A
|
||||
B A A A B A A A
|
||||
A A A A A A A A
|
||||
A A B A A A B A
|
||||
A A A A A A A A
|
||||
B A A A B A A A
|
||||
A A A A A A A A
|
||||
```
|
||||
|
||||
**Use**: Subtle texture, 25% darker/lighter.
|
||||
|
||||
### Diagonal Sparse
|
||||
```
|
||||
A A A B A A A A
|
||||
A A A A A A A B
|
||||
A A B A A A A A
|
||||
A A A A A B A A
|
||||
B A A A A A A A
|
||||
A A A B A A A A
|
||||
A A A A A A B A
|
||||
A B A A A A A A
|
||||
```
|
||||
|
||||
**Use**: Gentle diagonal flow.
|
||||
|
||||
## 2-Color Patterns (75% Mix)
|
||||
|
||||
### Dense Dots (Inverse of 25%)
|
||||
```
|
||||
B B A B B B A B
|
||||
B B B B B B B B
|
||||
A B B B A B B B
|
||||
B B B B B B B B
|
||||
B B A B B B A B
|
||||
B B B B B B B B
|
||||
A B B B A B B B
|
||||
B B B B B B B B
|
||||
```
|
||||
|
||||
**Use**: Mostly lighter color, subtle darkening.
|
||||
|
||||
## 3-Color Patterns
|
||||
|
||||
### Smooth Gradient (A → B → C)
|
||||
```
|
||||
A A A A B B B B
|
||||
A A A B B B B C
|
||||
A A A B B B C C
|
||||
A A B B B C C C
|
||||
A B B B C C C C
|
||||
B B B C C C C C
|
||||
B B C C C C C C
|
||||
B C C C C C C C
|
||||
```
|
||||
|
||||
**Use**: Smooth transition between 3 colors.
|
||||
|
||||
### Stepped Gradient
|
||||
```
|
||||
A A A A A A A A
|
||||
A A A A B B B B
|
||||
A A B B B B B B
|
||||
B B B B B B C C
|
||||
B B B B C C C C
|
||||
B B C C C C C C
|
||||
C C C C C C C C
|
||||
C C C C C C C C
|
||||
```
|
||||
|
||||
**Use**: Clear separation between color zones.
|
||||
|
||||
## Bayer Matrices
|
||||
|
||||
### Bayer 2×2 (4 Threshold Levels)
|
||||
```
|
||||
Thresholds:
|
||||
0 2
|
||||
3 1
|
||||
|
||||
Pattern visualization (0=darkest, 3=lightest):
|
||||
0/4 2/4
|
||||
3/4 1/4
|
||||
```
|
||||
|
||||
**Use**: Basic ordered dithering, very coarse.
|
||||
|
||||
### Bayer 4×4 (16 Threshold Levels)
|
||||
```
|
||||
Thresholds:
|
||||
0 8 2 10
|
||||
12 4 14 6
|
||||
3 11 1 9
|
||||
15 7 13 5
|
||||
|
||||
Pattern visualization (0-15 scale):
|
||||
0/16 8/16 2/16 10/16
|
||||
12/16 4/16 14/16 6/16
|
||||
3/16 11/16 1/16 9/16
|
||||
15/16 7/16 13/16 5/16
|
||||
```
|
||||
|
||||
**Use**: Standard ordered dithering, balanced regularity and smoothness.
|
||||
|
||||
### Bayer 8×8 (64 Threshold Levels)
|
||||
```
|
||||
Thresholds:
|
||||
0 32 8 40 2 34 10 42
|
||||
48 16 56 24 50 18 58 26
|
||||
12 44 4 36 14 46 6 38
|
||||
60 28 52 20 62 30 54 22
|
||||
3 35 11 43 1 33 9 41
|
||||
51 19 59 27 49 17 57 25
|
||||
15 47 7 39 13 45 5 37
|
||||
63 31 55 23 61 29 53 21
|
||||
```
|
||||
|
||||
**Use**: Fine ordered dithering, near-gradient quality.
|
||||
|
||||
## Artistic Patterns
|
||||
|
||||
### Hatching (Single Direction)
|
||||
```
|
||||
A A A B A A A B
|
||||
A A A B A A A B
|
||||
A A A B A A A B
|
||||
A A A B A A A B
|
||||
A A A B A A A B
|
||||
A A A B A A A B
|
||||
A A A B A A A B
|
||||
A A A B A A A B
|
||||
```
|
||||
|
||||
**Use**: Pen-and-ink style, directional shading.
|
||||
|
||||
### Cross-Hatching
|
||||
```
|
||||
A A B A A A B A
|
||||
A A B A A A B A
|
||||
B B A B B B A B
|
||||
A A B A A A B A
|
||||
A A B A A A B A
|
||||
A A B A A A B A
|
||||
B B A B B B A B
|
||||
A A B A A A B A
|
||||
```
|
||||
|
||||
**Use**: Heavier ink-style shading.
|
||||
|
||||
### Stippling
|
||||
```
|
||||
A A B A A A A B
|
||||
A A A A B A A A
|
||||
B A A A A A B A
|
||||
A A A B A A A A
|
||||
A A A A A B A A
|
||||
B A B A A A A A
|
||||
A A A A B A A B
|
||||
A B A A A A A A
|
||||
```
|
||||
|
||||
**Use**: Random-looking texture, organic.
|
||||
|
||||
### Vertical Lines (Fabric)
|
||||
```
|
||||
A B A B A B A B
|
||||
A B A B A B A B
|
||||
A B A B A B A B
|
||||
A B A B A B A B
|
||||
A B A B A B A B
|
||||
A B A B A B A B
|
||||
A B A B A B A B
|
||||
A B A B A B A B
|
||||
```
|
||||
|
||||
**Use**: Fabric weave, vertical texture.
|
||||
|
||||
### Horizontal Lines (Metal Brushing)
|
||||
```
|
||||
A A A A A A A A
|
||||
B B B B B B B B
|
||||
A A A A A A A A
|
||||
A A A A A A A A
|
||||
B B B B B B B B
|
||||
A A A A A A A A
|
||||
A A A A A A A A
|
||||
B B B B B B B B
|
||||
```
|
||||
|
||||
**Use**: Brushed metal, horizontal grain.
|
||||
|
||||
### Brick Pattern
|
||||
```
|
||||
A A B A A A B A
|
||||
A A B A A A B A
|
||||
B B A B B B A B
|
||||
B B A B B B A B
|
||||
A A B A A A B A
|
||||
A A B A A A B A
|
||||
B B A B B B A B
|
||||
B B A B B B A B
|
||||
```
|
||||
|
||||
**Use**: Masonry texture, tiled surfaces.
|
||||
|
||||
### Woven Fabric
|
||||
```
|
||||
A A B B A A B B
|
||||
A A B B A A B B
|
||||
B B A A B B A A
|
||||
B B A A B B A A
|
||||
A A B B A A B B
|
||||
A A B B A A B B
|
||||
B B A A B B A A
|
||||
B B A A B B A A
|
||||
```
|
||||
|
||||
**Use**: Basket weave, cloth texture.
|
||||
|
||||
## Retro Console Dithering
|
||||
|
||||
### NES-Style (Coarse Checkerboard)
|
||||
```
|
||||
A B A B A B A B
|
||||
B A B A B A B A
|
||||
A B A B A B A B
|
||||
B A B A B A B A
|
||||
A B A B A B A B
|
||||
B A B A B A B A
|
||||
A B A B A B A B
|
||||
B A B A B A B A
|
||||
```
|
||||
|
||||
**Use**: Classic 8-bit look, very visible pattern.
|
||||
|
||||
### Game Boy-Style (Dense Stippling)
|
||||
```
|
||||
A A B A A B A A
|
||||
A B A A B A A B
|
||||
B A A B A A B A
|
||||
A A B A A B A A
|
||||
A B A A B A A B
|
||||
B A A B A A B A
|
||||
A A B A A B A A
|
||||
A B A A B A A B
|
||||
```
|
||||
|
||||
**Use**: 4-shade Game Boy aesthetic.
|
||||
|
||||
### SNES-Style (Fine Bayer)
|
||||
```
|
||||
(Use Bayer 8×8 matrix)
|
||||
```
|
||||
|
||||
**Use**: Smooth 16-bit era gradients.
|
||||
|
||||
## Pattern Selection Guide
|
||||
|
||||
| Desired Effect | Recommended Pattern |
|
||||
|---|---|
|
||||
| Smooth gradient | Floyd-Steinberg or Bayer 8×8 |
|
||||
| Retro/obvious | Checkerboard or Bayer 2×2 |
|
||||
| Fabric texture | Woven or Vertical Lines |
|
||||
| Metal surface | Horizontal Lines |
|
||||
| Stone/rough | Stippling or Sparse Dots |
|
||||
| Ink drawing | Hatching or Cross-Hatching |
|
||||
| Subtle shading | Bayer 4×4 or Diagonal Sparse |
|
||||
| Dramatic contrast | Brick or Bold Checkerboard |
|
||||
|
||||
## Color Percentage Mix Table
|
||||
|
||||
| Pattern | % of Color A | % of Color B |
|
||||
|---|---|---|
|
||||
| Sparse Dots (25%) | 75% | 25% |
|
||||
| Checkerboard (50%) | 50% | 50% |
|
||||
| Dense Dots (75%) | 25% | 75% |
|
||||
| Single Line (12.5%) | 87.5% | 12.5% |
|
||||
| Double Line (25%) | 75% | 25% |
|
||||
| Triple Line (37.5%) | 62.5% | 37.5% |
|
||||
|
||||
## Implementation Notes
|
||||
|
||||
**Tiling**: All patterns above are 8×8 and tile seamlessly. Repeat pattern across larger areas.
|
||||
|
||||
**Color Mixing**: "A" and "B" represent two colors being mixed. Use actual hex colors from palette.
|
||||
|
||||
**Customization**: Modify patterns by:
|
||||
- Rotating 90°/180°/270° for directional change
|
||||
- Inverting (swap A and B) for opposite density
|
||||
- Combining patterns for complex textures
|
||||
|
||||
**Tool Support**:
|
||||
- Manual: Use `mcp__aseprite__draw_pixels` to place pattern pixels
|
||||
- Automatic: Use `mcp__aseprite__apply_dithering` with algorithm name
|
||||
868
skills/pixel-art-professional/examples.md
Normal file
868
skills/pixel-art-professional/examples.md
Normal file
@@ -0,0 +1,868 @@
|
||||
# Pixel Art Professional Examples
|
||||
|
||||
This document provides concrete examples of how the pixel-art-professional skill handles advanced pixel art techniques. Each example shows the user's request, step-by-step approach, actual MCP tool calls with parameters, and expected results.
|
||||
|
||||
Examples are organized by technique: dithering, palette optimization, shading, antialiasing, and complete refinement workflows.
|
||||
|
||||
---
|
||||
|
||||
## Dithering Applications
|
||||
|
||||
### Example 1: Floyd-Steinberg Dithering for Gradient
|
||||
|
||||
**User Request:**
|
||||
> "Apply Floyd-Steinberg dithering to create a smooth gradient with a limited palette"
|
||||
|
||||
**Approach:**
|
||||
1. Create canvas with gradient (or existing image)
|
||||
2. Set limited target palette
|
||||
3. Apply Floyd-Steinberg dithering algorithm
|
||||
4. Diffuses error to neighboring pixels for smooth transitions
|
||||
|
||||
**Tool Calls:**
|
||||
```javascript
|
||||
// Assume canvas exists with smooth RGB gradient
|
||||
// Create target palette (limited colors)
|
||||
mcp__aseprite__set_palette({
|
||||
colors: [
|
||||
{ r: 0, g: 0, b: 0 }, // Black
|
||||
{ r: 85, g: 85, b: 85 }, // Dark gray
|
||||
{ r: 170, g: 170, b: 170 }, // Light gray
|
||||
{ r: 255, g: 255, b: 255 } // White
|
||||
]
|
||||
})
|
||||
|
||||
// Apply Floyd-Steinberg dithering
|
||||
mcp__aseprite__apply_dithering({
|
||||
algorithm: "floyd-steinberg",
|
||||
matrix: "default"
|
||||
})
|
||||
|
||||
// Quantize to palette
|
||||
mcp__aseprite__quantize_colors({
|
||||
colors: 4,
|
||||
algorithm: "default"
|
||||
})
|
||||
```
|
||||
|
||||
**Result:**
|
||||
A gradient that appears smooth despite using only 4 colors, with error diffusion creating organic dither patterns.
|
||||
|
||||
**Visual Description:**
|
||||
The gradient transitions from black to white using a checkerboard-like pattern of gray pixels. Floyd-Steinberg's error diffusion creates irregular, organic-looking patterns that avoid banding. Close pixels seem to "blend" optically when viewed at normal distance.
|
||||
|
||||
---
|
||||
|
||||
### Example 2: Bayer Dithering for Ordered Pattern
|
||||
|
||||
**User Request:**
|
||||
> "Use Bayer dithering to create a consistent textured pattern"
|
||||
|
||||
**Approach:**
|
||||
1. Start with image or gradient
|
||||
2. Apply Bayer matrix dithering
|
||||
3. Creates ordered, repeating pattern
|
||||
4. Good for textures and consistent looks
|
||||
|
||||
**Tool Calls:**
|
||||
```javascript
|
||||
// Apply 8x8 Bayer matrix dithering
|
||||
mcp__aseprite__apply_dithering({
|
||||
algorithm: "bayer",
|
||||
matrix: "8x8"
|
||||
})
|
||||
|
||||
// Alternative: 4x4 for coarser pattern
|
||||
// mcp__aseprite__apply_dithering({
|
||||
// algorithm: "bayer",
|
||||
// matrix: "4x4"
|
||||
// })
|
||||
```
|
||||
|
||||
**Result:**
|
||||
An ordered dither pattern with consistent, repeating structure suitable for textures.
|
||||
|
||||
**Visual Description:**
|
||||
Instead of random-looking patterns, Bayer dithering creates a regular crosshatch or grid pattern. The 8x8 matrix produces finer patterns than 4x4. This technique gives a vintage computer graphics aesthetic and works well for fabric textures or patterned surfaces.
|
||||
|
||||
---
|
||||
|
||||
### Example 3: Retro Game Style Dithering
|
||||
|
||||
**User Request:**
|
||||
> "Apply classic dithering like old DOS games, convert my sprite to 16 colors"
|
||||
|
||||
**Approach:**
|
||||
1. Get current sprite palette
|
||||
2. Reduce to 16 colors
|
||||
3. Apply ordered dithering for retro look
|
||||
4. Maintain pixel art aesthetic
|
||||
|
||||
**Tool Calls:**
|
||||
```javascript
|
||||
// First, get current palette to analyze
|
||||
mcp__aseprite__get_palette()
|
||||
|
||||
// Quantize to 16 colors (typical VGA palette size)
|
||||
mcp__aseprite__quantize_colors({
|
||||
colors: 16,
|
||||
algorithm: "rgb5a3" // Retro-friendly quantization
|
||||
})
|
||||
|
||||
// Apply ordered dithering with smaller matrix
|
||||
mcp__aseprite__apply_dithering({
|
||||
algorithm: "ordered",
|
||||
matrix: "4x4"
|
||||
})
|
||||
```
|
||||
|
||||
**Result:**
|
||||
A sprite with authentic early-90s PC game aesthetic using ordered dither and 16-color palette.
|
||||
|
||||
**Visual Description:**
|
||||
The sprite has a distinctly retro appearance with visible dither patterns. Colors are limited to 16 values, and gradients show clear crosshatch patterns typical of VGA-era games. The ordered dither gives it that classic Sierra or LucasArts adventure game look.
|
||||
|
||||
---
|
||||
|
||||
### Example 4: Subtle Dithering for Smooth Shading
|
||||
|
||||
**User Request:**
|
||||
> "Add gentle dithering to my character's shading without making it too obvious"
|
||||
|
||||
**Approach:**
|
||||
1. Work with existing shaded sprite
|
||||
2. Apply light dithering only to transition areas
|
||||
3. Use high-resolution matrix for subtlety
|
||||
4. Preserve hard edges
|
||||
|
||||
**Tool Calls:**
|
||||
```javascript
|
||||
// Apply very subtle Floyd-Steinberg with reduced strength
|
||||
mcp__aseprite__apply_dithering({
|
||||
algorithm: "floyd-steinberg",
|
||||
matrix: "default",
|
||||
serpentine: true // Reduces banding artifacts
|
||||
})
|
||||
|
||||
// Alternative: Use fine Bayer matrix
|
||||
// mcp__aseprite__apply_dithering({
|
||||
// algorithm: "bayer",
|
||||
// matrix: "16x16" // Very fine pattern
|
||||
// })
|
||||
```
|
||||
|
||||
**Result:**
|
||||
Smooth shading with barely perceptible dithering that eliminates banding without dominating the aesthetic.
|
||||
|
||||
**Visual Description:**
|
||||
The character's shading appears mostly smooth but with subtle texture in the transition zones. The dithering is fine enough that it reads as smooth shading at normal viewing distance but eliminates harsh color banding. Edges remain clean and crisp.
|
||||
|
||||
---
|
||||
|
||||
## Palette Optimization
|
||||
|
||||
### Example 5: Color Reduction with Quantization
|
||||
|
||||
**User Request:**
|
||||
> "Reduce my sprite from thousands of colors to just 32 for a retro game"
|
||||
|
||||
**Approach:**
|
||||
1. Analyze current color usage
|
||||
2. Apply intelligent quantization
|
||||
3. Preserve important color relationships
|
||||
4. Set optimized palette
|
||||
|
||||
**Tool Calls:**
|
||||
```javascript
|
||||
// Get current palette info
|
||||
mcp__aseprite__get_palette()
|
||||
|
||||
// Quantize to 32 colors intelligently
|
||||
mcp__aseprite__quantize_colors({
|
||||
colors: 32,
|
||||
algorithm: "octree" // Good for color preservation
|
||||
})
|
||||
|
||||
// Alternatively, use k-means for better clustering
|
||||
// mcp__aseprite__quantize_colors({
|
||||
// colors: 32,
|
||||
// algorithm: "kmeans"
|
||||
// })
|
||||
```
|
||||
|
||||
**Result:**
|
||||
A sprite using exactly 32 colors that maintains the original's visual appearance while being palette-constrained.
|
||||
|
||||
**Visual Description:**
|
||||
The quantized sprite looks remarkably similar to the original despite having far fewer colors. Important color distinctions are preserved (skin tone vs. clothing vs. highlights), while subtle variations are merged intelligently. Perfect for Game Boy Advance or similar systems.
|
||||
|
||||
---
|
||||
|
||||
### Example 6: Creating a Unified Palette
|
||||
|
||||
**User Request:**
|
||||
> "I have multiple sprites with different palettes - create one unified 16-color palette for all of them"
|
||||
|
||||
**Approach:**
|
||||
1. Analyze color usage across all sprites
|
||||
2. Find common colors and important distinctions
|
||||
3. Generate optimized shared palette
|
||||
4. Apply to all sprites with dithering for transitions
|
||||
|
||||
**Tool Calls:**
|
||||
```javascript
|
||||
// For sprite 1
|
||||
mcp__aseprite__get_palette()
|
||||
|
||||
// Quantize all sprites to same 16-color palette
|
||||
// First, determine optimal palette across all sprites
|
||||
mcp__aseprite__quantize_colors({
|
||||
colors: 16,
|
||||
algorithm: "octree",
|
||||
useAllFrames: true,
|
||||
useAllLayers: true
|
||||
})
|
||||
|
||||
// Get the generated palette
|
||||
const unifiedPalette = mcp__aseprite__get_palette()
|
||||
|
||||
// Apply Floyd-Steinberg to handle color transitions
|
||||
mcp__aseprite__apply_dithering({
|
||||
algorithm: "floyd-steinberg",
|
||||
matrix: "default"
|
||||
})
|
||||
```
|
||||
|
||||
**Result:**
|
||||
A cohesive 16-color palette that works across multiple sprites, enabling consistent art direction.
|
||||
|
||||
**Visual Description:**
|
||||
All sprites now share the same 16 colors, creating visual harmony. The palette includes key colors needed by all sprites: skin tones, common material colors, and essential highlights/shadows. Dithering bridges gaps where sprites previously had unique colors.
|
||||
|
||||
---
|
||||
|
||||
### Example 7: Palette Swapping Setup
|
||||
|
||||
**User Request:**
|
||||
> "Optimize my character palette so I can easily swap colors for different character variants"
|
||||
|
||||
**Approach:**
|
||||
1. Organize palette by function (skin, hair, clothing, details)
|
||||
2. Keep palette indices consistent
|
||||
3. Create base character with organized palette
|
||||
4. Enable easy color swapping
|
||||
|
||||
**Tool Calls:**
|
||||
```javascript
|
||||
// Set organized palette with functional groups
|
||||
mcp__aseprite__set_palette({
|
||||
colors: [
|
||||
// Indices 0-3: Skin tones
|
||||
{ r: 255, g: 220, b: 177 }, // Light skin
|
||||
{ r: 220, g: 180, b: 140 }, // Mid skin
|
||||
{ r: 180, g: 130, b: 90 }, // Shadow skin
|
||||
{ r: 0, g: 0, b: 0 }, // Outline
|
||||
|
||||
// Indices 4-7: Hair colors
|
||||
{ r: 101, g: 67, b: 33 }, // Brown hair
|
||||
{ r: 70, g: 45, b: 20 }, // Dark brown hair
|
||||
{ r: 50, g: 30, b: 10 }, // Hair shadow
|
||||
{ r: 130, g: 90, b: 50 }, // Hair highlight
|
||||
|
||||
// Indices 8-11: Primary clothing
|
||||
{ r: 200, g: 50, b: 50 }, // Red shirt
|
||||
{ r: 150, g: 30, b: 30 }, // Red shirt shadow
|
||||
{ r: 250, g: 100, b: 100 }, // Red shirt highlight
|
||||
{ r: 0, g: 0, b: 0 }, // Clothing outline
|
||||
|
||||
// Indices 12-15: Secondary colors
|
||||
{ r: 50, g: 100, b: 200 }, // Blue pants
|
||||
{ r: 30, g: 70, b: 150 }, // Blue pants shadow
|
||||
{ r: 100, g: 150, b: 250 }, // Blue pants highlight
|
||||
{ r: 255, g: 255, b: 255 } // White details
|
||||
]
|
||||
})
|
||||
|
||||
// Draw character using these organized indices
|
||||
mcp__aseprite__draw_pixels({
|
||||
pixels: [
|
||||
// Use indices 0-3 for all skin
|
||||
{ x: 15, y: 8, colorIndex: 0 }, // Light skin
|
||||
{ x: 16, y: 9, colorIndex: 1 }, // Mid skin
|
||||
{ x: 17, y: 10, colorIndex: 2 }, // Shadow skin
|
||||
// Use indices 4-7 for all hair
|
||||
{ x: 14, y: 6, colorIndex: 4 }, // Hair
|
||||
// Use indices 8-11 for clothing
|
||||
{ x: 15, y: 12, colorIndex: 8 }, // Shirt
|
||||
// etc.
|
||||
]
|
||||
})
|
||||
```
|
||||
|
||||
**Result:**
|
||||
A character sprite with organized palette enabling easy variants (blonde, redhead, etc.) by swapping specific palette ranges.
|
||||
|
||||
**Visual Description:**
|
||||
The base character uses indices organized by feature. To create a blonde variant, simply replace palette indices 4-7 with yellow/blonde values. For a green shirt, replace indices 8-11. The character's structure remains identical, but appearances change dramatically with palette swaps.
|
||||
|
||||
---
|
||||
|
||||
## Shading Techniques
|
||||
|
||||
### Example 8: Adding Cell Shading
|
||||
|
||||
**User Request:**
|
||||
> "Add simple cell shading to my flat character sprite - just base color, shadow, and highlight"
|
||||
|
||||
**Approach:**
|
||||
1. Start with flat-colored sprite
|
||||
2. Identify light source direction
|
||||
3. Add shadow areas (typically 50% darker)
|
||||
4. Add highlight areas (typically 50% lighter)
|
||||
5. Keep clean, hard edges for cell-shaded look
|
||||
|
||||
**Tool Calls:**
|
||||
```javascript
|
||||
// Assume sprite exists with flat colors
|
||||
// Get current palette
|
||||
const currentPalette = mcp__aseprite__get_palette()
|
||||
|
||||
// Add darker shadow versions of each color to palette
|
||||
mcp__aseprite__set_palette({
|
||||
colors: [
|
||||
...currentPalette.colors,
|
||||
// Add shadow versions (multiply by 0.5-0.7)
|
||||
{ r: Math.floor(currentPalette.colors[1].r * 0.6),
|
||||
g: Math.floor(currentPalette.colors[1].g * 0.6),
|
||||
b: Math.floor(currentPalette.colors[1].b * 0.6) },
|
||||
// Add highlight versions (add 30-50%)
|
||||
{ r: Math.min(255, Math.floor(currentPalette.colors[1].r * 1.4)),
|
||||
g: Math.min(255, Math.floor(currentPalette.colors[1].g * 1.4)),
|
||||
b: Math.min(255, Math.floor(currentPalette.colors[1].b * 1.4)) }
|
||||
]
|
||||
})
|
||||
|
||||
// Draw shadow pixels (assuming light from upper-left)
|
||||
mcp__aseprite__draw_pixels({
|
||||
pixels: [
|
||||
// Right side of body - shadow
|
||||
{ x: 17, y: 13, colorIndex: 8 }, // Shadow color index
|
||||
{ x: 17, y: 14, colorIndex: 8 },
|
||||
{ x: 17, y: 15, colorIndex: 8 },
|
||||
// Under chin - shadow
|
||||
{ x: 15, y: 11, colorIndex: 2 }, // Skin shadow
|
||||
{ x: 16, y: 11, colorIndex: 2 },
|
||||
// Right side of legs - shadow
|
||||
{ x: 17, y: 18, colorIndex: 9 }, // Pants shadow
|
||||
{ x: 17, y: 19, colorIndex: 9 }
|
||||
]
|
||||
})
|
||||
|
||||
// Draw highlight pixels
|
||||
mcp__aseprite__draw_pixels({
|
||||
pixels: [
|
||||
// Top of head - highlight
|
||||
{ x: 14, y: 8, colorIndex: 5 }, // Hair highlight
|
||||
{ x: 15, y: 8, colorIndex: 5 },
|
||||
// Left shoulder - highlight
|
||||
{ x: 14, y: 12, colorIndex: 10 }, // Shirt highlight
|
||||
// Top of legs - highlight
|
||||
{ x: 14, y: 16, colorIndex: 11 } // Pants highlight
|
||||
]
|
||||
})
|
||||
```
|
||||
|
||||
**Result:**
|
||||
A character with clean, cell-shaded appearance featuring distinct base, shadow, and highlight zones.
|
||||
|
||||
**Visual Description:**
|
||||
The sprite has a cartoon/anime look with three distinct tones per color area. Hard-edged shadows appear on the right side and underneath forms (light from upper-left). Bright highlights pop on the upper-left surfaces. No gradients - just clean color breaks creating dimensional appearance.
|
||||
|
||||
---
|
||||
|
||||
### Example 9: Soft Shading with Gradients
|
||||
|
||||
**User Request:**
|
||||
> "Add smooth, gradient-style shading to make my sprite look more realistic"
|
||||
|
||||
**Approach:**
|
||||
1. Start with base colors
|
||||
2. Create multiple intermediate shades
|
||||
3. Apply graduated shading with subtle transitions
|
||||
4. Use more colors for smoother gradients
|
||||
|
||||
**Tool Calls:**
|
||||
```javascript
|
||||
// Create expanded palette with many intermediate shades
|
||||
mcp__aseprite__set_palette({
|
||||
colors: [
|
||||
// Skin tone gradient (8 steps)
|
||||
{ r: 255, g: 220, b: 177 }, // Lightest
|
||||
{ r: 245, g: 210, b: 167 },
|
||||
{ r: 235, g: 200, b: 157 },
|
||||
{ r: 225, g: 190, b: 147 },
|
||||
{ r: 215, g: 180, b: 137 }, // Mid
|
||||
{ r: 200, g: 165, b: 122 },
|
||||
{ r: 185, g: 150, b: 107 },
|
||||
{ r: 170, g: 135, b: 92 }, // Darkest
|
||||
|
||||
// Red fabric gradient (6 steps)
|
||||
{ r: 255, g: 100, b: 100 }, // Highlight
|
||||
{ r: 230, g: 70, b: 70 },
|
||||
{ r: 200, g: 50, b: 50 }, // Base
|
||||
{ r: 170, g: 35, b: 35 },
|
||||
{ r: 140, g: 25, b: 25 },
|
||||
{ r: 110, g: 15, b: 15 } // Shadow
|
||||
]
|
||||
})
|
||||
|
||||
// Draw graduated shading on face
|
||||
mcp__aseprite__draw_pixels({
|
||||
pixels: [
|
||||
// Face - lightest on left, gradual transition right
|
||||
{ x: 14, y: 9, colorIndex: 0 }, // Lightest
|
||||
{ x: 15, y: 9, colorIndex: 1 },
|
||||
{ x: 16, y: 9, colorIndex: 2 },
|
||||
{ x: 17, y: 9, colorIndex: 3 },
|
||||
{ x: 18, y: 9, colorIndex: 4 }, // Mid
|
||||
{ x: 19, y: 9, colorIndex: 5 },
|
||||
{ x: 20, y: 9, colorIndex: 6 },
|
||||
{ x: 21, y: 9, colorIndex: 7 } // Darkest
|
||||
]
|
||||
})
|
||||
|
||||
// Draw smooth shading on clothing
|
||||
mcp__aseprite__draw_pixels({
|
||||
pixels: [
|
||||
// Shirt with gradient from light to dark
|
||||
{ x: 14, y: 13, colorIndex: 8 }, // Highlight
|
||||
{ x: 15, y: 13, colorIndex: 9 },
|
||||
{ x: 16, y: 13, colorIndex: 10 }, // Base
|
||||
{ x: 17, y: 13, colorIndex: 11 },
|
||||
{ x: 18, y: 13, colorIndex: 12 }, // Shadow
|
||||
{ x: 19, y: 13, colorIndex: 13 } // Deep shadow
|
||||
]
|
||||
})
|
||||
```
|
||||
|
||||
**Result:**
|
||||
Smooth, painterly shading with subtle gradients creating realistic volume and form.
|
||||
|
||||
**Visual Description:**
|
||||
The sprite has soft, graduated shading similar to oil painting. Forms curve smoothly with gradual light-to-dark transitions. The face has subtle volume with cheekbone highlights and jaw shadows. Clothing folds show dimensional depth. No harsh lines - everything blends naturally.
|
||||
|
||||
---
|
||||
|
||||
### Example 10: Ambient Occlusion
|
||||
|
||||
**User Request:**
|
||||
> "Add ambient occlusion darkening where surfaces meet and in crevices"
|
||||
|
||||
**Approach:**
|
||||
1. Identify contact points and corners
|
||||
2. Add extra-dark pixels in these areas
|
||||
3. Creates depth and grounds objects
|
||||
4. Subtle but impactful realism boost
|
||||
|
||||
**Tool Calls:**
|
||||
```javascript
|
||||
// Add very dark AO color to palette
|
||||
mcp__aseprite__set_palette({
|
||||
colors: [
|
||||
...existingPalette,
|
||||
{ r: 20, g: 20, b: 25 } // Very dark blue-black for AO
|
||||
]
|
||||
})
|
||||
|
||||
// Draw AO in crevices and contact points
|
||||
mcp__aseprite__draw_pixels({
|
||||
pixels: [
|
||||
// Under chin where head meets neck
|
||||
{ x: 15, y: 11, colorIndex: 20 },
|
||||
{ x: 16, y: 11, colorIndex: 20 },
|
||||
|
||||
// Where arm meets body
|
||||
{ x: 13, y: 14, colorIndex: 20 },
|
||||
|
||||
// Where legs meet ground
|
||||
{ x: 14, y: 21, colorIndex: 20 },
|
||||
{ x: 17, y: 21, colorIndex: 20 },
|
||||
|
||||
// Inside elbow crease
|
||||
{ x: 12, y: 15, colorIndex: 20 },
|
||||
|
||||
// Corner where torso meets legs
|
||||
{ x: 15, y: 16, colorIndex: 20 },
|
||||
{ x: 16, y: 16, colorIndex: 20 }
|
||||
]
|
||||
})
|
||||
```
|
||||
|
||||
**Result:**
|
||||
Added depth and realism through dark contact shadows that ground the character and define form connections.
|
||||
|
||||
**Visual Description:**
|
||||
The character now has subtle dark pixels in recessed areas: under the chin, inside elbows, where arms press against the torso, and where feet touch ground. These dark accents make the sprite feel more three-dimensional and properly lit by environmental light rather than just direct light.
|
||||
|
||||
---
|
||||
|
||||
## Antialiasing
|
||||
|
||||
### Example 11: Edge Smoothing with AA
|
||||
|
||||
**User Request:**
|
||||
> "Smooth out the jagged edges on my circle sprite with antialiasing"
|
||||
|
||||
**Approach:**
|
||||
1. Identify hard diagonal edges
|
||||
2. Add intermediate color pixels along edges
|
||||
3. Blend between foreground and background
|
||||
4. Creates smoother curves
|
||||
|
||||
**Tool Calls:**
|
||||
```javascript
|
||||
// Assume we have a red circle on white background
|
||||
// Add AA colors to palette - blend between red and white
|
||||
mcp__aseprite__set_palette({
|
||||
colors: [
|
||||
{ r: 255, g: 255, b: 255 }, // White background
|
||||
{ r: 200, g: 0, b: 0 }, // Red circle
|
||||
{ r: 255, g: 200, b: 200 }, // Light pink (75% white, 25% red)
|
||||
{ r: 230, g: 100, b: 100 } // Pink (50% blend)
|
||||
]
|
||||
})
|
||||
|
||||
// Draw AA pixels along curved edges
|
||||
mcp__aseprite__draw_pixels({
|
||||
pixels: [
|
||||
// Top curve - original had stair-step edge
|
||||
{ x: 14, y: 5, colorIndex: 2 }, // Light AA
|
||||
{ x: 18, y: 5, colorIndex: 2 }, // Light AA
|
||||
{ x: 13, y: 6, colorIndex: 3 }, // Medium AA
|
||||
{ x: 19, y: 6, colorIndex: 3 }, // Medium AA
|
||||
|
||||
// Left curve
|
||||
{ x: 11, y: 7, colorIndex: 2 },
|
||||
{ x: 10, y: 8, colorIndex: 3 },
|
||||
{ x: 9, y: 10, colorIndex: 3 },
|
||||
{ x: 9, y: 11, colorIndex: 2 },
|
||||
|
||||
// Right curve (mirror)
|
||||
{ x: 21, y: 7, colorIndex: 2 },
|
||||
{ x: 22, y: 8, colorIndex: 3 },
|
||||
{ x: 23, y: 10, colorIndex: 3 },
|
||||
{ x: 23, y: 11, colorIndex: 2 },
|
||||
|
||||
// Bottom curve
|
||||
{ x: 13, y: 15, colorIndex: 3 },
|
||||
{ x: 19, y: 15, colorIndex: 3 },
|
||||
{ x: 14, y: 16, colorIndex: 2 },
|
||||
{ x: 18, y: 16, colorIndex: 2 }
|
||||
]
|
||||
})
|
||||
```
|
||||
|
||||
**Result:**
|
||||
A circle with smooth, anti-aliased edges that appear curved rather than stair-stepped.
|
||||
|
||||
**Visual Description:**
|
||||
The circle's edges now have pink transitional pixels that blend the red circle into the white background. Diagonal and curved edges that previously showed obvious pixel stairs now appear smooth and rounded. The overall shape reads as a true circle rather than a pixelated approximation.
|
||||
|
||||
---
|
||||
|
||||
### Example 12: Selective AA for Readability
|
||||
|
||||
**User Request:**
|
||||
> "Add antialiasing to curved parts but keep pixel-perfect straight edges"
|
||||
|
||||
**Approach:**
|
||||
1. Identify which edges are curved vs. straight
|
||||
2. Apply AA only to diagonals and curves
|
||||
3. Keep horizontal/vertical edges sharp
|
||||
4. Maintains clarity while smoothing curves
|
||||
|
||||
**Tool Calls:**
|
||||
```javascript
|
||||
// Character sprite - AA only on rounded features
|
||||
mcp__aseprite__draw_pixels({
|
||||
pixels: [
|
||||
// Round head - add AA on curves
|
||||
{ x: 13, y: 8, colorIndex: 15 }, // AA pixel
|
||||
{ x: 19, y: 8, colorIndex: 15 }, // AA pixel
|
||||
|
||||
// Shoulders - slight curve, add AA
|
||||
{ x: 12, y: 12, colorIndex: 16 }, // AA blend
|
||||
{ x: 20, y: 12, colorIndex: 16 }, // AA blend
|
||||
|
||||
// Arms - straight sides, NO AA applied
|
||||
// Leave edges sharp at x: 13, 19 from y: 13-15
|
||||
|
||||
// Bottom of torso - slight curve
|
||||
{ x: 13, y: 16, colorIndex: 17 }, // AA blend
|
||||
{ x: 19, y: 16, colorIndex: 17 } // AA blend
|
||||
]
|
||||
})
|
||||
```
|
||||
|
||||
**Result:**
|
||||
A sprite with smooth curved features (head, shoulders) but crisp, readable straight edges (arms, torso sides).
|
||||
|
||||
**Visual Description:**
|
||||
The character's round head has smooth antialiased edges that look natural. Shoulders curve gently into arms with subtle AA. However, the vertical edges of the torso and straight lines of the arms remain pixel-perfect sharp, maintaining pixel art clarity and preventing muddiness.
|
||||
|
||||
---
|
||||
|
||||
## Complete Refinement Workflows
|
||||
|
||||
### Example 13: Draft to Polished Character
|
||||
|
||||
**User Request:**
|
||||
> "Take my rough character sketch and apply professional techniques - shading, palette optimization, and AA"
|
||||
|
||||
**Approach:**
|
||||
1. Start with flat-color draft
|
||||
2. Optimize palette to organized scheme
|
||||
3. Add cell shading with 3 tones per color
|
||||
4. Apply subtle dithering in transitions
|
||||
5. Add antialiasing to curves
|
||||
6. Apply ambient occlusion at contacts
|
||||
|
||||
**Tool Calls:**
|
||||
```javascript
|
||||
// Step 1: Get current palette and optimize
|
||||
const draftPalette = mcp__aseprite__get_palette()
|
||||
|
||||
mcp__aseprite__quantize_colors({
|
||||
colors: 24, // Enough for 3 tones × 8 material types
|
||||
algorithm: "octree"
|
||||
})
|
||||
|
||||
// Step 2: Reorganize palette by material and tone
|
||||
mcp__aseprite__set_palette({
|
||||
colors: [
|
||||
// Skin: light, mid, dark
|
||||
{ r: 255, g: 220, b: 177 },
|
||||
{ r: 220, g: 180, b: 140 },
|
||||
{ r: 185, g: 145, b: 105 },
|
||||
|
||||
// Hair: light, mid, dark
|
||||
{ r: 150, g: 100, b: 50 },
|
||||
{ r: 110, g: 70, b: 30 },
|
||||
{ r: 70, g: 40, b: 15 },
|
||||
|
||||
// Clothing and so on...
|
||||
]
|
||||
})
|
||||
|
||||
// Step 3: Add cell shading (shadows on right, highlights on left)
|
||||
mcp__aseprite__draw_pixels({
|
||||
pixels: [
|
||||
// Skin shadows
|
||||
{ x: 18, y: 9, colorIndex: 2 }, // Dark skin on right face
|
||||
{ x: 18, y: 10, colorIndex: 2 },
|
||||
// Skin highlights
|
||||
{ x: 14, y: 9, colorIndex: 0 }, // Light skin on left face
|
||||
{ x: 14, y: 10, colorIndex: 0 },
|
||||
// Hair shadows...
|
||||
// Clothing shadows...
|
||||
]
|
||||
})
|
||||
|
||||
// Step 4: Apply subtle dithering to smooth transitions
|
||||
mcp__aseprite__apply_dithering({
|
||||
algorithm: "floyd-steinberg",
|
||||
matrix: "default"
|
||||
})
|
||||
|
||||
// Step 5: Add antialiasing to curved edges
|
||||
mcp__aseprite__draw_pixels({
|
||||
pixels: [
|
||||
// AA on head curves
|
||||
{ x: 13, y: 8, colorIndex: 16 }, // Blend color
|
||||
{ x: 19, y: 8, colorIndex: 16 },
|
||||
// AA on shoulders...
|
||||
]
|
||||
})
|
||||
|
||||
// Step 6: Add ambient occlusion
|
||||
mcp__aseprite__draw_pixels({
|
||||
pixels: [
|
||||
// Dark pixels under chin, in armpits, where feet meet ground
|
||||
{ x: 15, y: 11, colorIndex: 23 }, // AO color
|
||||
{ x: 16, y: 11, colorIndex: 23 }
|
||||
]
|
||||
})
|
||||
```
|
||||
|
||||
**Result:**
|
||||
A polished character sprite with professional shading, optimized palette, smooth edges, and dimensional depth.
|
||||
|
||||
**Visual Description:**
|
||||
The transformation is dramatic. The flat draft now has dimensional form with light from the upper-left creating clear highlights and shadows. Curves are smooth with antialiasing. Contact points have subtle darkening that grounds the character. The palette is organized and efficient. The sprite looks professional and game-ready.
|
||||
|
||||
---
|
||||
|
||||
### Example 14: Retro Game Sprite Enhancement
|
||||
|
||||
**User Request:**
|
||||
> "Enhance my NES-style sprite with modern techniques while keeping the retro feel"
|
||||
|
||||
**Approach:**
|
||||
1. Start with authentic NES palette (52 colors)
|
||||
2. Add selective AA only on important elements
|
||||
3. Use ordered dithering for textures
|
||||
4. Enhance shading without adding colors
|
||||
5. Keep that retro charm
|
||||
|
||||
**Tool Calls:**
|
||||
```javascript
|
||||
// Use authentic NES palette subset
|
||||
mcp__aseprite__set_palette({
|
||||
colors: [
|
||||
{ r: 124, g: 124, b: 124 }, // NES gray
|
||||
{ r: 0, g: 0, b: 252 }, // NES blue
|
||||
{ r: 0, g: 0, b: 188 }, // NES dark blue
|
||||
{ r: 252, g: 0, b: 0 }, // NES red
|
||||
{ r: 188, g: 0, b: 0 }, // NES dark red
|
||||
// ... more NES colors
|
||||
]
|
||||
})
|
||||
|
||||
// Apply ordered dithering for that authentic NES texture
|
||||
mcp__aseprite__apply_dithering({
|
||||
algorithm: "ordered",
|
||||
matrix: "4x4"
|
||||
})
|
||||
|
||||
// Add selective AA only on character face/important details
|
||||
mcp__aseprite__draw_pixels({
|
||||
pixels: [
|
||||
// Very minimal AA - just on face curves
|
||||
{ x: 14, y: 9, colorIndex: 8 }, // Subtle blend pixel
|
||||
{ x: 18, y: 9, colorIndex: 8 }
|
||||
]
|
||||
})
|
||||
|
||||
// Enhance shading with existing palette
|
||||
mcp__aseprite__draw_pixels({
|
||||
pixels: [
|
||||
// Use existing dark colors for better form definition
|
||||
{ x: 17, y: 13, colorIndex: 4 }, // Existing dark red for shadow
|
||||
{ x: 17, y: 14, colorIndex: 4 },
|
||||
{ x: 17, y: 15, colorIndex: 4 }
|
||||
]
|
||||
})
|
||||
```
|
||||
|
||||
**Result:**
|
||||
An enhanced retro sprite that looks sharper and more dimensional while maintaining authentic NES aesthetic.
|
||||
|
||||
**Visual Description:**
|
||||
The sprite still screams "NES game" with its authentic palette and ordered dithering patterns. However, the shading is more sophisticated, with better form definition and deeper shadows. Subtle antialiasing on the face makes the character more expressive without looking out of place. It feels like a high-quality NES game rather than a amateur homebrew project.
|
||||
|
||||
---
|
||||
|
||||
### Example 15: Modern Indie Game Polish
|
||||
|
||||
**User Request:**
|
||||
> "Give my sprite a modern indie pixel art look - smooth, colorful, professional"
|
||||
|
||||
**Approach:**
|
||||
1. Use expanded color palette (64+ colors)
|
||||
2. Apply smooth gradient shading
|
||||
3. Add antialiasing liberally
|
||||
4. Include ambient occlusion
|
||||
5. Add rim lighting for extra pop
|
||||
|
||||
**Tool Calls:**
|
||||
```javascript
|
||||
// Create rich palette with many shades
|
||||
mcp__aseprite__set_palette({
|
||||
colors: [
|
||||
// Skin gradient (8 shades)
|
||||
{ r: 255, g: 230, b: 200 },
|
||||
{ r: 245, g: 215, b: 185 },
|
||||
{ r: 235, g: 200, b: 170 },
|
||||
{ r: 225, g: 185, b: 155 },
|
||||
{ r: 210, g: 170, b: 140 },
|
||||
{ r: 195, g: 155, b: 125 },
|
||||
{ r: 180, g: 140, b: 110 },
|
||||
{ r: 165, g: 125, b: 95 },
|
||||
|
||||
// Hair gradient (8 shades)
|
||||
{ r: 180, g: 140, b: 80 },
|
||||
{ r: 160, g: 120, b: 65 },
|
||||
{ r: 140, g: 100, b: 50 },
|
||||
{ r: 120, g: 85, b: 40 },
|
||||
{ r: 100, g: 70, b: 30 },
|
||||
{ r: 80, g: 55, b: 20 },
|
||||
{ r: 60, g: 40, b: 15 },
|
||||
{ r: 40, g: 25, b: 10 },
|
||||
|
||||
// Clothing with saturation gradient...
|
||||
// Plus AO color, rim light color...
|
||||
]
|
||||
})
|
||||
|
||||
// Apply smooth gradient shading
|
||||
mcp__aseprite__draw_pixels({
|
||||
pixels: [
|
||||
// Face with smooth gradient left to right
|
||||
{ x: 14, y: 9, colorIndex: 0 }, // Lightest
|
||||
{ x: 15, y: 9, colorIndex: 1 },
|
||||
{ x: 16, y: 9, colorIndex: 2 },
|
||||
{ x: 17, y: 9, colorIndex: 3 }, // Mid
|
||||
{ x: 18, y: 9, colorIndex: 4 },
|
||||
{ x: 19, y: 9, colorIndex: 5 }, // Shadow
|
||||
// Continue for whole sprite...
|
||||
]
|
||||
})
|
||||
|
||||
// Add generous antialiasing
|
||||
mcp__aseprite__draw_pixels({
|
||||
pixels: [
|
||||
// AA all around character outline
|
||||
// Many blend pixels creating smooth silhouette
|
||||
]
|
||||
})
|
||||
|
||||
// Add ambient occlusion
|
||||
mcp__aseprite__draw_pixels({
|
||||
pixels: [
|
||||
// Dark pixels in all crevices and contact points
|
||||
{ x: 15, y: 11, colorIndex: 60 }, // AO under chin
|
||||
// ... many more AO pixels
|
||||
]
|
||||
})
|
||||
|
||||
// Add rim lighting on left edge (opposite main light)
|
||||
mcp__aseprite__draw_pixels({
|
||||
pixels: [
|
||||
// Bright pixels on left edge for rim light effect
|
||||
{ x: 13, y: 9, colorIndex: 61 }, // Bright rim
|
||||
{ x: 13, y: 10, colorIndex: 61 },
|
||||
{ x: 13, y: 13, colorIndex: 62 }, // Rim on body
|
||||
{ x: 13, y: 14, colorIndex: 62 }
|
||||
]
|
||||
})
|
||||
```
|
||||
|
||||
**Result:**
|
||||
A modern, polished indie game character with smooth shading, rich colors, and professional lighting.
|
||||
|
||||
**Visual Description:**
|
||||
The sprite has a contemporary pixel art aesthetic like Celeste or Hyper Light Drifter. Smooth gradient shading creates realistic volume. Generous antialiasing makes all edges smooth. Ambient occlusion adds depth to every crevice. A subtle rim light on the left edge makes the character pop against backgrounds. The rich palette and professional techniques create that "modern indie" look.
|
||||
|
||||
---
|
||||
|
||||
## Summary
|
||||
|
||||
This examples collection demonstrates the pixel-art-professional skill's advanced techniques:
|
||||
|
||||
- **Dithering** (Examples 1-4): Floyd-Steinberg, Bayer, ordered patterns, and subtle applications
|
||||
- **Palette optimization** (Examples 5-7): Color reduction, unification, and palette swapping setup
|
||||
- **Shading** (Examples 8-10): Cell shading, soft gradients, and ambient occlusion
|
||||
- **Antialiasing** (Examples 11-12): Edge smoothing and selective AA for readability
|
||||
- **Complete workflows** (Examples 13-15): Draft-to-polish, retro enhancement, modern indie polish
|
||||
|
||||
Each example shows complete MCP tool call syntax with professional techniques that transform amateur pixel art into polished, professional assets.
|
||||
450
skills/pixel-art-professional/reference.md
Normal file
450
skills/pixel-art-professional/reference.md
Normal file
@@ -0,0 +1,450 @@
|
||||
# Pixel Art Professional - Technical Reference
|
||||
|
||||
## Dithering Algorithms
|
||||
|
||||
### Ordered Dithering (Bayer Matrix)
|
||||
|
||||
**Bayer 2x2 Matrix:**
|
||||
```
|
||||
0/4 2/4
|
||||
3/4 1/4
|
||||
```
|
||||
|
||||
**Bayer 4x4 Matrix:**
|
||||
```
|
||||
0/16 8/16 2/16 10/16
|
||||
12/16 4/16 14/16 6/16
|
||||
3/16 11/16 1/16 9/16
|
||||
15/16 7/16 13/16 5/16
|
||||
```
|
||||
|
||||
**Bayer 8x8 Matrix:**
|
||||
```
|
||||
0 32 8 40 2 34 10 42
|
||||
48 16 56 24 50 18 58 26
|
||||
12 44 4 36 14 46 6 38
|
||||
60 28 52 20 62 30 54 22
|
||||
3 35 11 43 1 33 9 41
|
||||
51 19 59 27 49 17 57 25
|
||||
15 47 7 39 13 45 5 37
|
||||
63 31 55 23 61 29 53 21
|
||||
```
|
||||
|
||||
**Usage**: For pixel at (x, y) with color value C (0-255):
|
||||
1. Get threshold T from matrix[y % size][x % size]
|
||||
2. If C > T, use lighter color; else use darker color
|
||||
|
||||
### Error Diffusion Dithering
|
||||
|
||||
**Floyd-Steinberg Algorithm:**
|
||||
|
||||
Distributes quantization error to neighboring pixels:
|
||||
```
|
||||
X 7/16
|
||||
3/16 5/16 1/16
|
||||
```
|
||||
|
||||
Where X is current pixel.
|
||||
|
||||
**Process:**
|
||||
1. Quantize current pixel to nearest palette color
|
||||
2. Calculate error = original_color - quantized_color
|
||||
3. Distribute error to neighbors:
|
||||
- Right pixel: error × 7/16
|
||||
- Bottom-left: error × 3/16
|
||||
- Bottom: error × 5/16
|
||||
- Bottom-right: error × 1/16
|
||||
|
||||
**Jarvis-Judice-Ninke Algorithm:**
|
||||
|
||||
More distributed error diffusion:
|
||||
```
|
||||
X 7/16 5/16
|
||||
3/16 5/16 7/16 5/16 3/16
|
||||
1/16 3/16 5/16 3/16 1/16
|
||||
```
|
||||
|
||||
**Atkinson Algorithm:**
|
||||
|
||||
Simplified error diffusion (popularized by Apple):
|
||||
```
|
||||
X 1/8 1/8
|
||||
1/8 1/8 1/8
|
||||
1/8
|
||||
```
|
||||
|
||||
Note: Only distributes 6/8 of error, allows some to "bleed off" for lighter appearance.
|
||||
|
||||
## Color Ramp Theory
|
||||
|
||||
### Creating Smooth Ramps
|
||||
|
||||
**5-Step Ramp Example (Skin Tone):**
|
||||
1. **Deep Shadow**: #3a2419 (dark brown, shifted toward cool)
|
||||
2. **Shadow**: #5c3a28 (brown)
|
||||
3. **Base/Midtone**: #8d5a3e (medium brown)
|
||||
4. **Highlight**: #b8825c (light brown, shifted toward warm)
|
||||
5. **Bright Highlight**: #e6b896 (very light, warm)
|
||||
|
||||
**Hue Shifting Pattern:**
|
||||
- Deep shadow: Hue -10°, Saturation -10%, Value -40%
|
||||
- Shadow: Hue -5°, Saturation -5%, Value -20%
|
||||
- Base: Original color
|
||||
- Highlight: Hue +5°, Saturation -5%, Value +20%
|
||||
- Bright Highlight: Hue +10°, Saturation -10%, Value +40%
|
||||
|
||||
### Metal Shading
|
||||
|
||||
**Characteristics:**
|
||||
- High contrast (very dark shadows, very bright highlights)
|
||||
- Sharp transitions
|
||||
- Reflected environment colors
|
||||
- Minimal mid-tones
|
||||
|
||||
**Example Ramp (Steel):**
|
||||
1. Deep Shadow: #1a1a24 (dark blue-gray)
|
||||
2. Shadow: #3a3a4a (medium blue-gray)
|
||||
3. Base: #6a6a7a (light blue-gray)
|
||||
4. Highlight: #aaaabb (very light blue-gray)
|
||||
5. Specular: #ffffff (pure white reflection)
|
||||
|
||||
### Fabric Shading
|
||||
|
||||
**Characteristics:**
|
||||
- Soft transitions
|
||||
- Subsurface scattering simulation (lighter shadows)
|
||||
- Texture can be suggested with dithering
|
||||
- Less contrast than metal
|
||||
|
||||
**Example Ramp (Red Fabric):**
|
||||
1. Deep Shadow: #5a1a1a (dark red)
|
||||
2. Shadow: #8a2a2a (medium-dark red)
|
||||
3. Base: #c43a3a (medium red)
|
||||
4. Highlight: #e66a6a (light red)
|
||||
5. Bright Highlight: #ff9a9a (very light red)
|
||||
|
||||
## Classic Palettes
|
||||
|
||||
### NES Palette
|
||||
|
||||
**Total Colors**: 54 usable colors (64 total, but some are identical or unusable)
|
||||
|
||||
**Sprite Limitation**: 3 colors + transparent per sprite (4 total palette entries)
|
||||
|
||||
**Common NES Palettes:**
|
||||
- **Mario**: #000000, #ff0000, #a64400, #ffc864
|
||||
- **Megaman**: #000000, #0078f8, #89d7ff, #ffffff
|
||||
- **Zelda Gold**: #000000, #b8b800, #fcfc00, #a8a080
|
||||
|
||||
### Game Boy Palette
|
||||
|
||||
**Original Game Boy (DMG):**
|
||||
- 4 shades of green
|
||||
- Palette: #0f380f, #306230, #8bac0f, #9bbc0f
|
||||
|
||||
**Game Boy Pocket (MGB):**
|
||||
- 4 shades of gray
|
||||
- Palette: #000000, #555555, #aaaaaa, #ffffff
|
||||
|
||||
### SNES Palette
|
||||
|
||||
**Capabilities**: 32,768 total colors (15-bit)
|
||||
**Per Background**: 16-256 colors depending on mode
|
||||
**Per Sprite**: 16 colors (15 + transparent)
|
||||
|
||||
**Common SNES Style:**
|
||||
- Rich, vibrant colors
|
||||
- Smooth gradients
|
||||
- Up to 256 simultaneous colors on screen
|
||||
|
||||
### Commodore 64 Palette
|
||||
|
||||
**Total Colors**: 16 fixed colors
|
||||
|
||||
**Palette**:
|
||||
- Black: #000000
|
||||
- White: #ffffff
|
||||
- Red: #880000
|
||||
- Cyan: #aaffee
|
||||
- Purple: #cc44cc
|
||||
- Green: #00cc55
|
||||
- Blue: #0000aa
|
||||
- Yellow: #eeee77
|
||||
- Orange: #dd8855
|
||||
- Brown: #664400
|
||||
- Light Red: #ff7777
|
||||
- Dark Gray: #333333
|
||||
- Medium Gray: #777777
|
||||
- Light Green: #aaff66
|
||||
- Light Blue: #0088ff
|
||||
- Light Gray: #bbbbbb
|
||||
|
||||
## Antialiasing Techniques
|
||||
|
||||
### Single-Pixel AA
|
||||
|
||||
**Before:**
|
||||
```
|
||||
. . . . . .
|
||||
. . X X X .
|
||||
. X . . . .
|
||||
X . . . . .
|
||||
```
|
||||
|
||||
**After (with AA):**
|
||||
```
|
||||
. . . . . .
|
||||
. . X X X .
|
||||
. X a . . .
|
||||
X a . . . .
|
||||
```
|
||||
|
||||
Where:
|
||||
- X = edge color
|
||||
- . = background
|
||||
- a = antialiased intermediate color
|
||||
|
||||
### Double-Pixel AA (Softer)
|
||||
|
||||
**Before:**
|
||||
```
|
||||
. . . . . .
|
||||
. X X X X .
|
||||
X . . . . .
|
||||
```
|
||||
|
||||
**After:**
|
||||
```
|
||||
. . . a a .
|
||||
. X X X X .
|
||||
X a . . . .
|
||||
```
|
||||
|
||||
### Selective AA
|
||||
|
||||
**Rule**: Only AA where necessary:
|
||||
- Long diagonal lines
|
||||
- Visible curves
|
||||
- High-contrast edges
|
||||
|
||||
**Don't AA:**
|
||||
- Horizontal/vertical lines (already smooth)
|
||||
- Intentional jagged details
|
||||
- Very small sprites
|
||||
|
||||
## Shading from Different Light Sources
|
||||
|
||||
### Top-Left Light (Most Common)
|
||||
|
||||
```
|
||||
☀️
|
||||
↙
|
||||
[Sprite]
|
||||
↘
|
||||
(shadow)
|
||||
```
|
||||
|
||||
- Highlights: top and left surfaces
|
||||
- Shadows: bottom and right surfaces
|
||||
|
||||
### Top-Down Light (Dramatic)
|
||||
|
||||
```
|
||||
☀️
|
||||
↓
|
||||
[Sprite]
|
||||
```
|
||||
|
||||
- Highlights: top surfaces
|
||||
- Shadows: all vertical surfaces
|
||||
- Strong cast shadows on ground
|
||||
|
||||
### Rim Lighting (Backlit)
|
||||
|
||||
```
|
||||
[Sprite] ← ☀️
|
||||
```
|
||||
|
||||
- Highlights: edges facing light
|
||||
- Most of sprite in shadow
|
||||
- Dramatic silhouette effect
|
||||
|
||||
### Multiple Light Sources
|
||||
|
||||
**Example: Fire + Moonlight**
|
||||
- Fire (warm orange): bottom and left
|
||||
- Moon (cool blue): top and right
|
||||
- Mixing creates interesting color interplay
|
||||
|
||||
## Texture Suggestions with Dithering
|
||||
|
||||
### Stone/Rock Texture
|
||||
|
||||
Use irregular dithering pattern:
|
||||
```
|
||||
A A B A A B A
|
||||
A B A A B A A
|
||||
B A A B A A B
|
||||
A A B A B A A
|
||||
```
|
||||
|
||||
Mix 2-3 related gray/brown tones.
|
||||
|
||||
### Metal Texture
|
||||
|
||||
Use horizontal line dithering:
|
||||
```
|
||||
A A A A A A A
|
||||
B B B B B B B
|
||||
A A A A A A A
|
||||
A A A A A A A
|
||||
B B B B B B B
|
||||
```
|
||||
|
||||
Creates brushed metal effect.
|
||||
|
||||
### Fabric Texture
|
||||
|
||||
Use soft checkerboard:
|
||||
```
|
||||
A A B A A B A
|
||||
A A A A A A A
|
||||
B A A B A A B
|
||||
A A A A A A A
|
||||
```
|
||||
|
||||
Suggests woven or cloth texture.
|
||||
|
||||
### Wood Grain
|
||||
|
||||
Use wavy vertical lines:
|
||||
```
|
||||
A B A A B A A
|
||||
A A B A A B A
|
||||
A B A A B A A
|
||||
A A B A B A A
|
||||
```
|
||||
|
||||
Suggests wood grain direction.
|
||||
|
||||
## Performance Benchmarks
|
||||
|
||||
**Color Quantization:**
|
||||
- 64x64 sprite, 100 colors → 16 colors: ~150ms
|
||||
- 128x128 sprite, 500 colors → 32 colors: ~400ms
|
||||
- 256x256 sprite, 1000 colors → 64 colors: ~1200ms
|
||||
|
||||
**Dithering:**
|
||||
- Floyd-Steinberg, 64x64: ~200ms
|
||||
- Floyd-Steinberg, 128x128: ~600ms
|
||||
- Bayer 4x4, 64x64: ~80ms
|
||||
- Bayer 4x4, 128x128: ~250ms
|
||||
|
||||
**Manual Pixel Operations:**
|
||||
- Drawing single pixel: <5ms
|
||||
- Drawing 100 pixels (batch): ~20ms
|
||||
- Palette update: ~15ms
|
||||
|
||||
## Common Mistakes and Fixes
|
||||
|
||||
### Mistake: Pillow Shading
|
||||
|
||||
**Problem**: Shading around edges instead of from light source.
|
||||
|
||||
**Looks Like:**
|
||||
```
|
||||
. . . X X X . .
|
||||
. X x x x x X .
|
||||
X x o o o o x X
|
||||
X x o o o o x X
|
||||
. X x x x x X .
|
||||
. . . X X X . .
|
||||
```
|
||||
|
||||
Where o = base, x = shadow, X = dark shadow (all around edge).
|
||||
|
||||
**Fix**: Shade from consistent light direction:
|
||||
```
|
||||
. . H H H X X .
|
||||
. H h o o x X .
|
||||
H h o o o o x X
|
||||
H h o o o o x X
|
||||
. H h x x x X .
|
||||
. . H X X X . .
|
||||
```
|
||||
|
||||
Where H = highlight, h = light, o = base, x = shadow, X = dark shadow (directional).
|
||||
|
||||
### Mistake: Pure Black Shadows
|
||||
|
||||
**Problem**: Using #000000 for shadows makes them look flat and dead.
|
||||
|
||||
**Fix**: Use dark version of base color with hue shift:
|
||||
- Base: #ff6b6b (red)
|
||||
- Bad shadow: #000000 (pure black)
|
||||
- Good shadow: #5a1a1a (dark red with slight purple shift)
|
||||
|
||||
### Mistake: Banding in Gradients
|
||||
|
||||
**Problem**: Visible steps in gradients due to too few colors.
|
||||
|
||||
**Fix**: Apply dithering between color steps:
|
||||
```
|
||||
Bad:
|
||||
AAAABBBBCCCCDDDD
|
||||
|
||||
Good (with dithering):
|
||||
AAAAA/BBA/BB/CCB/CCC/DCD/DDDD
|
||||
```
|
||||
|
||||
Where / represents dithered transition.
|
||||
|
||||
### Mistake: Over-Antialiasing
|
||||
|
||||
**Problem**: Too many AA pixels make edges blurry.
|
||||
|
||||
**Fix**: Use 1-pixel wide AA only where needed:
|
||||
- Bad: 2-3 pixels of intermediate colors (blurry)
|
||||
- Good: 1 pixel of intermediate color at steps only
|
||||
|
||||
## Color Harmony Examples
|
||||
|
||||
### Monochromatic (Blue)
|
||||
|
||||
```
|
||||
#001f3f (dark blue)
|
||||
#0074D9 (medium blue)
|
||||
#7FDBFF (light blue)
|
||||
#aef3ff (very light blue)
|
||||
```
|
||||
|
||||
### Analogous (Red-Orange-Yellow)
|
||||
|
||||
```
|
||||
#ff4136 (red)
|
||||
#ff851b (orange)
|
||||
#ffdc00 (yellow)
|
||||
```
|
||||
|
||||
### Complementary (Blue-Orange)
|
||||
|
||||
```
|
||||
#0074D9 (blue)
|
||||
#ff851b (orange)
|
||||
```
|
||||
|
||||
### Triadic (Red-Yellow-Blue)
|
||||
|
||||
```
|
||||
#ff4136 (red)
|
||||
#ffdc00 (yellow)
|
||||
#0074D9 (blue)
|
||||
```
|
||||
|
||||
### Split Complementary (Blue + Red-Orange + Yellow-Orange)
|
||||
|
||||
```
|
||||
#0074D9 (blue)
|
||||
#ff4136 (red-orange)
|
||||
#ffdc00 (yellow-orange)
|
||||
```
|
||||
Reference in New Issue
Block a user