This guide is grounded in Robin Chute, a Phaser 4 platformer (TypeScript + Vite) whose player character — idle, walk, run, jump, attack, hurt, death, even a custom enter-the-chute move — is entirely Spriterrific-generated, with every sheet's source run recorded in the game's asset manifests.

Robin Chute walk cycle sprite sheet on a 5-column 256px grid

Animated preview of the Robin Chute walk cycle

The sheet format, in Phaser terms

Spriterrific exports each animation as a transparent PNG on a fixed 256×256 frame grid, plus a manifest.json:

{
  "action": "walk",
  "frameWidth": 256,
  "frameHeight": 256,
  "columns": 5,
  "rows": 2,
  "frames": 8,
  "fps": 10,
  "anchor": { "x": 128, "y": 255 }
}

Those fields map one-to-one onto Phaser's loader and animation config. Nothing needs converting.

Loading: the code that ships

Robin Chute declares each animation as data and feeds it through one loader — this is the real pattern from the game's assets.ts:

export const CHARACTER_FRAME = { width: 256, height: 256 };

// One entry per animation, numbers from each manifest.json
const CHARACTER_ANIMATIONS = [
  { key: 'robin-idle', url: '/assets/character/idle.png', frames: 10, fps: 6,  repeat: -1 },
  { key: 'robin-walk', url: '/assets/character/walk.png', frames: 10, fps: 10, repeat: -1 },
  { key: 'robin-run',  url: '/assets/character/run.png',  frames: 8,  fps: 12, repeat: -1 },
  { key: 'robin-attack', url: '/assets/character/attack.png', frames: 8, fps: 12, repeat: 0 }
];

export function preloadCharacter(scene: Phaser.Scene): void {
  for (const anim of CHARACTER_ANIMATIONS) {
    scene.load.spritesheet(anim.key, anim.url, {
      frameWidth: CHARACTER_FRAME.width,
      frameHeight: CHARACTER_FRAME.height
    });
  }
}

export function registerCharacterAnimations(scene: Phaser.Scene): void {
  for (const anim of CHARACTER_ANIMATIONS) {
    scene.anims.create({
      key: anim.key,
      frames: scene.anims.generateFrameNumbers(anim.key, {
        start: 0,
        end: anim.frames - 1
      }),
      frameRate: anim.fps,
      repeat: anim.repeat
    });
  }
}

Two details in there carry all the weight:

Playing them is standard Phaser:

const player = scene.physics.add.sprite(x, y, 'robin-idle');
player.setOrigin(0.5, 1); // feet origin — matches the sheet's bottom-center anchor
player.play('robin-idle');

// Facing: the sheet faces west natively; flip when moving right.
player.setFlipX(movingRight);

The setOrigin(0.5, 1) line matters: Spriterrific packs frames with the foot contact line at the cell bottom (anchor: { x: 128, y: 255 }), so a bottom-center origin plants the character on your platforms without per-animation offset fiddling.

Provenance: know where every sheet came from

Robin Chute's asset manifest records the generation run behind every sheet (sourceRun: 'runs/robin-chute-v3-public-final-export-01/walk'). It sounds bureaucratic; it's the opposite. When you want a better attack six weeks later, you know exactly which character anchor to animate against — and the new sheet drops into the same loader entry. The game's current default attack is literally attack_v2, a later re-roll that replaced the original by changing one config line.

Custom moves beyond the standard set

The standard action vocabulary (walk, run, jump, idle, attack, hurt, death, crouch, and more) covers most platformer needs, but Robin Chute also has an enter_chute animation — a custom move mapped onto the closest standard baseline with a one-line description of the motion. Custom actions arrive as normal sheets with their own name in the file path, so attack and enter_chute never collide.

A second data point: image-to-sprite

A sibling Phaser starter project took the other input path: instead of a text prompt, it started from a concept reference image and generated a matching hero (anchor + idle/walk/run/jump and a walk-into-portal move), promoted into public/assets/hero-v2/ with the same 256px grid and loader pattern. If your character already exists as art, that flow is covered in sprite sheet from image.

Hero character anchor generated from a concept reference image

The same pattern, three more genres

Robin Chute is a platformer, but this exact loader pattern ships in three other Phaser 4 games with fully AI-generated casts: a versus fighting game (three fighters, per-frame hitboxes, custom specials), a side-scrolling beat 'em up (player, enemies, boss, bat-weapon variants), and a point-and-click adventure (nine verb animations on a 512px grid). Each guide covers the genre-specific generation tricks; the Phaser code stays the same.

Cost for a Phaser character

A character job from a prompt with walk + idle costs 290 credits; each extra move is a 100-credit action job. Re-cutting a sheet's frames from the raw generation (the frame picker) is free. New accounts start with 500 free credits — no card required — and plans start at $12/month for 1,500 monthly credits (pricing).