Sprite Sheet Generator

Pack original-size images into a transparent PNG grid and download exact JSON coordinates.

Pack images into a predictable row-major grid without resizing, rotating or trimming. Export a transparent PNG and a matching JSON list of exact image rectangles.

Choose or drop still PNG or JPEG images (24 maximum)

Columns

Equal cells use the largest image width and height. Images sit at each cell’s top-left. Columns are capped at the image count.

Spacing (px)

Outer margin (px)

Local image processing; no source upload. Still PNG through 8-bit and ordinary 8-bit JPEG only; no APNG, GIF, WebP, SVG, HEIC, 16-bit PNG or compound JPEG. Up to 24 images, 10 MiB each, 50 MiB per selection, 32 million source pixels combined. Each source and the output: at most 12 million pixels and 8,192px per side. PNG export: at most 60 MiB. Browser decoding can change color and applies supported orientation. Original metadata and color profiles are not copied to the PNG. Keep your originals.

This tool runs entirely in your browser. Your data is never uploaded, never stored, and never leaves your device.

Sprite Sheet Generator packs original-sized images into a transparent regular grid and exports matching PNG and Toolvore-format JSON frame coordinates without trimming or rotating.

How to use it

1Select local still images, arrange their row-major order and remove unwanted files.
2Choose columns, spacing and margin; inspect the predicted sheet dimensions and preview.
3Create the sheet, download both PNG and JSON, and adapt the documented coordinates to your renderer.

Example

Input: 4 × 2 and 2 × 3 images; 2 columns; spacing 1; margin 2
Output: 13 × 7 PNG and JSON rectangles (2, 2, 4, 2), (7, 2, 2, 3)

Complete image bounds are retained. The largest width and height define 4 × 3 cells.

What happens to your data

Local decoding, packing and downloads require no source upload. Original filenames are included in the downloaded JSON, not sent to a server; review those labels before sharing. The PNG does not copy source metadata.

Last updated October 2026

Create a transparent sprite sheet PNG and a matching JSON coordinate manifest from an ordered set of local images. The grid keeps each sprite's decoded dimensions and places it at the top-left of an equal-sized cell. No image is rotated, scaled, trimmed or silently discarded. Reorder the list, set spacing and check the exact sheet dimensions before exporting.

This sprite sheet generator is for straightforward assets and predictable rectangles, not a replacement for a game-engine-specific atlas pipeline. It uses a documented Toolvore JSON format. You may need a small adapter for your engine, and the tool does not claim drop-in compatibility with Phaser, Unity, Godot or TexturePacker exporters.

How it works

Choose up to 24 supported still PNG or JPEG files. Selection order becomes row-major frame order: left to right, then top to bottom. Use the arrow buttons to move an image or Remove to exclude it. New file selection replaces the list. Columns can be 1–24 and are capped at the number of images, so asking for 24 columns with three images produces three columns, not 21 additional blank cells. The last row can have unused transparent cells.

Each cell uses the largest source width and largest source height, which may come from different images. A smaller image stays at its cell's top-left without centering or scaling. Spacing separates cells; outer margin surrounds the entire sheet. With two images measuring 4 × 2 and 2 × 3, two columns, 1px spacing and a 2px margin, each cell is 4 × 3 and the result is 13 × 7. Their frame rectangles are (2, 2, 4, 2) and (7, 2, 2, 3). The remaining area of each cell is transparent.

Download both sprite-sheet.png and sprite-sheet.json. The JSON format field is toolvore-sprite-sheet-v1. Its size contains width and height; layout records columns, rows and cell dimensions. The frames array contains one entry per source, with a zero-based index, original filename, frame rectangle using x, y, width and height, sourceSize, rotated: false and trimmed: false. Coordinates are integer pixels from the top-left of the PNG, with x increasing rightward and y downward. Rectangles describe complete source images, including transparent edges, not the entire cell. Duplicate filenames remain separate entries identified by their array index. JSON filenames stay local but are included in the downloaded manifest, so review them before sharing it.

This is regular-grid packing, not an optimal bin-packing algorithm. There is no transparent-edge trimming, rotation packing, border extrusion, mipmap protection, animation timing, CSS export or power-of-two sizing. Space between sprites remains transparent; it is not duplicated edge color and cannot guarantee against texture bleeding in every renderer. If your engine requires a particular exporter, pivots, extrusion or trimmed-source offsets, use a specialized atlas packer or adapt and test the data deliberately.

Input limits are still PNG through 8-bit and ordinary 8-bit JPEG, 10 MiB per file, 50 MiB per selection and 32 million source pixels combined. APNG, GIF, WebP, SVG, HEIC, 16-bit PNG and compound JPEG are unsupported. Each source and the final sheet must be at most 12 million pixels and 8,192px per side, with a maximum 60 MiB PNG download. Columns or spacing that exceed the final canvas limit are rejected. Browser decoding can apply orientation and color conversion; source metadata and profiles are not copied to the PNG. Processing and downloads happen locally. A changed setting, reordered source or replacement file invalidates both old downloads so the PNG and coordinates cannot silently diverge.

Worked example: Pack two original-sized sprites with coordinates

Input: 4 × 2 and 2 × 3 PNGs; columns 2; spacing 1px; margin 2px
Result: 13 × 7 PNG; rectangles (2, 2, 4, 2) and (7, 2, 2, 3)

Cells are 4 × 3. JSON stores the actual image rectangles, not padded cell sizes.

Common use cases

Preparing a small set of icons for a custom Canvas renderer
Making a predictable grid from differently sized transparent assets
Exporting image coordinates for a prototype or teaching example
Keeping duplicate-named files separate through indexed manifest entries

Frequently asked questions

Does this resize or trim my sprites?＋

No. Each sprite keeps its full decoded size, including transparent edges. Cells use the maximum source width and height. Smaller sprites sit at each cell's top-left; unused cell space remains transparent.

Will the JSON load directly in my game engine?＋

Not necessarily. It uses Toolvore's explicit JSON format with a frames array and x, y, width and height rectangles. Check your engine's requirements and write or use an adapter. No specific engine compatibility is claimed.

What happens when two files have the same filename?＋

Both are kept as distinct frames in selection order. Every entry has a zero-based index; filenames are labels rather than object keys, so one file does not overwrite another.

Does spacing prevent texture bleeding?＋

Spacing inserts transparent pixels between equal-size cells. It does not extrude edge pixels and does not guarantee filtering or mipmap behavior. Configure and test your renderer, or use an atlas packer with extrusion when needed.

Are sprites uploaded, and what is in the downloads?＋

No source upload is required: decoding and packing run locally. The PNG holds the browser-rendered image pixels; the JSON contains the original filenames and coordinates. Review filenames before sharing the manifest. Original image metadata is not copied into the PNG.