Sprite sheet maker with trimming, padding and engine atlas JSON
Build a compact atlas from your own animation frames. Keep trim offsets, rotation, borders and frame order visible so the image and engine data stay in agreement.
Sprite Atlas Studio
The local example creates eight floating-character frames. Compare trimming on/off, inspect the padded borders, and play the animation reconstructed from the packed atlas.
Supported scope: 1–128 individual PNG/JPEG files; at most 4 MiB each, 20 MiB combined, 2048 pixels per input edge and 4,194,304 decoded source pixels total. One atlas up to 2048 × 2048. Animated PNG, GIF, WebP, SVG and video input are unsupported. No resizing, multiple atlas pages, mipmaps, polygon packing or preservation of original color profiles/EXIF. Browser Canvas and CompressionStream support are required. Packing is heuristic and does not guarantee the mathematically smallest atlas.
Your frames
Required fields are marked with an asterisk.
Atlas workspace
Review your output, then save it to your device.
Make the next step clear.
Your findings, assumptions and next steps will appear here after you run the check.
Sprite Atlas Studio · https://sprites.kitforma.com/ · KitForma
Real local PNG/JPEG packing
Trim, extrusion and optional rotation
Animation preview and engine metadata
Understand the evidence.
Focused guides explain the rules, the edge cases and the checks worth doing before you act.
Make a sprite atlas with matching engine coordinates
Prepare individual frames, inspect a real packing result and keep the image with its metadata.
Read the guide ↗Field guide / 02Understand sprite trimming, padding and edge extrusion
Choose border settings deliberately and inspect the cost in atlas space.
Read the guide ↗Field guide / 03Read rotated atlas coordinates and preserve animation order
Distinguish logical frame dimensions from physical image rectangles before adapting a loader.
Read the guide ↗Before you start
Does it create an actual atlas image or only a coordinate list?
It creates a real RGBA PNG containing the packed frame pixels. The metadata is generated from the same placements. The animation preview reads the atlas and restores trim offsets and rotated frames, so it can reveal coordinate problems instead of only replaying the source files.
What is the difference between padding and extrusion?
Padding is empty transparent space outside each frame’s extrusion ring. Extrusion repeats the closest edge pixel around the frame. Both are excluded from engine frame coordinates. Because padding is per side, adjacent frame content can have two padding margins plus two extrusion rings between it. Extrusion can help filtering at edges, but does not guarantee every mipmap or sampling setup will be artifact-free.
How are transparent and trimmed frames represented?
Only completely transparent outer rows and columns are removed. Pixels with nonzero alpha remain. Original dimensions and trim offsets are recorded so the engine can restore positioning. An entirely transparent image becomes a 1 × 1 transparent tile with its original source size retained; it is not silently dropped from the animation.
Which engines can use the JSON?
The named-frame JSON targets PixiJS 8 spritesheets and non-rotated Phaser 3.90 JSONHash atlases. Turn rotation off for Phaser; rotated Phaser rendering is not claimed. Rotated frame w/h values are logical unrotated dimensions; the detailed manifest additionally records the physical packed rectangle. All anchors are centered. Custom loaders and other engine formats may need an adapter; inspect the output in your project.
Are my files uploaded or saved automatically?
No. Image decoding, packing, previewing and PNG encoding run locally. Downloads contain the atlas and metadata. The tool does not automatically save source images or sync a project, so keep the originals for future changes. Original EXIF, profiles and hidden RGB below zero alpha are not preserved through Canvas conversion.
Why can packing fail even when the source pixels seem small enough?
Trimmed rectangles still need their selected borders, and rectangle shape matters as well as total area. The packer tries several widths using a deterministic heuristic. A failed attempt does not prove that no arrangement exists. Increase the maximum edge, allow rotation, reduce borders or pack fewer frames. One atlas page is supported.
Sources & assumptions
Formats, algorithms and supported features are documented below. Check the stated scope and inspect your output before using it.
- Phaser 3.90 JSON Hash parser ↗
The export uses named frames, source dimensions, trim offsets and rotation flags accepted by this parser.
- Phaser 3.90 frame coordinates ↗
Frame trim dimensions are supported; its rotated-frame warning limits our Phaser output to rotation-off atlases.
- PixiJS 8 spritesheet metadata ↗
The same JSON structure provides frames, animation order, source size, rotation and centered anchors.
- W3C PNG specification ↗
The PNG output uses RGBA scanlines, zlib-compressed image data and CRC-protected chunks.
- MDN: browser image decoding ↗
Local files are decoded through browser image facilities before Canvas pixels are packed.
- MDN: CompressionStream ↗
PNG export uses the browser’s local deflate compressor; no remote encoding service is used.
Reviewed 2026-10-19. Read our methodology or report an issue.