PNG texture atlas
Pack game sprites into a PNG atlas with exact coordinates, transparent pixels and edge extrusion.
- 1Add input
- 2Adjust settings
- 3Get your result
Tool input and files are processed in this browser without being uploaded.
Before you start
Build one texture sheet for independent sprites. Keep each source pixel and alpha channel, then download the sheet, coordinate map and numeric CSS classes for your renderer. Gutter leaves blank space; extrusion copies edge pixels into a separate ring.
How to use this tool
- Choose your independent PNG sprite files.
- Set atlas width, blank gutter and edge extrusion. A border is reserved on every side of each sprite.
- Inspect the checkerboard preview and actual pixels, then download atlas.png, atlas.json and atlas.css together.
Supported inputs and limits
1–500 PNG files, each up to 5 MiB and 30 MiB combined. Sources total up to 8 million pixels; the atlas up to 16 million pixels and 8,192 pixels per side. The chosen width must fit every sprite plus both borders.
Only static, noninterlaced 8-bit RGB/RGBA PNG with no palette, transparent-color key, color profile/gamma/chromaticity/EXIF or animation extensions. Known text/time/pixel-density metadata is discarded. Every channel, including RGB under alpha zero, is preserved. No trim or rotation. Packing follows input order with deterministic shelves, not optimal bin packing.
Worked example
Example input
Three independent PNG fixtures: 5×5 RGB, 5×5 RGBA and 7×7 RGBA.
Example options
{"width":32,"gutter":1,"extrusion":1}Example output
3 assets in a 32×11 atlas; PNG, coordinate JSON and CSS. Original sprite crops preserve every RGBA channel.
When something does not work
Reduce the gutter or width-dependent overflow, choose a larger atlas width, or remove excess source pixels. Export unsupported PNG variants as basic RGB/RGBA without color management, then run again.
Frequently asked questions
Is this a collage or contact sheet?
The coordinate map preserves independent sprite bounds, and the CSS uses those actual pixel coordinates. Edge and corner extrusion helps sampling near sprite borders.
Can duplicate names collide?
Every input has a unique numeric index and CSS class. Original names remain in the JSON map and are never inserted as CSS code.
Why is my PNG rejected?
Export a basic noninterlaced 8-bit RGB/RGBA PNG without color-management, palette, EXIF or animation extensions. Do not rename a JPEG as PNG. A damaged CRC or compressed stream also fails.