How to convert a GIF to a sprite sheet
To turn a GIF into a sprite sheet, load it, choose the number of columns (0 = automatic), optional padding between frames, and press Make sprite sheet. You get two files:
- PNG: all frames, full size, laid out left to right, top to bottom.
- JSON: the position, size and duration of each frame, plus the grid layout.
Using the sprite sheet
- Phaser: load the PNG and JSON as an atlas, or load the PNG as a spritesheet with the frame width and height from the JSON
meta. - Godot: set the PNG as an
AnimatedSprite2Dsprite frames source and slice it with the columns and rows shown after export. - CSS: use the PNG as a background and step through frames with
steps(n)animation. - Pixi.js / others: use the frame rectangles in the JSON.
Frame durations come from the original GIF, so variable timing is kept in the JSON even though a sheet has no timing of its own.
Need to slice a sprite sheet instead?
This tool goes from GIF to sheet. To go the other way, split a GIF into frames or start from the frames you already have.