Stepping a cutscene on twos

Built on The Illusion of Life by Thomas and Johnston. Sources for this reference

Hand animation traditionally holds each drawing for two frames. Code-drawn animation runs at whatever the display does, which is smoother and, for some material, worse. Stepping is how you get the drawn quality back, and it is one line. 

float stepTime(float t, float fps){ return floor(t*fps)/fps; }

The important part is what that line does not touch. The simulation keeps running continuously; only the moment you sample it is snapped to a grid. Nothing slows down, nothing loses accuracy, and the motion arc is unchanged.

The same pendulum at 60, 12 and 8 steps per second. The blue outline is the continuous path it is sampling; the bar at the bottom flashes once per step.

The left panel is what a shader does by default. The middle is on twos, and the arc still reads as one motion: your eye fills the gaps because the spacing is even and the direction is consistent. The right is pushed further still, and it is close to the floor where stepping stops reading as animation.

Why it looks better rather than cheaper

Perfectly smooth motion is a fairly recent thing to be able to make, and it carries no information about weight. A held pose does. Stepping forces the eye to read poses rather than a continuous blur, which is why the technique survives from paper into Spider-Verse and Arcane rather than being a limitation people escaped.

The failure is stepping everything

This is the part that goes wrong. Snap the whole frame to the same clock and the effects strobe: smoke, sparks, a camera drift and a glow pulse all jump together, and what read as a stylistic choice on the character reads as a dropped frame on everything else.

Left: character and particles on the same stepped clock. Right: character stepped, effects continuous.

Left, the particles jump in lockstep with the character and the whole image feels broken. Right, the character holds its poses while the drift stays liquid, and the stepping now reads as intentional. Per-element clocks, not one global one.

Rules of thumb

  1. Quantize the sample time, never the simulation.
  2. Twos at 24 fps is the traditional default. Below about 8 steps per second it stops reading as motion.
  3. Give each element its own clock. Characters step; smoke, camera and glow stay continuous.
  4. Anything with real motion blur cannot be stepped, because blur is an integral over exactly the time you just deleted.
  5. Step in the shot's own time, not wall time, so a slow-motion beat keeps the same step feel.

All 61 notes How to use them Credits