概要
ゲームの世界では、オブジェクトが瞬間移動するよりも、滑らかに動く方がずっと自然で心地よく感じられます。UIが画面外からスッと入ってきたり、キャラクターがダメージで点滅したり、HPバーがじわじわと減ったり。こうした「時間経過を伴う値の変化」を簡単に実装できるのが、GodotのTween 機能です。
Godot 4ではcreate_tween()というメソッドを呼び出すことで、手軽にコードベースでアニメーションを作成できます。
Tweenの基本:1行で始める滑らかな動き
Tweenの基本的な考え方は、「あるオブジェクトの、あるプロパティを、指定した時間で、目標の値まで変化させる」という非常にシンプルなものです。
func _ready():
# 1. Tweenオブジェクトを生成
var tween = create_tween()
# 2. アニメーションを予約
# 1秒かけて、$Sprite2DノードのpositionプロパティをVector2(500, 300)まで変化させる
tween.tween_property($Sprite2D, "position", Vector2(500, 300), 1.0)
create_tween()で作成されたTweenは、予約された全てのアニメーションが完了すると自動的に終了し、メモリから解放 されます。この「撃ちっぱなし(Fire and Forget)」で使える手軽さが、Tweenの最大の魅力の一つです。
注意: Tweenを作成したノードが
queue_free()で削除されると、そのTweenも自動的に停止・解放されます。ノードの寿命を超えてアニメーションを継続したい場合は、create_tween().set_ignore_time_scale(false).bind_node(別のノード)のように別のノードにバインドするか、Autoload(シングルトン)でTweenを管理することを検討してください。
実践的なコードレシピ集
レシピ1:UIのスライドアニメーション(緩急を付けて)
UI要素が画面外から滑らかに登場する演出です。set_trans()とset_ease()を使い、プロフェッショナルな動きを実現します。
func show_menu():
var menu_panel = $MenuPanel
menu_panel.visible = true
var viewport_width = get_viewport_rect().size.x
menu_panel.position.x = viewport_width
var tween = create_tween()
# TRANS_SINE: サインカーブでの変化
# EASE_OUT: アニメーションの終わりに減速する
tween.tween_property(menu_panel, "position:x", viewport_width - menu_panel.size.x, 0.5)\
.set_trans(Tween.TRANS_SINE).set_ease(Tween.EASE_OUT)
set_transは変化の計算方法を、set_easeは変化のどの部分で緩急を適用するかを指定します。
レシピ2:HPバーの滑らかな増減
ダメージや回復を即座に反映するのではなく、HPバーがじわじわと変化することで、プレイヤーは状況をより直感的に認識できます。
@onready var hp_bar: ProgressBar = $ProgressBar
func update_health_smoothly(new_health: float):
var tween = create_tween()
tween.tween_property(hp_bar, "value", new_health, 0.4)\
.set_trans(Tween.TRANS_QUAD).set_ease(Tween.EASE_IN_OUT)
func _on_player_took_damage(damage_amount: float):
var current_health = hp_bar.value
update_health_smoothly(current_health - damage_amount)
レシピ3:ダメージ時の点滅エフェクト
キャラクターがダメージを受けた際の無敵時間などを視覚的に示す点滅エフェクトも、Tweenの得意分野です。
func start_invincibility_flicker():
# 5回点滅させるループを設定
var tween = create_tween().set_loops(5)
# modulateプロパティのアルファ値(透明度)を変化させる
tween.tween_property(self, "modulate:a", 0.3, 0.1)
tween.tween_property(self, "modulate:a", 1.0, 0.1)
アニメーションを自在に操る高度なテクニック
連結(シーケンス)と並列(パラレル)
- 連結:
tween_propertyを続けて書くと、それらは順番に実行されます。 - 並列:
parallel()を間に挟むと、それ以降のアニメーションが前のものと同時に開始されます。
func complex_animation():
var tween = create_tween()
var sprite = $Sprite2D
# 1. まず1秒かけて右に移動
tween.tween_property(sprite, "position:x", 500.0, 1.0)
# 2. 次に、下に移動しつつ、同時に45度回転する
tween.parallel().tween_property(sprite, "position:y", 300.0, 0.5)
tween.parallel().tween_property(sprite, "rotation_degrees", 45.0, 0.5)
# 3. 0.5秒待機
tween.tween_interval(0.5)
# 4. 最後に0.3秒かけてフェードアウト
tween.tween_property(sprite, "modulate:a", 0.0, 0.3)
非同期処理との連携 await
アニメーションの完了を待ってから特定の処理を行いたい場合、GDScriptのawait機能が非常に役立ちます。
func play_and_destroy():
var tween = create_tween()
tween.tween_property(self, "scale", Vector2.ZERO, 0.5)
# tweenのfinishedシグナルが発行されるまで、この行で待機する
await tween.finished
# アニメーション完了後に実行される
queue_free()
よくある間違いとベストプラクティス
| よくある間違い | ベストプラクティス |
|---|---|
_process()内で毎フレームcreate_tween()を呼び出す。 | アニメーションを開始する時だけcreate_tween()を呼び出す。連続的な追従が必要な場合は、lerp関数や他の方法を検討する。 |
| 既存のTweenを止めずに新しいTweenを開始し、動きが競合する。 | 新しいアニメーションを開始する前に、既存のTweenをkill()で停止させる(下記コード例参照)。 |
tween.finishedシグナルに多くの処理を接続し、複雑化する。 | await tween.finishedを使い、非同期関数として処理を記述することで、コードの流れが直線的で読みやすくなる。 |
| 全てのアニメーションをTweenで実装しようとする。 | 複数のノードやトラックが絡む複雑なカットシーンなどはAnimationPlayerの方が適している。 |
Tweenの競合を防ぐkill()の使い方
var current_tween: Tween
func animate_to(target_position: Vector2):
# 既存のTweenが実行中なら停止
if current_tween and current_tween.is_valid():
current_tween.kill()
# 新しいTweenを作成
current_tween = create_tween()
current_tween.tween_property(self, "position", target_position, 0.5)
TweenとAnimationPlayerの使い分け
| 比較項目 | Tween (create_tween) | AnimationPlayer |
|---|---|---|
| 得意なこと | コードベースの動的なアニメーション、UI演出、単純な値の変化 | 事前に定義された複雑なシーケンス、カットシーン、キャラクターアニメーション |
| セットアップ | 簡単(コードで完結) | やや複雑(エディタでのキーフレー ム設定が必要) |
| 柔軟性 | 高い(実行時の値に応じて自由にアニメーションを生成可能) | 低い(事前に定義したアニメーションの再生が基本) |
| 視覚的編集 | 不可 | 得意(タイムラインで視覚的に編集・プレビュー可能) |
まとめ
Godot 4のTween機能は、コードベースで手軽に、かつパワフルにアニメーションを実装するための素晴らしいツールです。
- UIの演出
- エフェクトの表現(点滅、フェードアウトなど)
- 動く床やギミックの作成
これらの要素にTweenを活用することで、あなたのゲームの品質は格段に向上します。