1枚の画像から操作できる2Dキャラクターへ：待機・走行・攻撃

方向キーを押して走り、離して止まり、パンチを出してまた移動する。この操作につなぐと、動画を単独で見ているときには気づきにくい体の大きさ、足元の位置、攻撃後の戻り方を確認できます。

前回はオレンジ色のロボットの1本の動画からパンチと前蹴りを切り出しました。今回は同じ画像で構えたままの待機とその場走りを追加し、4つの透過アニメーションを小さなシーンにつなぎます。再生はすべて24 FPSです。

ブラウザデモでは矢印またはA/Dで移動、Jでパンチ、Kで前蹴りを操作できます。スマートフォンでは方向ボタンを長押しします。初期状態は停止中で、開始または操作ボタンを押すと動きます。

4つの動作で同じキャラクター画像を使う

元のロボットPNGを再利用し、装甲の色、頭身、右向きの視点を揃えました。動作ごとに描き直す変化を避けるため、各リクエストはこの画像から始めます。

構図も前回と同じです。4:3のキャンバスでExpand Canvasを80%にし、位置はX 0.35、Y 0.5。右側に拳と足を伸ばす余白を残します。大きな動きに合わせた余白の取り方はExpand Canvasの記事で紹介しています。

左向きは同じ画像の左右反転です。このロボットには文字や片側だけの武器がないため使いやすい方法ですが、盾や服の文字があるキャラクターでは反転後の見た目も確認してください。

静かな待機とその場走りを別々に生成する

待機のプロンプトでは、両足を動かさず構えを保ち、胸と肩をわずかに動かすよう指定しました。方向キーを離すたびに足踏みや大きな身振りが始まるのを避けます。

走行は右向きのままその場で走り続け、カメラとキャラクターの大きさを固定する指定です。腕振り、脚の動き、体の上下動は素材に残し、シーン内の横移動をコードで制御します。

2本ともSeedance 2.0 Fast、4秒、480p、4:3、Alpha Keyを使用。実際の生成費用は各36クレジット、合計72クレジットでした。透過PNG連番とProRes 4444の書き出しは0クレジットです。パンチと前蹴りは前回の720p素材を再利用し、再生成していません。これは2026年10月3日の実績で、自分の生成時には事前の見積もりを確認してください。

使用した待機プロンプト、走行プロンプトと、キー背景色付きの待機原動画、走行原動画をダウンロードできます。返ってきた動画はどちらも752 × 560、97フレーム、24 FPSで約4.04秒。指定した解像度区分、実際の動画サイズ、実行時のキャンバスは別々の工程の値です。

待機と走行はループ、攻撃は最後まで再生する

4秒の素材から呼吸や歩幅の周期を選び、繰り返し再生と末尾から先頭へのつながりを確認しました。採用した範囲はすべて連続フレームです。元フレーム番号は0始まりで、両端を含みます。

走行は一周期を残し、元フレーム59から44へ戻します。24 FPSを維持し、つなぎの生成フレームも追加していません。選び方は歩行ループの記事、攻撃の予備動作と戻りの切り出しは前回の2動作の記事を参照してください。

キャンバスと原点を揃えてから切り替える

実行時の各フレームは512 × 384の透過キャンバスに配置します。新しい待機と走行は、752 × 560の全体を縦横比を保って512 × 381へ縮小してから載せ、引き伸ばしを避けました。

構えと足元を比較した結果、待機全体にX −2、Y +3ピクセル、走行全体にX −24、Y +3ピクセルの固定移動を加えています。攻撃の配置は前回のまま。4つの原点を左上基準の(224, 321)に揃え、シーンでは0.85倍で表示します。

これらの値は今回のロボット用です。別の素材では頭、足、胴体の位置を比較して調整してください。クリップ全体の固定移動なら走る体の上下動を残せますが、毎フレーム輪郭ぎりぎりに切り抜くと位置が揺れる原因になります。キャンバスとピボットのガイドも参考になります。

攻撃が終わってから現在の方向入力を読む

状態はidle、run、punch、kickの4つです。攻撃中以外は方向入力で走り、離すと待機に戻ります。左右を同時に押すと移動を打ち消します。

JまたはKを押すと、攻撃が1回終わるまで横位置と向きを固定します。その間の別の攻撃入力は無視します。終了時に方向キーが押されていれば走行へ、離れていれば待機へ戻ります。攻撃キーの長押しでは連続攻撃せず、離して再度押す必要があります。

GodotではAnimatedSprite2D.animation_finishedで終了を扱います。待機と走行だけループを有効にし、パンチと前蹴りは無効にします。ループ再生ではこの終了シグナルは発生しません。Godot公式ドキュメント

func _attack_finished() -> void:
    if _attacking():
        completed[state] += 1
        _locomotion()

_locomotion()が現在の方向を読み、runかidleを選びます。完全な実装はダウンロードに含まれています。この場面で扱うのは移動とアニメーション切り替えで、敵、命中判定、ダメージ処理は含みません。

Godotで操作感を確かめ、移動速度を別に調整する

Godotサンプルプロジェクトを解凍し、Godot 4でproject.godotをインポートしてF5を押します。4枚の透過シートとcharacter.jsonの領域情報からSpriteFramesを作るため、プラグインは不要です。冒頭の動画はmacOS上のGodot 4.7.2、Compatibilityレンダラーで収録しました。

初期移動速度は280 px/s、アニメーションは24 FPSです。280は調整用のデモ値なので、キャラクターや表示倍率を変えたら接地中の足の滑りを見てください。ブラウザのスライダーは60–600 px/sに対応し、Godotではassets/character.jsonのdefaultSpeedで変更できます。再生速度を固定して移動速度を調整すると、歩幅とのずれを判断しやすくなります。

走行中のパンチ、攻撃中の逆方向入力、攻撃が終わる前のキー解放を試してください。攻撃を最後まで再生したあと、現在の入力で動くはずです。ページを非表示にするかウィンドウがフォーカスを失うと入力を解除して停止し、戻ったときに走り続けることを防ぎます。

素材を取得して自分のキャラクターに置き換える

透過スプライト素材にはPNG4枚、領域情報、再生速度、選択と位置調整のレシピが入っています。末尾の空きセルを再生しないよう、フレーム数はJSONから読みます。ブラウザとGodotは透過画像、記事内のMP4は閲覧用の背景付きです。

複数動作のコントローラーと配布パッケージは、実際の書き出し素材から作ったチュートリアル用です。Godotインポートガイドで素材を確認し、4つのシートとフレーム情報を置き換えてください。寸法、ハッシュ、費用、書き出し検証は素材記録で確認できます。

停止、振り向き、攻撃の一連の動きを試してから、次に必要な動作を決めましょう。追加するときはAnimGenで同じキャラクター画像、カメラ、余白を引き継いでください。