PNG 連番 ZIP
選んだアニメーションを個別の PNG フレームにした ZIP ファイルです。
動画からスプライトシートへ
動画をゲーム用スプライトシートに変換
対応する動画を読み込み、使う区間とフレーム設定を選んで、PNG 連番、JSON 付きスプライトシート、またはゲームエンジン向けパックを書き出せます。
検証済みの変換例
動画をスプライトシートに変換できる？ 実際の結果を見てください。
自社所有の 4.00 秒の元動画を残したまま、きれいな 1.292 秒を選び、透過 16 フレームのスプライトシートに抽出しました。画面上の模型ではなく、実際の AnimGen の成果物です。
- 元動画
- 4.00 秒 · 24 fps · 96 フレーム
- 選択範囲
- 2.542～3.833 秒 · 元動画の 31 フレーム
- 抽出間隔
- 1 フレームおき · 12 fps
- 出力
- 16 フレーム · 4 × 4 · 1536 × 1536 PNG
公開 PNG と JSON は確認用のサンプルです。自分の動画での結果は、区間、サイズ、フレーム数、透過設定によって異なります。
変換の手順
動画からゲーム用フレーム素材まで
スタジオでは区間選択、フレーム抽出、透過処理、ファイル化を別々に設定し、それぞれ確認できます。
- 1
動画を読み込む
MP4、WebM、MOV を読み込むか、ワークスペース内の生成済みプレビューから続けます。
- 2
区間を選ぶ
開始点と終了点を設定し、フレーム単位で見ながらループ再生で動きを確認します。
- 3
出力を設定する
フレーム数、サイズ、形式、必要に応じて透過処理を選びます。
- 4
素材を書き出す
選んだ形式に応じて PNG フレーム、スプライトシート、エンジン向けパックを取得します。
元動画
選択範囲
出力フレーム
区間選択とフレーム抽出
元動画の全フレームではなく、使える動きだけを出力
区間を絞ってフレームごとに確認し、その長さを何枚の出力フレームで表すかを指定します。不要な導入、不安定な切り替わり、余分な戻り動作を除けます。
- フレーム単位で細部を確認できます。
- 開始点と終了点で必要な区間を選べます。
- 繰り返す動きはループプレビューで確認できます。
- 書き出し前にフレーム数とサイズの上限を確認できます。
書き出し形式
プロジェクトに必要なファイルを選ぶ
同じ書き出しタスクで複数の形式を選べます。利用できる内容は現在のスタジオ実装に基づきます。
スプライトシート + JSON
配置情報の JSON メタデータが付いたスプライトシート PNG です。
エンジン向けパック
Unity、Godot 4、Unreal Paper2D、Cocos Creator に取り込めるパックです。
任意の透過処理
背景除去は出力時の処理として選択
除去しやすい背景なら、フレーム書き出し時に色キーやマッティングを利用できます。Alpha マッティングによる調整も任意です。髪の毛、動きのぼけ、影、似た色などは輪郭の品質に影響するため、結果を確認してください。
- 被写体とはっきり異なる背景色には色キーを使います。
- 単色のキー背景でない場合はマッティングを試します。
- 透過は出力時の処理であり、生成時から Alpha が必ず保持されるわけではありません。
- 公開前に明るい背景と暗い背景の両方で輪郭を確認してください。
動画からスプライトシートへのよくある質問
どの動画形式を読み込めますか？
現在の Web ワークフローは MP4、WebM、MOV に対応します。ただしブラウザーのデコード機能と実際のコーデックによっては、プレビューできないファイルもあります。
先に AnimGen で動画を生成する必要がありますか？
いいえ。対応する動画を直接読み込むか、同じワークスペース内の画像から生成したプレビューから続けられます。
スプライトシートにフレーム情報は含まれますか？
PNG に加えて JSON メタデータを出力します。Unity、Godot 4、Unreal Paper2D、Cocos Creator 向けパックも選べます。
背景除去は必ずきれいにできますか？
いいえ。近い色、影、細部、圧縮、動きのぼけで結果が変わります。方法を選び、制作に使う前に書き出した Alpha を確認してください。