How to Use This Tool
Create a deterministic grid atlas from real image files and retain frame metadata. Pack multiple local images into a sprite sheet, calculate padded frame coordinates, preview the atlas, export CSS positions, and download PNG locally.
The work this page finishes
Combining icons manually loses exact source names and background offsets; a useful sprite workflow must output both the bitmap and deterministic frame coordinates. For Sprite Sheet Maker, a visible row-by-row result preserves provenance, making a single correction possible without rerunning unrelated records or uploading the batch.
Deterministic workflow
Find the largest decoded frame, create a padded fixed-size cell grid in source order and derive each image's top-left coordinate and negative CSS background position. For Sprite Sheet Maker, input guards stop after 5,000 records or 2 MB, and the report separates fatal input problems from recoverable row warnings.
Why a dedicated interface helps
Download the PNG and coordinate CSV together, then reference the reported offsets in CSS or convert the manifest for the target engine. For Sprite Sheet Maker, deterministic ordering, one-click copying and a downloadable artifact make repeated operational review easier than manually reconstructing a response from prose.
Assumptions
- Source order is meaningful.
- Images retain original pixel dimensions.
- Transparent padding is acceptable.
For Sprite Sheet Maker, do not discard the source after export: compare the destination result with it, and remember that local execution cannot secure the surrounding device or browser add-ons.
Limitations and review boundary
Fixed cells prioritize reproducibility over optimal packing and do not trim transparency, rotate frames, extrude edges or emit engine-specific atlas formats. For Sprite Sheet Maker, user values are never run as script, rendered as markup or fetched as network destinations; the page writes them only into text nodes.
Verification and provenance
On 2026-08-26, the rule and examples were cross-checked with MDN — Canvas API, including a known result, a rejected input and a conflict or duplicate case. Four differently sized frames in two columns produce a two-row atlas and a stable coordinate record for every filename.
Sources & assumptions
Tool Spec v2 · verified 2026-08-26. Platform rules and fees can change; the editable inputs remain authoritative for your account.
Official references
- MDN — Canvas API (checked 2026-08-26)
Model assumptions
- Source order is meaningful.
- Images retain original pixel dimensions.
- Transparent padding is acceptable.
- Fixed cells prioritize reproducibility over optimal packing and do not trim transparency, rotate frames, extrude edges or emit engine-specific atlas formats.
