How to convert an animation video into a game sprite sheet
A video is not automatically usable as frame animation. The reliable path is to choose the in-game FPS, sample frames evenly, remove the solid background, normalize canvas and baseline, then pack a grid with exact cell boundaries.
Verified by the FrameSprite Workflow Lab · 2026-08
Short answer
Import the video into the free FrameSprite sprite-sheet tool and sample 6–16 useful poses at the intended playback speed. Remove the green or solid background, normalize the cell size, pack into 4 or 8 columns, and export transparent PNG. Use the same columns, rows or cell dimensions when slicing in-engine.
Reproducible steps
- 01
Choose the in-game playback speed first
Walk and idle cycles commonly use 8–12 fps; fast attacks may use 12–16. Even if the source is 24 or 30 fps, you rarely need every frame in the sheet—extra near-duplicates add weight without adding motion information.
- 02
Sample candidate frames at even time intervals
Extract an initial candidate set, then remove duplicates and near-identical poses. Preserve silhouettes that communicate anticipation, contact, impact and recovery.
- 03
Remove the solid background and suppress spill
Do more than turn green pixels transparent: reduce green spill in semi-transparent edge pixels, or the sprite will show a bright fringe against dark game backgrounds.
- 04
Normalize canvas, center and foot baseline
Every frame must share one width and height. Align grounded characters to one foot baseline and flying characters to one body center; never auto-crop each frame to different bounds.
- 05
Pack the grid and verify it in-engine
Sheet width should equal cell width × columns plus explicit gutters; height follows the same rule. Validate your Unity or Godot slicing settings with the downloadable sample before replacing it with your own asset.
A tested example
Video, key poses and grid parameters follow the current FrameSprite extraction path.
Reproducible details
- Source FPS
- 24 fps
- Suggested export
- 8–16 frames
- Background
- Chroma key
8 WebP frames
Video-to-sheet diagnosis
| Symptom | Likely cause | Fix |
|---|---|---|
| Motion feels slow | Too many near-duplicate frames or low in-engine FPS | Remove duplicates, keep key poses, then raise playback FPS |
| Character jitters in place | Different crop bounds or pivots per frame | Normalize canvases and lock the baseline or center |
| Transparent edges look green | Alpha threshold applied without spill suppression | Apply edge despill or contract alpha by 1px |
Frequently asked questions
- How many frames should a 24 fps video produce?
- It depends on motion information, not duration. Short loops often need 6–12 frames and one-shot attacks 8–16; keep poses that visibly change the silhouette.
- Can I convert a GIF directly to a sprite sheet?
- Yes. The workflow is the same, but GIFs may use variable frame delays, so sample by time rather than frame index alone.
- What if the video background is not solid?
- Complex backgrounds need segmentation or per-frame masks and usually produce less stable edges than chroma key. Generate on pure green, blue or transparent backgrounds whenever possible.
Next in the workflow
Run the workflow with your own asset
The browser tool needs no account; move into the character workspace only when you need a new action.
Open the free tool