generate2dsprite

Generate and postprocess 2D game sprite sheets into transparent PNG and GIF animation assets.

Updated Sep 17, 2026
One-click install
npx skills add https://github.com/scomofo/midi-stage2 --skill generate2dsprite-scomofo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: generate2dsprite
Source: https://github.com/scomofo/midi-stage2/tree/main/.grok/skills/generate2dsprite
Command: npx skills add https://github.com/scomofo/midi-stage2 --skill generate2dsprite-scomofo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires Pillow, numpy, and includes scripts (resource) and references (resource) components.

What problem does it solve? Browser game projects often need real sprite sheets and animation frames, but hand-drawing pixel art or cleaning up AI-generated sheets into engine-ready transparent assets is slow and error-prone. This Skill produces sprite art via text-to-image generation and deterministically converts raw magenta-background sheets into clean, aligned, transparent PNG frames and GIFs. ## Core Features & Use Cases - Sprite Sheet Generation: Creates pixel-art characters, NPCs, creatures, spells, projectiles, impacts, and props as structured grid sheets (2x2, 2x3, 4x4, and more) using imagine_text_to_image. - Deterministic Postprocessing: Python scripts perform magenta chroma-key cleanup, frame splitting, component filtering, scaling, feet/bottom alignment, and QC metadata export. - Bundle Workflows: Supports hero action bundles, spell bundles, unit bundles, and engine atlases assembled only after per-action visual QC passes. - Use Case: A developer building a side-view browser game asks for a hero with idle, run, shoot, and jump animations; the Skill generates one grid sheet per action, cleans each into transparent frames and GIFs, and keeps the projectile and muzzle flash as separate FX assets. ## Quick Start Ask the agent to generate a 2x2 idle animation sprite sheet for a pixel-art knight character and export transparent frames plus a looping GIF into the game's assets folder.

Frequently Asked Questions about generate2dsprite

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a 2D sprite sheet for a browser game?▼

Describe the character, action, and view, and the Skill writes an art prompt, generates a raw grid sheet with imagine_text_to_image on a solid magenta background, then runs the processing script to split frames, remove the background, and export transparent PNGs and a GIF.

How to create a walk cycle animation for a game character?▼

Request a walk or run action and the Skill generates a multi-row grid sheet, such as 2x2 for side-view or 4x4 for four-direction top-down movement. Frames are extracted with shared scale and feet alignment so the loop stays consistent.

Can I use generated sprites with Phaser or Canvas 2D?▼

Yes, the exported transparent PNG sheets, per-frame PNGs, and GIFs target browser runtimes including Canvas 2D, Phaser, and DOM image elements. Engine atlases can be assembled deterministically after each action sheet passes visual QC.

Why does my sprite sheet have frames touching the cell edges?▼

Edge touch happens when the raw generation lets limbs, weapons, or effects cross cell boundaries. The processor reports edge_touch per frame; fix it by reprocessing with different component settings or regenerating the raw sheet with stronger containment prompt rules.

What are the limitations of single-row sprite strips?▼

Raw single-row strips like 1x4 or 1x8 are not valid defaults for animated bodies because subjects drift horizontally and crop inconsistently. Generate multi-row grids first, QC them, then assemble a delivery strip deterministically if the engine requires one.