Pixel Art Animator

1---
2name: Pixel Art Animator
3description: 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.
4allowed-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
5---
6 
7# Pixel Art Animator
8 
9## Overview
10 
11This Skill handles all animation-related tasks for sprites, including frame management, timing, animation tags (sequences), and linked cels for efficient animation.
12 
13## When to Use
14 
15Use this Skill when the user:
16- Wants to "animate" a sprite or "add animation"
17- Mentions "frames", "keyframes", or "frame rate"
18- Describes motion: "walk cycle", "run cycle", "idle animation", "attack animation"
19- Asks about "animation tags", "loops", or "playback"
20- Wants to create "sprite sheets" for animation (coordinate with exporter Skill)
21 
22**Trigger Keywords:** animate, animation, frames, walk cycle, run, idle, attack, loop, movement, motion
23 
24## Instructions
25 
26### 1. Understanding Animation Basics
27 
28**Frame**: A single image in an animation sequence. Sprites start with 1 frame.
29 
30**Frame Duration**: How long each frame displays (in milliseconds). Default: 100ms (10 FPS).
31 
32**Animation Tag**: Named sequence of frames (e.g., "walk" frames 1-4, "idle" frames 5-8).
33 
34**Linked Cel**: A cel that shares image data with another cel. Editing one updates all linked cels.
35 
36**Playback Direction**:
37- **Forward**: Frames play 1 → 2 → 3 → 4, then loop
38- **Reverse**: Frames play 4 → 3 → 2 → 1, then loop
39- **Ping-pong**: Frames play 1 → 2 → 3 → 4 → 3 → 2 → 1, then loop
40 
41### 2. Creating Animation Frames
42 
43**Adding Frames:**
44Use `mcp__aseprite__add_frame` to create new frames:
45- Frames are numbered starting from 1
46- New frames start as copies of the current frame (or blank)
47 
48**Common Frame Counts:**
49- **Idle Animation**: 2-4 frames (subtle movement)
50- **Walk Cycle**: 4-8 frames (legs alternate)
51- **Run Cycle**: 6-8 frames (faster, exaggerated)
52- **Attack Animation**: 3-6 frames (windup, strike, recovery)
53- **Jump**: 4-6 frames (crouch, ascend, peak, descend, land)
54 
55**Duplicating Frames:**
56Use `mcp__aseprite__duplicate_frame` to copy existing frames:
57- Useful for creating variations
58- Starting point for similar frames
59 
60**Deleting Frames:**
61Use `mcp__aseprite__delete_frame` to remove frames:
62- Cannot delete the last remaining frame
63- Frames are renumbered after deletion
64 
65### 3. Setting Frame Timing
66 
67**Frame Duration:**
68Use `mcp__aseprite__set_frame_duration`:
69- Duration in milliseconds (ms)
70- 100ms = 10 FPS
71- 50ms = 20 FPS
72- 33ms ≈ 30 FPS
73- 16ms ≈ 60 FPS
74 
75**Common Timing Patterns:**
76 
77**Even Timing:**
78All frames same duration. Simple and predictable.
79- Walk cycle: all frames 100ms (smooth 10 FPS)
80 
81**Variable Timing:**
82Different durations for emphasis.
83- Idle: slow frames (150ms) for breathing effect
84- Attack: fast strike (30ms), slower recovery (100ms)
85 
86**Hold Frames:**
87Longer duration for dramatic effect.
88- Jump peak: 200ms (hang time)
89- Impact: 50ms (quick flash)
90 
91### 4. Creating Animation Tags
92 
93**Purpose:** Organize frames into named sequences.
94 
95Use `mcp__aseprite__create_tag`:
96- Name: "walk", "idle", "attack", etc.
97- From Frame: starting frame (1-indexed)
98- To Frame: ending frame (inclusive)
99- Direction: "forward", "reverse", or "ping-pong"
100 
101**Example Tags:**
102- Tag "idle": frames 1-2, ping-pong direction
103- Tag "walk": frames 3-6, forward direction
104- Tag "attack": frames 7-10, forward direction
105 
106**Benefits:**
107- Export specific animations separately
108- Organize complex sprite sheets
109- Game engines can reference tags
110 
111### 5. Using Linked Cels
112 
113**Purpose:** Share image data across frames to save memory and maintain consistency.
114 
115Use `mcp__aseprite__link_cel`:
116- Useful when frame content doesn't change
117- Example: background layer stays same across animation
118- Editing one linked cel updates all
119 
120**When to Use:**
121- Static background elements
122- Character face in walk cycle (if body animates separately)
123- Repeated frames in animation
124 
125**Workflow:**
1261. Create frames with content
1272. Link cels that should share data
1283. Edit once, updates everywhere
129 
130### 6. Animation Workflows
131 
132**Workflow 1: Walk Cycle (4 frames)**
133 
1341. Create base sprite (or use existing)
1352. Add 3 more frames (total 4)
1363. Edit each frame for walk positions:
137   - Frame 1: Left foot forward
138   - Frame 2: Contact (both feet touching)
139   - Frame 3: Right foot forward
140   - Frame 4: Contact (both feet touching)
1414. Set all frames to 100ms duration
1425. Create tag "walk": frames 1-4, forward direction
143 
144**Workflow 2: Idle Animation (2 frames)**
145 
1461. Create base sprite
1472. Add 1 more frame (total 2)
1483. Slight variations:
149   - Frame 1: Normal stance
150   - Frame 2: Subtle movement (breathing, blinking)
1514. Set frames to 500ms duration (slow, subtle)
1525. Create tag "idle": frames 1-2, ping-pong direction
153 
154**Workflow 3: Complex Multi-Animation Sprite**
155 
1561. Create base sprite
1572. Add enough frames for all animations:
158   - Idle: 2 frames
159   - Walk: 4 frames
160   - Jump: 4 frames
161   - Total: 10 frames
1623. Arrange frames sequentially
1634. Create separate tags:
164   - Tag "idle": frames 1-2
165   - Tag "walk": frames 3-6
166   - Tag "jump": frames 7-10
1675. Set appropriate frame durations per animation
168 
169## Examples
170 
171### Example 1: Simple 2-Frame Idle
172 
173**User Request:**
174> "Add a simple idle animation to this sprite"
175 
176**Approach:**
1771. Add 1 frame (now have frame 1 and 2)
1782. On frame 2, make subtle change (move pixels up/down 1-2 pixels)
1793. Set both frames to 500ms duration
1804. Create tag "idle": frames 1-2, ping-pong direction
1815. Result: gentle back-and-forth idle motion
182 
183### Example 2: 4-Frame Walk Cycle
184 
185**User Request:**
186> "Create a walk cycle animation for this character"
187 
188**Approach:**
1891. Add 3 frames (now have 1, 2, 3, 4)
1902. Edit each frame for walk poses
1913. Set all frames to 100ms duration
1924. Create tag "walk": frames 1-4, forward direction
1935. Result: looping walk animation at 10 FPS
194 
195### Example 3: Variable Timing Attack
196 
197**User Request:**
198> "Add an attack animation with a fast strike"
199 
200**Approach:**
2011. Add 5 frames (total 6 frames, assuming frame 1 exists)
2022. Frame sequence:
203   - Frame 2: Windup (slow)
204   - Frame 3: Prepare (slow)
205   - Frame 4: Strike (fast)
206   - Frame 5: Follow-through (medium)
207   - Frame 6: Recovery (slow)
2083. Set durations:
209   - Frames 2-3: 150ms (slow windup)
210   - Frame 4: 30ms (fast strike)
211   - Frame 5: 80ms (medium follow-through)
212   - Frame 6: 120ms (slow recovery)
2134. Create tag "attack": frames 2-6, forward direction
214 
215### Example 4: Linked Background
216 
217**User Request:**
218> "Animate the character but keep the background static"
219 
220**Approach:**
2211. Assume 2 layers: "Background", "Character"
2222. Add frames for animation
2233. Edit "Character" layer on each frame for animation
2244. Link all cels on "Background" layer:
225   - Link frame 2's background to frame 1
226   - Link frame 3's background to frame 1
227   - Link frame 4's background to frame 1
2285. Background stays identical, character animates
229 
230## Technical Details
231 
232### Frame Numbering
233- Frames are 1-indexed (first frame is frame 1)
234- Adding frame at position N inserts at that position
235- Deleting frame N renumbers subsequent frames
236 
237### Frame Duration Limits
238- Minimum: 1ms (not recommended, too fast)
239- Maximum: 65535ms (65.5 seconds)
240- Practical range: 16ms (60 FPS) to 500ms (2 FPS)
241 
242### Animation Tag Limits
243- No hard limit on number of tags
244- Tags can overlap frames
245- Tag names should be unique and descriptive
246 
247### Linked Cel Behavior
248- Editing one linked cel updates all linked instances
249- Unlinking creates independent copy
250- Useful for memory optimization in large animations
251 
252### Performance
253- Adding frame: <20ms
254- Duplicating frame: <30ms
255- Setting frame duration: <10ms
256- Creating tag: <15ms
257- Linking cel: <25ms
258 
259## Common Patterns
260 
261### Pattern: Breathing Idle
2622 frames, ping-pong, slow timing (400-500ms)
263- Frame 1: Normal
264- Frame 2: Slight vertical shift (1-2 pixels)
265 
266### Pattern: Basic Walk
2674 frames, forward, even timing (100ms)
268- Frame 1: Left foot forward, right foot back
269- Frame 2: Both feet together (contact)
270- Frame 3: Right foot forward, left foot back
271- Frame 4: Both feet together (contact)
272 
273### Pattern: Run Cycle
2746-8 frames, forward, faster timing (60-80ms)
275- More exaggerated poses than walk
276- Longer strides
277- Leaning forward
278 
279### Pattern: Jump Sequence
2805-6 frames, forward, variable timing
281- Frame 1: Crouch (100ms)
282- Frame 2: Launch (50ms)
283- Frame 3: Ascend (80ms)
284- Frame 4: Peak (200ms) - hang time
285- Frame 5: Descend (80ms)
286- Frame 6: Land (100ms)
287 
288## Integration with Other Skills
289 
290- **Start with pixel-art-creator** to create base sprite before animating
291- **Use pixel-art-professional** for polish (shading, antialiasing) after animation
292- **Hand off to pixel-art-exporter** when user wants to export spritesheet or GIF
293 
294## Error Handling
295 
296**Cannot delete last frame:**
297- Sprites must have at least 1 frame
298- Inform user if they try to delete last frame
299 
300**Invalid frame numbers:**
301- Frame numbers must be 1 to N (where N is total frames)
302- Check bounds before operations
303 
304**Tag frame range errors:**
305- "From" frame must be ≤ "To" frame
306- Both must be valid frame numbers
307 
308## Success Indicators
309 
310You've successfully used this Skill when:
311- Frames added/modified correctly
312- Frame durations set appropriately for desired FPS
313- Animation tags created with correct ranges
314- User understands animation will loop or play as specified
315- Animation is ready for export or further refinement
316