Animate a cycle
Before you start
The sprite must be rigged onto named layers — see aseprite:rig. Animating a
flattened sprite means redrawing every frame by hand.
Procedure
0. With a storyboard
If aseprite:concept delivered a storyboard, its panels are the key poses —
the plan in step 1 is written from them, not invented. Import it once the
frames exist: frame op="add" count=N-1, then
reference op="import" path=… grid={columns: N, rows: 1} puts panel i on
frame i. Every frame then has its own reference, and look op="compare" frame=i checks that frame against its panel — do that for each key in
step 4. The PixelSpec's per-frame notes and deviations still decide what
survives at this size: a storyboard can suggest a 4px jump the timing
cannot carry.
1. Plan the key poses
Write them out before touching a frame. For a walk:
- Contact — front foot lands, back foot pushing. Widest stance.
- Down — weight on the front leg, body lowest.
- Pass — legs together, body highest. The frame everyone forgets, and its absence is why a walk looks like sliding.
- Up — pushing off, rising.
Then mirror for the other leg: 8 frames. A 4-frame walk uses contact and pass per leg.
Idle: 2–4 frames, a breath — chest rises a pixel, shoulders follow one frame later. Attack: anticipation, strike, hold, recover.
2. Create the frames
frame op="add" count=7
Already done if a storyboard was imported in step 0 — the import needs them.
3. Block the key poses
Move limbs by moving cels, not by redrawing:
cel op="copy" layer="arm-near" frame=1 toFrame=3 cel op="move" layer="arm-near" frame=3 dx=2 dy=-1
Redraw only where a part genuinely changes shape — a foreshortened arm, a
bending knee. Do that redraw as a grid: look op="ascii" layer=… frame=… rulers=false region=… on the part in the previous key, edit the rows into the
new shape, and draw kind grid them onto the new frame at the same origin.
Copying the rows first keeps the part's volume from drifting, because every
pixel you did not change stays exactly where it was.
4. Look at the keys before adding in-betweens
look op="filmstrip"
A vision model reads only the first frame of a GIF, so the filmstrip is the
only way to actually see the motion. Check volume and height consistency here,
while there are four frames to fix rather than eight. With a storyboard,
look op="compare" frame=… on each key as well: the pose should match its
panel before any in-between is drawn from it.
5. Add in-betweens
Only once the keys read. Spacing is your easing: poses close together read slow, far apart read fast.
look op="onion" frame=3
Use onion skinning to judge an in-between against its neighbours without stepping through frames one at a time — it composites the target at full opacity over ghosted neighbours, oldest-first.
For secondary motion — a bob, a breath, a float — cel op="tween" or
cel op="oscillate" fill in the in-between cels for you instead of keying each
one by hand:
cel op="oscillate" layer="hair-back" fromFrame=1 toFrame=8 amplitudeY=1 period=8
Caveat: easing rounds each frame's offset to the nearest pixel, and on
small amplitudes (1–2px) that rounding can make two adjacent frames land on
the same value and then jump — a stutter, not a stumble. Prefer hand keys for
primary motion (the walk, the strike); reach for tween/oscillate for
motion nobody is meant to consciously notice.
Something that grows or shrinks on screen — a wagon coming down a road,
a bird flying away — is drawn at three or four sizes by hand (far, middle,
near), each a complete little sprite with all its parts, and every frame uses
the nearest one. Do not compute it from a formula and re-rasterise it at each
size: below about 12 px a scaled shape loses or merges its parts (the wheels
vanish, the cover becomes a blob), and it changes shape from frame to frame.
Before you finish, look op="preview" frame=<n> on the frames where it is
largest and smallest.
6. Set timing
frame op="set_duration" durations=[150,100,100,150,150,100,100,150]
Hold contact poses longer than pass poses. Uniform timing reads mechanical no
matter how good the drawings are. Typical ranges are in rules://05-animation.
7. Tag it
tag op="create" name="walk" from=1 to=8 direction="forward"
Untagged frames are unusable by a game engine. validate treats a multi-frame
untagged sprite as an error.
8. Review
look op="filmstrip" again, then run through the animation checks in
rules://07-review-checklist: consistent volume, consistent height, clean loop,
anticipation before strong actions, light that does not move. Run validate
with an expect describing the cycle — which layers live on which frames, which
parts must never overlap — so the mechanical check knows what "right" means here.
Related
rules://05-animation, rules://06-layers-and-rigging, rules://40-timing-and-spacing.
For the cycle itself: rules://41-idle-and-breathing, rules://42-walk-and-run,
rules://43-jump-fall-land, rules://44-attacks-and-impacts,
rules://45-secondary-motion, rules://46-subpixel-animation,
rules://47-top-down-animation; animals: rules://51-animal-gaits,
rules://52-birds-and-flight. Their frame tables and key-pose templates come
before your own invention.
