Initial commit
This commit is contained in:
Zhongwei Li
270
skills/pixel-art-animator/reference.md
Normal file
270
skills/pixel-art-animator/reference.md
Normal file
@@ -0,0 +1,270 @@
|
||||
# Pixel Art Animator - Technical Reference
|
||||
|
||||
## Frame Rate Conversions
|
||||
|
||||
| FPS | Frame Duration (ms) | Use Case |
|
||||
|-----|-------------------|----------|
|
||||
| 60 | 16-17 | Smooth modern games, very fast animation |
|
||||
| 30 | 33 | Standard modern animation |
|
||||
| 24 | 42 | Film-like animation |
|
||||
| 20 | 50 | Smooth retro animation |
|
||||
| 15 | 67 | Retro game animation |
|
||||
| 12 | 83 | Traditional animation (on twos) |
|
||||
| 10 | 100 | Classic pixel art animation |
|
||||
| 8 | 125 | Slower animation |
|
||||
| 6 | 167 | Very slow animation |
|
||||
| 4 | 250 | Idle/breathing animations |
|
||||
| 2 | 500 | Very slow idle effects |
|
||||
|
||||
## Classic Animation Cycles
|
||||
|
||||
### Walk Cycle (4 frames)
|
||||
```
|
||||
Frame 1: Contact (right foot forward)
|
||||
Frame 2: Down (compression)
|
||||
Frame 3: Pass (left foot passing)
|
||||
Frame 4: Up (right foot pushes off)
|
||||
```
|
||||
|
||||
### Run Cycle (8 frames)
|
||||
```
|
||||
Frame 1: Contact right
|
||||
Frame 2: Down right
|
||||
Frame 3: Pass
|
||||
Frame 4: Up left
|
||||
Frame 5: Contact left
|
||||
Frame 6: Down left
|
||||
Frame 7: Pass
|
||||
Frame 8: Up right
|
||||
```
|
||||
|
||||
### Idle Breathing (2-4 frames)
|
||||
```
|
||||
2-frame:
|
||||
- Frame 1: Normal
|
||||
- Frame 2: Slight rise (+1-2 pixels vertically)
|
||||
|
||||
4-frame:
|
||||
- Frame 1: Normal
|
||||
- Frame 2: Inhale (expand)
|
||||
- Frame 3: Hold (peak)
|
||||
- Frame 4: Exhale (contract)
|
||||
```
|
||||
|
||||
## Animation Principles (applied to pixel art)
|
||||
|
||||
### 1. Timing
|
||||
- Slow movements: more frames, longer durations
|
||||
- Fast movements: fewer frames, shorter durations
|
||||
- Impacts: very short duration (30-50ms)
|
||||
|
||||
### 2. Anticipation
|
||||
- Windup before action (crouch before jump)
|
||||
- 1-2 frames of preparation
|
||||
- Makes action feel more powerful
|
||||
|
||||
### 3. Follow-through
|
||||
- Continuation after main action
|
||||
- Hair, clothes continue moving after body stops
|
||||
- 1-2 frames of settling
|
||||
|
||||
### 4. Ease In/Ease Out
|
||||
- Slow start, fast middle, slow end
|
||||
- Variable frame durations:
|
||||
- Start: 150ms
|
||||
- Middle: 50ms
|
||||
- End: 150ms
|
||||
|
||||
### 5. Arcs
|
||||
- Natural motion follows arcs, not straight lines
|
||||
- Jumping: arc trajectory
|
||||
- Swinging arms: arc motion
|
||||
|
||||
### 6. Squash and Stretch
|
||||
- Exaggeration for impact
|
||||
- Ball bouncing: squash on impact, stretch in air
|
||||
- 1-2 pixels of deformation
|
||||
|
||||
## Retro Console Frame Limitations
|
||||
|
||||
### NES (Nintendo Entertainment System)
|
||||
- Typical: 60 FPS engine, animations at 10-15 FPS
|
||||
- Sprite flicker for >8 sprites/scanline
|
||||
- Limited sprite sizes influenced animation
|
||||
|
||||
### Game Boy
|
||||
- 60 FPS capability, animations at 8-15 FPS
|
||||
- Simple animations due to small sprites
|
||||
- 2-4 frame cycles common
|
||||
|
||||
### SNES (Super Nintendo)
|
||||
- 60 FPS capable, smoother animations possible
|
||||
- 8-16 frame animations for characters
|
||||
- More detailed animation than NES
|
||||
|
||||
## Frame Count Guidelines
|
||||
|
||||
| Animation Type | Frame Count | Typical FPS | Notes |
|
||||
|----------------|-------------|-------------|-------|
|
||||
| Idle | 2-4 | 4-6 | Subtle, looping |
|
||||
| Walk | 4-8 | 10-12 | Even, rhythmic |
|
||||
| Run | 6-12 | 12-15 | Faster than walk |
|
||||
| Jump | 4-8 | 12-15 | Arc motion |
|
||||
| Attack | 3-8 | 12-20 | Fast strike, slow recovery |
|
||||
| Death | 5-10 | 8-12 | Dramatic, doesn't loop |
|
||||
| Spell Cast | 4-10 | 10-15 | Buildup, release, recovery |
|
||||
| Item Use | 3-6 | 12-15 | Quick action |
|
||||
|
||||
## Animation Tag Best Practices
|
||||
|
||||
### Naming Conventions
|
||||
- Lowercase, descriptive names
|
||||
- Examples: "idle", "walk", "run", "attack", "jump", "death"
|
||||
- Variations: "walk_left", "walk_right", "attack_1", "attack_2"
|
||||
|
||||
### Organization Strategies
|
||||
|
||||
**Sequential Layout:**
|
||||
```
|
||||
Frames 1-2: idle
|
||||
Frames 3-6: walk
|
||||
Frames 7-12: run
|
||||
Frames 13-17: attack
|
||||
```
|
||||
|
||||
**Grouped Layout:**
|
||||
```
|
||||
Frames 1-10: Player character animations
|
||||
Frames 11-20: Enemy character animations
|
||||
Frames 21-30: Special effects
|
||||
```
|
||||
|
||||
### Playback Directions
|
||||
|
||||
**Forward:**
|
||||
- Most animations (walk, run, attack)
|
||||
- Plays once through, then loops
|
||||
|
||||
**Reverse:**
|
||||
- Rare, for special effects
|
||||
- Rewinding animations
|
||||
|
||||
**Ping-pong:**
|
||||
- Idle breathing
|
||||
- Flickering effects
|
||||
- Oscillating animations
|
||||
- Plays forward, then backward, then repeats
|
||||
|
||||
## Linked Cel Strategies
|
||||
|
||||
### When to Use
|
||||
1. **Static backgrounds** across animated character
|
||||
2. **Unchanged parts** of character (e.g., hat while body animates)
|
||||
3. **Repeated frames** in cycle (exact duplicates)
|
||||
4. **Memory optimization** for large sprites
|
||||
|
||||
### When NOT to Use
|
||||
1. **Every frame is different** (no shared data)
|
||||
2. **Small sprites** (minimal memory saved)
|
||||
3. **Experimental animations** (may need to edit each frame)
|
||||
|
||||
### Workflow
|
||||
1. Create frames
|
||||
2. Identify repeated/static content
|
||||
3. Link cels for that content
|
||||
4. Edit linked cel once, updates all
|
||||
|
||||
## Performance Considerations
|
||||
|
||||
### Efficient Animation
|
||||
- **Batch operations:** Add multiple frames at once when possible
|
||||
- **Duplicate then edit:** Faster than creating from scratch
|
||||
- **Link static content:** Saves memory and editing time
|
||||
|
||||
### Large Sprites
|
||||
- 128x128+ sprites with many frames can be slow
|
||||
- Consider breaking into smaller parts
|
||||
- Use layers and linked cels strategically
|
||||
|
||||
## Common Timing Patterns
|
||||
|
||||
### Even Timing (simplest)
|
||||
```
|
||||
All frames: 100ms
|
||||
```
|
||||
Predictable, easy to edit.
|
||||
|
||||
### Hold First Frame
|
||||
```
|
||||
Frame 1: 200ms (starting pose)
|
||||
Frames 2-4: 100ms (action)
|
||||
```
|
||||
Emphasizes starting position.
|
||||
|
||||
### Hold Last Frame
|
||||
```
|
||||
Frames 1-3: 100ms (action)
|
||||
Frame 4: 200ms (ending pose)
|
||||
```
|
||||
Emphasizes ending position.
|
||||
|
||||
### Fast Action
|
||||
```
|
||||
Frame 1: 150ms (anticipation)
|
||||
Frame 2: 30ms (strike)
|
||||
Frame 3: 100ms (follow-through)
|
||||
```
|
||||
Creates snappy, impactful feel.
|
||||
|
||||
### Slow Buildup
|
||||
```
|
||||
Frame 1: 200ms
|
||||
Frame 2: 150ms
|
||||
Frame 3: 100ms
|
||||
Frame 4: 50ms
|
||||
```
|
||||
Accelerating motion.
|
||||
|
||||
## Sprite Sheet Export Considerations
|
||||
|
||||
When planning animations for export:
|
||||
|
||||
1. **Frame Layout:**
|
||||
- Horizontal strip: all frames in one row
|
||||
- Vertical strip: all frames in one column
|
||||
- Grid: frames arranged in rows/columns
|
||||
|
||||
2. **Frame Dimensions:**
|
||||
- Keep all frames same size for easy parsing
|
||||
- Padding between frames if needed
|
||||
|
||||
3. **Animation Tags:**
|
||||
- Export tags separately or together
|
||||
- Game engines can reference tag names
|
||||
|
||||
4. **File Format:**
|
||||
- GIF for simple web animations (256 colors max)
|
||||
- PNG sequence for high quality
|
||||
- Sprite sheet for game engines
|
||||
|
||||
## Integration with Game Engines
|
||||
|
||||
### Unity
|
||||
- Import sprite sheet
|
||||
- Use Unity's animation system
|
||||
- Reference animation tags (if exported in metadata)
|
||||
|
||||
### Godot
|
||||
- SpriteFrames resource
|
||||
- AnimationPlayer node
|
||||
- Import PNG sequences or sprite sheets
|
||||
|
||||
### Phaser (JavaScript)
|
||||
- Load sprite sheet
|
||||
- Define animations with frame ranges
|
||||
- Play animations by name
|
||||
|
||||
### GameMaker
|
||||
- Import sprite strip
|
||||
- Set frames per second
|
||||
- Automatic loop on last frame
|
||||
Reference in New Issue
Block a user