概要
ゲームの世界では、オブジェクトが瞬間 移動するよりも、滑らかに動く方がずっと自然で心地よく感じられます。UIが画面外からスッと入ってきたり、キャラクターがダメージで点滅したり、HPバーがじわじわと減ったり。こうした「時間経過を伴う値の変化」を簡単に実装できるのが、GodotのTween 機能です。
以前はTweenノードとして存在していましたが、Godot 4ではcreate_tween()というメソッドを呼び出すことで、より手軽に、コードベースでアニメーションを作成できるようになりました。
Tweenの基本:プロパティを時間変化させる
Tweenの基本的な考え方は、「あるオブジェクトの、あるプロパティを、指定した時間で、目標の値まで変化させる」 というものです。これをたった1行のコードで予約できます。
func _ready():
# 新しいTweenを作成
var tween = create_tween()
# 1秒かけて、$Sprite2DノードのpositionプロパティをVector2(500, 300)まで変化させる
tween.tween_property($Sprite2D, "position", Vector2(500, 300), 1.0)
create_tween()で作成されたTweenは、予約されたアニメーションが完了すると自動的に終了し、メモリから解放されるため、管理が非常に楽です。
tween_propertyの強 力な機能
tween_propertyは、Tweenの核となるメソッドです。基本的な引数は以下の通りです。
tween.tween_property(object, property, final_val, duration)
object: アニメーションさせたいノードproperty: 変化させたいプロパティの名前(文字列)。"position:y"のようにサブプロパティも指定可能final_val: プロパティの最終的な値duration: アニメーションにかかる時間(秒)
実践例1:ダメージ時の点滅(透明度アニメーション)
キャラクターがダメージを受けたときに数回点滅する演出は、modulateプロパティのアルファ値(透明度)を変化させることで実現できます。
func take_damage():
# 3回点滅させる
var tween = create_tween().set_loops(3)
# まず透明にする
tween.tween_property(self, "modulate:a", 0.0, 0.1)
# 次に不透明に戻す
tween.tween_property(self, "modulate:a", 1.0, 0.1)
set_loops(3)を呼び出すことで、その後に続く一連のアニメーション(透明→不透明)を3回繰り返すように設定できます。
実践例2:UIのスライドアニメーション
Controlノード(UI要素)を画面の外から滑らかに表示させるアニメーションも簡単です。
# メニューを開くときの処理
func show_menu():
var menu = $MenuPanel
menu.visible = true
# 初期位置を画面外に設定
menu.position.x = -menu.size.x
# Tweenで画面内の定位置まで移動させる
var tween = create_tween()
# Easing(緩急)を設定して、より自然な動きに
tween.tween_property(menu, "position:x", 0, 0.5).set_trans(Tween.TRANS_QUINT).set_ease(Tween.EASE_OUT)
この例では、set_trans()とset_ease()を使ってアニメーションに緩急をつけています。EASE_OUTは「最初は速く、最後はゆっくり」という動きで、UIアニメーションで非常によく使われます。
Tweenの連結と並列実行
Tweenは、複数のアニメーションを鎖のようにつなげたり(シーケンス)、同時に実行したり(並列)することもできます。
- 連結(シーケンス):
tween_propertyを連続して呼び出すと、それらは順番に実行されます - 並列:
parallel()メソッドを呼び出すと、次からのtween_propertyは前のものと同時に開始されます
func complex_animation():
var tween = create_tween()
# 1. まず右に移動
tween.tween_property($Sprite2D, "position:x", 500, 1.0)
# 2. 次に下に移動しつつ、同時に回転する
tween.parallel().tween_property($Sprite2D, "position:y", 300, 1.0)
tween.parallel().tween_property($Sprite2D, "rotation_degrees", 90, 1.0)
# 3. 最後に0.5秒待つ
tween.tween_interval(0.5)
# 4. そして消える(透明にする)
tween.tween_property($Sprite2D, "modulate:a", 0.0, 0.3)
まとめ
Godot 4のTween機能は、コードベースで手軽に、かつパワフルにアニメーションを実装するための素晴らしいツールです。AnimationPlayerを使うほどで はないけれど、オブジェクトを滑らかに動かしたい、という場面のほとんどはTweenで解決できます。
- UIの演出
- エフェクトの表現(点滅、フェードアウトなど)
- 動く床やギミックの作成
これらの要素にTweenを活用することで、あなたのゲームの品質は格段に向上します。