制作フローの実例

1枚の画像から16フレームのスプライトシートまで

AnimGen が所有する素材を使い、元画像から生成動画、正確な区間選択、フレーム抽出、スプライトシートの書き出し、Unity や Godot 4 への取り込みまで確認できます。

具体的な制作手順

1枚のキャラクター画像から16フレームの走行ループへ

同じ自社素材を制作工程の最後まで追います。4.00秒の元動画は残したまま、元動画の62~92フレームをループとスプライトシート用に選択します。結果は原画、指示文、モデル、設定によって変わります。

1 · 元画像

画像からアニメーションを作る例で使用する、透明背景の水色の横向きランナー
輪郭が明瞭で、手足を動かす余地のある透明背景の横向きキャラクター。
動きの指示
“横向きの走行ループ。キャラクターを中央に保ち、右を向かせ、輪郭を安定させる。”

2 · 生成された元動画

640 × 640 · 24 fps · 96フレーム · 4.00秒

再利用できるゲーム用ループを決める前に、まず生成結果全体を確認します。

3 · きれいなループを選ぶ

ハイライトした範囲に中央の使える走行動作を残し、導入と末尾の動きは元動画に残します。

選択範囲:1.29秒 · 元動画の62~92フレーム

選択したループのプレビュー

640 × 640 · 24 fps · 元動画31フレーム
正確に選んだ1.292秒・31フレームの区間を、フレーム抽出前に繰り返し再生して確認します。

4 · スプライトシートを書き出す

1536 × 1536 PNG · 16フレーム
右へ走る水色のキャラクターを並べた16フレームの透明スプライトシート
元動画を12 fpsで1フレームおきに抽出し、透明な4 × 4のシートに配置します。

書き出せるファイル

  • 選択したループから抽出した16枚の透明PNG
  • 4 × 4のスプライトシートPNGとJSONフレーム情報
  • 任意のUnity、Godot、Unreal Paper2D、Cocos Creator向けパック

表示中のサンプルをダウンロード

公開PNGと対応するフレーム情報を使い、自分の素材で試す前に4 × 4の配置を確認できます。

これらは公開の確認用サンプルです。制作物として使うアニメーションは自身の素材から生成・書き出し、現在のプランまたはクレジットパックの権利をご確認ください。

次の工程

この4 × 4シートをUnityまたはGodot 4で使う

公開サンプルは1フレーム384 × 384ピクセル、12 fpsとして手動で取り込めます。自分の書き出しではエンジンパックを選ぶと、各ガイドに記載されたメタデータとプロジェクトファイルを取得できます。

Unityに取り込む

サンプルPNGをSprite (2D and UI)、Multipleに設定し、384 × 384の4 × 4グリッドで分割して、番号順にクリップを作成します。

AnimGenのUnityパックには隣接する.meta、JSON、マニフェスト、取り込み手順も含まれます。

Unity取り込みガイドを読む

Godot 4に取り込む

サンプルPNGの4 × 4グリッドからAtlasフレームを作り、AnimatedSprite2Dで0~15番を12 fpsで再生します。

AnimGenのGodot 4パックにはSpriteFrames、すぐ使えるシーン、マニフェスト、パスを保持する手順も含まれます。

Godot 4取り込みガイドを読む

この実例で確認できること

  • 生成動画全体と切り出した結果を並べて確認できます。
  • 正確な開始・終了位置から、元動画の31フレームの選択範囲を検証できます。
  • フレーム抽出により、この範囲を16フレームの4 × 4スプライトシートにできます。
  • 書き出す前に、明暗両方の背景で透明度と輪郭の品質を確認してください。

制作フローについての質問

これは顧客事例ですか?

いいえ。AnimGenが所有する原画と現在提供している機能を使った製品の制作例です。架空の顧客成果として紹介していません。

どの画像でも同じ品質になりますか?

いいえ。原画、動きの指示、モデル、解像度、長さ、その他の設定によって変わります。制作ファイルを書き出す前にプレビューを確認してください。

動画から始めることもできますか?

はい。対応動画を取り込み、使う区間を選び、PNGフレーム、スプライトシート、エンジンパックを書き出せます。画像からの動画生成は必須ではありません。

自分の原画で制作フローを試す

アカウントを作成し、キャラクター画像をアップロードして、書き出す前にプレビューを生成しましょう。

対象アカウントを作成