Skip to content

Cainiaooo/spritebrew

 
 

Repository files navigation

🧪 SpriteBrew

AI-powered pixel art sprite sheet generator. Upload or generate characters → animate → slice → preview → export game-ready sheets for Unity, Godot, GameMaker, RPG Maker.

Status: Pre-launch · Active development · Join the waitlist

🌐 spritebrew.com — Try it now (free account required for AI generation)


What is SpriteBrew?

SpriteBrew is a web-based tool for game developers and pixel artists that combines traditional sprite sheet workflows with AI-powered generation. Create new characters from text descriptions, animate existing pixel art, preview animations with keyboard controls, and export to every major game engine — all in one place.

Free tools (no account needed): Upload & Slice, Animation Preview, Multi-Engine Export, Pixel Editor, Pixel-Perfect Resizer

AI features (free account, 5 generations/day): Text-to-Sprite Generation, Animate My Character


Features

🎨 AI Sprite Generation

Describe a character in plain text and get a complete animated sprite sheet. Choose from multiple animation styles including 4-angle walking, walking & idle, small sprites, and VFX. This local fork routes generation through OpenAI's gpt-image family (direct, via OpenAI-compatible relay, or via a ChatGPT Plus/Pro Codex OAuth token) or Google Gemini Nano Banana 2 — pick whichever credential you have via one env var.

🏃 Animate My Character

Upload your existing pixel art character and generate animation frames from it. Walk cycles, idle loops, attacks, jumps, crouches, and destruction animations — the AI preserves your character's appearance while creating smooth motion. Smart animation padding ensures weapons and motion aren't clipped.

🧙 Auto-Prep Character Pipeline

Drop any character image and SpriteBrew handles the rest: contour-based sprite detection, smart cropping, background removal with adjustable tolerance, and pixel-perfect resize to 64×64. Before/after preview with one-click approval. Edit the prepped image in the built-in pixel editor if auto-detection missed something.

✂️ Upload & Slice

Drop any sprite sheet PNG, configure frame dimensions (auto-detect or manual), and slice it into individual frames. Grid overlay preview, multi-select frames, contour-based detection for non-grid layouts, and smart auto-assignment of animation groups with directional detection.

🎮 Animation Preview

PixiJS-powered interactive demo area with full keyboard controls. Walk your character around with arrow keys, trigger attacks with spacebar, and test animations in real-time. Supports 4-directional movement for top-down RPG sprites. Multiple tiled backgrounds (grid, grass, dungeon, stone).

📦 Multi-Engine Export

Export to six formats in one click:

  • TexturePacker JSON Hash (Unity, Godot, general)
  • Aseprite JSON (pixel art workflow)
  • GameMaker horizontal strips
  • RPG Maker MV/MZ 3×4 grid
  • Godot SpriteFrames .tres
  • Raw Frames ZIP (individual PNGs)

🖌️ Pixel Editor

Click any frame to open a zoomed pixel editor. Fix AI artifacts, touch up details, or make manual adjustments. Pencil, eraser, eyedropper, color palette, undo/redo (50 states, Ctrl+Z). Edit at 8-16× zoom with pixel grid overlay and 1× preview alongside.

📸 Generation Gallery

Browse all past generations with filtering (Created vs Animated). Download PNGs, send to slicer, or delete. Per-user history — each account sees only their own generations.

🔐 Authentication

Sign in with GitHub or email. Free tools work without an account. AI generation requires a free login (5 generations/day). Powered by Clerk with production SSO.

📐 Pixel-Perfect Image Resizer

Built-in nearest-neighbor resizing for preparing pixel art for animation. Upload a high-res character, resize to 64×64 with crisp pixel-perfect scaling — no blurry bilinear interpolation.

🤖 Agent-Facing CLI

Beyond the web UI, every generation capability is also exposed as a stateless CLI so AI agents can drive SpriteBrew headlessly. Five actions ship today: generate, animate, styles_list, parts_list, codex_build. Self-describing JSON Schema, NDJSON streaming for partial-image previews, unified error envelope, idempotency keys. A bundled Claude Code skill (skills/spritebrew-cli/) teaches Claude how to call it. Powered by Ageniti. See CLI for Agents below.


Tech Stack

Layer Technology
Framework Next.js 16 (React 19)
Styling Tailwind CSS v4
State Zustand
Animation PixiJS 8
Auth Clerk (@clerk/react)
AI Backend OpenAI gpt-image (native / relay / Codex OAuth) · Google Gemini
Storage Cloudflare KV
Export JSZip
Hosting Cloudflare Pages
License AGPL-3.0

Architecture Highlights

  • SSE streaming with 15-second heartbeats to work around Cloudflare Pages' 120-second proxy timeout during long AI generations
  • Base64 image pipeline — no URL expiration issues, images cached per-user in generation gallery
  • Per-user daily limits via localStorage with admin bypass for development
  • Waitlist system backed by Cloudflare KV for Pro tier signups
  • Contour-based sprite detection using connected component labeling for non-grid sprite sheets
  • Calibration-driven development — when AI APIs are undocumented, we write targeted calibration scripts to get ground truth

Getting Started (Development)

# Clone the repo
git clone https://github.com/GAlbanese09/spritebrew.git
cd spritebrew

# Install dependencies
npm install

# Set up environment variables
cp .env.example .env.local

Add your API keys to .env.local (see .env.example for the full template). The generation layer has two orthogonal knobs: IMAGE_GEN_AUTH_MODE chooses where the credential comes from, and the legacy IMAGE_GEN_API_PROVIDER only kicks in when you need Gemini or a Responses-API relay. Pick whichever credential you have:

# ── Credential source (required) ──
#   api-key     — env OPENAI_API_KEY + OPENAI_BASE_URL (default)
#   codex-key   — ~/.codex/auth.json `OPENAI_API_KEY` field
#   codex-oauth — ~/.codex/auth.json OAuth tokens → chatgpt.com/backend-api/codex
#   codex-auto  — env api-key → auth.json api-key → auth.json oauth
IMAGE_GEN_AUTH_MODE=api-key

# Only set this when you want the non-default path:
#   empty                 — use the Images API (default)
#   gpt-image-responses   — relay-only mode that routes via /v1/responses
#   gemini                — bypass auth-mode and use GeminiAdapter
IMAGE_GEN_API_PROVIDER=

# ── GPT Image (OpenAI-native or OpenAI-compatible relay) ──
OPENAI_BASE_URL=https://api.openai.com    # default; relay: https://your-relay.com
OPENAI_API_KEY=sk-...
OPENAI_IMAGE_MODEL=gpt-image-2            # default
OPENAI_IMAGE_QUALITY=high                 # low | medium | high | auto

# ── GPT Image via Responses API (relay-only mode) ──
# Some relays only expose /v1/responses (not /v1/images/generations).
# They also encode the output size into the model name suffix
# (gpt-image-1024x1536). Set both of:
#
# IMAGE_GEN_API_PROVIDER=gpt-image-responses
# OPENAI_IMAGE_MODEL=gpt-image            # prefix only — adapter appends size

# ── Codex OAuth (free for ChatGPT Plus/Pro subscribers) ──
# Log in once with `codex login` (no --with-api-key) so ~/.codex/auth.json
# has the `tokens` block. Then:
#
# IMAGE_GEN_AUTH_MODE=codex-oauth
# CODEX_HOME=                             # empty → ~/.codex
# CODEX_MAIN_MODEL=                       # empty → gpt-5.5
#
# Generation runs against your ChatGPT subscription quota, not API billing.
# On 401 the adapter auto-refreshes via the Codex CLI public client_id.

# ── Gemini Nano Banana 2 (non-mainline) ──
# IMAGE_GEN_API_PROVIDER=gemini
GEMINI_BASE_URL=https://generativelanguage.googleapis.com
GEMINI_API_KEY=AIza...
GEMINI_IMAGE_MODEL=gemini-3.1-flash-image-preview

Only fill in the provider you've selected — the other sections can stay empty. Reference-image edits accept up to 16 images per request. Detailed per-provider notes (relay quirks, model name conventions, transparent-background handling) are in docs/usage.md.

# Run development server
npm run dev

Open http://localhost:3000 to see the app.

Note: The waitlist feature requires a Cloudflare KV binding (SPRITEBREW_KV) to work in production. Local development works without it (falls back to in-memory storage).


CLI for Agents

SpriteBrew ships an Ageniti-powered CLI so AI agents can generate sprites without opening the browser. The CLI is stateless (no auth / no token billing / no history persistence) and shares all generation logic with the web UI through src/lib/generation/ — fix a bug once and both surfaces benefit.

Quick start

# Discover what's available
npm run cli -- actions                          # list all actions + JSON Schemas
npm run cli -- generate --schema                # one action's schema
npm run cli -- styles_list --tier fast          # browse generation styles
npm run cli -- parts_list --category eyes       # browse outfit parts

# Generate
npm run cli -- generate \
  --prompt "a cute red dragon, big eyes" \
  --style character --width 64 --height 64

# Animate (input must be raw base64, no data: prefix)
B64=$(base64 -w0 char.png)
npm run cli -- animate --input-image "$B64" --action walking --frames-duration 6 --ndjson

Output is a unified envelope ({ ok, data | error, artifacts, logs, meta }); --ndjson switches to per-line streaming events including in-progress AI partial frames. Errors are typed (VALIDATION_ERROR, INTERNAL_ERROR, etc.) with non-zero exit codes.

Five actions

Action Purpose
generate Text → single pixel-art sprite
animate Existing sprite → multi-frame animation strip
styles_list Filter generation styles by tier or category
parts_list Browse Pixabots outfit parts (eyes / heads / body / top)
codex_build Pack 9 state PNGs into a Codex Pet bundle (pet.json + WebP atlas)

Skill for Claude Code

A ready-to-use Claude Code skill lives at skills/spritebrew-cli/. Install it locally and Claude will auto-load CLI usage guidance whenever you ask for headless sprite generation:

npm run skills:install     # copies skills/* → .claude/skills/*

See skills/README.md for global-install and authoring instructions.

Architecture

bin/spritebrew.ts → src/ageniti/app.ts → 5 actions → src/lib/generation/* → src/lib/imageGen/*
                                                          ↑
                                                  src/app/api/generate/route.ts
                                                  (SSE wrapper for the web UI)

Both the SSE route and the CLI actions call the same runCreate / runAnimate functions. Add a new action by dropping a file under src/ageniti/actions/ and registering it in src/ageniti/app.ts — the schema is auto-discovered. Detailed call paths: see CLAUDE.md.


The Story

SpriteBrew exists because a friend is building a pixel art game and needed sprite sheets. Making them by hand is brutally slow — every frame, every direction, every animation state, hand-drawn. There had to be a better way.

Built by George Albanese — an endpoint automation engineer by day, solo indie developer by night. Built with Claude, session by session, from empty repo to production tool.


Roadmap

  • Phase 1: Web shell, sprite slicer, export engine (6 formats)
  • Phase 2: AI integration (Retro Diffusion)
  • Landing page and waitlist
  • Clerk production auth
  • Visual style picker with live previews
  • Full Retro Diffusion direct API migration (unlocks 40+ styles)
  • Credit system with Stripe integration
  • OpenNext migration (replace deprecated @cloudflare/next-on-pages)
  • Self-hosted AI pipeline (ComfyUI on RunPod)
  • Isometric sprite support
  • Tauri desktop app (Phase 4)

Acknowledgments

  • Retro Diffusion — the AI models that make SpriteBrew's pixel art generation possible. Built by pixel artists, for pixel artists.
  • Clerk — authentication without the pain
  • Cloudflare — Pages, KV, and the infrastructure that keeps this running on a hobby budget
  • PixiJS — the rendering engine behind the animation preview
  • Claude (Anthropic) — architect, research partner, prompt writer, rubber duck
  • George's friend — the reason this exists in the first place [https://github.com/mohammadsalim]

License

AGPL-3.0 — Open source with SaaS protection. You can use, modify, and distribute SpriteBrew, but if you deploy a modified version as a service, you must release your changes under the same license.


Contributing

SpriteBrew is in early development and pre-launch. If you're interested in contributing, please open an issue first to discuss what you'd like to work on. A Contributor License Agreement (CLA) will be required before merging PRs.

Bug reports, feature suggestions, and feedback are welcome via GitHub Issues.


Built with ☕ and Claude · spritebrew.com

About

AI-powered pixel art sprite sheet generator. Upload or generate characters → animate → export game-ready sheets for Unity, Godot, GameMaker, RPG Maker.

Resources

License

Stars

0 stars

Watchers

0 watching

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages

  • TypeScript 97.9%
  • JavaScript 1.4%
  • CSS 0.7%