【Godot4.3】Tweenアニメーションの基本的な使い方

はじめに

Tweenとは、アニメーション技法の「in-betweening」に由来する補間の機能です。
Godotでは、主にノードプロパティ等の変化を保管することで滑らかなアニメーションを実現します。

同じくアニメーションを作成できるAnimationPlayerノードと比較すると、以下の特徴があります。

まとめると、それぞれ以下のように使い分けになるかと思います。

Tweenの基本

Tween を使用するときの基本的な流れは、以下になります。

1. Tweenオブジェクトを作成
2. （必要な場合は、）tweenの各種設定を行う
3. Tweenオブジェクトから実行したい処理に対応したTweenerオブジェクトを生成・追加する

【参考】Tween関連のオブジェクトは以下の通りです。(リンクは公式ドキュメントリファレンスです)

Step1. Tweenの作成

Tweenオブジェクトを作成する時は、
　SceneTree.create_tween または Node.create_tween を使用します。

var _tween = get_tree().create_tween()

var _tween = self.create_tween()

また、Tweenの特徴として、作成時は以下のことに注意する必要があります。

Step2. Tweenの設定

Tweenオブジェクトを追加したら、実際にアニメを実行するTweenerを追加する前に、処理を実行する形式に関する各種設定を行います。

ノードのバインド

作成したTweenにはbind_node()メソッドを使用してノードを紐づけることができます。
重要な点として、Node.create_tween で作成されたtweenは、自動で呼び出しノードがバインドされます。(=大体の場合はこの方法で自動バインドします)

ノードがバインドされたTweenは、以下のような効果が得られます。

• バインドされたオブジェクトがツリー内にない時、Tween はアニメーションを停止する
• バインドされたオブジェクトが解放されると、Tween は自動的に終了します。
• 後述のポーズモードが”TWEEN_PAUSE_BOUND”(デフォルト)の場合、Tweenの実行もノードのポーズ状況に連動します

イージング(速度の緩急)

Tweenのイージング(速度の緩急)を設定するときは、set_ease()メソッドと、列挙型EaseTypeを使用します。

列挙型 EaseType:

遷移(トランジション)タイプ

遷移タイプを設定するときは、set_trans() メソッドと列挙型TransitionTypeを使用します。

コメント

イージングとトランジションの選び方については、公式ドキュメント内のチートシートや以下イージング関数の一覧サイトが参考になります。

https://raw.githubusercontent.com/godotengine/godot-docs/master/img/tween_cheatsheet.webp

raw.githubusercontent.com

イージング関数チートシート

イージング関数はアニメーションの速度を指定して、動きをより自然にします。現実のオブジェクトは単に一定の速度で動かず、即座に動いたり止まったりしません。このページは、適切なイージング関数の選択に役立ちます。

easings.net

実行順序

Tweenはデフォルトで、追加されたTweenerを追加されたものから順番に実行していきますが、以下メソッドでその設定を変更できます

実行設定

Tweenの実行に関する設定を行う場合は、それぞれ以下のメソッドが使用できます。

Step3. Tweenerの追加

Tweenの設定は完了したら、Tweenオブジェクトから実行したい処理に対応したTweenerオブジェクトを追加します。

Tweenerの追加を行うには、それぞれ以下のメソッドを使用します。

TweenとTweenerの関係を図にすると以下のようになります。

実行例

最後に、簡単なループTweenアニメの例を記載します。
(Step2.の設定メソッドに関してはTweener追加時にメソッドチェーンでつなげることが多いのですが、ここではわかりやすくするために１行ずつ記述しています。)

func _ready():
	var _node_tween = self.create_tween()
	_node_tween.set_loops(0)
	_node_tween.set_trans(Tween.TRANS_SINE)
	_node_tween.tween_property(self, "position", 
				Vector2(self.position.x + 200,
				self.position.y), 1)
	_node_tween.set_ease(Tween.EASE_OUT)
	_node_tween.set_trans(Tween.TRANS_BOUNCE)
	_node_tween.tween_property(self, "position", 
				Vector2(self.position.x,
				self.position.y), 1)

上記コードを適当なSprite2Dノードにアタッチされたスクリプトに記述すると、以下のようなアニメを繰り返します。(Gif画像なのでカクついていますが、実際は滑らかに動いています）

その他Tween関連の処理

ここからは、その他Tweenオブジェクトの処理についてまとめます。

Tweenの操作

作成したTweenは、以下のメソッドで操作することができます。

Tweenの状態を確認する

Tweenオブジェクトには、作成したTweenの状態を取得するためのメソッドが用意されています。

interpolate_value()

interpolate_value()はやや特殊なメソッドで、使用することで、Tweenerではなく、手動で補間処理を実行することができます。
→公式ドキュメントにも記載があるとおり、@GlobalScope.lerp()による補間と似た処理になりますが、Tweenオブジェクトのプロパティであることから、前述のTween設定（イージングやトランジションなど）を利用できるのが特徴です。