Sprite Sheet Toolkit
Slice a sprite sheet into frames, pack frames into a sheet, turn a GIF or a video clip into a sheet, or turn a sheet back into a GIF — all in your browser. Name your animation clips and download the engine files to go with the sheet: a JSON atlas for Phaser and PixiJS (Aseprite's format), a JSON file of sprite rects and pivots for Unity (a reference — Unity does not import it by itself), a Godot 4 SpriteFrames .tres, GameMaker strips, a CSS sprite stylesheet and a manifest. Your files are never uploaded; free, no credits.
- Before you start
- A sprite sheet, a set of frame images, an animated GIF or a video. Free — it runs in your browser and nothing is uploaded.
- What you end up with
- A zip of PNG frames, a packed sheet PNG, an animated GIF, or the sheet with the data files for your engine in one zip.
Step by step
-
Pick what you have
The toolkit opens on three choices. “I have a sprite sheet” slices one sheet into frames, or gives you engine files for it as it is. “I have separate frames” packs them into one sheet, in filename order. “I have a GIF or a video” converts it into frames or a sheet. Whichever you start from, the result can also be saved as an animated GIF.
-
Load your files
A PNG, WebP or JPG sheet to slice (a sheet saved as a single-image GIF works too); up to 1024 frame images to pack; a GIF or a video to convert. Video works for the formats your browser can play — MP4 and WebM are the usual ones.
-
Check the frames
To slice, enter the columns and rows or the size of one cell — or, on a sheet with a transparent background, let the grid be detected. If the toolkit is not sure, it shows its best guess with a button that slices by it, and when the cell size itself is a judgement — gaps that could be spacing or part of the cell — it says so beside the numbers. An offset and a spacing, for a sheet with a margin or gaps between frames, are folded away just under those numbers. To pack, check the frame order; the columns and the padding of the packed sheet are under More options in the last step.
-
Name the animations
Optional. Mark a range of frames as an animation and give it a name, a frame rate (from 0.1 to 60 frames per second) and a loop setting. If each row of the sheet is one animation, make one clip per row in a single step. Play the preview to check it.
-
Download
There are four buttons. Everything (.zip) is the sheet with the data files for your engine beside it and a README that says how to load them: a JSON atlas for Phaser and PixiJS (Aseprite's format), a JSON file of sprite rects and pivots for Unity (a reference for the Sprite Editor or an editor script — Unity does not import it by itself), a Godot 4 SpriteFrames .tres, GameMaker strips, a CSS sprite stylesheet and a manifest. Sheet PNG is the sheet alone, Frames (.zip) is one PNG per frame, and Animated GIF saves the animation the preview is playing. The Everything download is also under the preview.
Worth knowing
- Frames are packed in natural filename order, so walk_2.png comes before walk_10.png. Number your files and the order takes care of itself; you can still reorder them by hand.
- Grid detection, sprite detection and dropping empty cells all read transparency. On a JPG or a flat-colour sheet, make the background transparent first.
- The toolkit can do that for you: if your sheet sits on one flat colour instead of transparency, that colour can be made transparent. It is a colour key, so it suits a single flat colour and not a photograph or a gradient. On a flat backdrop, a JPG's included, the colour and a tolerance wide enough for its noise are filled in for you; on a pattern or a gradient the toolkit leaves them to you. A magenta, green or blue key colour is removed everywhere unless you choose to remove it only from the edges in. Trim the edge removes a leftover halo.
- Trimming cuts every frame to the bounds they all share, so the frames stay lined up with each other. Turn on power-of-two only if your engine or target hardware asks for it.
- The packer uses a uniform grid — every cell the same size. It does not squeeze differently sized sprites together.
- A GIF frame holds at most 256 colours and its transparency is all-or-nothing. Keep the PNG sheet as the master and treat the GIF as a preview.
- Sheets go up to 4096 × 4096 pixels in area and 1024 frames, and a separate frame, GIF or video frame up to 2048 pixels a side, with about 64 megapixels of frames loaded at once. Nothing is saved for you, so download before you close the tab.
- No frames yet? The Spritesheet Generator and VFX / Particle Sprite Sheets make them with AI. Those spend credits; this toolkit never does.
Read next
Spritesheet Generator
Animate a single character image into a short clip, then auto-slice it into a transparent, multi-frame sprite sheet.
VFX / Particle Sprite Sheets
Render a game visual effect — explosions, smoke, magic, sparks — animate it through its full cycle, then bake every frame into one transparent sprite sheet plus a PNG sequence, ready for your particle/VFX system.
VFX Particle Lab
Build an explosion, smoke plume or magic effect from stacked particle emitters right in your browser, using the free built-in decals or your own AI-generated ones, then bake the result to a transparent sprite sheet or a PNG sequence.