pixel-art-animator

name	Pixel Art Animator
description	Create and manage sprite animations with multiple frames, animation tags, frame durations, and linked cels. Use when the user wants to animate a sprite, add animation, create movement, make it move, mentions "animation", "animated", "frames", "keyframes", "frame rate", "FPS", "timing", "duration", "walk cycle", "run cycle", "idle animation", "attack animation", "jump", "movement", "motion", or describes actions like "walking", "running", "jumping", "attacking", "breathing", "bobbing", "bouncing". Trigger on animation tags, loops, playback, sequences, "add frames", "duplicate frame", "frame timing", "ping-pong", "loop", "sequence". Also for linked cels, static backgrounds, and frame optimization.
allowed-tools	Read, Bash, mcp__aseprite__add_frame, mcp__aseprite__delete_frame, mcp__aseprite__duplicate_frame, mcp__aseprite__set_frame_duration, mcp__aseprite__create_tag, mcp__aseprite__delete_tag, mcp__aseprite__link_cel, mcp__aseprite__get_sprite_info, mcp__aseprite__draw_pixels, mcp__aseprite__draw_line, mcp__aseprite__draw_rectangle, mcp__aseprite__draw_circle

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, forward, variable timing

• Frame 1: Crouch (100ms)
• Frame 2: Launch (50ms)
• Frame 3: Ascend (80ms)
• Frame 4: Peak (200ms) - hang time
• Frame 5: Descend (80ms)
• Frame 6: Land (100ms)

Integration with Other Skills

• Start with pixel-art-creator to create base sprite before animating
• Use pixel-art-professional for polish (shading, antialiasing) after animation
• Hand off to pixel-art-exporter when user wants to export spritesheet or GIF

Error Handling

Cannot delete last frame:

• Sprites must have at least 1 frame
• Inform user if they try to delete last frame

Invalid frame numbers:

• Frame numbers must be 1 to N (where N is total frames)
• Check bounds before operations

Tag frame range errors:

• "From" frame must be ≤ "To" frame
• Both must be valid frame numbers

Success Indicators

You've successfully used this Skill when:

• Frames added/modified correctly
• Frame durations set appropriately for desired FPS
• Animation tags created with correct ranges
• User understands animation will loop or play as specified
• Animation is ready for export or further refinement