pixel-art-animator

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