sprite-sheet-creator

Sprite Sheet Creator is an AI-powered tool that takes a text description or uploaded image and produces a complete set of 32-bit pixel art sprite sheets ready for use in 2D games. The tool handles the entire asset pipeline in a guided multi-step flow: character generation, sprite sheet creation for each animation type, background removal, frame extraction, animation preview, and an interactive sandbox where you can actually play your character.

The tool supports two game styles. Side-scroller mode generates walk, jump, attack, and idle sprite sheets plus an optional 3-layer parallax background scene matched to the character’s world. Isometric RPG mode generates directional walk sets (down, up, side), matching directional attack sheets, an idle animation, and a full top-down world map to explore. In both modes, animations are rendered as 2x2 grids per animation type with consistent character identity maintained across every generation.

Two AI image backends are available: Nano Banana Pro (fal-ai/nano-banana-pro) and GPT Image 2 (openai/gpt-image-2), switchable at the start of each session. Background removal is handled by Bria, and the interactive sandbox uses PixiJS 8 for WebGL-accelerated rendering with keyboard-controlled character movement. Sprite frame boundaries are adjustable via draggable grid dividers, allowing users to correct AI-generated grids without regenerating assets.

What You Get

• Four animation sprite sheets (walk, jump, attack, idle) for side-scroller mode — each a 2x2 grid of pixel art frames with consistent character identity
• Seven directional sprite sheets for isometric RPG mode — walk down/up/side, attack down/up/side, and idle — plus a full top-down world map
• Automatic background removal via Bria applied to all sprite sheets so frames are transparent and game-ready
• A draggable grid divider system that lets you fine-tune frame boundaries on each sprite sheet without regenerating
• An animation preview canvas with adjustable FPS and keyboard-controlled walk direction to test your walk cycle
• A PixiJS-powered interactive sandbox where you can walk, jump, and attack your character against a parallax background or isometric map

Common Use Cases

• Game jam asset creation — rapidly prototype a playable character for a 48-hour jam without needing pixel art skills or a dedicated artist
• Solo indie developer — generate placeholder animations for a 2D platformer or RPG to validate gameplay feel before committing to hand-crafted art
• World-building prototyping — convert an existing character concept or fan art into a pixel art sprite set to visualize how the character would move in-game
• Isometric RPG prototyping — generate directional walk and attack animations plus a matching world map to test top-down movement and scene layout
• Educational AI tooling demos — demonstrate multi-step AI image generation pipelines with reference image chaining and background removal

Under The Hood

Architecture The application follows a monolithic Next.js App Router structure organized as a multi-step wizard. All pipeline state lives in a single root React component that coordinates character generation, sprite sheet creation, background removal, frame extraction, animation preview, and sandbox playback. Separation of concerns is enforced at the API route layer — each AI operation is a discrete server-side route that proxies to the fal.ai client — but the client side has limited decomposition, with the two sandbox components (side-scroller and isometric) being the only logic extracted into separate modules, loaded lazily to avoid SSR issues. Data flows unidirectionally through React useState hooks with no global state management layer.

Tech Stack The project is built on Next.js 14 with React 18, deployed as a standard Node.js web application. Image generation uses the @fal-ai/client SDK to call two upstream models: fal-ai/nano-banana-pro and openai/gpt-image-2 (proxied through fal). Background removal uses the fal-ai/bria/background/remove endpoint. Frame extraction and animation preview run entirely client-side via the HTML5 Canvas API, computing per-pixel bounding boxes for transparent sprite content. The interactive sandbox uses PixiJS 8 for WebGL-accelerated character animation and parallax rendering. TypeScript strict mode is enabled throughout with no custom build tooling beyond standard Next.js defaults.

Code Quality No test files exist anywhere in the codebase — no testing framework, no unit or integration tests, and no CI configuration. Error handling in API routes is limited: all catch blocks return a fixed 500 response without forwarding the original fal.ai error context. The main page component is extremely long with repetitive patterns — identical draggable divider handlers and frame extraction functions duplicated four times for each animation slot. TypeScript strict mode provides solid type safety for the AI response shapes and wizard state. The generate-image.ts utility is a clean abstraction for the dual-model backend, and the sprite prompt constants are extensively documented inline.

What Makes It Unique The standout technical choice is the reference image chaining pattern used to maintain character identity across multiple AI generations. Attack-up and attack-side sheets are generated with the attack-down sheet passed as a reference image, ensuring the attack style stays consistent across viewing angles. For isometric mode, directional walk sets and the initial attack-down sheet are generated in parallel, then a second phase generates the remaining attack directions using the first phase’s output as a reference anchor. The 3-layer parallax background system chains generations sequentially so each layer can reference prior layers for visual coherence. Combined with a client-side draggable frame boundary adjuster that recalculates extracted frames reactively, the tool offers a complete and practical AI game asset pipeline that goes well beyond simple one-shot image generation.

Self-Hosting

Sprite Sheet Creator has no LICENSE file in the repository, which means it defaults to standard copyright — all rights are reserved by the author and no license is granted to use, copy, modify, or distribute the code. This is a demo project rather than a production library, so there is no formal licensing for commercial use, redistribution, or self-hosting without explicit permission from the repository owner. If you intend to use this as the basis for a product, you would need to either fork it under an assumption of personal use only, or reach out to the author for clarification.

Running this yourself requires a fal.ai account and API key (FAL_KEY environment variable). The fal.ai platform is a paid service with per-generation costs that vary by model — Nano Banana Pro and GPT Image 2 are both metered, and a complete sprite sheet generation session (character + four animations + background removal) will make between eight and fifteen API calls depending on mode. You are also responsible for hosting the Next.js application, which can run on any Node.js-compatible platform (Vercel, Railway, a VPS) since there is no database or persistent storage — all state is in-browser.

There is no managed or hosted version of this tool, no SaaS tier, and no support channel beyond the GitHub repository. What you give up compared to a hypothetical hosted version is zero operational overhead — you handle deployments, fal.ai billing management, secret rotation, and any rate limiting. The upside is full control over the prompts and the ability to swap in different fal.ai models as the ecosystem evolves.