スプライトシートを動画に · くっきりWebM
開発日記、トレーラー、ストアページではGIFより動画が必要なことがよくあります。シートをアニメーションに分けて「WebM video」で書き出すと、アニメーションごとにWebMが1本ずつでき、ニアレストネイバーで4倍にするのでドットは四角いまま、単色の背景の上で各フレームが自分の長さだけ表示されます。
Nerulioはスプライトシートのアニメーションごとに、WebM動画を1本ずつ作ります（VP9、ブラウザにVP9エンコーダがなければVP8）。エンコードはブラウザのWebCodecs VideoEncoderが行います。フレームはニアレストネイバーで4倍に拡大し（一辺が1920 pxを超えるならそれより小さく）、暗い単色の背景に描き、フレームごとの長さを保ちます。1ファイルに1サイクルが入ります。MP4や音声は書き出さないので、MP4が必要な場所にはffmpegなどでWebMを変換してください。
- GIF / APNGデコード確認· Pillow
- Godot 4検証済み· Godot 4.7.2
- Unity 6検証済み· Unity 6000.5.3f1
- Phaser 3 / 4検証済み· Phaser 3.90 + 4.2
- PixiJS 8検証済み· PixiJS 8.21
- Aseprite JSON検証済み· Phaser load.aseprite · PixiJS 8.21
- .aseprite検証済み· Aseprite 1.3.18
- Spine / libGDX検証済み· spine-canvas 4.2
- Starling / Sparrow XML検証済み· Phaser 4.2
- LÖVE検証済み· LÖVE 11.5
- Defoldビルド確認· Defold bob.jar 1.13.1
- GameMaker未検証
- CSS sprites検証済み· Chromium
ピクセルアートを動画にするときの注意点
VP9やVP8などの動画コーデックは非可逆で、通常は色を縦横半分の解像度（4:2:0）で保存します。2 × 2ピクセルごとに色のサンプルが1つです。32 × 32スプライトの1ピクセルの輪郭線は隣へにじみます。エンコード前にニアレストネイバーで全ピクセルを4 × 4ブロックに拡大すれば、元の1ピクセルが色のサンプルを丸ごと持つので、圧縮後も縁が四角いまま残ります。
この書き出しに透明はありません。VP9はWebMでアルファを持てますが無視するプレーヤーが多いため、全フレームを単色のrgb(32, 34, 40)の背景に合成します。半透明のピクセルはアルファの割合でこの色と混ざります。
タイミングは固定フレームレートではなく、タイムスタンプとして保存されます。各フレームは前のフレームが終わる時点から始まり（ファイル内では整数ミリ秒）、250 msの溜めは溜めのまま残ります。ファイルには再生順（ピンポンは展開済み）で1サイクルが入り、ループはプレーヤー側の仕事です。
- 4:2:0
- クロマサブサンプリング。色は縦横半分の解像度、明るさは元の解像度で保存します。
- VP9 / VP8
- WebMに入る動画コーデック。NerulioはブラウザにVP9（
vp09.00.10.08）を求め、だめならVP8にします。 - VideoEncoder
- フレームをエンコードするWebCodecsのブラウザAPI。すべてのブラウザにあるわけではなく、安全な（HTTPS）ページでのみ動きます。
- ニアレストネイバー
- ピクセルを混ぜずにk × kブロックへ複製する拡大方法。
具体例：サイズ、ビットレート、長さ
フレーム 64 × 64、walk = 6フレーム × 100 ms
倍率 4× → 256 × 256 px (両辺とも1920 px以下になる4以下の最大倍率)
ビットレート max(500 000, 256 × 256 × 8) = 524 288 bit/s
長さ 6 × 100 ms = 0.6 s、1サイクル
ファイル hero_webm/hero_walk.webm
ボス 700 × 300: 4× = 横2800 (超過)、3× = 2100 (超過) → 2× = 1400 × 600
奇数 545 × 201: 4× = 2180 (超過) → 3× = 1635 × 603 → 1636 × 604 に拡張 (偶数辺)書き出し後のメモがアニメーションごとにこの内容を示します。例：「walk: WebM VP9 256×256 (4× nearest), lossy, background rgb(32,34,40).」
何がどこに対応するか
| Studioでは | WebMでは | 補足 |
|---|---|---|
| アニメーション（タグ） | .webmファイル1つ | 書き出し名＋アニメーション名、例：hero_walk.webm |
| フレームの長さ | 次のフレームのタイムスタンプ | 整数ミリ秒、不均一なタイミングも保持 |
| 方向、ピンポン | 再生順のフレーム | 1サイクル、繰り返し回数は保存されない |
| ピクセル | k × kブロック、フレームが大きくなければ k = 4 | ニアレストネイバー拡大のあと非可逆圧縮 |
| 透明 | rgb(32, 34, 40)の上に合成 | ファイルにアルファチャンネルなし |
| サイズの違うフレーム | アニメーションごとに1セル、フレームをピボットで揃える | GIF書き出しと同じ揃え方 |
できること
- 動画は色を半分の解像度（4:2:0）で持つので1ピクセルの点がにじみます。そのためエンコード前にニアレストネイバーで4倍に拡大。
- 多くのプレーヤーはWebMのVP9アルファを無視するため、透過ではなく単色の背景。
- ブラウザのWebCodecs VideoEncoderでVP9（無理ならVP8）にエンコードし、Studio自前のWebMマルチプレクサで書き込み。アップロードはなし。
- フレームごとの長さをそのまま使うので、溜めや不均一なタイミングも再現。フレームはピボットで揃え、再生順に並べます。
- 2026-09-24にChromiumで確認：全フレームが4倍のVP9 WebMを書き出し、ffprobeでフレーム数を数えました。
使い方
- スプライトシートを入れて「適用」。最初は1行ごとに1アニメーション。
- フレームごと、またはタグ全体を「すべて fps で設定」で時間を合わせ、Enterで確認。
- パック＆書き出しでWebM videoを選ぶ。
- 書き出すとアニメーションごとに.webmが1本。MP4が必要ならffmpegなどのツールで変換。
出力されるファイル
| ファイル | 用途 |
|---|---|
hero_webm.zip | ダウンロードされるファイル。中にhero_webm/フォルダがあります（書き出し名に従います）。 |
hero_webm/hero_walk.webm | walkの1サイクル：WebMコンテナのVP9（またはVP8）動画、音声トラックなし。 |
書き出したあと：MP4、長いクリップ、投稿
- ZIPを展開します。アニメーションごとに
.webmが1本あります。検証ではChromiumがこれらのファイルを再生しました。 - MP4が必要ならffmpegで再エンコードします。例：
ffmpeg -i hero_walk.webm -c:v libx264 -pix_fmt yuv420p hero_walk.mp4。拡大はすでにピクセルに入っているので、MP4でも四角いブロックが保たれます。 - 0.6秒のクリップは投稿には短すぎます。
-stream_loopはエンコード前に入力を繰り返します。ffmpeg -stream_loop 9 -i hero_walk.webm -c:v libx264 -pix_fmt yuv420p hero_walk_x10.mp4で10サイクル、6秒になります。 - 動画の横にシートやAPNGも残しておいてください。WebMは非可逆で、アニメーションを見せるためのもので、エンジンに読み込むものではありません。
結果の確認
- 再生して1サイクルの時間を測ります。6フレーム × 100 msなら0.6秒です。
- 一時停止して拡大します。元の1ピクセルが4 × 4ブロックになり、圧縮のため色の境目がわずかに柔らかくなります。
ffprobe hero_walk.webmがコーデック（vp9またはvp8）と、メモにある幅・高さを表示します。
スプライトアニメーションの共有：WebM・GIF・APNG
| WebM video | Animated GIF | APNG | |
|---|---|---|---|
| 見やすく拡大 | あり、ニアレストネイバーで4倍 | なし、シートのサイズのまま | なし、シートのサイズのまま |
| スプライトの背後 | 単色 | 透過（オン・オフのみ） | 透過、柔らかい縁も保持 |
| 色の正確さ | 近いが圧縮される | 255色以下なら完全一致 | 完全一致 |
| 非可逆？ | はい | 255色を超えるときだけ（メディアンカット） | いいえ |
| 必要なもの | WebCodecs VideoEncoder（Chromium、Firefox） | Studioだけ | Studioだけ |
| 向いている用途 | 動画投稿、トレーラー、ストアページ | GIFが再生されるチャットや掲示板 | チーム向けの正確なプレビュー |
トラブルシューティング
| 症状 | 考えられる原因 | 確認方法 | 対処 |
|---|---|---|---|
| WebMのボタンが無効 | このブラウザにWebCodecsのVideoEncoderがないか、ページがHTTPSで配信されていません | ボタンのツールチップに理由が出ます | 最新のChromeかEdgeを使ってください。GIFとAPNGの書き出しはなくても動きます |
| 動画が1秒足らずで終わる | 1ファイルは1サイクルで、ループはプレーヤーの役目です | 長さがフレーム時間の合計と一致します | プレーヤーでループするか、投稿前にffmpegの-stream_loopで入力を繰り返してください |
| 柔らかい縁に暗い縁取りが出る | 半透明のピクセルが暗い背景と混ざりました | グローやアンチエイリアスされた縁を見ます | 透明が必要ならAPNGで書き出してください。この書き出しの背景色は固定です |
| 大きなスプライトがぼやける | 両辺を1920 px以内にするため倍率が4倍未満に下がり、元の1ピクセルあたりのピクセルが減りました | メモに「(2× nearest)」のように倍率が出ます | アニメーションを小さく分けて書き出すか、2倍で妥協してください |
| サイトがファイルを受け付けない | WebMではなくMP4（H.264）しか受け付けません | アップロードのヘルプにある形式一覧 | 上のとおりffmpegで変換してください |
ほかの方法
| 方法 | こんなときに向いています |
|---|---|
| 同じパネルのAnimated GIFやAPNG | 透明が大事なチャットや掲示板への投稿。APNGは柔らかい縁と正確な色を保ちます。 |
| フローティングプレビュー（F7、最大8倍）を画面録画 | 好きな背景、複数のアニメーションを並べる、長い録画が必要なとき。 |
| PNGフレームを書き出して動画編集ソフトで作る | MP4を直接、好きなフレームレートや音付きで作りたいとき。スプライトシートをPNGフレームにを参照。 |
エンジン別の書き出しと検証方法
「検証済み」は、実際のCC0アセットから書き出したファイルを本物のエンジン・ツールで読み込み、元データと比較したという意味です。読み込んでいない形式はそのように表示します。
| 書き出し先 | ファイル | 検証 |
|---|---|---|
| Godot 4 | .tres SpriteFrames · .tscn AnimatedSprite2D · .png.import | 検証済み Godot 4.7.2Godotで読み込み、全アニメーションフレームを描画して元ファイルと比較。シーンはNearestフィルターで、回転は使いません。 |
| Unity 6 | .unity.json · Editor/NerulioSpriteImporter.cs · AnimationClip | 検証済み Unity 6000.5.3f1バッチモードでスプライト範囲・ピボット・ピクセル・クリップのキーと長さを確認。 |
| Phaser 3 / 4 | atlas JSON (multiatlas) · .anims.json | 検証済み Phaser 3.90 + 4.2両バージョンでフレームとアニメーションを描画。 |
| PixiJS 8 | spritesheet JSON · animations · anchor · meta.scale | 検証済み PixiJS 8.21回転・複数ページのアトラスも確認。 |
| Aseprite JSON | hash / array · frameTags · slices | 検証済み Phaser load.aseprite · PixiJS 8.21タグの方向と繰り返し回数を保持。 |
| .aseprite | layers · tags · durations · slices | 検証済み Aseprite 1.3.18Asepriteのコマンドラインで開いて描画。 |
| Spine / libGDX | .atlas | 検証済み spine-canvas 4.2Spineランタイムで回転・トリム領域をすべて描画。libGDX本体は未実行。 |
| Starling / Sparrow XML | XML per page | 検証済み Phaser 4.2Phaser 3.90はトリムされたXMLフレームを誤って描画します（Phaser側の不具合）。「Sparrow XML (Phaser 3)」プリセットはトリムを切り、3.90・4.2とも合格。 |
| LÖVE | Lua quads · nerulio_atlas.lua · main.lua | 検証済み LÖVE 11.5同梱ヘルパーで全フレームを描画し、全アニメーションを再生。 |
| Defold | .atlas · .tilesource | ビルド確認 Defold bob.jar 1.13.1Defoldのコマンドラインビルダーでビルドし、生成テクスチャのUVを読み戻して確認。 |
| GameMaker | spr_<name>_stripN.png · gamemaker.json | 未検証GameMakerでは読み込んでいません（ヘッドレス実行不可）。ストリップはGameMakerの取り込み方式どおりに切ります。 |
| CSS sprites | .css · preview .html | 検証済み Chromium同梱スタイルシートで全クラスを描画。 |
| GIF / APNG | one file per animation | デコード確認 Pillow書き出し後に全フレームと遅延を再デコード。APNGは完全一致。 |
検証の根拠
GIFデコーダー：実在のGIF 29本で408/408フレームがPillowと一致、APNG 16本で132/132。.aseprite：コーパス231ファイルを読み込み・書き直し、Aseprite 1.3.18で開いてタグ・長さ・ピクセルが231/231一致。書き出し：実在のCC0アセットで実際のエンジンを49回実行し47回合格。失敗2回はPhaser 3.90のトリムXMLの不具合で、Phaser 3プリセットで回避できます。
制限
- WebMのみです。MP4と音声トラックはありません。
- 背景色と倍率は固定です：rgb(32, 34, 40)、両辺が1920 px以内なら4倍。
- 1ファイル1サイクルで、繰り返し回数は保存しません。
- グリッド・島の推定は信頼度つきのプレビューで、「適用」を押すまで何も切りません。すべての選択に代替案があり、ワンクリックで切り替えられます。
- レイヤーが正確に合成できない.asepriteファイル（グループの不透明度など）は統合して読み込み、理由を読み込みパネルに表示します。
- 読み込んだアトラス内の回転フレームは回転したままで、その書き出しは未検証です。
- 画像は一辺32,768px（2億6,800万ピクセル）まで。ブラウザのメモリにも依存します。
バージョンと出典
WebM書き出しはChromiumで確認しました。ファイルがWebM（EBML）ヘッダーで始まり、ffprobeが動画ストリームとフレームを読み、Chromiumが6 × 100 msのアニメーションを4倍サイズで0.6秒再生しました。エンコーダはブラウザ自身のものなので、VP9になるかVP8になるかはブラウザ次第です。VideoEncoderの対応状況はMDN、ffmpegのオプションはffmpeg公式ドキュメントに基づきます。
参照した公式ドキュメント
よくある質問
MP4で直接書き出せますか？
いいえ。書き出せるのはWebM（VP9、無理ならVP8）だけです。ffmpegなどの変換ツールでMP4にでき、ニアレストネイバーの4倍拡大はすでに動画に入っているので、ドットは四角いままです。
WebMのボタンが押せません。
動画はブラウザのWebCodecs VideoEncoderで作ります。ChromiumとFirefoxにはあり、書き出しはChromiumで確認しました。ない環境ではボタンが無効のままで、GIFとAPNGは書き出せます。
動画は可逆ですか？
いいえ。動画の圧縮は非可逆なので、WebMは見せる用途で、エンジンに読み込むものではありません。正確なフレームはシートの書き出しかAPNGで。
無料ですか？アカウントは必要ですか？
このページの機能はすべて無料で、アカウントなしで使えます。透かしや制限された書き出しはありません。
スプライトはアップロードされますか？
いいえ。Studioはこのブラウザのタブ内でデコード・パック・書き出しを行います。プロジェクトはブラウザ（IndexedDB）に自動保存され、.nerulioファイルとして保存できます。
Asepriteやエンジンのプラグインは必要ですか？
いいえ。.asepriteファイルはブラウザで読み書きします。エンジン別のバンドルには必要なものが入っています（Godotはインポート設定とシーン、UnityとGodotのタイルセットは小さなエディタースクリプト）。