TachiSnap
TachiSnap — Pixel Snapper for animation pixel artists. Rust + WebAssembly client-side tool for cleaning up AI-generated…
Agent Skill for generating 2D sprite sheets and map, transparent PNG frames, and animated GIFs from prompts.
git clone https://github.com/0x0funky/agent-sprite-forge.git0x0funky/agent-sprite-forgeLanguages: English | 繁體中文 | 简体中文 | 日本語 | 한국어
Codex skills for game-ready 2D sprites, layered maps, and engine-ready prototypes.
Ask in natural language. Codex plans the asset pipeline, renders with built-in image generation, then local processors clean, split, validate, and export assets for Godot, Unity, or raw 2D game workflows.
Showcase · Skills · Install · Prompts · Star History
Agent Sprite Forge is not just a folder of prompts. It is a Codex-first 2D game asset workflow where the agent decides the plan, image generation creates the raw visuals, and deterministic scripts turn those visuals into reusable game assets.
|
Sprite sheets Characters, monsters, props, attacks, spells, projectiles, impacts, idles, walks, and reference-guided variants. |
Layered maps Ground-only bases, dressed references, prop packs, transparent props, y-sort placement, collision, zones, and previews. |
Engine handoff Godot scenes, editable TileMap layers, separated props, encounter grass, collision bodies, exits, and debug players. |
Local cleanup Chroma-key removal, frame extraction, alignment, transparent PNG/GIF export, prop-pack slicing, and QA metadata. |
These examples were assembled with Codex using agent-sprite-forge workflows. They are meant to show the full loop: generated assets, structured scene data, and playable prototype wiring.
|
Summon Survivors — Unity WebGL Generated map art, hero sheets, summons, evolutions, enemies, bosses, pickups, HUD, FX, level-up choices, and WebGL deployment. Play build · Build conversation |
Forest Pass Defense — Godot Tower Defense A Godot 4 prototype with map, separated props, tower slots, towers, enemy sheets, boss/flying enemies, waves, HUD, build/upgrade/sell flow, projectiles, and targeting rules. |
|
Editable RPG Map — Godot TileMap Image-generated tileset and prop sheet wired into editable TileMapLayer, Sprite2D props, encounter grass Area2D, StaticBody2D collision, exits, metadata, and debug player/camera.
|
Neon Breach — Cyberpunk Side-Scroller A playable side-scroller prototype built around generated character, attack, map, and gameplay assets. |
|
Sengoku Era — JavaScript Pokémon-like A browser-based RPG prototype with generated characters, starter selection, map flow, and battle UI. Play build |
Starter selection and battle loop A compact JavaScript game showcase built from sprite, monster, battle, and map assets generated through the skill workflow. |
|
Enemy roster, including flyer and boss units |
Tower lineup |
HUD and gameplay icons |
Godot prototype output includes:
scenes/ForestPass.tscn with base map, separated props, enemy paths, tower slots, and HUD nodes.image_gen map + separated props + tower sheets + enemy animation sheets + HUD icons + Godot gameplay wiring
|
Unity WebGL gameplay: summons, enemies, pickups, HUD, and objective flow |
Level-up choices: summon unlocks, training, stats, and recovery |
Unity prototype output includes:
Assets/Survivors/Scenes/SummonSurvivors.unity as the playable scene.SurvivorContentDatabase.asset connecting generated hero, summon, enemy, pickup, HUD, and FX sprites.Builds/WebGL with Vercel deployment config.image_gen map + directional hero sheets + summon/evolution sheets + enemy sheets + FX/HUD icons + Unity runtime + WebGL deploy
Use $generate2dsprite when you need animated units, playable characters, monsters, props, spell bundles, projectile/impact FX, or reference-guided variants.
|
Down |
Left |
Right |
Up |
|
Reference |
Reference-guided sprite animation |
|
Reference |
Reference-guided character action |
Use $generate2dmap when you need maps instead of isolated sprites. For readable layered raster maps, the current workflow prefers a clean hand-painted HD game-map style: ground-only base first, dressed reference second, prop pack third, then transparent prop extraction and layered preview composition.
|
Ground-only base |
Dressed reference |
3x3 prop pack |
Flattened layered RPG map preview
layered_raster + y_sorted_props + precise_shapes + trigger_zones + raw_canvas
$generate2dmap can also produce an editable Godot map project instead of a single flattened image. This showcase uses an image-generated tileset and 3x3 prop sheet, then wires them into a Godot 4.5 scene.
Godot editor scene: editable layers, props, zones, collision, exits, and debug player
|
Layered map preview |
Collision and zone debug overlay |
|
Image-generated tileset atlas |
3x3 generated prop pack |
Godot output includes editable TileMapLayer nodes, independent Sprite2D props, encounter grass Area2D zones, StaticBody2D collision blockers, exit Area2D zones, and a debug player/camera.
image_gen tileset + prop_pack_3x3 + layered_tilemap + separate_props + trigger_zones + Godot_TileMap
use $generate2dsprite to create a 2D side-scrolling game similar to Mega Man. It should include attack mechanics, map elements, and all the essential features. I would like you to design it, and all the necessary assets should be created using this skill. It needs to be an actually playable game, with a cyberpunk story setting.
Link: Play the JavaScript browser build
|
Starter selection |
Battle scene |
Use $generate2dsprite to create a 2D game similar to Pokemon. You only need to build one scene for now. It must include a starter monster selection mechanic, a battle screen, and all basic gameplay functions. I would like you to design all the elements and the story, and you can also decide which game engine to use. Use this skill to create any assets you need. The story should be set in the Sengoku period.
| Skill | Use it for | Output | Runtime |
|---|---|---|---|
generate2dsprite |
Sprites, animation sheets, props, spell bundles, FX, reference variants, optional layout guides for fixed-frame sheets | Raw sheet, cleaned transparent sheet, frames, GIFs, metadata | Codex / Grok (image gen) |
generate2dmap |
Baked maps, layered raster maps, clean HD RPG maps, prop packs, collision/zones, Godot-editable scenes | Base map, dressed reference, prop pack, extracted props, preview, scene metadata | Codex / Grok (image gen) |
video2dsprite |
Denser motion sprites from video: base still → image_to_video → frame extract → magenta chroma → multi-density sprite strips/GIFs |
Video, raw/clean frames, 8/16/24/48 sprite sets, strips, preview GIFs | Grok Build only |
$video2dsprite$video2dsprite is a Grok Build exclusive skill. It depends on Grok's native image_gen / image_edit + image_to_video tools (still → short clip). Codex and other agents do not have image_to_video, so they cannot run the generation half of this pipeline.
Use it when you want smoother intermediate poses (e.g. run/walk cycles) by sampling dense frames from a 6s in-place motion clip. Tradeoffs: softer pixels, possible identity drift, chroma fringe — for crisp production sheets, keep using $generate2dsprite.
Install for Grok Build by copying skills into ~/.grok/skills (see Install). On Codex, install is still ~/.codex/skills; $video2dsprite will load but must refuse the video step if tools are missing.
Pipeline: base still → image_to_video (6s) → chroma key → 16-frame strip.
Note: GitHub README does not reliably render
<video>tags (especially inside tables). Motion is shown as GIF previews; MP4 files are still in the repo for download / local play.
| Base still | Motion (image_to_video) |
Sprite result (16f) |
|---|---|---|
Download MP4 |
![]()
16-frame strip (feet-aligned, denser than a classic 6–8 pose sheet)
Short skill intro (MP4, open file): intro.mp4
src/video2dsprite-ryo/
base.png # identity still (docs size)
run-6s.mp4 # image_to_video clip (compressed)
run-6s-preview.gif # same motion as GIF for README display
strip-16.png # denser sprite strip
preview-16.gif # sprite loop for README
intro.mp4 # short skill explainer
We intentionally do not commit raw 145-frame dumps or full-resolution working folders.
$generate2dmap only uses $generate2dsprite when the selected map pipeline needs reusable transparent props. Small environmental props can be batched into 2x2, 3x3, or 4x4 prop packs, then extracted into individual transparent props. Simple maps can stay as a single baked image.
When a visual reference is involved, the image skills follow the same wrapper rule: make the image visible in the conversation first. Attached images and freshly generated images are already visible; local files should be opened with view_image before asking built-in image generation to preserve identity, style, map layout, or sprite lineage.
The script is not the creative brain. The agent makes the visual and pipeline decisions; the Python tools only perform repeatable pixel and export operations.
unit_bundle, spell_bundle, and combat_bundleTileMapLayer, separate props, encounter grass, collision, exits, and debug player scenesLocal processors need Python, Pillow, numpy, and (for $video2dsprite) ffmpeg on PATH.
Clone the repo, install dependencies, then copy skills into the agent skills directory you use:
git clone https://github.com/0x0funky/agent-sprite-forge.git cd .\agent-sprite-forge python -m pip install -r .\requirements.txt # Codex New-Item -ItemType Directory -Force -Path "$env:USERPROFILE\.codex\skills" | Out-Null Copy-Item -Recurse -Force ".\skills\*" "$env:USERPROFILE\.codex\skills\" # Grok Build (required for $video2dsprite video generation) New-Item -ItemType Directory -Force -Path "$env:USERPROFILE\.grok\skills" | Out-Null Copy-Item -Recurse -Force ".\skills\*" "$env:USERPROFILE\.grok\skills\"
git clone https://github.com/0x0funky/agent-sprite-forge.git cd ./agent-sprite-forge python3 -m pip install -r ./requirements.txt # Codex mkdir -p ~/.codex/skills cp -R ./skills/* ~/.codex/skills/ # Grok Build (required for $video2dsprite video generation) mkdir -p ~/.grok/skills cp -R ./skills/* ~/.grok/skills/
Start a new Codex or Grok Build session after installation so skills reload.
Note: $generate2dsprite and $generate2dmap work wherever built-in image generation is available. $video2dsprite full pipeline only works in Grok Build (image_to_video). The Python postprocessor can still re-sample already-exported frames on any machine with ffmpeg + Pillow.
The local post-processors depend on:
Pillownumpyffmpeg (CLI on PATH) for $video2dsprite frame extractionThey are listed in requirements.txt (Python only). Image/video generation is provided by the host agent; these packages handle magenta cleanup, frame splitting, alignment, GIF/PNG export, prop-pack slicing, and video-frame sampling.
agent-sprite-forge/
README.md
README.zh-TW.md
README.zh-CN.md
README.ja.md
README.ko.md
requirements.txt
src/
skills/
generate2dmap/
SKILL.md
agents/
openai.yaml
references/
layered-map-contract.md
map-strategies.md
prop-pack-contract.md
scripts/
compose_layered_preview.py
extract_prop_pack.py
generate2dsprite/
SKILL.md
agents/
openai.yaml
references/
modes.md
prompt-rules.md
scripts/
generate2dsprite.py
make_layout_guide.py
video2dsprite/ # Grok Build only (image_to_video)
SKILL.md
agents/
openai.yaml
references/
pipeline.md
prompt-rules.md
scripts/
video2dsprite.py
src/
video2dsprite-ryo/ # README case study (~2–3 MB)
base.png
run-6s.mp4
run-6s-preview.gif # motion GIF (GitHub-safe)
strip-16.png
preview-16.gif
intro.mp4
Use $generate2dsprite to create a 3x3 idle for an ultimate earth titan.
Use $generate2dsprite to create a side-view lightning knight attack animation.
Use $generate2dsprite to create a late-Sengoku player_sheet for a wandering fire swordsman.
Use $generate2dsprite to create a wizard spell bundle with cast, projectile, and impact sprites.
Use $video2dsprite with my existing side-view hero PNG as base. Generate a 6s in-place run on #FF00FF, extract frames, chroma key, and export 8/16/24/48 sprite sets + preview GIFs. Do not wire into the game; just report paths.
Use $video2dsprite to create a smooth side-scroller walk cycle from a new magenta-background still, 6 seconds, then sample 24 feet-aligned frames.
Use $generate2dmap to create a small fixed-screen pixel-art battle arena with simple collision.
Use $generate2dmap to create a top-down RPG forest shrine map. Use a layered raster pipeline, a 3x3 prop pack for small environmental props, precise collision, encounter grass zones, a rest point, and actors that can walk in front of and behind tall props.
Use $generate2dmap to create a Godot-editable RPG map with separated props, encounter grass Area2D zones, collision StaticBody2D blockers, exit zones, and a debug player scene.
For a typical sprite sheet output:
raw-sheet.pngraw-sheet-clean.pngsheet-transparent.pnganimation.gifprompt-used.txtpipeline-meta.jsonFor player walk sheets, you also get direction strips and per-direction GIFs.
For a map output, the result depends on the chosen pipeline:
3x3 idle.1x4, 2x2, or 2x3.MIT. See LICENSE.
more like this
TachiSnap — Pixel Snapper for animation pixel artists. Rust + WebAssembly client-side tool for cleaning up AI-generated…
search projects, people, and tags