Godotで、スクリプトでアニメーションをつける方法(Tweenを使います)

2024年12月21日 14:42

こんにちは、軽井さんです。Godotでゲームを作っています。

Tweenを使った簡単なアニメーションのつけ方について、
備忘録もかねて書こうと思います。

1. Tweenとは

Tweenは、オブジェクトのプロパティ（PositionやScale、Rotationなど）を時間をかけて変化させることができるGodotのノードです。
キャラクターをジャンプさせる際に体が一瞬伸びてから跳ね上がるぼよよんとしたアニメーションなどを簡単に作ることができます。

2. Tweenのソースコード

Tweenを使用する時以下のような形で実装します。

var tween = $Tween # Tweenノードを取得

tween.tween_property("ノード名", "プロパティ名", "プロパティの値", "変化時間")
例）tween.tween_property($Sprite2D, "scale", Vector2(2, 2), 0.5)

"プロパティの値"で設定された値まで、"変化にかかる時間"をかけてへんかしていきます。
（例："Sprite2D"の"スケール"を"0.5秒"かけて"2倍"に変化させる）

3. ジャンプに動きをつける（実装例）

Tweenを使ったジャンプを簡単に実装してみます。

(1) プロジェクトの準備

まずは簡単に動くキャラクターを用意します。

(2) Tweenを使ったスクリプトの追加

CharacterBody2Dノードにスクリプトをアタッチすると、自動的に追加されるスクリプトをベースにアニメーションを追加していきます。

#最初に追加されるコード↓
extends CharacterBody2D


const SPEED = 300.0
const JUMP_VELOCITY = -400.0

var gravity = ProjectSettings.get_setting("physics/2d/default_gravity")


func _physics_process(delta):
	if not is_on_floor():
		velocity.y += gravity * delta

	if Input.is_action_just_pressed("ui_accept") and is_on_floor():
		velocity.y = JUMP_VELOCITY

	var direction = Input.get_axis("ui_left", "ui_right")
	if direction:
		velocity.x = direction * SPEED
	else:
		velocity.x = move_toward(velocity.x, 0, SPEED)

	move_and_slide()

スクリプトがアタッチされたら、
以下のように、_play_jumping_effect()を追加してみてください。

#Tweenで動きを追加↓
extends CharacterBody2D


const SPEED = 300.0
const JUMP_VELOCITY = -400.0

var gravity = ProjectSettings.get_setting("physics/2d/default_gravity")


func _physics_process(delta):
	if not is_on_floor():
		velocity.y += gravity * delta

	if Input.is_action_just_pressed("ui_accept") and is_on_floor():
		velocity.y = JUMP_VELOCITY
		_play_jumping_effect()		# ジャンプ時に_play_jumping_effectを呼び出す

	var direction = Input.get_axis("ui_left", "ui_right")
	if direction:
		velocity.x = direction * SPEED
	else:
		velocity.x = move_toward(velocity.x, 0, SPEED)

	move_and_slide()

func _play_jumping_effect():
	var tween = create_tween()

	tween.tween_property($Node2D, "scale", Vector2(1, 1.3), 0.1)
	tween.tween_property($Node2D, "scale", Vector2(1, 1), 0.2)

	await tween.finished  # アニメーションの終了を待つ
	print("ジャンプアニメーションが終了しました！")

今回はスクリプトだけのアニメーションですが、
スプライトアニメーションなどと組み合わせることで、
より複雑な動きを簡単に実装できます。

await tween.finished

上記のawait文を使うことで、
アニメーションが終了したタイミングを測ることもできるので、
「アニメーション終了後に爆発する」
などの操作も可能です。

4. イージングをかけてよりなめらかに

これまでの操作だけでも、アニメーションをつけることができますが、
よりなめらかなアニメーションをつけることもできます。

だんだん早くなったり、だんだんゆっくりになったり、
現実の物体のようにスムーズな緩急をつけることができます。

追加のパラメータは以下のように設定します。

.set_trans(Tween."トランジション")
上述のスクリプトのおしりに追加することで、設定した値に到達するまでの速度の変化を指定します。
.set_ease(Tween."イーズ")
上記のスクリプトのおしりに追加することで、設定した値に到達するまでのスピードを設定することができます。

————————————————————————

トランジション（Transition）

トランジションは、アニメーションの速度の変化（曲線）を指定するためのプロパティです。次の種類があります。

LINEAR
- 説明: 一定の速度で移動します。変化が直線的で、速度が変わりません。
- 使用例: スムーズな移動や連続的なアニメーションに適しています。
SINE
- 説明: 動きがなめらかに始まり、終わる際に減速します（サイン波に基づく）。
- 使用例: ナチュラルな動きや、UIのアニメーション。
QUAD
- 説明: 加速と減速が少し強調され、直線的ではない動き。
- 使用例: 順応性の高い動きが必要なとき。
CUBIC
- 説明: 加速・減速がより滑らかで、曲線が深い。
- 使用例: ゆったりした物体の動きや、曲線を強調したい場合。
QUART
- 説明: 加速・減速がさらに急激になります。
- 使用例: 動きのエネルギーを表現したいとき。
QUINT
- 説明: 加速・減速がとても急激で、激しい変化が特徴。
- 使用例: 力強いアクションの演出。
EXPO
- 説明: 最初はゆっくりと始まり、急激に速くなる（またはその逆）。
- 使用例: 物理的な加速感を再現する場合。
CIRC
- 説明: 加速や減速が円運動のように滑らかになります。
- 使用例: 回転や軌道の動きを表現するとき。
BACK
- 説明: 動きが始まる際や終了する際に、少し戻るような動き。
- 使用例: 弾むような動きや遊び心のある演出。
BOUNCE
- 説明: 物体がバウンドするような動きになります。
- 使用例: ボールやスプリングのような挙動。
ELASTIC
- 説明: ばねのように、開始や終了時に伸び縮みする動き。
- 使用例: スプリングのようなエフェクトや弾性を表現するとき。

イーズ（Ease）

イーズは、アニメーションの進行をどのように制御するか（トランジションの方向）を指定するものです。以下の3つがあります。

EASE_IN
- 説明: 最初はゆっくり始まり、途中から加速します。
- 使用例: 物体がスタートする際の動きを強調したい場合。
EASE_OUT
- 説明: 最初は速く始まり、終了する際に減速します。
- 使用例: 物体が止まるときの自然な減速感。
EASE_IN_OUT
- 説明: 最初はゆっくり始まり、途中で加速し、最後に減速します。
- 使用例: 両端が滑らかに変化するアニメーションに適しています。

☝️のサイトがイメージを掴みやすくておすすめです！

————————————————————————

実際のコードには以下のように記述します。

var tween = $Tween  # Tweenノードを取得

tween.tween_property("ノード名", "プロパティ名", "プロパティの値", "変化時間").set_trans(Tween."任意の動き").set_ease(Tween."任意の緩急")
例）tween.tween_property($Sprite2D, "scale", Vector2(2, 2), 0.5).set_trans(Tween.TRANS_EXPO).set_ease(Tween.EASE_OUT)

↓実際にキャラクターのサイズに適応した例

**☝️tween.tween_property($Node2D, "scale", Vector2(3, 3), 0.5)**だけのとき

**☝️.set_trans(Tween.TRANS_EXPO).set_ease(Tween.EASE_IN_OUT)**を追加

**☝️.set_trans(Tween.TRANS_ELASTIC).set_ease(Tween.EASE_OUT)**を追加

まとめ

Godotを使用している場合、AnimationPlayerを使ってアニメーションをつけることが多いと思います。
もちろんAnimationPlayer内でスケールや回転を動かしても良いのですが、
スクリプト側にアニメーションを分割することで、タイムラインやキーフレームがシンプルになり、挙動の安定につながることもあるので、ぜひ使ってみてください！

いいなと思ったら応援しよう！

よろしければ応援お願いします！いただいたチップはゲーム制作やクリエイターとしての活動費に使わせていただきます！