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

概要

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

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

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

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

AnimationPlayerノードを作成する

アニメーションツールを使用するには、最初に 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

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

ちなみに

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

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

シーンの設定

For this tutorial, we'll create an AnimationPlayer node and a sprite node as its child.

Our scene setup

シーンのセットアップ

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ノードに追加する必要はありませんが、シーンツリー内のアニメーションするノードと非アニメーションノードを区別するのに便利な方法です。

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

Add a new animation

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

トラックの追加

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

Convenience buttons

便利なボタン

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

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

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.

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

The sprite track

スプライトトラック

2番目のキーフレーム

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

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

Animation length

アニメーションの長さ

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

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

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

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

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

The animation

アニメーション

行ったり来たり

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

Animation loop

アニメーションループ

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.

トラックの設定

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

Track settings

トラックの設定

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

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

トラックモード

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

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

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

トラック補間

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

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

Loop modes

ループモード

  • クランプループ補間(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.

Keyframes for other properties

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

キーフレームの編集

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

Keyframe editor editing a key

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

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

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

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

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

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

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

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

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

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

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

Add Call Method Track

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

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

Select AudioStreamPlayer

AudioStreamPlayerを選択

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

../../_images/animation_method_options.png

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

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

../../_images/animation_call_method_keyframe.png