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

作成: 2025-12-06最終更新: 2025-12-16

UI演出、エフェクト、動く床など、時間経過を伴う値の変化をcreate_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を活用することで、あなたのゲームの品質は格段に向上します。