Introduction to the animation features

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

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

• アニメーションパネルを使用する

• 任意のノードのプロパティをアニメーション化する

• シンプルなアニメーションを作成する

• 強力な関数呼び出しトラックで関数を呼び出す

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

AnimationPlayerノードを作成する

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

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

AnimationPlayerノード

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

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

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

アニメーションパネル

• アニメーションコントロール (アニメーションの追加、読み込み、保存、削除など)

• トラックリスト

• キーフレーム付きのタイムライン

• タイムラインとトラックコントロールでは、タイムラインをズームしたり、トラックを編集したりできます。

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

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

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

Godotのキーフレーム

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

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

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

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

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

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

ちなみに

間違ったプロパティをアニメートした場合は、いつでもトラックのパスを修正できます。それをダブルクリックして、新しいパスを入力します。[最初から再生]ボタンを使用して(またはキーボードの Shift + D を押して)アニメーションを再生すると、変更内容が即座に表示されます。

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

シーンの設定

For this tutorial, we'll create a Sprite node with an AnimationPlayer as its child. We will animate the sprite to move between two points on the screen.

シーンのセットアップ

警告

AnimationPlayer inherits from Node instead of Node2D or Spatial, which means that the child nodes will not inherit the transform from the parent nodes due to a bare Node being present in the hierarchy.

Therefore, it is not recommended to add nodes that have a 2D/3D transform as a child of an AnimationPlayer node.

The sprite holds an image texture. We animate that sprite to move between two points on the screen. For this tutorial, use the default Godot icon as the sprite's texture. As a starting point, move the sprite to a left position on the screen.

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

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

トラックの追加

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

便利なボタン

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

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

As we don't have a track already set up for the transform/location property, Godot asks whether it should set it up for us. Click Create.

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

スプライトトラック

2番目のキーフレーム

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

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

アニメーションの長さ

Click on the timeline header near the 2-second mark and move the sprite to the target destination on the right side.

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

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

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

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

アニメーション

行ったり来たり

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

アニメーションループ

If you set the animation length to 4 seconds now, the animation moves back and forth. You can change this behavior if you change the track's loop mode. This is covered in the next chapter.

トラックの設定

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

トラックの設定

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

• Continuous: Update the property on each frame.

• Discrete: Only update the property on keyframes.

• Trigger: Only update the property on keyframes or triggers. Triggers are a type of keyframe used by the current_animation property of a AnimationPlayer, and Animation Playback tracks.

• Capture: If the first keyframe's time is greater than 0.0, the current value of the property will be remembered and will be blended with the first animation key. For example, you could use the Capture mode to move a node that's located anywhere to a specific location.

トラックモード

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

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

• 近傍: 最も近いキーフレーム値を設定します

• リニア: 2つのキーフレーム間の線形関数計算に基づいて値を設定します

• キュービック: 2つのキーフレーム間の3次関数計算に基づいて値を設定します

トラック補間

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

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

ループモード

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

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

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

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

If you select your sprite while the animation panel is visible, you get a small keyframe button for all the sprite's properties. Click on this button and Godot automatically adds a track and keyframe to the current animation.

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

キーフレームの編集

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

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

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

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

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

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

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

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

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

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

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

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

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

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

AudioStreamPlayerを選択

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

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

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

Using RESET tracks

You can set up a special RESET animation to contain the "default pose". This is used to ensure that the default pose is restored when you save the scene and open it again in the editor.

For existing tracks, you can add an animation called "RESET" (case-sensitive), then add tracks for each property that you want to reset. The only keyframe should be at time 0, and give it the desired default value for each track.

If AnimationPlayer's Reset On Save property is set to true, the scene will be saved with the effects of the reset animation applied (as if it had been seeked to time 0.0). This only affects the saved file – the property tracks in the editor stay where they were.

If you want to reset the tracks in the editor, select the AnimationPlayer node, open the Animation bottom panel then choose Apply Reset in the animation editor's Animation dropdown menu.

When adding tracks on new animations, the editor will ask you to automatically create a RESET track when using the keyframe icon next to a property in the inspector. This does not apply on tracks created with Godot versions prior to 3.4, as the animation reset track feature was added in 3.4.