Walk cycles that wouldn't walk: animating 2D heroes with a code rig
Tavern Heroes has 18 hero classes, and each one needs to walk, fight and idle. The usual 2D answer is a sprite sheet: a strip of frames, played in a loop. I tried that first. It didn't work, and the reason was interesting.
Why the sprite sheets failed
My art pipeline generates images from concept art and a style reference. It's very good at single poses: a hero standing, a hero at the tavern bar, a hero mid-swing. Each one on-model and consistent.
It's bad at motion. Ask for a 4-frame walk cycle and you get four poses that don't form a stride. Ask for 12 frames, with every phase of the step named, and you get one stride repeated with small differences. Played back, the heroes shuffled, slid and jittered. I rejected two rounds of it.
Interestingly, it did work for Emberfall: 12-frame walk cycles at small pixel-art sizes, front, back and side. My guess is that at 16-pixel scale small inconsistencies vanish, while at Tavern Heroes' larger, painted scale they're obvious. I haven't proven that.
The rig: paint the parts, animate in code
The fix splits the job by strengths. The art pipeline paints a parts sheet for each hero, a cut-out doll: torso, head, upper and lower arms, thighs, shins, weapon. Code does the moving.
- Each hero has a joints file: where the shoulder, elbow, hip and knee sit on each part.
- A small rig module poses the parts procedurally. A walk is a pair of sine waves on hips and knees with a little torso bob. An attack is a keyed swing.
- Every rig is reviewed on a contact sheet: one image with every hero in every key pose, side by side.
It's the same idea as Flash-era cut-out animation, or Spine and DragonBones, just written as a small TypeScript module instead of a tool.
What went wrong on the way
The rig shipped in stages, and each stage found a new way to look wrong:
- Clothes that shrank when heroes walked. Robes and long coats had been cut into thigh pieces, so a mage's coat collapsed into his legs mid-stride. Robes and capes are now their own
skirtandcapeparts that swing from the hips and shoulders. - Thin walkers. Some parts sheets came back slimmer than the hero's standing pose. The Rogue walked at half his own width. Each hero now has a
widenfactor (Rogue 1.35, Assassin 1.2, the heavy fighters 1.1). - Shoulders on the sword tip. Arm pivots were first taken from the highest painted pixel of the arm, which sometimes was the tip of the weapon. Shoulders are now placed by eye per hero.
- Signed off too small. I approved all 18 rigs from small whole-body sheets, which hid the joints. A new grid tool renders each joint large, and that's what gets reviewed now.
And one that wasn't the rig at all: browsers mixed old and new art. Art file names didn't change between builds and the server sent no cache headers, so a phone could show a new torso with old arms. Every art URL now carries a per-build ?v= version.
Was it enough?
For Tavern Heroes, mostly. The heroes walk and swing and read clearly. But I'll be honest: the combat animation is still the weakest part of that game. A 2D cut-out rig looks stiff next to real animation.
That limitation shaped the next game. For Backpack Battle I wanted properly animated fights, so I skipped 2D entirely and used rigged 3D models with motion-captured style clips. That's a later post.
The broader lesson: work out what your art pipeline can't do before you design around it. Painted poses: yes. Consistent motion frames: no. A painted interactive town: also no, which is why Tavern Heroes became menu-only.