Free Sprite Sheet Generator — Pack Frames into Atlas + JSON
Game engines render animations and sprite atlases far more efficiently from a single packed texture than from dozens of individual files. PikDraw's Sprite Sheet Generator takes any number of equal-size frames and outputs a clean PNG atlas plus a TexturePacker-style JSON manifest — entirely in your browser.
What is the Sprite Sheet Generator — Tile Frames into One Image?
Sprite Sheet Generator is a client-side atlas packer. You upload frames, pick a column count and padding, and it emits a single PNG containing every frame plus a JSON file describing each frame's position. Drop both into Phaser, PixiJS, Godot, Unity or any engine that consumes sprite atlases.
Key features
- Up to 256 frames per sheet
- Configurable columns and padding
- Transparent, solid or magenta-key background
- TexturePacker-compatible JSON manifest
- PNG output with full alpha
- Sheets up to 8192 × 8192
- 100% client-side — frames never upload
- Free, unlimited, no signup or watermark
How it works
We measure the first frame, allocate an offscreen canvas of (cols × frameW + padding) × (rows × frameH + padding), draw each frame at its grid slot, then export the canvas as a PNG. The JSON is built by walking the same grid and emitting {frame: {x,y,w,h}} entries keyed on the original filename.
Why use this tool
Most online sheet generators force frames through an upload, watermark the output, or cap the free tier. PikDraw runs locally, supports arbitrary frame counts (within browser RAM), emits engine-ready JSON, and never asks for an account.
Common use cases
- Packing character animation frames for game engines
- Bundling UI icons into a single texture for HUDs
- Reducing draw calls in mobile games
- Generating CSS sprite atlases for web apps
- Creating particle sprite sheets
- Pre-baking emoji sets into a single asset
- Game-jam asset packaging
How to use this tool
- Upload your frames — Drop every frame of your animation or every icon you want packed. Order them by filename — the tool packs them left-to-right, top-to-bottom in upload order.
- Set columns — Pick how many frames per row. Total rows are calculated automatically. Most game engines accept any rectangular sheet, but engine-friendly choices include 4, 8 or 16 columns.
- Configure padding — Add 0–32 px of padding between frames to prevent bleeding when GPUs sample neighbouring pixels. 2 px is a safe default for pixel art; 4–8 px for high-res sprites.
- Pick background — Transparent (default), solid colour, or magenta key for legacy engines. The sheet is always a PNG with full alpha.
- Download sheet + JSON — The PNG is named after your project; the JSON manifest lists frame coordinates ({x, y, w, h}) ready to feed into Phaser, PixiJS, Unity, Godot or any engine that consumes atlases.
Who should use this
Indie game developers, animators producing sprite-based content, UI designers consolidating icon sets, web developers building CSS sprites, and educators teaching 2D animation pipelines.
How to get started
Drop your numbered frames, choose columns and padding, and click Generate. Download the PNG and JSON together.
Best practices
- Pre-trim transparent margins from every frame for tighter sheets
- Use 2 px padding for pixel art, 4–8 px for high-res sprites
- Number filenames with leading zeros so they sort correctly
- Keep sheets ≤ 4096 × 4096 for cross-platform GPU support
- Ship the JSON alongside the PNG — engines need both
Pro tips
- Frames must all be the same dimensions — the tool uses the size of the first frame.
- Number filenames (frame_001.png … frame_064.png) so they pack in the right order.
- Keep sheets under 4096 × 4096 to support older mobile GPUs.
- If you need power-of-two dimensions, add filler padding to the last row.
Expert insights
💡 Number Your Frames
Save frames as anim_001.png, anim_002.png … so the packer maintains your animation order.
💡 Add 2 px Padding
A 2 px gutter prevents adjacent frames from bleeding when the GPU samples sub-pixel coords.
💡 Ship the JSON
Modern engines need the manifest to know where each frame lives — don't forget to download both files.
Limitations to be aware of
- Equal-size frames only — no bin-packing of irregular sprites
- Single grid layout per sheet
- No per-frame pivots in v1
- Sheets capped at 8192 × 8192 by browser canvas limits
Frequently asked questions
- What frame sizes are supported?
- Any size — the tool reads the dimensions of the first uploaded frame and pads every other frame to match. For best results upload frames that are already identical.
- Can I generate a TexturePacker-style JSON?
- Yes. The manifest we emit follows the Hash-style atlas spec used by TexturePacker, Phaser 3 and most modern engines. It includes filename, frame rect, source size and a pivot at (0.5, 0.5).
- How big can the sheet be?
- We support sheets up to 8192 × 8192. Beyond that, browser canvas limits kick in. Most engines max out at 4096 × 4096 — design accordingly.
- Does it optimise the sheet?
- No — we pack frames into a regular grid (great for animations). For dense atlases of irregular sprites use desktop packers like TexturePacker that support rectangle bin-packing.
- Are my frames uploaded?
- No. Everything happens in your tab — the frames, the canvas, the PNG export. Nothing leaves your machine.
- Can I add per-frame anchor points?
- Not in v1 — every frame is given a centre pivot (0.5, 0.5). Custom pivots are on the roadmap.