PNG to Sprite Sheet
Combine PNG frames into one sprite sheet. Drop the folder in, set the columns, export.
From a folder of PNGs to one sheet
Drag a stack of PNGs onto the canvas, or pick them from a file dialog. They land in a sprite sheet grid in the order you gave them. After that it is columns, spacing, and cell size until the layout matches what your engine wants. Layers keep separate animation states or character parts apart while you work, and the export composites them back down with the metadata file attached.
Batch upload
Dozens or hundreds at a time. Selection order becomes frame order, so name your files well.
Frame order
Import sequentially, or assign sprites to exact cells. Animations care about this more than anything else on the page.
Mixed sizes
PNGs of different dimensions are fine. Cell size auto-detects from the largest, or you type one in and every frame is held to it.
Background control
Transparent, white, black, or a colour you pick. The checkerboard toggle is there for when you need to see what is actually transparent.
Multi-layer packing
Split sprites across named layers, characters on one and effects on another. The export flattens them.
Export
PNG, JSON atlas, GIF, ZIP, or a format written for Unity, Godot, Phaser, Tiled, Aseprite, or CSS.
Where a folder of PNGs comes from
Almost every art pipeline spits out numbered PNGs at some point. Aseprite exports frames as separate files when you tick that box, Blender renders an animation one file per frame, Spine and DragonBones dump frame sequences, and asset packs from itch.io often arrive as a folder rather than a sheet. All of it is the same shape of problem: a directory of images that an engine would rather see as one texture.
Combining them by hand in a paint program means placing each frame on a canvas and getting the maths right on every one. Miss by a pixel on frame nine and the character twitches in game. A grid packer does the arithmetic instead, which is the whole point of dropping the folder here.
Frame order is decided by filenames
Frames land in the order the file dialog hands them over, which is alphabetical, not numerical. That distinction bites people. Files named frame1 through frame12 sort as 1, 10, 11, 12, 2, 3 and your walk cycle plays with a lurch in the middle. Pad the numbers instead: frame01 through frame12, or frame001 upward if you might pass a hundred. Rename before you import and the grid is right on arrival.
When the names are beyond saving, fix the order in the editor. Frames drag between cells, and a multi-select moves a group at once, so shuffling four idle frames ahead of eight run frames takes a moment. The animation preview is the check: play it, and a frame in the wrong place is obvious in a way that a static grid never is.
Mixed sizes, alignment, and the pivot problem
A batch of PNGs rarely shares one size, because most exporters trim transparent edges away. Trimmed frames are smaller and tighter, but they no longer agree about where the character stands. Drop them into cells as they are and the sprite bobs around, since each frame is centred on its own bounding box rather than on the feet.
The fix is to pick one cell size big enough for the largest frame and then align consistently inside it. Bottom centre alignment suits anything standing on ground: feet on the same row in every cell, and the head free to move. Centre alignment suits projectiles and effects that have no ground contact. Per sprite X and Y offsets handle the odd frame that still needs a nudge, such as a crouch that should sit lower than the rest.
Set the cell size explicitly when you know what the art was drawn at. Auto detection from the largest frame is a good default, but one oversized effect frame in the batch will inflate every cell in the sheet if you let it.
Keeping transparency clean
PNG carries a real alpha channel, and that survives import, editing, and export here. What ruins transparency is usually something upstream: a frame saved with a white background baked in, or art scaled by an interpolating resampler that left soft grey halos around every edge. Neither is repairable by the packer, so it is worth checking with the checkerboard toggle before you build the sheet.
The background control exists for the cases where you do want a solid colour, such as a sheet destined for a format with no alpha at all, or a preview image for a store page. Set it to white, black, or any colour you pick, and the export bakes it in. Leave it transparent for anything an engine will draw over a scene.
A short checklist before you export
Four things are worth confirming, because each one is cheap to check now and expensive to discover in the engine.
Pre-flight checklist
- Frame order: play the preview once through rather than trusting the grid.
- Cell size: it should match the frame size your art was drawn at, not a rounded up number.
- Alignment: pick bottom centre for anything that stands on ground and confirm the feet stay on one line across the cycle.
- Background: transparent for engine use, and worth toggling the checkerboard on once to confirm no frame arrived with a solid white rectangle baked into it.
After that, the export choice follows the target. A plain PNG if your engine slices by cell, an atlas format if your loader wants named frames, and a project save alongside either one so next weeks change to a single frame does not mean assembling the folder again from scratch.
More questions? See the full FAQ.
Combine PNGs into a sprite sheet
Drag a folder of PNGs in and the grid builds itself.
Open the editor