概要

この記事は、2Dスケルタルアニメーションについて調べたことの個人的なメモとなります

カットアウトアニメーションのメモ

以下は、「Godot Docs » アニメーション » カットアウトアニメーション」のメモとなります

回転のショートカットキー

キーボードのE で「回転モード」に切り替えることができます。
「選択モード」に戻すには、キーボードのQキー (移動のみなら キーボードのW)

（※パーツが多いとショートカットキーを駆使することになるので、覚えておいたほうが良さそう）

念のため、便利そうなショートカットキーのまとめ

選択モード: Q
移動モード: W
回転モード: E
拡大縮小モード: S
パーツ選択: Alt+右クリック

Alt+右クリック はパーツが重なっている場合、ポップアップで選択できるというスグレモノ
（※ただし Qキーなどで選択モードに戻す必要がある)

また、操作を間違えた時のUndoはCtrl+Z (Cmd+Z) 、戻しすぎたときのRedoは Ctrl+Shift+Z (Cmd+Shift+Z)

中心(ピボット)の調整方法

Offset > Offset > x/y の値を変更して中心(ピボット)を移動させます

ピボットの変更はここから「ピボット編集モード」にすると編集が楽にできます

パーツの描画順の調整

Z Index の値で調整できます。ただし、マイナスを使うとわかりにくくなりそうなので、最低値を「0」になるようにしたほうが良いのかもしれない……

ボーンを入れる方法

ボーンはノード単位で行われるため、先端のノードが個別に必要になります。
（例えば腕の場合、「上腕」と「前腕」だけだとIKで動かすためのボーンが不足する）

Position2D を前腕の先端に配置することで、「前腕から先端までのボーン」を作成することが可能になります。

ボーンを入れるには、まず対象のノードをShiftキーを押しながら選択します。

そして、「ホネのアイコン」をクリックして、「ノードからカスタムボーンを作成」を選びます。

するとこのようにボーンが作成されます。

IKを設定する

対象のノードをShiftキーを押しながら選択します。

再び ホネのアイコン > IKチェーンを作成 を選択します。

IKを設定すると、このように先端のノード(Position2D)の動きに合わせてIKを設定したボーンが動くようになります。

IKのオフセットを調整

これだと回転がおかしいので、人間の関節にあたる部分のピボット(回転の中心)を Offset > Offset から調整する必要があります。
ただし、IKとボーンの指定を解除する必要があるので、調整前には事前に解除しておきます。

ここからピボット編集モードに切り替えます。

ピボット編集モードにすると、ピボットが簡単に編集できます。
キーボードのEで回転モードにすると、修正したピボットの確認も楽にできます。

編集したくないパーツのピボットを選んでしまう場合は、対象のパーツをいったん非表示にしておくと、簡単に編集できます。

もしくは「子を選択不可にする」モードで編集してもよいかもしれません。

……というような調整を繰り返すと、以下のようなIK処理が作れるようになります。

アニメーションの作成

アニメーションをつけるには、AnimationPlayerを追加します。

アニメーション作成前に理解しておきたい設定

公式ドキュメントにも記載されていますが、アニメーション作成する際、以下の設定をしておくと作りやすくなります。

移動を無効にする
回転のみ有効にする
自動でキーフレームを追加する

ただ、移動させたい場合や、キーフレームを手動で追加したい場合もあるかもしれないので、そのときは設定を切り替えるようにします。
以下の説明はこれらの設定がされているものとします。

アニメーションの作成

アニメーションを作成するには、画面下のアニメーションエディタから「アニメーション」をクリックします。

すると、ポップアップが表示されるので「新規」を選びます。

新規アニメーション作成ダイアログが表示されるので、「attack」と入力して「OK」をクリックします。

アニメーション「attack」が追加されたのを確認して、「トラックを追加」をクリックします。

「プロパティトラック」を選びます。

対象ノード選択ダイアログが表示されます。
今回は右腕を回転させるので、「gBot_arm_r」を選びます。

プロパティは rotation_degress (回転値) を選びます。

すると、gBot_arm_r > rotation_degressトラックが作成されました。

モーションの時間が初期状態だと 1秒なので、2秒に増やしておきます。

次にトラックのシークバーを 0秒に移動させておきます。その上にある数値入力ボックスに「0」と入れても移動できます。
シークバーを移動できたら、トラックのシークバー(青い線)の上で右クリック「キー挿入」を選びます。

するとキーフレーム（白い丸）が配置されます。もしずれて配置される場合はマウスのドラッグで移動させたり、右クリック→削除してから再配置してみたりします。

次に「2秒」の下あたりのトラックを右クリックしてキーフレームを追加します。

そしてシークバーを「1秒」にドラッグで移動させます。

シーンツリーから「gBot_arm_r」を選択して、回転モード（キーボードのEでも変更可能)にします。

そしてマウス操作で右腕を回転させます。

マウスを離すと同時に、「1秒」のところにキーフレームが追加されています。

シークバーをドラッグしたり、再生ボタンを押してアニメーションの動作を確認します。

IKのアニメーション制御

右腕にはIKを設定しておいたので、IKを使うことにします。
先程のトラックは「ゴミ箱アイコン」をクリックして削除します。

シークバーを0秒に移動させて、IKの終端ノード（ここでは「Position2D」）を選びます。

そして上にある「カギアイコン」をクリックします。

IKに関係あるノードのトラックをまとめて作成する確認ダイアログが表示されるので、「作成」ボタンをクリックします。

すると、関係する親ノードのトラックがまとめて作成されます。

次に以下の操作を行います。

0秒のキーフレームをドラッグですべて選択
シークバーを2秒に移動
編集ボタンをクリックして「選択範囲を複製」を選ぶ

すると0秒のキーフレームが2秒の位置に複製されます。

そうしたら、シークバーを1秒の位置に移動します。

さらに操作モードを「移動モード」（キーボードのWキーでも変更可能）にします。

そして IKの終端ノード（ここでは Position2D)を移動させます

すると自動でキーフレームは追加され、シークバーを移動させたり再生ボタンをクリックすると、アニメーションが確認できます。

ちなみに自動で作られたIKの終端ノードの回転値のトラックは削除しても問題なさそうです。

このようにIKアニメーションができました。

ちなみに複数のアニメーションの切り替えをなめらかにする（ブレンドする）には、AnimationTree という仕組みを使うと実現できるようです（※未検証）

プロジェクトファイル

右腕のIKしか入れていないですが、今回の内容のプロジェクトファイルは以下からダウンロードできます
http://syun777.sakura.ne.jp/tmp/godot/TestCutOut.zip

参考

Godot Docs » アニメーション » カットアウトアニメーション