Video & GIF to Sprite Sheet
Upload a video or GIF — extract frames and export as a game-ready sprite sheet.
What this tool supports
Extract animation frames from a video or GIF, arrange them into PNG sprite sheets, and download frame coordinates for your game project.
Formats, controls, browser limits, and file privacy
- Input
- MP4, WebM, Ogg video, MOV, or animated GIF. Container acceptance does not guarantee that every codec will decode or preview.
- Output
- PNG sheets with Generic JSON, Unity, Godot, Phaser, PixiJS, Starling XML, Spine, or CSS data. Engine setup depends on the selected format; follow the linked import guides.
- Controls
- Frame rate, scale, maximum frame count, padding, packed/grid/strip layouts, and sheet dimensions.
- Limits and browser
- FFmpeg loads on demand and needs a network connection on first use. Large clips can exhaust browser memory; reduce resolution or frame count if conversion fails.
- File privacy
- Your source files are processed in this browser and are not uploaded for conversion. Site analytics and optional forms use network requests.
Drag & drop your video here
Upload a video or GIF to extract frames and generate a game-ready sprite sheet. No uploads — everything runs in your browser.
Or click to browse
MP4, WebM, GIF, MOV, OGG
How it works
Upload a video
MP4, WebM, GIF, MOV — all processed locally in your browser
Configure settings
Set FPS, scale, max frames. Choose grid, row, or packed layout
Export sprite sheet
Download PNG + metadata for Unity, Godot, Phaser, PixiJS, and more
Common questions
What formats are supported?
MP4, WebM, GIF, MOV, and OGG. Processing happens entirely in your browser using FFmpeg.
Is my video uploaded anywhere?
No. Everything runs client-side. Your files never leave your device.
What's the max video length?
No hard limit, but shorter clips work best. Use the max frames slider to control output size.
Can I use this for game development?
Yes — export metadata for Unity, Godot, Phaser, PixiJS, Spine, Starling, and generic JSON.
How It Works
Upload a video or GIF
Drop in an MP4, WebM, MOV, or GIF. Everything is processed locally in your browser.
Set FPS, scale, and padding
Choose how many frames to extract per second, scale the output, and add padding between frames.
Export sheet + metadata
Download the PNG sprite sheet along with metadata for Unity, Godot, Phaser, and other engines.
Convert a four-frame GIF into a 2 × 2 sheet
This 0.4-second, 64 × 64 GIF contains four geometric frames, each lasting 100 ms. Use it to check frame order and sheet layout before converting your own animation.
Files to follow along
These geometric sample assets are free to use and modify, including in commercial projects. No attribution is required. Sample notes and settings.
Reproduce the result
- Download the sample GIF and select it in the tool. Set frame rate to 10 FPS, scale to 100%, and maximum frames to 4. Keep the full animation.
- Extract the frames. Keep all four frames in their original order, with no crop, background removal, or other frame edits.
- Choose Grid layout, 2 columns, 2 rows, left-to-right order, and 0 px padding. Use a sheet size of at least 256 × 256, then generate the sheet.
- Download the PNG and select Generic JSON for the frame data. Compare the dimensions and frame rectangles with the reference files provided here; exported filenames may differ.
Expected result
One 128 × 128 PNG containing four 64 × 64 frames. Their top-left coordinates, in order, are (0, 0), (64, 0), (0, 64), and (64, 64). At 10 FPS, each frame lasts 100 ms.
Follow the same sample through all three tools in our convert, split, and repack walkthrough.
Continue your sprite workflow
- Import into Godot
Use the grid sheet in the Godot sprite workflow and check animation timing.
- Import into Unity
Follow the video-to-Unity guide for slicing and animation setup.
- Split a sheet back into frames
Recover individual PNGs from a uniform grid when you want to edit or reorder them.
Frequently Asked Questions
The tool accepts MP4, WebM, Ogg video, MOV, and animated GIF files. FFmpeg compiled to WebAssembly extracts the frames. Codec support varies, and browser preview support can differ from conversion support.
Your source file is not uploaded for conversion. Frames are extracted in your browser, so processing speed and the size of clips you can handle depend on your device and available memory.
Yes. Set the FPS to control sampling density, cap the maximum frame count, and scale frames down to keep the final sheet within your engine's texture size limits.
Match the frame rate to the motion, not the source video. Simple loops and UI effects read fine at 8–12 FPS, character animation usually wants 12–24, and only fast, detailed motion justifies 30+. Every extra frame costs texture memory on the player's device, so use the animation preview to find the lowest rate that still looks smooth.
Generic JSON, Unity, Godot, Phaser, PixiJS, Spine, Starling XML, and CSS. Each export contains per-frame coordinates and sizes in the structure that engine's loader expects, so the sheet drops into your project without hand-editing.
Two usual causes: the frames were upscaled during extraction (extract at 100% and scale in-engine instead), or your engine is applying linear filtering to pixel art — switch the texture to point/nearest filtering. For non-pixel art, also check the engine isn't compressing the texture aggressively on import.
2048×2048 is safe on effectively every device; 4096 covers modern phones and desktops. If your animation doesn't fit, lower the extraction FPS, reduce the scale, cap max frames, or split long animations into one sheet per action — engines handle multiple sheets fine.
Want the full workflow, engine tips, and format details? Read the Sprite Sheet Generator guide