A powerful, standalone developer tool for AI-powered sprite sheet generation, analysis, and fine-tuning. Built to streamline the creation of high-quality pixel art assets.
- 🤖 AI-Powered Generation: Leverage Google Gemini and Imagen to generate individual sprite cells from text descriptions.
- 👁️ Vision-Based Analysis: Automatically describe existing sprite sheets using Gemini Vision to maintain consistent style and motion.
- 🧩 Smart Slicing & Stitching: Effortlessly slice large PNGs into individual frames and reassemble them into optimized sprite sheets.
- 🎨 Integrated Pixel Editor: A dedicated canvas for manual touch-ups, drawing, and color correction.
- 🧪 Hex Grid Experiment: A unique workflow for creating and editing 64x64 pixel art using a markdown-based hex grid format, optimized for LLM "reasoning" about pixel placement.
- 📦 Game Asset Export: Direct integration to export finished sheets.
- Frontend: Next.js 15 (React 19, TypeScript)
- Backend APIs: Next.js Route Handlers
- Image Processing: Node.js
sharp& PythonPillow - AI Integration: Google Gemini API (Pro Vision & Flash)
- Styling: Vanilla CSS / CSS Modules
- Node.js: v18+ (tested on v20+)
- Python: 3.10+ (for backend image processing scripts)
- Gemini API Key: Obtain one from Google AI Studio.
-
Clone and enter the tool directory:
cd tools/sprite-maker -
Set up environment variables:
cp .env.local.example .env.local # Edit .env.local and add your GEMINI_API_KEY -
Install Node dependencies:
npm install
-
Set up Python environment: The tool reuses the existing Python virtual environment from the main project. If you need to set it up manually:
# Ensure Pillow is installed in your preferred venv pip install Pillow
Start the development server:
npm run dev
# The tool will be available at http://localhost:3002- Analyze: Upload a source sprite sheet (e.g., a reference animation). Select a frame size (16x16, 32x32, 64x64, etc.) and slice it into cells.
- Describe: Use "Describe All" to let Gemini Vision generate detailed prompts for every frame in the sequence.
- Generate: Queue the descriptions for AI generation. Imagen will produce new, high-fidelity pixel art based on the prompts.
- Stitch: Choose the best results, reassemble them into a final sheet, and export to your game assets.
- Edit: Use the Pixel Editor for frame-by-frame precision.
The Hex Grid tool (/hex-grid) allows you to "talk" to your pixels.
- Use the Pencil or Fill tools to block out shapes.
- Type a prompt like "refine the shading on this sword" and click Apply with Gemini.
- The tool converts the canvas to a compact hex string grid, allowing the LLM to understand and modify specific coordinates accurately.
This project is licensed under the MIT License - see the LICENSE file for details.