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.
Nerulio turns each animation of a sprite sheet into its own WebM video (VP9, or VP8 where the browser has no VP9 encoder), encoded by the browser's WebCodecs VideoEncoder. Frames are enlarged 4× with nearest-neighbour (less when a side would pass 1920 px), drawn on a solid dark background, and each keeps its own duration; one file holds one cycle. It does not write MP4 or audio: convert the WebM with a tool such as ffmpeg when a platform wants MP4.
- 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
Why pixel art needs care in a video
Video codecs such as VP9 and VP8 are lossy and normally store colour at half resolution in both directions (4:2:0): one colour sample per 2 × 2 pixels. A one-pixel outline in a 32 × 32 sprite would smear into its neighbours. Enlarging every pixel to a 4 × 4 block with nearest-neighbour before encoding gives each source pixel whole colour samples, so edges stay square after compression.
There is no transparency in this export. VP9 can carry alpha in WebM, but many players ignore it, so every frame is blended onto a solid rgb(32, 34, 40) background; a semi-transparent pixel is mixed with that colour in proportion to its alpha.
Timing is stored as timestamps, not as one fixed frame rate: each frame starts where the previous ones end (whole milliseconds in the file), so a 250 ms hold stays a hold. A file contains one cycle of the animation in playback order, ping-pong written out; looping is up to the player.
- 4:2:0
- Chroma subsampling: colour at half width and half height, brightness at full size.
- VP9 / VP8
- Video codecs carried in WebM. Nerulio asks the browser for VP9 (
vp09.00.10.08) and falls back to VP8. - VideoEncoder
- The WebCodecs browser API that encodes the frames. It is not available in every browser and only works on secure (HTTPS) pages.
- Nearest-neighbour
- Scaling that copies each pixel into a k × k block without blending.
Example: sizes, bitrate and length
frames 64 × 64, walk = 6 frames × 100 ms
scale 4× → 256 × 256 px (largest factor ≤ 4 with both sides ≤ 1920 px)
bitrate max(500 000, 256 × 256 × 8) = 524 288 bit/s
length 6 × 100 ms = 0.6 s, one cycle
file hero_webm/hero_walk.webm
boss 700 × 300: 4× = 2800 px wide (too wide), 3× = 2100 (too wide) → 2× = 1400 × 600
odd 545 × 201: 4× = 2180 (too wide) → 3× = 1635 × 603 → padded to 1636 × 604 (even sides)The export notes repeat this per animation, for example “walk: WebM VP9 256×256 (4× nearest), lossy, background rgb(32,34,40).”
What maps to what
| In the Studio | In the WebM | Note |
|---|---|---|
| Animation (tag) | One .webm file | Export name + animation name, e.g. hero_walk.webm |
| Frame duration | Timestamp of the next frame | Whole milliseconds; uneven timing is kept |
| Direction, ping-pong | Frames in playback order | One cycle; the repeat count is not stored |
| Pixel | k × k block, k = 4 unless the frame is large | Nearest-neighbour, then lossy compression |
| Transparency | Blended onto rgb(32, 34, 40) | No alpha channel in the file |
| Frames of different sizes | One cell per animation, frames aligned on their pivots | Same alignment as the GIF export |
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: it 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.
Files you get
| File | What it is for |
|---|---|
hero_webm.zip | The download, with a folder hero_webm/ (named after the export name). |
hero_webm/hero_walk.webm | One cycle of walk: VP9 (or VP8) video in a WebM container, no audio track. |
After export: MP4, longer clips, posting
- Unzip; there is one
.webmper animation. Chromium played these files in our checks. - Need MP4? Re-encode with ffmpeg, for example
ffmpeg -i hero_walk.webm -c:v libx264 -pix_fmt yuv420p hero_walk.mp4. The enlargement is already in the pixels, so the MP4 keeps the square blocks. - A 0.6 s clip is short for a post.
-stream_looprepeats the input before encoding:ffmpeg -stream_loop 9 -i hero_walk.webm -c:v libx264 -pix_fmt yuv420p hero_walk_x10.mp4gives ten cycles, 6 s. - Keep the sheet or an APNG next to the video: the WebM is lossy and meant for showing the animation, not for loading into an engine.
Check the result
- Play the file and time one cycle: 6 frames × 100 ms should last 0.6 s.
- Pause and zoom in: each source pixel is a 4 × 4 block, with slightly soft colour edges from compression.
ffprobe hero_walk.webmreports the codec (vp9 or vp8) and the width and height given in the notes.
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 |
Troubleshooting
| Symptom | Likely cause | How to check | Fix |
|---|---|---|---|
| The WebM button is disabled | This browser has no WebCodecs VideoEncoder, or the page is not served over HTTPS | The button's tooltip says so | Use a current Chrome or Edge; GIF and APNG export work without it |
| The video ends after a fraction of a second | A file holds one cycle; looping is the player's job | Its length equals the sum of the frame times | Loop it in the player, or repeat the input with ffmpeg -stream_loop before posting |
| A dark fringe around soft edges | Semi-transparent pixels were blended with the dark background | Look at glows and anti-aliased edges | Export APNG to keep transparency; the background colour is fixed in this export |
| Large sprites look soft | The scale drops below 4× to keep both sides ≤ 1920 px, so fewer pixels per source pixel survive compression | The notes show the factor, for example “(2× nearest)” | Export smaller animations separately, or accept 2× |
| A site rejects the file | It accepts MP4 (H.264) but not WebM | Its upload help lists the formats | Convert with ffmpeg as above |
Other ways to do it
| Option | When it is the better choice |
|---|---|
| Animated GIF or APNG from the same panel | Chat or forum posts where transparency matters; APNG keeps soft edges and exact colours. |
| Screen-record the floating preview (F7, up to 8×) | You want your own background, several animations side by side, or a long take. |
| Export PNG frames and build the video in a video editor | You need MP4 directly, a custom frame rate or sound; see sprite sheet to PNG frames. |
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
- WebM only: no MP4 and no audio track.
- The background colour and the scale are fixed: rgb(32, 34, 40), 4× whenever both sides stay within 1920 px.
- One cycle per file; repeat counts are not stored.
- 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.
Versions and sources
The WebM export was checked in Chromium: the file starts with the WebM (EBML) header, ffprobe reads the video stream and its frames, and Chromium plays a 6 × 100 ms animation in 0.6 s at 4× size. The encoder is the browser's own, so whether you get VP9 or VP8 depends on that browser. Browser availability of VideoEncoder follows MDN; the ffmpeg options follow the ffmpeg documentation.
Official documentation used
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; the export was checked in Chromium; 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).