Pixel Art Animator

What this skill does

# Pixel Art Animator

## Overview

This Skill handles all animation-related tasks for sprites, including frame management, timing, animation tags (sequences), and linked cels for efficient animation.

## When to Use

Use this Skill when the user:
- Wants to "animate" a sprite or "add animation"
- Mentions "frames", "keyframes", or "frame rate"
- Describes motion: "walk cycle", "run cycle", "idle animation", "attack animation"
- Asks about "animation tags", "loops", or "playback"
- Wants to create "sprite sheets" for animation (coordinate with exporter Skill)

**Trigger Keywords:** animate, animation, frames, walk cycle, run, idle, attack, loop, movement, motion

## Instructions

### 1. Understanding Animation Basics

**Frame**: A single image in an animation sequence. Sprites start with 1 frame.

**Frame Duration**: How long each frame displays (in milliseconds). Default: 100ms (10 FPS).

**Animation Tag**: Named sequence of frames (e.g., "walk" frames 1-4, "idle" frames 5-8).

**Linked Cel**: A cel that shares image data with another cel. Editing one updates all linked cels.

**Playback Direction**:
- **Forward**: Frames play 1 → 2 → 3 → 4, then loop
- **Reverse**: Frames play 4 → 3 → 2 → 1, then loop
- **Ping-pong**: Frames play 1 → 2 → 3 → 4 → 3 → 2 → 1, then loop

### 2. Creating Animation Frames

**Adding Frames:**
Use `mcp__aseprite__add_frame` to create new frames:
- Frames are numbered starting from 1
- New frames start as copies of the current frame (or blank)

**Common Frame Counts:**
- **Idle Animation**: 2-4 frames (subtle movement)
- **Walk Cycle**: 4-8 frames (legs alternate)
- **Run Cycle**: 6-8 frames (faster, exaggerated)
- **Attack Animation**: 3-6 frames (windup, strike, recovery)
- **Jump**: 4-6 frames (crouch, ascend, peak, descend, land)

**Duplicating Frames:**
Use `mcp__aseprite__duplicate_frame` to copy existing frames:
- Useful for creating variations
- Starting point for similar frames

**Deleting Frames:**
Use `mcp__aseprite__delete_frame` to remove frames:
- Cannot delete the last remaining frame
- Frames are renumbered after deletion

### 3. Setting Frame Timing

**Frame Duration:**
Use `mcp__aseprite__set_frame_duration`:
- Duration in milliseconds (ms)
- 100ms = 10 FPS
- 50ms = 20 FPS
- 33ms ≈ 30 FPS
- 16ms ≈ 60 FPS

**Common Timing Patterns:**

**Even Timing:**
All frames same duration. Simple and predictable.
- Walk cycle: all frames 100ms (smooth 10 FPS)

**Variable Timing:**
Different durations for emphasis.
- Idle: slow frames (150ms) for breathing effect
- Attack: fast strike (30ms), slower recovery (100ms)

**Hold Frames:**
Longer duration for dramatic effect.
- Jump peak: 200ms (hang time)
- Impact: 50ms (quick flash)

### 4. Creating Animation Tags

**Purpose:** Organize frames into named sequences.

Use `mcp__aseprite__create_tag`:
- Name: "walk", "idle", "attack", etc.
- From Frame: starting frame (1-indexed)
- To Frame: ending frame (inclusive)
- Direction: "forward", "reverse", or "ping-pong"

**Example Tags:**
- Tag "idle": frames 1-2, ping-pong direction
- Tag "walk": frames 3-6, forward direction
- Tag "attack": frames 7-10, forward direction

**Benefits:**
- Export specific animations separately
- Organize complex sprite sheets
- Game engines can reference tags

### 5. Using Linked Cels

**Purpose:** Share image data across frames to save memory and maintain consistency.

Use `mcp__aseprite__link_cel`:
- Useful when frame content doesn't change
- Example: background layer stays same across animation
- Editing one linked cel updates all

**When to Use:**
- Static background elements
- Character face in walk cycle (if body animates separately)
- Repeated frames in animation

**Workflow:**
1. Create frames with content
2. Link cels that should share data
3. Edit once, updates everywhere

### 6. Animation Workflows

**Workflow 1: Walk Cycle (4 frames)**

1. Create base sprite (or use existing)
2. Add 3 more frames (total 4)
3. Edit each frame for walk positions:
   - Frame 1: Left foot forward
   - Frame 2: Contact (both feet touching)
   - Frame 3: Right foot forward
   - Frame 4: Contact (both feet touching)
4. Set all frames to 100ms duration
5. Create tag "walk": frames 1-4, forward direction

**Workflow 2: Idle Animation (2 frames)**

1. Create base sprite
2. Add 1 more frame (total 2)
3. Slight variations:
   - Frame 1: Normal stance
   - Frame 2: Subtle movement (breathing, blinking)
4. Set frames to 500ms duration (slow, subtle)
5. Create tag "idle": frames 1-2, ping-pong direction

**Workflow 3: Complex Multi-Animation Sprite**

1. Create base sprite
2. Add enough frames for all animations:
   - Idle: 2 frames
   - Walk: 4 frames
   - Jump: 4 frames
   - Total: 10 frames
3. Arrange frames sequentially
4. Create separate tags:
   - Tag "idle": frames 1-2
   - Tag "walk": frames 3-6
   - Tag "jump": frames 7-10
5. Set appropriate frame durations per animation

## Examples

### Example 1: Simple 2-Frame Idle

**User Request:**
> "Add a simple idle animation to this sprite"

**Approach:**
1. Add 1 frame (now have frame 1 and 2)
2. On frame 2, make subtle change (move pixels up/down 1-2 pixels)
3. Set both frames to 500ms duration
4. Create tag "idle": frames 1-2, ping-pong direction
5. Result: gentle back-and-forth idle motion

### Example 2: 4-Frame Walk Cycle

**User Request:**
> "Create a walk cycle animation for this character"

**Approach:**
1. Add 3 frames (now have 1, 2, 3, 4)
2. Edit each frame for walk poses
3. Set all frames to 100ms duration
4. Create tag "walk": frames 1-4, forward direction
5. Result: looping walk animation at 10 FPS

### Example 3: Variable Timing Attack

**User Request:**
> "Add an attack animation with a fast strike"

**Approach:**
1. Add 5 frames (total 6 frames, assuming frame 1 exists)
2. Frame sequence:
   - Frame 2: Windup (slow)
   - Frame 3: Prepare (slow)
   - Frame 4: Strike (fast)
   - Frame 5: Follow-through (medium)
   - Frame 6: Recovery (slow)
3. Set durations:
   - Frames 2-3: 150ms (slow windup)
   - Frame 4: 30ms (fast strike)
   - Frame 5: 80ms (medium follow-through)
   - Frame 6: 120ms (slow recovery)
4. Create tag "attack": frames 2-6, forward direction

### Example 4: Linked Background

**User Request:**
> "Animate the character but keep the background static"

**Approach:**
1. Assume 2 layers: "Background", "Character"
2. Add frames for animation
3. Edit "Character" layer on each frame for animation
4. Link all cels on "Background" layer:
   - Link frame 2's background to frame 1
   - Link frame 3's background to frame 1
   - Link frame 4's background to frame 1
5. Background stays identical, character animates

## Technical Details

### Frame Numbering
- Frames are 1-indexed (first frame is frame 1)
- Adding frame at position N inserts at that position
- Deleting frame N renumbers subsequent frames

### Frame Duration Limits
- Minimum: 1ms (not recommended, too fast)
- Maximum: 65535ms (65.5 seconds)
- Practical range: 16ms (60 FPS) to 500ms (2 FPS)

### Animation Tag Limits
- No hard limit on number of tags
- Tags can overlap frames
- Tag names should be unique and descriptive

### Linked Cel Behavior
- Editing one linked cel updates all linked instances
- Unlinking creates independent copy
- Useful for memory optimization in large animations

### Performance
- Adding frame: <20ms
- Duplicating frame: <30ms
- Setting frame duration: <10ms
- Creating tag: <15ms
- Linking cel: <25ms

## Common Patterns

### Pattern: Breathing Idle
2 frames, ping-pong, slow timing (400-500ms)
- Frame 1: Normal
- Frame 2: Slight vertical shift (1-2 pixels)

### Pattern: Basic Walk
4 frames, forward, even timing (100ms)
- Frame 1: Left foot forward, right foot back
- Frame 2: Both feet together (contact)
- Frame 3: Right foot forward, left foot back
- Frame 4: Both feet together (contact)

### Pattern: Run Cycle
6-8 frames, forward, faster timing (60-80ms)
- More exaggerated poses than walk
- Longer strides
- Leaning forward

### Pattern: Jump Sequence
5-6 frames