2Dアニメーション機能の紹介

概要

class_AnimationPlayer ノードを使用すると、単純なアニメーションから複雑なアニメーションまで何でも作成できます。

このガイドでは、次のことを学びます:

  • アニメーションパネルを使用する
  • 任意のノードのプロパティをアニメーション化する
  • シンプルなアニメーションを作成する
  • 強力な関数呼び出しトラックで関数を呼び出す

Godotでは、ノードの幾何学変換、スプライト、UI要素、パーティクル、マテリアルの可視性と色など、インスペクタで利用可能なすべての項目をアニメーション化できます。スクリプト変数の値を変更して、任意の関数を呼び出すこともできます。

AnimationPlayerノードを作成する

アニメーションツールを使用するには、最初に class_AnimationPlayer ノードを作成する必要があります。

AnimationPlayerノード型は、アニメーションのデータコンテナーです。 1つのAnimationPlayerノードは複数のアニメーションを保持でき、自動的に相互に移行できます。

The AnimationPlayer node

AnimationPlayerノード

作成後、[ノード]タブのAnimationPlayerノードをクリックして、ビューポートの下部にあるアニメーションパネルを開きます。

The animation panel position

アニメーションパネルの位置

次の4つの部分で構成されます:

The animation panel

アニメーションパネル

  • アニメーションコントロール (アニメーションの追加、読み込み、保存、削除など)
  • トラックリスト
  • キーフレーム付きのタイムライン
  • タイムラインとトラックコントロールでは、タイムラインをズームしたり、トラックを編集したりできます。

コンピューターアニメーションはキーフレームに依存しています

キーフレームは、特定の時点でのプロパティの値を定義します。

ひし形のシェイプは、タイムラインのキーフレームを表します。2 つのキーフレーム間の線は、値が変更されていないことを示します。

Keyframes in Godot

Godotのキーフレーム

エンジンはキーフレーム間で値を補間するため、時間の経過とともに値が徐々に変化します。

Two keyframes are all it takes to obtain a smooth motion

滑らかな動きを得るために必要な2つのキーフレーム

タイムラインを使用すると、キーフレームを挿入してタイミングを変更できます。また、アニメーションの長さも定義します。

The timeline in the animation panel

アニメーションパネルのタイムライン

アニメーションパネルの各行はアニメーショントラックです。[標準]および[幾何学変換]トラックはノードのプロパティを参照します。それらの名前またはIDは、ノードと影響を受けるプロパティへのパスです。

Example of Normal animation tracks

標準のアニメーショントラックの例

ちなみに

If you animate the wrong property, you can edit a track's path anytime. Double click on it and type the new path. Play the animation using the "Play from beginning" button Play from beginning (or pressing Shift + D on keyboard) to see the changes instantly.

チュートリアル: シンプルなアニメーションの作成

シーンの設定

このチュートリアルでは、AnimationPlayerノードと、その子としてスプライトノードを作成します。

Our scene setup

シーンのセットアップ

スプライトは画像テクスチャを保持し、そのスプライトをアニメートして画面上の2つのポイント間を移動します。このチュートリアルでは、デフォルトのGodotアイコンをスプライトのテクスチャとして使用します。開始点として、スプライトを画面上の左の位置に移動します。

ちなみに

アニメーションするノードを子としてAnimationPlayerノードに追加する必要はありませんが、シーンツリー内のアニメーションするノードと非アニメーションノードを区別するのに便利な方法です。

AnimationPlayerノードを選択し、アニメーションエディタの[アニメーション]ボタンをクリックします。リストから[新規] (Add Animation)を選択して、新しいアニメーションを追加します。そして、ダイアログボックスにアニメーションの名前を入力します。

Add a new animation

新しいアニメーションの追加

トラックの追加

スプライトに新しいトラックを追加するには、それを選択してツールバーで見てください:

Convenience buttons

便利なボタン

これらのスイッチとボタンを使用すると、選択したノードの位置、回転、スケールにそれぞれキーフレームを追加できます。

このチュートリアルではスプライトの位置にのみ関心があるため、回転の選択を解除し、キーボタンをクリックします。

変形/位置のプロパティにトラックがまだ設定されていないため、Godotはこのトラックを設定する必要があるかどうかを尋ねます。 [作成]をクリックします。

これにより、タイムラインの先頭に新しいトラックと最初のキーフレームが作成されます:

The sprite track

スプライトトラック

2番目のキーフレーム

ここで、スプライトが向かうべき位置と、そこに到達するまでの時間を設定する必要があります。

たとえば、もう一方のポイントに行くのに2秒かかるとします。既定では、アニメーションの持続時間は2秒に設定されているので、アニメーションパネルの下部パネルのタイムラインコントロールでこれを2に変更します。

Animation length

アニメーションの長さ

2秒のマークの近くのタイムラインヘッダーをクリックし、スプライトを右側のターゲット位置に移動します。

再度、ツールバーのキーボタンをクリックします。これにより、2番目のキーフレームが作成されます。

アニメーションを実行する

[最初から再生] (Play from beginning) ボタンをクリックします。

イェーイ!アニメーションが実行されます:

The animation

アニメーション

行ったり来たり

Godot には追加機能があります。前に述べたように、Godotは常に2つのキーフレーム間のフレームを計算します。ループでは、最後にキーフレームが指定されていない場合、最初のキーフレームが最後のキーフレームにもなります。

Animation loop

アニメーションループ

ここでアニメーションの長さを4秒に設定すると、アニメーションは前後に移動します。トラックのループモードを変更すると、この動作を変更できます。これについては、次の章で説明します。

トラックの設定

各トラックの最後には、更新モード、トラック補間、ループモードを設定できる設定パネルがあります。

Track settings

トラックの設定

トラックの更新モードは、プロパティ値を更新するタイミングをGodotに指示します。これには次のものがあります:

  • 継続的: 各フレームのプロパティを更新します
  • 離散: キーフレームのプロパティのみを更新します
  • トリガー: キーフレームまたはトリガーのプロパティのみを更新します
  • キャプチャ: プロパティの現在の値が記憶され、最初に見つかったアニメーション キーとブレンドされます
Track mode

トラックモード

普通のアニメーションでは、通常は「継続的」を使用します。他のタイプは、複雑なアニメーションをスクリプト化するために使用されます。

補間は、キーフレーム間のフレーム値を計算する方法をGodotに伝えます。次の補間モードがサポートされています:

  • 近傍: 最も近いキーフレーム値を設定します
  • リニア: 2つのキーフレーム間の線形関数計算に基づいて値を設定します
  • キュービック: 2つのキーフレーム間の3次関数計算に基づいて値を設定します
Track interpolation

トラック補間

キュービック補間は、より自然な動きをもたらします。アニメーションは、キーフレームでは遅くなり、キーフレーム間では速くなります。これは通常、キャラクターアニメーションに使用されます。リニア補間は、よりロボット的な動きを作成します。

Godotは 2つのループ モードをサポートしており、ループに設定されている場合、アニメーションに影響を与えます:

Loop modes

ループモード

  • クランプループ補間(Clamp): これを選択すると、このトラックの最後のキーフレームの後にアニメーションが停止します。最初のキーフレームに再び到達すると、アニメーションはその値にリセットされます。
  • ラップループ補間(Wrap): これを選択すると、Godotは最後のキーフレームの後もアニメーションを計算して、最初のキーフレームの値に再び到達します。

その他のプロパティのキーフレーム

Godotでは、(位置などの)変換プロパティのみが編集できるように制限されるわけではありません。すべてのプロパティは、キーフレームを設定できるトラックとして使用できます。

アニメーションパネルが表示されているときにスプライトを選択すると、スプライトのすべてのプロパティに小さなキーフレームボタンが表示されます。このボタンをクリックすると、Godotは自動的にトラックとキーフレームを現在のアニメーションに追加します。

Keyframes for other properties

その他のプロパティのキーフレーム

キーフレームの編集

高度な使用や詳細な編集のために、キーフレームをクリックすると、インスペクタでキーフレームエディタが表示されます。これを使用して、値を直接編集できます。

Keyframe editor editing a key

キーを編集するキーフレームエディタ

また、イージング(Easing)設定をクリックしてドラッグすることにより、このキーフレームのイージング値を編集することもできます。これは、このキーフレームに到達したときにプロパティ値を変更する方法をGodotに伝えます。

通常、動きが「正しく見えない」場合は、この方法でアニメーションを微調整します。

高度: メソッド呼出しトラック

Godotのアニメーションエンジンはここで止まりません。既にGodotのスクリプト言語 GDScriptの基本 および /classes/index に慣れている場合は、各ノードタイプがクラスであり、呼び出し可能なメソッドがたくさんあることがわかります。

たとえば、class_AudioStreamPlayer ノードタイプには、オーディオストリームを再生するメソッドがあります。

アニメーションの特定のキーフレームでメソッドを使用するのは素晴らしいことではありませんか?これは、「メソッド呼び出しトラック」が役立つ場所です。これらのトラックは、今度はプロパティへの参照なしでノードを再度参照します。代わりに、キーフレームはメソッドの名前と引数を保持し、Godotはこのキーフレームに到達したときに呼び出しを行います。

デモのために、メソッド呼び出しトラックを使用して、特定のキーフレームでオーディオを再生します。通常、オーディオを再生するにはオーディオトラックを使用する必要がありますが、手法を示すためにこの方法で行います。

シーンツリーに class_AudioStreamPlayer を追加し、プロジェクトに配置したオーディオファイルを使用してストリームを設定します。

アニメーションパネルのトラックコントロールで[トラックを追加] (Add track) をクリックします。

可能なトラックタイプのリストから「メソッド呼出しトラック」を選択します。

Add Call Method Track

メソッド呼出しトラックの追加

選択ウィンドウで class_AudioStreamPlayer ノードを選択します。 Godotは、ノードへの参照を含むトラックを追加します。

Select AudioStreamPlayer

AudioStreamPlayerを選択

Godotがサンプルを再生するタイムラインを右クリックし、[キーを挿入]オプションをクリックします。これにより、AudioStreamPlayerノードに対して呼び出すことができるメソッドのリストが表示されます。最初のものを選択します。

../../_images/animation_method_options.png

Godotがキーフレームに到達すると、Godotは class_AudioStreamPlayer ノードの "play" 関数を呼び出し、ストリームが再生されます。

タイムライン上でドラッグして位置を変更できます。キーフレームをクリックして、インスペクタのキーフレーム設定を使用することもできます。

../../_images/animation_call_method_keyframe.png