Lottie Sprite Sheet Generator
Turn selected Lottie frames into a single PNG sheet for game engines, docs, and implementation handoff.
Ready.
Sprite sheets that stay predictable
Choose a modest frame count for UI icons and a larger count for expressive game motion. Add padding in your engine if texture bleeding appears.
Build a sprite sheet your game can address cleanly
Select a start and end frame, then choose how many samples should represent that range. The generator renders each sample from the live Lottie canvas and places it into a predictable grid. Frame width controls the cell scale, columns control the row breaks, and padding helps prevent texture bleeding.
Balance smoothness and texture size
Twelve to twenty-four samples are often enough for a compact UI loop. Character motion may need more, but every extra frame increases texture dimensions and memory. Test the smallest useful count in the target engine rather than winning an imaginary contest for the world’s largest PNG.
Use the generated handoff data
The tool reports the sheet dimensions and generates a CSS starting point with the cell size and step count. Engines use different import settings, so confirm filtering, transparency, pivot placement, and playback duration after import. A 150-million-pixel safety budget prevents accidental monster canvases.
Sprite sheet questions
How many Lottie frames should I sample?
Start with 12 to 24 frames for a compact UI loop, then increase only if the motion looks visibly stepped in the target engine.
Does the generator upload my animation?
No. JSON parsing and frame rendering stay in this browser tab.