Overview
Game engines animate characters and effects from sprite sheets — a single image holding every frame of an animation in a grid — rather than playing video. Converting a short MP4 of an animation into a sprite sheet gives you an asset you can drop straight into Unity, Godot, Phaser, or a CSS steps() animation. Clear Canvas extracts the frames and packs the sheet entirely in your browser, so unreleased game art stays on your machine, and you can export a PNG sprite sheet or APNG.
Example workflow
- 1
Export a short clip
Render or trim the animation to a short MP4. A tight loop keeps frame count and memory low for smooth in-browser processing.
- 2
Choose a frame rate
Pick 10, 15, 20, 24, or 30 FPS. Lower FPS means fewer frames and a smaller sheet; match the cadence your engine will play back.
- 3
Generate the sprite sheet
Extract frames into a grid. Note the column/row count and per-frame dimensions — your engine needs them to slice the sheet.
- 4
Add transparency if needed
If the clip has a solid background, run the optional background-removal step so sprites composite cleanly over game scenes.
- 5
Import into your engine
Load the sheet, set frame size and count, and define the animation. Confirm the loop plays seamlessly.
Best settings
- Match export FPS (10–30) to your engine's playback rate so timing is exact.
- Keep clips short — fewer frames mean a lighter sheet and faster, more stable in-browser processing.
- Record the column/row count and frame size at export; you will need them to slice the sheet in-engine.
- Use the background-removal step for transparent sprites instead of relying on color-keying later.
When this works well
- Turning rendered effect or character loops into engine-ready sprite sheets.
- Indie and prototype workflows that need animation assets without a dedicated pipeline.
- Studios that must keep pre-release art off third-party servers.
When to use another workflow
- Long cinematic clips — keep video as video rather than exploding it into thousands of frames.
- If you need a single transparent animated asset rather than a grid, export APNG instead of a sprite sheet.
Common mistakes
- Exporting at a higher FPS than the engine plays, which bloats the sheet with redundant frames.
- Forgetting MP4 has no alpha channel — without the background-removal step, sprites carry a solid background.
- Feeding in a long clip and hitting memory limits; trim to a short loop first.
Frequently asked questions
What frame rate should a game sprite sheet use?
Export at the rate your engine plays the animation — 10–30 FPS are available. Lower FPS produces fewer frames and a smaller sheet; pick the lowest rate that still looks smooth.
Can I get transparent sprites from an MP4?
MP4 has no alpha channel, but the optional background-removal step produces transparent sprite sheet PNG or APNG output so sprites composite cleanly in-engine.
Is my game footage uploaded?
No. Frame extraction and packing run in your browser, so unreleased art and footage stay on your device.
Related tools and workflows
立即试用这个使用场景
打开 MP4 转精灵图 PNG / APNG，在浏览器中应用此工作流。