本文へ移動
記事一覧

AI剣攻撃アニメーション

4秒のAI剣攻撃を、キレのある一撃に編集する

トップページの女剣士を例に、前後の待機と途中の停止フレームを取り除き、4秒・96フレームのAIアニメーションを24 FPS・28フレーム・約1.17秒の攻撃に編集します。

AnimGen更新日 7 分で読める
編集後のピクセルアートの女剣士。構え、振り上げ、斬撃、戻りの4場面
目次

AnimGenトップページの女剣士の剣攻撃プレビューは4秒あります。動きは一通り含まれていますが、前後に待機があり、途中でも姿勢を低くして止まり、剣を上げて止まり、振り終わってからまた止まります。このまま攻撃ボタンにつなぐと、入力してから待たされ、攻撃が分断されたように見えます。

今回は前後の待機を切り、途中のテンポを遅くするフレームも抜いて、96フレームから28フレームを残しました。編集後も24 FPSで、再生時間は約1.17秒です。単発攻撃デモでは、ボタンを押してから構えに戻るまでを試せます。

編集後・28フレーム・24 FPS・約1.17秒。前後の待機を除き、振り始めと戻りの停止を短縮しました。

デモにはトップページの灰色背景付き448 × 192プレビューをそのまま使い、補間や再生成はしていません。ゲーム用の透過素材は、対応する元素材から別途書き出す必要があります。

前後だけ切っても、動作中の停止は残る

比較用に4秒の元動画を残してあります。キャラクターが実際に動き始める時点、剣を上げた後の停止、振り下ろしてから戻り始めるまでの時間に注目してください。

編集前・トップページの元動画・96フレーム・24 FPS・4秒。前後の待機と動作中の停止を比較できます。

今回選んだ範囲は、元動画の17フレーム目から78フレーム目までです。番号は0始まりです。最初は攻撃直前の構え、最後は体を戻し終えた姿勢を残し、その前後に続く待機は削除しました。

この段階では62フレーム、約2.58秒です。振り上げ前、振り上げ後、斬撃後の停止はまだ残っているので、内部も編集します。

バージョン フレーム数 24 FPSでの長さ
トップページの元動画 96 4.00秒
前後の待機だけを削除 62 約2.58秒
途中の停止と一部のつなぎも削除 28 約1.17秒

停止を短くし、斬撃の連続性を残す

振り始めと戻りにどれだけ時間を割くかは、剣と体の位置を見ながら判断します。今回のフレーム選択は3つの区間に分けました。

  • 振り始め、17~42フレーム:26枚を9枚に。姿勢を低くし、剣を持ち上げ、頭上に構える姿勢は残し、その間の停止を短くしました。
  • 斬撃、43~51フレーム:9枚を連続して保持。剣の軌跡、振り下ろし、エフェクトの消失をつなげます。
  • 戻り、52~78フレーム:27枚を10枚に。剣を振った後の前屈みの停止を縮め、立ち上がり、剣を戻し、構えに復帰する動きを残します。

編集後の0、8、11、25フレーム目にある構え、振り上げ、斬撃、戻りの姿勢

画像は編集後の0.000、0.333、0.458、1.042秒時点です。姿勢は読み取れますが、その間の待ちは短くなっています。この4枚だけを残すのではありません。剣を上げる、振り下ろす、立ち上がる途中も連続再生して確認します。

元動画の0始まりのフレーム番号による、全28枚の選択順は次の通りです。この順に24 FPSで再生します。

text
17, 18, 20, 30, 32, 33, 35, 37, 42,
43, 44, 45, 46, 47, 48, 49, 50, 51,
52, 67, 68, 69, 71, 73, 74, 75, 77, 78

ページ内の動画はこのフレーム選択レシピに従ってローカルで再エンコードしました。比較できるよう元動画も保存しています。

高度なエディターで自分の攻撃を調整する

AnimGenで生成結果を開くか動画を取り込み、範囲選択と書き出しで動作範囲を決め、高度なエディターで内部のフレームを調整します。

  1. 元動画のフレームから、振り始めから戻りまでを選んでアニメーションシーケンスに追加します。
  2. 出力シーケンスにある余計な待機・停止フレームを削除します。変化の少ない部分から小分けに削り、その都度再生します。
  3. 振り始めや戻りがまだ長ければ、つなぎのフレームをさらに減らします。斬撃の連続区間はまず残し、全体を見てから変更します。
  4. 24 FPSを維持し、構えから攻撃への入りと、最後に構えに戻る接続を確認します。保存してから書き出します。

24 FPSでは1フレームの削除で約41.7ミリ秒短くなります。動画全体を倍速にすると、剣のエフェクトも戻りも同時に速くなります。区間ごとにフレームを抜けば、振り始めの待ちと戻りの停止を別々に調整できます。

削りすぎて突然別の姿勢へ飛ぶ場合は、近くのつなぎフレームを戻してください。28枚という数はこの女剣士の素材に合わせた選択であり、自分のキャラクターでは動きに沿って選び直します。

1回押したら1回再生し、構えに戻す

クリックで剣を振るデモを開き、攻撃して最後まで待ってみてください。「構え」と「攻撃中」の2つを主な状態として使い、動画の準備が終わる前は読み込み表示を出します。

  1. ページを開くと構えの姿勢を表示します。
  2. 攻撃ボタンを押すと、選択した区間の最初から再生します。
  3. 再生中の追加クリックは無視し、繰り返し冒頭に戻らないようにします。
  4. 再生終了後に構えへ戻り、次の攻撃を受け付けます。

初期状態では編集後の28フレーム版を使います。構えは編集区間の最初のフレームの静止画です。クリック待ちの時間を攻撃の再生時間には含めません。1回終わるとカウントが増え、静止した構えに戻ります。リセットボタンはいつでも再生を止め、カウントをゼロにします。

text
構え → 攻撃を押す → 最初から1回再生 → 再生終了 → 構え
再生中の追加クリック:動作を再起動しない
リセット:再生を中断し、カウントをゼロにする

Webデモは動画の実際の終了イベントで構えに戻ります。時間表示も編集後の動画自身の長さを使い、ループはオフ、再生速度は1倍です。連打も試してください。毎回先頭に戻るプレーヤーでは、斬撃に入る前に次の入力でやり直してしまいます。

攻撃中の先行入力を次の攻撃へつなげたい場合は、入力バッファを追加できます。現在のデモは再生中の入力を保存しません。コンボや回避による中断は、実際に必要になってから設計すれば十分です。

剣の軌跡と当たり判定を合わせる

このデモには衝突判定もダメージ計算もありません。ゲームに入れる際は、攻撃が命中する時間帯を別途決めます。剣が敵の方向を通るフレームを確認し、エンジン側で有効な判定窓を設定してください。

フレームを抜いた後は時間を再計算します。元動画の43~51フレームは、新しいシーケンスでは9~17フレームにあたり、再生時間の約0.375~0.750秒です。元動画の秒数をそのまま使うと、判定と斬撃がずれます。どのフレームを有効にするかは、敵の位置と攻撃範囲も考慮します。

攻撃中に移動できるか、次の攻撃をいつ受け付けるか、被弾で中断するかはゲーム側の制御です。まず単純なシーンで実際の入力を試してから決めましょう。

書き出しでは動く範囲と共通のキャンバスを確保する

剣は立ち姿よりも左右・上方向へ伸びます。書き出し前に、剣先、腕、エフェクトが最も大きく動くフレームを確認してください。構えだけに合わせて狭く切り抜かないことが大切です。生成時点で見切れるなら、Expand Canvasで余白を確保する方法があります。

構えと攻撃のシーケンスでキャンバスと配置をそろえると、出入りの位置が安定します。エンジン内の原点も統一してください。詳しくはキャンバスとpivotを参照できます。

フレーム単位の加工にはPNG連番を、動きを確定した後にはスプライトシートやエンジン用パッケージを使えます。スプライトシートとPNG連番の比較で選び方を説明しています。

自分のキャラクターではまず「攻撃に入る、最後まで再生する、構えに戻る」をつなぎ、その後で敵や命中時の演出を加えてください。ループ再生より、攻撃ボタンを何度も押す方が接続や入力処理の問題を見つけやすくなります。

画像の詳細