Sprite Sheet to Video — Crisp WebM per Animation
A devlog post, a trailer cut or a store page often wants a video rather than a GIF. Cut the sheet into animations, then export "WebM video": each animation becomes its own WebM, enlarged 4× with nearest-neighbour so every pixel stays a sharp square, on a solid background, with each frame shown for its own duration.
- GIF / APNGDecoded· Pillow
- Godot 4Verified· Godot 4.7.2
- Unity 6Verified· Unity 6000.5.3f1
- Phaser 3 / 4Verified· Phaser 3.90 + 4.2
- PixiJS 8Verified· PixiJS 8.21
- Aseprite JSONVerified· Phaser load.aseprite · PixiJS 8.21
- .asepriteVerified· Aseprite 1.3.18
- Spine / libGDXVerified· spine-canvas 4.2
- Starling / Sparrow XMLVerified· Phaser 4.2
- LÖVEVerified· LÖVE 11.5
- DefoldBuilt· Defold bob.jar 1.13.1
- GameMakerUNVERIFIED
- CSS spritesVerified· Chromium
What it does
- Video stores colour at half resolution (4:2:0), which smears single pixels, so frames are enlarged 4× with nearest-neighbour before encoding.
- A solid background instead of transparency, because most players ignore VP9 alpha in WebM.
- VP9 with VP8 as a fallback, encoded by the browser's own WebCodecs VideoEncoder and written by the Studio's own WebM muxer; nothing is uploaded.
- Each frame keeps its own duration, so holds and uneven timing survive; frames are pivot-aligned and in playback order.
- Checked on 2026-09-24 in Chromium and in Firefox: both wrote a VP9 WebM with every frame at 4×, counted with ffprobe.
How to do it
- Drop the sprite sheet and press Apply; each row starts as its own animation.
- Set the timing per frame, or Set all to fps for a whole tag, and check it with Enter.
- Open Pack & Export and choose WebM video.
- Export: one .webm per animation. For MP4, convert the WebM afterwards with a video tool such as ffmpeg.
Sharing a sprite animation: WebM, GIF or APNG
| WebM video | Animated GIF | APNG | |
|---|---|---|---|
| Enlarged for viewing | yes, 4× nearest-neighbour | no, the sheet's pixel size | no, the sheet's pixel size |
| Behind the sprite | a solid colour | transparent (on/off only) | transparent, soft edges kept |
| Colour accuracy | close, but compressed | exact while the animation has ≤ 255 colours | exact |
| Lossy? | yes | only above 255 colours (median cut) | no |
| Needs | WebCodecs VideoEncoder (Chromium, Firefox) | nothing beyond the Studio | nothing beyond the Studio |
| Good for | video posts, trailers, store pages | chats and forums that play GIFs | exact previews for your team |
Engine exports and how each was checked
"Verified" means the exported files were loaded by the real engine or tool on real CC0 assets and the result was compared with the source. Anything that was not loaded is labelled as such.
| Target | Files | Check |
|---|---|---|
| Godot 4 | .tres SpriteFrames · .tscn AnimatedSprite2D · .png.import | Verified Godot 4.7.2Loaded by Godot; every animation frame drawn and compared with the source file. The scene uses Nearest filtering; rotation is never used. |
| Unity 6 | .unity.json · Editor/NerulioSpriteImporter.cs · AnimationClip | Verified Unity 6000.5.3f1Batch mode: sprite rects, pivots, pixels, clip keys and durations checked. |
| Phaser 3 / 4 | atlas JSON (multiatlas) · .anims.json | Verified Phaser 3.90 + 4.2Frames and animations drawn by both versions. |
| PixiJS 8 | spritesheet JSON · animations · anchor · meta.scale | Verified PixiJS 8.21Rotated and multi-page atlases included. |
| Aseprite JSON | hash / array · frameTags · slices | Verified Phaser load.aseprite · PixiJS 8.21Tags keep their direction and repeat count. |
| .aseprite | layers · tags · durations · slices | Verified Aseprite 1.3.18Opened and rendered by the Aseprite command line. |
| Spine / libGDX | .atlas | Verified spine-canvas 4.2Every region drawn by the Spine runtime, rotated and trimmed; libGDX itself was not run. |
| Starling / Sparrow XML | XML per page | Verified Phaser 4.2Phaser 3.90 draws trimmed XML frames wrongly (its own bug); the "Sparrow XML (Phaser 3)" preset turns trim off and passes in 3.90 and 4.2. |
| LÖVE | Lua quads · nerulio_atlas.lua · main.lua | Verified LÖVE 11.5Every frame drawn and every animation stepped through the shipped helper. |
| Defold | .atlas · .tilesource | Built Defold bob.jar 1.13.1Built by Defold's command-line builder; the built texture's UVs were read back. |
| GameMaker | spr_<name>_stripN.png · gamemaker.json | UNVERIFIEDNot loaded in GameMaker (no headless GameMaker). The strips are cut the way its strip importer cuts them. |
| CSS sprites | .css · preview .html | Verified ChromiumEvery class drawn from the shipped stylesheet. |
| GIF / APNG | one file per animation | Decoded PillowEvery frame and delay decoded again after export; APNG is exact. |
Evidence
GIF decoder: 408 of 408 frames identical to Pillow on 29 real GIFs; APNG 132 of 132 on 16 files. .aseprite: 231 corpus files imported, re-written and reopened in Aseprite 1.3.18 with the same tags, durations and pixels (231/231). Exports: 49 runs in the real engines on real CC0 assets, 47 pass — the 2 failures are Phaser 3.90's trimmed-XML bug, which the Phaser 3 preset avoids.
Limits
- A grid or island guess is a preview with a confidence; nothing is cut until you press Apply, and every choice has one-click alternatives.
- .aseprite files whose layers do not compose exactly (e.g. group opacity) are imported flattened, and the Import panel says why.
- Rotated frames in an imported atlas stay rotated; their export is UNVERIFIED.
- Images up to 32,768 px per side (268 million pixels), subject to your browser's memory.
Questions
Can the Studio write MP4?
No, it writes WebM only (VP9, or VP8 where VP9 is not available). A converter such as ffmpeg turns the WebM into MP4; the 4× nearest-neighbour enlargement is already in the video, so the pixels stay square.
Why is the WebM button disabled?
The video is encoded with the browser's WebCodecs VideoEncoder. Chromium and Firefox have it and both were checked; where it is missing the button stays disabled, and GIF and APNG export still work.
Is the video lossless?
No. Video compression is lossy, so the WebM is for showing the animation, not for loading into an engine. Keep the sheet export or an APNG for exact frames.
Is it free, and do I need an account?
Everything on these pages is free and works without an account. There is no watermark and no export that is held back.
Are my sprites uploaded?
No. The Studio decodes, packs and exports in this browser tab. Projects are autosaved in the browser (IndexedDB) and can be saved as a .nerulio file.
Does it need Aseprite or an engine plugin installed?
No. .aseprite files are read and written in the browser, and each engine bundle carries what that engine needs (for Godot, the import settings and scene; for Unity and the Godot TileSet, a small editor script).