claudecy idle claudecy running claudecy success claudecy talking howl idle howl running howl success
One drawing in. A game-ready sprite atlas out.
English · 한국어 · 日本語 · 简体中文 · Español · Français
Ask an image model for a "sprite sheet" and you know what you get: a character whose face changes every frame, a background that won't key out, poses that overlap and drift off-grid, and a PNG your game engine can't actually consume. Cute demo, useless asset.
sprite-gen is a Codex/Claude skill that closes that gap. Give it one base image and a list of actions — it drives the generation row by row, locks the character's identity, strips the chroma background to real alpha, extracts each pose as a clean transparent frame, and bakes a runtime atlas with a machine-readable manifest.json.frame_layout. Every sprite above was made this way.
And for the last 10% that generation never gets right, there's a curation webview: compare frames side by side, reject the broken ones, nudge rotation/scale/position non-destructively, watch the loop live — then bake. The pipeline does the labor; you keep the taste.
sprite-request.json → layout guides + prompts → image-gen state rows
→ chroma alpha → connected components → transparent frames
→ sprite-sheet-alpha.png + manifest.json.frame_layout
- A transparent sprite atlas (
sprite-sheet-alpha.png) — real alpha, no leftover chroma fringe, verified against white backgrounds. - A runtime manifest (
manifest.json.frame_layout) — absolute frame rectangles, per-state fps and loop flags. Your engine samples rectangles; it never guesses a grid. - QA you can watch — per-state GIFs and contact sheets, so motion is judged as motion before anything ships.
- Honest labels — short readable actions (idle, jump, attack, wave) are the stable path; cyclic locomotion (walk/run) is marked experimental unless motion QA actually passes. No silent overpromising.
Generation gets you 90%. The webview is where a human takes it to shipped — standalone, no Studio or framework dependency, runs anywhere the skill is installed (Claude Code Desktop, the Codex app, a plain terminal).
- Compare frames side by side per state, and select / reject individual frames.
- Non-destructive transform per frame: drag = move, wheel = scale, top handle = rotate, bottom-left handle = shear. Edits live in a
curation.jsonsidecar — source PNGs are never rewritten, and the compose step bakes the result deterministically. Preview and bake share one affine matrix, so what you align is what you get. - Live preview animates the selected frames at the state's fps.
- Not just for sprites: point it at any folder of image candidates (icons, logos, generated drafts) with
unpack_atlas_run.py --pngs-dirand use it as a general pick-the-winner view.
For isometric sets, the webview overlays the floor grid (from meta.json tile/anchor) so you can snap furniture to the diamond axes with the shear handle.
curation webview — isometric furniture
The webview ships with English and Korean. Pass --lang en|ko when launching, or use the in-app toggle:
python3 scripts/serve_curation.py --run-dir <run-dir> --lang en # or ko
# 0. install dependencies (Pillow) into a fresh virtualenv python3 -m venv .venv && source .venv/bin/activate pip install -e . # 1. prepare a run from a base image python3 scripts/prepare_sprite_run.py --out-dir <run-dir> --character-id <id> --base-image base.png # 2. generate one row image per state with image-gen, save as raw/<state>.png # 3. extract frames python3 scripts/extract_sprite_row_frames.py --run-dir <run-dir> # 4. (optional) curate frames in the webview python3 scripts/serve_curation.py --run-dir <run-dir> # 5. bake the runtime atlas python3 scripts/compose_sprite_atlas.py --run-dir <run-dir>
When only the combined sheet survives, rebuild a curator-ready run dir, then curate and export:
# rebuild frames: explicit --grid, --manifest rectangles, or alpha auto-detect (default) python3 scripts/unpack_atlas_run.py --atlas sheet.png # auto-detect python3 scripts/unpack_atlas_run.py --manifest manifest.json # exact rectangles python3 scripts/unpack_atlas_run.py --pngs-dir furniture/ # import a loose PNG set # after curating, bake corrections back to named PNGs python3 scripts/export_curated_pngs.py --run-dir <run-dir>
Output defaults to a findable <source>-curator folder next to the input.
The full agent-facing workflow and contracts live in SKILL.md.
From Codex skill installer workflows, install this repository as a root skill:
python3 ~/.codex/skills/.system/skill-installer/scripts/install-skill-from-github.py \ --repo aldegad/sprite-gen --path .
The component-row workflow is inspired by the Apache-2.0 licensed hatch-pet skill, but targets generic game sprite atlases and includes no pet packages or pet visual assets.
Apache-2.0