Animating the hero with numbers measured from Celeste, Hollow Knight and Shovel Knight
We measured three loved platformers frame by frame, put the numbers in a skill, and one prompt gave our hero a calmer run, a steady head and a scarf that reads. Play it.
Before you start
- The chapter as it stood after part 14: 53 rooms in five sections, in a single-page Phaser game with juice, sound, pixel art, music, tests and a route for every room. Wick already had the first animation pass from this part's earlier version: 21 poses, and a scarf and hood tip on physics chains.
- Claude Code, started in the game's folder, plus Node and Playwright for the tests and the measurement, and ffmpeg for the slowed clips.
- The skill at the end of this page, in the folder's .claude/skills/character-animation/. Then give the prompt below to a fresh session.
What we asked“/character-animation Wick's animation doesn't feel right yet: his head bobs when he runs, you only ever see one hand, and the scarf looks strange. Rework the hero's animation so it reads as well as the platformers players already know, without changing how the game plays.”
What happened
- Loaded the character-animation skill
- Read the art notes, the hero's animation code and the skill's references
- Read the animation settings, the state picker and the scarf drawing
- Read the sprite tool that draws Wick's frames
- Found Playwright and ffmpeg on the machine
- Filmed the old run, jump, brake and hops with the skill's script, measuring the head
- Looked at the contact sheet
- Read the skill's follow chain
- Redrew Wick's poses in the sprite tool: one shared hood, a 6-drawing run, a darker far hand, a single landing drawing
- Linked Playwright for the tests from outside the game folder
- Made an untouched copy of the game to run the baseline tests on
- Copied the skill's newer chain script into the game
- Replaced the animation settings, the state picker, the run cadence and the scarf drawing
- Gave the test hook a head point taken from the drawn hood
- Filmed the new animation and listed how long each drawing is held
- Compared enlarged frames before and after
- Shortened the scarf's rest shape and filmed again
- Ran the measurement and the tests on the changed game
- Filmed a spring bounce and a death with respawn, before and after
- Turned off the air-jump spin and the new refill flash when reduce motion is on
- Updated the art notes
- Stopped its earlier baseline run and ran the full tests on the changed game
- Sent a before/after clip
- Ran the sound tests alone on both copies
- Removed the temporary copy and the Playwright link
After one prompt, Wick runs at 4 steps a second instead of 7.2. His hood moves 1 pixel on the beat of his feet instead of jittering on every drawing, a darker far hand peeks out on alternate steps, and the scarf is a few chunky blobs that trail one drawing behind him. The controls didn’t change: his body is in the same place in every frame.
Why we measured instead of guessing
The first version of this post gave Wick 21 poses built from animation principles: anticipation, follow-through and a scarf on a physics chain. Playing it, we kept seeing the same things. His head bobbed when he ran, you only ever saw one hand, and the scarf looked strange. A second try with more rules had the same problems, so we didn’t publish it.
So we stopped writing rules and measured. We stepped through 60 fps gameplay videos of three platformers people love, Celeste, Hollow Knight and Shovel Knight, one frame at a time. For the pixel-art games we scaled each frame back to the game’s own pixels. We counted how long each drawing is held, how far the hero moves per step, and how the head moves.
| Celeste | Hollow Knight | Shovel Knight | Wick now | |
|---|---|---|---|---|
| Steps a second | about 3.3 | about 3 | 4 | 4 (was 7.2) |
| Each drawing held | about 3 frames | 5 frames | 5 frames | 5 frames |
| Feet slide | 3–4× | about 5× | yes | yes |
| Head bob per step | 2 px, stepped | about 4% of height | 2 px | 1 art px |
| Far arm | darker, 1–2 px | none | behind the shovel | darker 1×2 patch |
| Wind-up before a jump | none | none | none | none |
| Air drawings | stretch, rise, fall | 1 rise, 1 fall | 1 rise, 1 pogo | 1 rise, 1 fall |
| Landing | 5–6 frames, 1–2 px lower | 5 + 3 frames, lower | 7 frames, 1 px lower | 6–7 frames, 2 px lower |
| Loose part | hair, 4–5 outlined blobs | cloak hem | none | scarf, 5 outlined blobs |
Some of it surprised us. In all three games the feet slide along the ground, three to five times further than a planted foot would allow, and nobody notices. What matters is the cadence, 3 to 4 steps a second. The head is one rigid piece that dips 1 or 2 pixels once per step, only when the drawing changes. None of them draws a thin far arm. None of them has a wind-up before a jump, and when the hero stands still, almost nothing moves.
Our first version did the opposite. It changed drawings by distance so the feet wouldn’t slide, which made Wick run at 7.2 steps a second with his head moving 21.6 times a second. The 1-pixel far arm didn’t show at normal size, and the scarf was a physics rope recalculated every frame, so it whipped about on top of the drawings and broke into a thin line.
The skill now ships these numbers, so you don’t need the videos. If you want your hero to move like another game, its study script measures a clip you record yourself and gives you the holds and the bob in that game’s pixels. We publish only our numbers, never footage or frames from those videos.
Feel the cadence
Both lanes use the game's own drawings and run at its full speed. The trace on the right is the top of the hood over the last second. Drag the slider to hold each drawing longer or shorter and watch the steps per second change.
The other states
- Jump: the take-off crouch is gone. The stretched rise drawing shows from the first frame, then one fall drawing from the top of the jump.
- Landing: one drawing, 2 px lower, held 6–7 frames. Any input ends it.
- Scarf: 5 outlined blobs that shrink toward the tip. It only moves when Wick’s drawing changes, so it lags about one drawing: back when running, down when rising, up when falling.
- Double jump: the scarf and lantern still turn blue when it’s spent, and the scarf flashes white for about 8 frames when it comes back.
- Idle, turn and brake kept their drawings. With reduce motion on, the air-jump spin and the refill flash are off.
The checks matched: the body moved identically in the main run, the spring and the death, the difficulty measurement is the same for all 53 rooms, and the tests gave 34 of 35, the same as before. The one failure is a sound test that also fails under load on the original game and passes on its own.
What the session missed
It kept Wick’s design and animated around it. The cream body and the thin arm are what made the run hard to read in the first place, and the session never asked whether that design could animate well at this size.
We tried a design pass by hand afterwards: a dark cloak that hides the arms, the lantern as the brightest thing on the near side, standing in for the hand, and a rounder hood. It helped more than any of the timing changes. That’s now a step in the skill: check that the design can animate before animating it, and redraw it within the same frame and hitbox if not, as Hollow Knight and Shovel Knight do.
We played the session’s result and the animation works. That’s the version you can play below.
It took one prompt and no follow-ups: 47 minutes and $3.08 of Claude Code working alone.
Get everything
Get the skill. The rules and the measured numbers work for any engine, the chain script is plain JavaScript with no dependencies, and the filming and study scripts work with browser games and clips you record yourself. You can also install all seven skills as a Claude Code plugin.
Try it
Click to start; N turns the music off, M mutes all sound. Arrow keys or A/D to move, Up, W or Space to jump. You need a keyboard. Run along a flat stretch and watch his hood and scarf. We only added the start screen and Phaser loaded from this site.
Recorded in the cloud with a clean Claude Code: no personal skills, plugins or MCP servers. The session had character-animation and our other skills for this series installed: platformer-feel, platformer-levels, game-juice, game-sound, pixel-art and game-music.
The skill that made it work
It gives Claude numbers measured frame by frame from Celeste, Hollow Knight and Shovel Knight instead of rules of thumb, a check that the hero's design can animate at all, and a script that films and measures the hero before and after, head bob and step rate included.
- List every state and the event in the code that starts it before drawing anything.
- Never delay the controls: no wind-up before a jump, at most a 4-frame take-off stretch while the body is already rising, and any new input ends a drawn beat at once.
- Run on a cadence: 6–8 drawings, each held 4–5 game frames, for 3–4 steps a second. Don't plant the feet: they slide 3–5× in all three games and nobody sees it.
- The head is one rigid piece, stamped from one drawing. It bobs 1–2 px in whole pixels, only when the drawing changes, lowest on contact.
- No thin far arm: hide it in a cloak or behind a prop, or show it as a 1–2 px patch one shade darker. Legs are short dark blocks with a big swing.
- Check the design can animate before animating it: a head that reads as a head, one clearly brightest thing, body and head in contrast. If not, redraw the design in the same frame and hitbox, keeping its colours and props.
- One loose part, as 4–5 tapered outlined blobs trailing 25–40% of the hero's height, moved only when the drawing changes and lagging about one drawing.
- Jump, land, idle, turn: one rise and one fall drawing, a landing drawing held 5–7 frames 1–2 px lower, an idle that's nearly still, an instant turn.
- Show the hero's state on the hero: recolour the loose part when an ability is spent, flash white when it comes back, and drop spins with reduce motion on.
- Let one piece of code own the scale: when a drawn pose adds squash, lower the juice for that event.
- Never change how the game plays. Keep every number in one settings object with a switch back to the old look.
- Film every state before and after and measure the head: the body must move identically, and the game's measurement and tests must give the same results. Keep renders outside the game folder.
Save it as .claude/skills/character-animation/SKILL.md in your project.
Was this useful?
Thanks, we read every message.
Part 13 of Make a complete platformer with AI
