
目次
一度だけ見ると自然な歩行動画でも、全体を繰り返すと数秒ごとに歩き始めの姿勢へ戻ることがあります。ゲームではキャラクターが前進し続けているのに体だけが立ち姿に近づき、その停止が目立ちます。
AnimGenトップページの水彩調の女性キャラクターを使って確認します。元素材はアルファ付きProRes 4444、4秒・24 FPS・96フレームです。序盤は立ち姿に近く、その後で連続した歩行に移ります。この中から32フレームを切り出し、24 FPSのまま約1.33秒の周期にしました。
元動画・ループ・横移動の比較デモを開けます。初期状態では一時停止しており、再生後に何周か続けて観察したり、2つの動画の再生位置を個別に動かしたりできます。
歩き始めと連続歩行を分けて見る
まず4秒の完全なプレビュー(MP4、約1.1 MB)を通して見ます。最初の数フレームは歩幅が小さく、徐々に脚が大きく動き、後半に交互に繰り返せる歩行が現れます。
歩き始め自体にも用途があります。ゲームで停止状態から移動へ変わるときは、独立した開始アニメーションとして使えます。歩き続けるときには、末尾から冒頭へ戻っても脚が同じリズムで交替し、体が突然立ち姿へ戻らない周期が必要です。
範囲を探すときは足を先に、腕と裾を次に見ます。同じ脚が再び近い位置に来るところが周期の候補です。左右の脚が入れ替わっただけの似た輪郭は、まだ半周期かもしれません。服で脚が隠れる場合は、腕の振りやつま先の向きが手掛かりになります。
今回は33~64フレーム目を選ぶ
24 FPSの元ファイルで選択範囲を再確認し、0始まりのインデックス32~63にあたる連続32フレームを残しました。完全版とループ版はいずれも同じProResから書き出し、496 × 864のサイズを保ち、フレーム補間も倍速処理もしていません。
| 項目 | 完全版 | 選択したループ |
|---|---|---|
| フレーム数 | 96 | 32 |
| 再生FPS | 24 FPS | 24 FPS |
| 長さ | 4秒 | 32 ÷ 24 ≈ 1.33秒 |
| 元動画内の位置 | 1~96フレーム目 | 33~64フレーム目 |
| ダウンロード形式 | アルファ付きWebM | アルファ付きWebM |
ここでいう「33フレーム目」は1始まりです。0始まりのツールでは同じ範囲が 32~63 です。時間では開始が 32 / 24 秒、終了境界が 64 / 24 秒、つまり約 1.33~2.67秒 です。終了境界にある次のフレームは含めません。
残す元フレーム:32, 33, 34, ... , 63(0始まり)
出力フレーム数:32
出力FPS:24
周期:32 / 24 ≈ 1.333秒
再生順:32 → 33 → … → 63 → 32 → 33 → …
この数字は今回の素材の確認用です。別の生成結果では安定した歩行の開始位置も周期の長さも変わるため、範囲を探し直してください。
最後の64フレーム目から最初の33フレーム目への接続を見る
切り出したら少なくとも3周再生します。範囲内は元から連続しています。最も問題が出やすいのは末尾から先頭へ飛ぶ瞬間です。
画像は元動画の63、64、33、34フレーム目で、出力の最後の2枚と最初の2枚です。アルファ付きループを同じ明るい背景に合成し、人物の縮尺をそろえました。
境界で足が同じ方向に動き続けるか、体の高さや位置が急に変わらないか、裾の形が突然切り替わらないかを確認します。ゆっくりスクラブして姿勢を見た後、通常速度でもリズムを判断してください。
最初と最後の画像が完全に同じである必要はありません。末尾に最初の画像を重複させると、その姿勢が2回分続いて、かえって引っかかることがあります。最後から最初への変化が、範囲内で隣り合うフレームの変化に近い状態を目指します。
継ぎ目が目立つ場合は、開始または終了位置を1フレームずつ前後させ、再生して比較します。24 FPSでは1フレームが約42ミリ秒です。境界を一度に片方だけ動かせば、どの調整が効いたか分かりやすくなります。
エディターでは32フレームを元の順序と24 FPSのまま保つ
AnimGenの高度なエディターでSource Framesを見て、中央の32フレームを元の順序でAnimation Sequenceに入れ、ほかのフレームを取り除きます。すでに出力シーケンスがある場合は、同じ範囲を二重に追加しないよう確認します。出力FPSは24のままにし、ループを再生します。
パネルと操作の説明は高度なアニメーションエディターにあります。元フレームの番号と出力シーケンスの番号は別です。切り出し後の出力1フレーム目は、元動画の33フレーム目です。
同じ32枚を48 FPSで再生すると約0.67秒になり、歩行も速くなります。今回は元の24 FPSの全フレームを保って速度を合わせました。半分のフレームを先に捨ててから重複フレームで24 FPSへ戻しても、失った途中の姿勢は戻りません。
この記事では完全版とループ版の透過WebMを配布しています。ブラウザ比較デモの明るい背景付きMP4は同じフレームから作り、背景とFPSをそろえました。自分の素材を作る場合は透過アニメーションの制作手順から始められます。
| 素材 | ブラウザ用プレビュー(明るい背景) | 透過素材(アルファ保持) |
|---|---|---|
| 完全な4秒版 | MP4・約1.1 MB | WebM・約2.2 MB |
| 32フレームの歩行ループ | MP4・約396 KB | WebM・約810 KB |
どちらも496 × 864、24 FPSです。動きを見るにはMP4、背景を透過するにはWebMを使います。Webページで約35 MBの元ProResを読み込む必要はありません。
前進にはシーン内の移動速度も必要
ループは足の動きを繰り返しますが、ゲーム世界での座標は通常ゲームロジックが更新します。継ぎ目が滑らかでも、移動速度が合わないと足滑りが起こります。足が接地している間に、体が速すぎたり遅すぎたりして進むためです。
横移動デモでは同じ32フレームの透過WebMを繰り返し、ページ上のキャラクターの位置も変えます。初期速度は125 px/sです。明るい背景はデモのシーンに属し、動画自体はアルファを保っています。速度を上下させ、足と地面の相対的な動きを見てください。右端に着いて左端へ戻るのはシーンの位置リセットであり、動画内で1.33秒ごとに繰り返す歩行周期とは別の処理です。
実際のゲームでは通常の表示サイズと速度から始め、接地中の足ができるだけ滑らないよう調整します。その上で遊びに必要な移動速度やアニメーション速度を決めます。拡大・縮小後も再確認してください。同じ歩幅でも画面上の距離は変わります。
このデモは両者の関係を見るためのもので、Web上の速度を標準の歩行速度とするものではありません。Godotへの組み込みは透過アニメーションのインポート検証を参照できます。
確認した周期をプロジェクトへ持ち込む
範囲に納得したら、フレーム数、FPS、キャンバスサイズを記録します。書き出し後にもう一度再生し、歩行、透過、位置がエディター内と一致するか確認してください。形式やエンジンを変える場合も、順序と速度を照合し、24 FPSの素材を別のFPSで再生しないようにします。
ゲーム用のスプライトシートと独立PNGは書き出し形式の比較を参考に選べます。透明な輪郭に色が残る場合はアルファしきい値とエッジの色かぶりも確認してください。
4秒の元プレビューから自分でも範囲を探し、32フレームのループと比べてみましょう。自分のキャラクターでは、まず1周期を選んで何周か再生し、自然につながってからシーン内の移動と組み合わせます。
