A modern, browser-based Sprite Sheet packing tool designed specifically for game developers. Drag and drop your loose PNG animation frames, pack them efficiently using the MaxRects algorithm, and export the generated Sprite Sheet and coordinate JSON metadata instantly—all without a server.
- 100% Client-Side: No servers, no uploads. Everything processes securely and instantly in your browser using HTML5 Canvas.
- Drag & Drop Interface: Upload images natively by dropping them into the app.
- MaxRects Packing Algorithm: Industry-standard bin packing that eliminates wasted transparent space.
- Auto-Size (Tight Fit): Automatically calculates the smallest possible bounding box and crops the final Canvas to fit perfectly.
- Live Canvas Preview & Zoom: Real-time visualization of the packed sprite sheet on a checkerboard background to inspect padding.
- Game Engine Ready Export: Downloads both the
spritesheet.pngand a.jsonfile containing precise X/Y coordinates for engines like MonoGame, Unity, and Godot.
- Visit the Live Site.
- Drag and drop your individual sprite/animation frames into the central dropzone.
- Adjust the
Paddingif you need spacing between sprites to prevent bleeding. - Keep
AUTO-SIZE CANVASchecked for the best fit, or uncheck it to force a custom Power-of-Two (POT) resolution. - Click EXPORT SPRITESHEET to get your
.pngand.json.
- React 19
- TypeScript
- Vite
- HTML5 Canvas (for all rendering and image processing)
This project is licensed under the MIT License.
# Install dependencies
npm install
# Start the dev server
npm run dev
# Build for production
npm run build