チュートリアル: グラフィックコース#2 2Dボーンキャラクター

STEP2: アニメーションを追加してみよう。

  1. シーンウィンドウでAnimationPlayerを選択してください。下部のパネルがAnimationに切り替わります。
  2. Animationパネル左上の :play_button: を押してみてください。キャラクターがわずかに動くはずです。これは、001_Idleというアニメを再生しています。
  3. 001_Idleとなっている部分をクリックしてみてください。47種類のアニメーションが登録されていますので好きなものを再生してみましょう。白と黄色のボーンの動きに応じてキャラクターが動いていることがわかるはずです。このボーンの動きは、下部のトラックというもので制御されています。
  4. 新しいアニメーションを作ってみましょう。パネル上部のAnimationをクリックして、Newを選択します。
  5. 新しいアニメーションを作成するウィンドウがでるので、名前をつけてOKを押しましょう。
  6. アニメーションが追加されましたが、まっさらな状態でトラックには何もありませんのでトラックを追加しましょう。BoneAnimationRoot2D>Skeletonの子にある、B_HipからB_Chainまでの全てのBone2Dノードを選択します。そして、上部のツールバーにある:key:マーク(Insert Key)ボタンをクリックしましょう。
  7. 42個の新しいトラックを作成しますか?という選択肢がでるのでそのまま、作成を選択します。これで新しいアニメーションにトラックが追加されました。この42個のトラックは、21個のボーンノードそれぞれの位置と回転を制御するようになっています。
  8. トラックをいじっていきましょう。青い縦棒は現在の再生地点を示しています。0秒地点にあるはずなので、真ん中あたり、0.6秒地点あたりまでドラッグしましょう。
  9. 簡単な動きをつけてみましょう、シーンウィンドウでB_Arm_Rを選択してください。このノードは右腕の上腕の骨を示しています。
  10. インスペクターウィンドウで、Node2D>TransformのRotationを変更してみてください。右腕の角度がかわり、ぐるぐると回るはずです。
  11. 好きな角度を決めたら、再び上部の:key:マークを押してください。一見何も起きていないように見えますが、今の回転の値が0.6秒地点に保存されています。
  12. 再生ボタンを押してみてください。キャラクターの腕が初期位置から、ゆっくりとキーを挿入した角度まで動くはずです。初期位置から指定位置までの間の動きは自動で補間されます。人形遊びのようにポーズを作り、キーを挿入すればアニメーションになる・・・というわけです。

グラフィックコースの続きはこちら!

解説

アニメーションの長さとループ
アニメーションの長さは右上の:clock:マークで変更できます。
その横にあるものはループ機能です。一度クリックでループ再生、再度クリックで折り返し再生、再度クリックでループ無しと切り替わります。
image

追加したアニメーションをヴィジュアルスクリプトで使う
ヴィジュアルスクリプトで使うためには、GameObjectノードのアニメーションセットに登録する必要があります。

  1. シーンウィンドウでPlayerを選択してください。
  2. インスペクターのアニメーション一括登録ボタンを押してください。
  3. これでアニメーションセットに登録され、ヴィジュアルスクリプトで利用できるようになります。>アニメーションセットを展開することでどのようなアニメが登録されているか確認することもできます。

2Dボーンアニメーションの拡張
このチュートリアルでは、最も基礎的な操作だけを説明しています。GodotのAnimationPlayerは非常に高性能で、IK機能等2Dボーンアニメーションを扱う上で便利な機能が沢山あります。より詳しくは以下のGodot公式ドキュメントをご確認ください。