Drop frames. Get a sprite sheet.

What a sprite sheet maker does

A sprite sheet packs every frame of an animation — a walk cycle, an attack, a UI spinner — into one image, next to metadata that records each frame's rectangle. Your engine (Unity, Godot, Phaser, PixiJS, GameMaker) loads that single image and cuts the frames out at runtime. One file instead of thirty means fewer HTTP requests, fewer texture binds and snappier load times.

This one runs entirely in your browser. Your art never touches a server, which also means it works offline once the page is loaded.

How to make a sprite sheet here

1. Add your frames. Drag individual PNGs in, in animation order. Renamed or numbered files sort naturally; you can also reorder by dragging frames in the list before packing.
2. Set spacing and extrusion. 2px spacing is a safe default. Enable 1px extrusion if your engine uses linear filtering and you see colors bleeding between frames.
3. Pack. The sheet updates live — the algorithm shelves frames by height so the sheet stays compact.
4. Download the PNG and the JSON atlas. The atlas uses the TexturePicker/PixiJS hash format: frames keyed by file name, each with its frame rectangle, plus sheet meta.

Already have a sheet you need to split?

Switch to Slice sheet → frames, drop the sheet, and set columns × rows (or an explicit frame size). The tool cuts it into frames you can re-pack with different spacing, extrude, or preview as an animation. This is the fastest way to fix a sheet that was packed badly or that a new engine wants in a different layout.

Need frames in the first place?

If you have a single character image and no animation, try the AI sprite sheet generator — describe the character, pick a grid, and it generates a frame grid you can slice and pack in one flow. For turning one existing image into a full sheet, see image to sprite sheet.

Engine import quick notes

• Unity: import the PNG, set Sprite Mode to Multiple, use the Sprite Editor's "Slice by Grid" with your frame size — or use an atlas JSON importer from the Asset Store.
• Godot: the PNG imports as a sprite sheet automatically; set hframes/vframes on a Sprite2D, or build a SpriteFrames resource from the frames.
• Phaser 3 / PixiJS: load the PNG and the JSON atlas directly — this.load.atlas('sprites', 'sheet.png', 'sheet.json').
• GameMaker: create a sprite from the PNG and set frame width/height to match; GameMaker expects a strict grid, so pack without shelf offsets (use the grid note in the JSON).