AnimationPlayerノードでアニメーションを作ろう
Godot Engine/ACTION GAME MAKERではAnimation Playerというノードでアニメーションを作ります。このアニメーションは動画編集と同じ、タイムライン型と呼ばれる制作方法になっています。画像や音などの「トラック」と呼ばれるライン上に、「キーフレーム」というイベントを配置して、時間経過にそってそれぞれのトラックのキーフレームを実行していきます。
例えるなら、タイムライン型のアニメーションとは、オーケストラの楽譜のようなものです。演奏開始か1秒地点でピアノが「ドの音を鳴らす」、バイオリンは「レの音を鳴らす」といった形です。この場合はトラックは「楽器の種類」、キーフレームは「弾き方の指示」となります。
アニメーションを作ろう。
今回必要なアニメーションは、何も入力がない状態の「待機」、ジャンプボタンが押されたときの「ジャンプ」、左右入力があったときの「移動」の3種類でしたね、この3つのアニメーションを、AnimationPlayerを使ってつくっていきましょう。
1. シーンウィンドウでAnimationPlayerを選択します。
2. タイルのように、中央下部にアニメーションという新たなウィンドウが出現しました。
3. アニメーションボタンを押して、新規を選択しましょう。
4. 新規アニメーション名というウィンドウが立ち上がります。まずは、「待機」から作りましょう、「待機」と入力してOKボタンを押します。
5. 待機のアニメーションが作成されました。ここに、先程登録した画像の「フレーム」を入れ込むことでアニメーションを作ります。
6. Sprite2Dノードを選択してください。9種類の画像のうち、待機のフレームは一番左上の一つだけです。一番左上の画像のフレームは0なので、「待機」アニメーションではフレーム0を表示する。という設定ができれば良いということになります。
7. インスペクターのアニメーション>フレームが0になっていることを確認し、「
+」となっているマークをクリックしてください。これは、キーフレームを挿入というボタンで、現在表示しているアニメーションにこのフレームを登録するという機能を持っています。
8. 以下のようなウィンドウが出ますので、「RESETトラックを作成」をオフにして作成ボタンを押してください。
補足：RESETトラックとは？
シーンの初期状態を指定するためのものです、「待機」であれば初期状態として指定してもよいのですが、ACTION GAME MAKERでは基本的に使用しませんので、オフにしておきましょう。
9. アニメーションにSprite2Dのframeというトラックが作成されました。0秒地点player.pngのフレーム0が設定されていますので、「待機」アニメが始まると瞬時にこの画像が表示されることになります。「待機」は画像1枚なのでこれで完成です。次は「ジャンプ」を作ります。
10. 1~8の手順を繰り返し、同様に「ジャンプ」を作りましょう。なお、「ジャンプ」のフレームは上段の左から3つめ、つまり、フレーム「2」がジャンプのフレームです。うまく設定できれば、以下の表示になっているはずです。
11. 最後に「移動」を作ります。しかし、「移動」のフレームは下段の左から1つめから４つめまで、つまり、5,6,7,8の4つのフレームがあるため待機やジャンプより少し設定項目が多くなります。
4つのフレームを、0.2秒毎に順番に切り替えてループをさせると程よいモーションになりそうです。
12. まずは、待機、ジャンプと同様1~8の手順を繰り返し、「移動」を作ります。フレーム「5」を指定して設定しましょう。うまく設定できれば以下の表示になります。
13. 続いて、フレーム6を、フレーム5の0.2秒後に設定します。アニメーションの横の「0」と記載のあるボックスに「0.2」と入力してください、これは、再生バーの位置を設定するもので、こうすることで0.2秒地点に再生バーが移動します。
14. Sprite2Dのフレームを「6」に切り替えて+ボタンでキーフレームを挿入しましょう。うまく設定できれば、以下のように0.2秒地点にフレーム6が挿入されます。
15. 13~14の手順を繰り返し、0.4秒地点にフレーム「7」、0.6秒地点にフレーム「8」を挿入しましょう。4つのフレームが設定されたはずです。
16. 続いて、アニメーションの長さを変更します。右上の時計マークの横にある「1」がアニメーションの長さで、今移動アニメーションが1秒あることを示しています。今回のアニメーションは、0.2秒毎に切り替えるスプライトが4枚なので、0.8秒の長さであればきれいにループするはずです。数字を「0.8」にしましょう。
17. 最後に、アニメーションがループするようにしましょう。秒数の横にある繰り返しマークがループボタンです。クリックしてループを有効にしましょう。
補足：最初からループと折返しループ
こちらの手順で設定しているのは「アニメーションの最後まで行くと最初から自動で再生する」というループです。もう一度クリックすることで、「アニメーションの最後までいくと折り返し、逆再生する」という折り返しループを設定することもできます。
18. 一通り設定ができたら、アニメーションを再生ボタンでアニメーションが正常に行われるかチェックしましょう。きれいに動いていればOKです。
アニメーションがきれいに再生されないときは。
トラック上の画像を選択すると、「値」という項目にその画像のフレームが表示されています。順に選択して5,6,7,8と順に並んでいるか確認しましょう。間違っている場合は、「値」の数値を変えることでその画像のフレームを変えることができます。
また、ループ再生が正しく設定されているか、アニメーションの長さが正しく0.8秒になっているか確認してください。
