Making a Sprite Sheet from Individual Frames

If you have individual frames (from animations, poses or your own art), packing them into one image makes them easier to load and animate. In this guide we'll do it with the free tools, which run in your browser and need no account.

Animations made on Voidless

For an animation you generated, you don't need a separate tool: open its menu in the editor and choose Add to sprite sheet, then Download Sprite Sheet. Use the rest of this guide for loose frames, mixed sprites, or art from elsewhere.

Step 1: Normalise the frames

Before packing, make sure frames of one animation are the same size and the character sits in the same spot in each (usually feet centred). Mismatched sizes or a shifting anchor cause jitter and slicing errors.

Step 2: Pack them

Open the Sprite Sheet Packer and drop in your PNGs. It packs them into one atlas and exports:

• the packed PNG,
• a JSON coordinate map (works with Phaser and PixiJS),
• a CSS spritesheet.

Step 3: Keep the frame data

For a uniform grid, note the frame width, height, columns and rows. For a packed atlas, keep the JSON next to the PNG; your engine reads the frame rectangles from it, so there's no frame maths to do.

Step 4: Import into your engine

Load the sheet with its frame size (or the atlas with its JSON), then define animations by frame range or frame name and set a frame rate.

Going the other way

To cut an existing sheet into separate frames, use the Sprite Sheet Slicer: set the columns and rows (or the cell size) and download every frame as a ZIP, with transparency kept. To preview frames as a looping animation, the Frames to GIF Maker turns them into a GIF.