This guide is grounded in Streets of Vibes, a neon side-scrolling beat 'em up (Phaser 4 + TypeScript) with wave combat, camera gates, a pickup weapon and a boss cutscene — where the player, the street punk enemy and the boss are all Spriterrific-generated, with every sheet's generation run recorded in the project's provenance docs.

The cast: player, punk, boss

A beat 'em up's art problem is breadth: several characters, each with combat moves, all consistent with each other's style. Streets of Vibes runs three:

Street brawler idle animation
brawler — idle
Street brawler kick animation
brawler — kick (custom)
Street brawler baseball bat attack animation
brawler — bat attack
Street punk enemy attack animation
punk — attack
Street boss chest pound cutscene animation
boss — chest-pound

The player carries the full kit — idle, walk, run, light attack, heavy attack, kick, hurt, knockdown, get-up. The punk gets the enemy essentials. The boss runs the same 256×256 grid as everyone else and is simply rendered 1.28× larger at runtime, plus one bespoke cutscene move mapped onto a standard baseline.

Combat moves are prompts with a direction

The engine's standard action set covers attacks generically; a brawler's flavor moves are custom actions steered by actionContext. The kick that anchors the player's combo was generated with the attack baseline and a context that reads like a fight-choreography note:

throws a strong straight kick with the lead leg toward the LEFT edge of the frame — not a spinning kick

Naming the screen edge is the detail that matters. All Streets of Vibes art is generated facing west, so strikes must visibly travel toward low-x — the runtime flips sprites with setFlipX when a character faces right, and depth-sorts the 2.5D floor by foot position. Here's the kick's sheet as the game loads it:

Street brawler kick sprite sheet on a 5-column 256px grid

Weapons are character variants

The bat pickup isn't an overlay trick — the brawler, the punk and the second playable character each have a bat-holding variant of their anchor (an identity-preserving edit of the base character), with their own bat-idle, bat-walk, bat-attack and bat-hurt sheets generated against it. Swapping loadouts at runtime is just swapping animation keys.

Knockdown, get-up, and continuity

Beat 'em ups live on the knockdown loop, which is really a continuity problem: knockdown ends on the pavement, get-up has to start exactly there and end standing. The project solved it with the engine's end-reference technique — generating get-up with the knockdown's final frame linked to the standing anchor, so the chain plays as one motion. Its run notes hold one more hard-won recipe: idles must be prompted as planted ("no weight shift, no stepping"), or video models will happily generate an idle that slowly walks.

Same loader, same manifest

Integration is the standard Phaser spritesheet pattern — fixed 256×256 grid, foot anchor at bottom-center, frames-driven animation config — identical to the Phaser sprite generator guide. The whole cast, weapons included, flows through one generic loader.

Cost for a cast

A character job (anchor + two animations) is 290 credits; each extra move is a 100-credit action job, and weapon-variant anchors are character variant jobs. The reference cast — 9-move player, 6-move punk, 7-move boss — prices out around 2,400 credits all-in, generated incrementally with automatic refunds on failed steps. New accounts start with 500 free credits — enough for a playable enemy or a first pass at your player — and the $12/month Starter plan adds 1,500 monthly credits (pricing).