Scenario/ explorations Create yours

5 heroes. 4 directions. 4 cycles. 8 frames each

Iso Cycles.

Draw two angles.
Get four directions.

Every hero, every angle, every cycle, in one grid.
Click a sprite to take control of it.

The line-up

Every hero, every angle.

SEgenerated
SWmirror of SE
NEgenerated
NWmirror of NE

Click any sprite to take control of it below. Only the SE and NE columns were animated; SW and NW are the same frames flipped, so each hero needed two drawings, not four.

The playground

Take the controls.

Arrow keys or WASD move. Pick Walk or Run to set the gait, hold Shift to switch it, press Space to strike. On a phone, tap the floor.

SE · idle

Arrow keys or WASD to move · click the floor to walk there

How this was made

Two stills per hero, forty clips, twenty sheets.

The starting point was a post by Todd Grilliot showing isometric walk cycles made with Pixel Engine: four characters, four directions, eight frames each, every character at a different pixel height (see the post). We rebuilt the idea with Scenario, swapped in a new cast, and added three cycles: run, idle and attack.

The route

  1. A purpose-built model first. Retro Diffusion Animation has a four-angle walking mode. It gave a clean 48 px knight, but in four cardinal directions with four frames each, and it has no run or attack mode. We moved on.
  2. One image, two angles. GPT Image 2.5 Sunburst drew each hero twice in one call, facing south-east and north-east, on flat magenta. One call keeps the two angles on-model with each other.
  3. One clip per cycle. Each still became the first frame of a 3-second Kling V3 clip: walk and run "on a treadmill", idle and attack with the end frame pinned to the start. 5 heroes × 2 angles × 4 cycles = 40 clips.
  4. Cut the loop, not the clip. A script keyed out the magenta, searched each clip for the window whose last frame flows back into its first, and kept 8 evenly spaced frames.
  5. Pixelate and mirror. The frames were area-averaged down to each hero's height (96, 80 or 64 px) and mapped to one palette per hero. SW and NW are the SE and NE rows flipped.

Download the illustrated making-of (PDF) · the agent skill (ZIP)

The knight drawn twice on magenta, facing south-east and north-east
01 · two angles, one call
02 · the raw 3-second clip
Frames of the clip with the chosen loop window highlighted
03 · the loop window
A high-resolution keyed frame next to the final pixel sprite
04 · pixelated at 64 px

What it cost

StepModelRunsCredits

Steal the prompts

Copied from the production file (prompts.json). Swap the bracketed parts for your own hero.

Learn it · 5 steps

From two stills to a sprite sheet: draw, animate, loop, pixelate, mirror.

Every image below comes from this production. Prompts are quoted from prompts.json; steps 4 and 5 run in a local script, so they show settings instead.

  1. Draw both angles in one image

    Describe the hero once and ask for two poses side by side on a flat : three-quarters toward you (SE) and three-quarters away (NE).

    Left pose: body turned three-quarters toward the viewer, facing down and to the right (south-east).
Right pose: body turned three-quarters away from the viewer, facing up and to the right (north-east), …
    Capability
    text-to-image
    Model
    GPT Image 2.5 Sunburst · runner-up: Retro Diffusion Plus (ranked first by Scenario for pixel art, not run)
    The knight drawn twice on magenta

    Both figures are the same size, stand on the same baseline, and clearly face a diagonal.

  2. Animate walk and run from the only

    Reframe each pose with headroom, then ask for motion "on a treadmill" so the hero stays centred. Name the facing in screen terms.

    like a treadmill: the armored knight immediately starts running in place and keeps running for the whole clip, … He always faces diagonally toward the bottom-right corner of the frame (isometric three-quarter front view from above, the same angle as the first frame), never turning to a side view.
    Capability
    image-to-video
    Model
    Kling V3 I2V Standard · runner-up: Luma Ray 2 Flash 540p (ranked first on cost, not run). Seedance 2.5 was tested and gave a jog.

    The hero keeps the same diagonal for the whole clip and never slides out of the centre.

  3. Pin the for idle and attack

    Give the same still as first and last frame so the strike returns to the ready pose. We also used it later to stop the back-view runs from turning.

    the armored knight performs one sword attack: draws the longsword and swings a wide diagonal slash in front of him, then returns to the starting ready pose. Snappy anticipation, fast strike, short follow-through.
    Capability
    image-to-video, first and last frame
    Model
    Kling V3 I2V Standard · runner-up: not recorded
    Eight frames of the knight's sword attack

    The last frame lands back on the rest pose, so the attack can chain into idle.

  4. Cut the out of the clip

    Search every start frame and cycle length. Keep the window whose is smallest compared with the motion inside it, then take 8 evenly spaced frames.

    Settings (scripts/process.py)
walk: 12–34 frames · run: 8–24 · idle: 24–66
score = seam ÷ mean frame-to-frame motion in the window
    Capability
    local analysis, no model
    Model
    none
    The run clip's frames with the chosen window outlined

    The seam is well under the motion baseline (knight SE run: 0.28×).

  5. Pixelate, lock the , then mirror

    Crop every clip of a hero to one shared canvas so the cycles line up, average down to the hero's height, and map to one palette. Flip SE and NE for the other two directions.

    Settings (scripts/process.py)
height: orc, golem 96 px · necromancer, elf 80 · knight 64
palette: 24–28 colours per hero, median cut
SW = mirror(SE) · NW = mirror(NE)
    Capability
    local processing, no model
    Model
    none
    High-resolution frame beside the 64 px pixel sprite

    No magenta fringe on the outline, and the mirrored rows read as the same hero.

Three mistakes we made

Retro Diffusion knight sheet: back, side, front and side views The take

The purpose-built walking model returned a crisp 48 px knight, but in four cardinal directions (back, side, front, side) with four frames per cycle.

Why

That mode is made for top-down walkers. Writing "isometric" in the prompt does not move its camera, and it has no run or attack mode.

The fix

Two stages instead: draw the isometric angles as stills, then animate each still with a video model.

The first run test: the knight stands still at both ends of the clip The take

Our first run test pinned the same still as first and last frame. The knight stood still at both ends and turned side-on in the middle.

Why

A 3-second clip that has to start and end on a standing pose spends its time speeding up and slowing down, so no clean loop is left.

The fix

First frame only for walk and run. The end frame stays for idle and attack, which should come back to rest.

Top: the back-view run turned into a side profile. Bottom: the fixed run keeps the diagonal The take

All four back-view (NE) runs turned into a side profile, while the walks, idles and attacks held their angle.

Why

Most likely the model drifts toward the profile run it knows best. "Faces the top-right corner" was not enough.

The fix

Describe the run as moving away from the viewer, name which shoulder is nearer, pin the end frame and give it 5 seconds. The loop search then takes the steady middle.

Make yours

Create yoursStart free on Scenario The agent skillZIP · teach your agent this technique The making-ofPDF · every step, with pictures The recipeZIP · prompts, first frames, scripts The sprite sheetsZIP · 20 sheets + frame data