Sprite Sheet Packer

Can I reorder frames before packing?

Frames are packed in the order they were uploaded. To control the order, name your files with sequential numbers before uploading (e.g. frame_001.png, frame_002.png) and select them in order from your file manager.

What does the padding setting do?

Padding adds a transparent pixel gap between each frame in the sheet. This prevents texture bleeding — a visual artifact where the GPU samples pixels from an adjacent frame when rendering at non-integer scales. A padding of 1 or 2 pixels is recommended for most game engines.

How do I choose the right number of columns?

The number of columns determines how many frames appear per row in the packed sheet. For animation sequences, a common approach is to use the total frame count as a single row (columns = frame count), or to use a square-ish layout. Check your game engine's sprite sheet import documentation to see if it has a preferred layout.

Can frames have different sizes?

For best results, all frames should be the same dimensions. Most game engines expect uniform frame sizes in a sprite sheet. If your frames are different sizes, resize them to match before uploading — the tool will use the first frame's dimensions as the cell size.

Which game engines accept the output sprite sheet?

The packed PNG sprite sheet works with any engine that supports sprite atlases, including Unity, Godot, GameMaker Studio, RPG Maker, Phaser, and Defold. Import the sheet and configure the frame dimensions in your engine's sprite editor to match the cell size you used when packing.

Can I download a JSON data file with the frame coordinates?

Yes. Click "Download JSON" after packing to get a JSON file containing the pixel coordinates of every frame in the sheet. The format lists each frame's x, y, width, and height, which most game engines and texture atlas tools can import directly. Unity, Godot, and Phaser all support JSON-based sprite atlas definitions.

How do I handle frames with different dimensions?

Set the Frame Width and Frame Height fields manually to the target cell size before packing. All uploaded frames will be drawn into cells of that size — frames smaller than the cell will be centered, and frames larger than the cell will be cropped. For cleanest results, resize all frames to a uniform size before uploading.

Is there a limit to how many frames I can pack?

There is no hard limit. The tool runs entirely in your browser and uses the HTML5 Canvas API, so the practical limit is your device's available memory. Packing hundreds of small frames (16×16 or 32×32) works reliably on any modern device. Very large frames (512×512 or larger) with many images may slow down on older hardware.

What is texture bleeding and why does padding prevent it?

Texture bleeding is a rendering artifact where the GPU samples pixels from a neighboring frame when rendering at sub-pixel scales, fractional zoom levels, or with bilinear filtering enabled. Adding 1–2 pixels of transparent padding between frames creates a buffer zone that prevents neighboring pixels from being sampled. It is especially noticeable in mobile games and 3D engines where sprites are rendered on textured quads.

Can I preview the packed sheet before downloading?

Yes. The packed sprite sheet is rendered on the preview canvas in real time after each change to columns, padding, or frame size. You can visually verify the layout — frame alignment, spacing, and order — before clicking download. The preview uses the same Canvas rendering that generates the final PNG, so what you see is exactly what you get.