Columns
Control how many frames appear in each row so the sheet stays balanced and readable.
Guide
How to use the Spritesheet Generator
The Spritesheet Generator helps you combine many image frames into a single PNG file and export matching JSON metadata. It is a practical step for 2D game animation workflows when you want cleaner asset handoff.
Overview
When the Spritesheet Generator is useful
If you have separate animation frames such as idle, walk, attack, or effect sequences, combining them into one spritesheet keeps the asset set easier to manage and easier to import into engines. This tool gives you control over columns, cell size, padding, and JSON export format.
Step 1
Upload every frame you want to combine
- Open the Spritesheet Generator and drag in all the animation frames.
- Keep the frame order organized from the start so the final animation sequence stays correct.
- If the source frames are inconsistent, prepare them first with the Pixel Art Converter.
Step 2
Set columns, cell size, and padding
Cell size
Use a fixed cell size when you want every frame to align cleanly in a uniform animation grid.
Padding
Add spacing between frames to reduce pixel bleeding or incorrect texture sampling in some pipelines.
Step 3
Build the spritesheet and inspect the preview
After choosing your settings, click `Build spritesheet` to generate a preview. At this stage, check whether any frame is cropped, distorted, or offset by the wrong padding. If the result does not look right, adjust the columns or cell size before exporting.
Step 4
Export the PNG and JSON files
- Download the `spritesheet PNG` if you only need the combined image atlas.
- Download the `spritesheet JSON` if you want frame positions, rows, columns, and layout metadata.
- Use the JSON output for Phaser or other animation import workflows to reduce manual setup.
FAQ
Common questions
How many columns should I use?
Four to eight columns are often a practical range for many medium-sized animation sets, but the best number depends on your frame count and frame size.
Is padding really necessary?
Yes, especially when you want to reduce texture sampling issues between frames in some engines or atlas workflows.
When should I export JSON?
Export JSON when you want to preserve frame metadata for engine import, animation systems, or any reusable asset pipeline.
Related