【Godot】Tweenで実現する滑らかなアニメーション

概要

ゲームの世界では、オブジェクトが瞬間移動するよりも、滑らかに動く方がずっと自然で心地よく感じられます。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を活用することで、あなたのゲームの品質は格段に向上します。