動画をシートに変換するツールの多くは、一定間隔でフレームを抜き出して終わりです。単発のエフェクトならそれで足ります。でも歩きループだと、つなぎ目でカクつくシート、輪郭すべてに残る緑のフチ、そしてフレームごとに個別トリミングされたせいでガタつくキャラが残ります。このツールはその3つを解決します。動きの周期を見つけ、エッジのデスピル付きで背景を抜き、全フレームを共通の枠でトリミングします。
動画→スプライトシート変換の使い方
- MP4、WebM、MOV をドロップします。グリーン、マゼンタ、ブルー、白の単色背景で撮影またはレンダリングしたキャラが最もきれいに仕上がります。アルファチャンネル付きの WebM は Chrome と Edge で透過を保持します。
- 使いたい部分の開始と終了（最大30秒）とキャプチャサイズを設定し、フレームを抽出を押します。クリップが1回再生され、デコードされた全フレームが取り込まれます。
- 動きが繰り返す場合は、ツールが1周期を見つけて選択します。シートのフレーム数を選ぶと周期内に均等に配置され、最後の重複フレームは除かれるのでループがカクつきません。
- 背景キーを確認します。自動ではフレームの縁から背景色を読み取ります。うまくいかない場合は、元フレームの背景をクリックしてください。許容値、エッジのぼかし、デスピル、1px 縮小を調整すると結果がリアルタイムで更新されます。
- 最大フレームサイズを設定します。くっきりしたエッジと全フレーム共通のパレットが欲しい場合はドット化をオンにします。
- Aseprite、Phaser/TexturePacker、Godot、CSS 用データ付きの PNG シート、アニメ GIF、またはそれらすべてと個別フレームをまとめた ZIP を書き出します。
得られるもの
- PNG スプライトシート。透過背景でグリッド配置（列数は自動または固定、パディング指定可）。
- フレームデータ：Aseprite JSON、Phaser/TexturePacker JSON（hash または array）、Godot 4 SpriteFrames
.tres、ステップ式キーフレームアニメ付きの CSS スプライトクラス、Unity のスライス設定。 - アニメ GIF。任意の整数倍で、透過または黒／白背景。
- ZIP。シート、GIF、全データ形式、各フレームの個別 PNG をまとめて。
対応エンジン
- Godot 4：PNG と
.tresを同じフォルダに入れ、SpriteFrames を AnimatedSprite2D に割り当てます。PNG を別の場所に置く場合は、1行目のres://パスを書き換えてください。 - Unity：PNG を Sprite (Multiple) としてインポートし、Filter Mode を Point に設定、Unity 設定ファイルの数値で Grid By Cell Size スライスします。
- Phaser 3 と PixiJS：PNG と TexturePacker JSON (hash) をアトラスとして読み込みます。JSON にはアニメーションのフレーム名も順番に記載されています。
- GameMaker、Defold、Construct、RPG Maker：書き出し設定の下に表示されるフレームサイズで、PNG をストリップまたはグリッドとしてインポートします。
ゲーム制作で使って得たコツ
- キャラに使われていない色を背景にして撮影・レンダリングしましょう。緑の服の主人公ならマゼンタが無難、赤やピンクのものならグリーンです。
- キャラの周りに余白を残してください。手足がフレームからはみ出すと、共通トリミングでは取り戻せません。
- 歩き・走りループは 8フレーム、10–12 fps にすると 32–64 px でよく見えます。待機は 4–6フレームをピンポン再生するのもおすすめです。タイミングはスプライトシート→GIF 変換で確認できます。
- キー抜き後も輪郭に色が残る場合は、エッジのぼかしを少し上げてデスピルをオンのままに。色のフチが残るときだけ 1px 縮小をオンにします。
- ドット化はゲーム内の最終サイズで行いましょう。512 px のフレームを共通パレットで 48 px に縮小するほうが、ドット化済みのシートを拡縮するよりずっときれいです。
活用例
- ロトスコープ用の参考映像を、プロトタイプ用の仮アニメーションにする。
- AI で生成したグリーンバックのキャラ映像から、ループする周期を抜き出す。
- レンダーパイプラインを組まずに、Blender や Spine のレンダリング結果をスプライトシートにする。
- 動画としてレンダリングしたエフェクト（煙、魔法、水）をスプライトシートとしてゲームに入れる。
よくある質問
動画はどこかにアップロードされますか？
いいえ。ファイルはブラウザで読み込まれ、フレームはお使いの端末で処理されます。サーバーには何も送信されず、ページの読み込み後はオフラインでも動作します。
どの動画形式が使えますか？
ブラウザで再生できるものなら使えます。MP4 (H.264)、WebM (VP8/VP9/AV1)、多くの場合 MOV も対応します。iPhone の HEVC/H.265 .mov は Safari と一部の Chrome でしかデコードできません。開けない場合は、先に H.264 MP4 に変換してください。
ループ検出はどういう仕組みですか？
取り込んだ各フレームを被写体の小さなシルエットに縮小します。そのうえで、考えられるすべての N について各フレームと N 枚後のフレームの類似度を測り、動きが繰り返す周期を見つけ、最初と最後のフレームが最もよく一致する周期を選びます。どの間隔も決め手に欠ける場合は単発アクションとみなし、範囲全体を使います。
動画の透過背景をそのまま残せますか？
はい、Chrome と Edge なら可能です。VP8/VP9 WebM のアルファチャンネルをデコードできます。背景で「そのまま」を選べば、ほかに何も除去されません。ほかのブラウザでは黒背景で表示されるので、キー抜きを使ってください。
何フレームまで扱えますか？
1回のキャプチャは最大30秒です。フレームは選んだキャプチャサイズでメモリに保持され、合計は約 350 MB が上限なので、大きなサイズの長いクリップは途中で止まります。スプライト用なら 256–512 px のキャプチャで十分です。
小さいサイズにするとフレームがぼやけるのはなぜですか？
動画フレームを縮小するとピクセルが平均化され、エッジが柔らかくなります。ドット化をオンにすると、アルファの二値化と共通パレットへのスナップで、最終サイズでもくっきりしたドット絵のエッジになります。
撮影しなくてもスプライトシートは作れますか？
はい。このサイトの AI ジェネレーターがキャラを描き、モーションライブラリでアニメーションさせ、このツールと同じ形式で書き出します。