1枚のPNGから透過の走行・ジャンプアニメーションを作る

キャラクターの画像を1枚持っていて、それを走らせ、跳ばせ、着地させ、ゲームのシーンに置きたい場合を考えます。

AnimGenでは実際にアルファを持つPNGから始めます。透過アニメーションモードで動きを生成し、使えるフレームを選び、アルファ付きの形式で書き出します。生成した動作のプレビューと、最終的にダウンロードする透過素材は、制作の別々の段階です。

走行・ジャンプのデモ動画では水色のキャラクターで主な流れを紹介しています。以下では、空中の姿勢を少し長く見せつつ、走行全体まで遅くしない方法など、制作時の判断を詳しく説明します。

アニメーションに向く透過画像を準備する

頭、手、足がすべて画面内にある素材を選びます。ジャンプ用に頭上、手足の周りにも余白を残すと、動き始めてすぐに画面の縁へ触れるのを防ぎやすくなります。

元画像が画面いっぱいでも、画像エディターで先に余白を描き足す必要はありません。アップロード後、生成前に Expand canvas をオンにすれば、AnimGen内で周囲に余白を追加できます。

まず「キャラクターサイズ」80% を試し、足りなければ 67% または 50% にします。数値を下げるほど元画像はキャンバス内で小さくなり、周囲の空間が増えます。3 × 3の配置グリッドを使えば、ジャンプする方向へ余白を多めに置けます。透過アニメーションモードでは追加領域も透明に保たれ、アップロードした元ファイルも上書きされません。

設定場所はStudio左側の作成パネルにある、最初のフレーム画像の下です。画像はローカルデモの画面で、上部のスイッチをオンにし、サイズと位置を選びます。スクリーンショットのUI表記は中国語ですが、設定項目は同じです。

余白が増えるほど生成画面の中でキャラクターは小さくなります。必要な動きに合わせて調整してください。この機能で、元画像ですでに切れている手足を復元することはできません。生成後も見切れを確認します。詳しくは入力キャンバスの説明をご覧ください。

大きさと位置の比較はExpand Canvasの走行・ジャンプ・攻撃の例にあります。トップページの青いキャラクターの実際の動画と構図を比較できます。

自分の独立したキャラクター画像のほか、公開サンプルの透過ランナーPNGでも練習できます。これは操作を学ぶための素材で、広告動画とまったく同じ生成結果を保証するものではありません。

透過対応の画像エディターで、明るい背景と暗い背景の両方に重ねてください。空白部分から背景が見えれば、本当に透明です。市松模様が画像と一緒についてくるなら、模様自体が画像に描かれている可能性があります。

拡張子がPNGでも透過しているとは限りません。AnimGenの透過アニメーションには有効なアルファが必要です。通常の背景がある画像なら、先にキャラクターを切り抜くか、背景を含めて生成する通常のアニメーションフローを選びます。通常モードと透過モードの入力条件も参照してください。

動作の順序と固定カメラを明記する

AnimGen Studioにログインして画像をアップロードし、透過アニメーションモードを選びます。その時点のUIに表示されているモデル、長さ、解像度を選び、生成前に点数の見積もりを確認してください。

デモ動画で使った短い指示文は次の通りです。

Run, jump, land, then keep running. Side view, fixed camera.

走る、跳ぶ、着地する、また走るという順番と、側面視点・固定カメラを指定しています。「全身を見えるようにし、元のデザインを保つ」といった条件も足せますが、生成後に守られているか確認します。

連続動作はキャラクターの動きを観察するのに適しています。一方、操作可能なゲームキャラクターでは、走行とジャンプを別々のクリップにして、ゲーム側で切り替える方が扱いやすいことが多いでしょう。次の2つは、自分の素材に合わせて調整する出発点です。

走行：

The character runs in place, facing right in side view.
Fixed camera. Keep the whole body visible and preserve the character design.

ジャンプ：

The character crouches, jumps upward, then lands with bent knees.
Side view, fixed camera. Keep the whole body visible throughout the jump.

これらは試すための提案であり、特定の生成ジョブの完全な設定記録ではありません。ゲーム側で座標を動かすなら、まずその場で走る指示を試せます。ジャンプの見た目もゲーム内の移動や動作状態の切り替えと合わせる必要があります。デモ動画では待ち時間と編集工程を短縮しています。実際の生成時間はモデル、キュー、設定に左右されます。

書き出す前に、動きが使えるか判断する

透過アニメーションフローの最初の動画には緑色やマゼンタの背景が付いている場合があります。これはキー色を使った中間結果で、アルファは後の対応する書き出し工程で生成します。まず動き自体を確認しましょう。

• 走行： 歩幅が分かり、体型と向きが安定しているか。
• ジャンプ： 予備動作、踏み切り、空中姿勢、着地が読み取れるか。
• 構図： 足、手、頭が画面の外へ出ていないか。
• 連続性： 突然の変形や不要な細部の追加がないか。

きれいな区間を選び、生成動画の全編を最終素材に入れる必要はありません。重要な姿勢が欠けたり大きく崩れたりした場合は、入力や指示を見直します。フレーム選択で不要な部分は除けますが、壊れた姿勢を描き直すことはできません。

走行ループでは、末尾から先頭への接続を繰り返し確認します。足の位置、輪郭、運動速度はつながるでしょうか。ループ再生は選択範囲を繰り返すだけで、最初と最後の差を自動修正しません。

フレームを複製して、空中姿勢を少し長く見せる

デモでは、ジャンプ中の姿勢を見やすくする小さな調整をしています。動画から Fine-tune animation を開き、Source Frames の使えるフレームを Animation Sequence に挿入またはドラッグします。出力シーケンスを再生して順番とリズムを確認します。

エディターでは元動画と出力シーケンスが別々に表示されます。画像は作業画面の例で、次の短い列はデモ動画のタイミング調整です。

変更前：F042 F046 F050 F054      F058 F064 F070
変更後：F042 F046 F050 F054 F054 F058 F064 F070

出力シーケンスで F054 を選んで Duplicate すると、その姿勢が隣にもう1枚入ります。デモの短い例は8 fpsで、7枚なら0.875秒、1枚増やした8枚なら1秒です。空中での追加の停止は0.125秒です。

このフレーム名はデモ素材固有です。自分の動画では対応する姿勢を探してください。短い列は操作を説明するためのもので、完成版には十分な中間フレームと動きに合うFPSが必要です。姿勢の複製はその姿勢の表示時間を延ばします。出力FPSを上げるのは全体の再生速度を変えるだけで、新しい中間姿勢は生みません。停止を足したら、着地まで通して見て、不自然に固まっていないか確認しましょう。

現行エディターは既存フレームのシーケンス編集と全体のキャンバス調整を行います。1枚だけを描き直したり、自動で全フレームを位置合わせしたりはしません。詳しくは高度なエディターをご覧ください。書き出す前に編集状態が Saved になったことを確認します。

用途に合わせて透過書き出し形式を選ぶ

通常のMP4プレビューは、このフローの透過納品ファイルではありません。公開の透過WebMサンプルは512 × 512、4秒のWeb用素材で、再生互換性を確認できます。これは独立したサンプルであり、上の8フレームの調整例の書き出し結果ではありません。

ゲームへ取り込むにはGodot 4、Unity、Unreal Paper2D、Cocos Creatorの説明を参照してください。パッケージにはアニメーションファイルと取り込み情報が入っていますが、移動、衝突、動作状態の切り替えはゲーム側の実装です。

必要な出力を選び、対応する権限と見積もりを確認します。まずPNGで結果を確認してから本番用形式を選んでもかまいません。高度な形式と商用利用条件は現在の価格と書き出し権限を参照してください。

実際の背景の上で確認する

明るい背景、暗い背景、ゲームに置く予定のシーンそれぞれで、動作を最後まで再生します。速く動く手足、細い輪郭、着地時の変化を見てください。

透過PNGは正常なのに動画だけ黒背景なら、まずプレーヤーのアルファ対応を確認します。すべての出力に同じ不要な背景が残るなら、入力、透過フロー、出力キャンバスを見直します。透過形式の互換性と書き出しのトラブルシューティングにも判断方法があります。

独立したキャラクター、明確な動作指示、用途に合う形式を用意できたら、AnimGenで自分のキャラクターを動かしてみてください。先に納品例を見たい場合は、透過アニメーションのワークフローとダウンロード素材から確認できます。