Godot入門:Tweenの使い方と活用法

はじめに

ゲーム画面を見ていると、UIがスムーズに移動したり、敵が徐々に薄くなったり、カメラがゆっくり動いたりする演出に気づきます。こうした「時間をかけて値が滑らかに変化する」というアニメーション効果は、ゲームの品質を大きく左右する重要な要素です。Godot 4のTweenは、こうしたアニメーション処理を簡潔に記述するための仕組みです。

複数の値を異なるタイミングで変化させたり、複数のアニメーションを連鎖させたり、複雑な演出も直感的に実装できます。ゲーム開発の中級者へのステップアップに欠かせないツールです。

Tweenとは?

Tweenは、ある値を指定した時間をかけて別の値に変化させるアニメーション仕組みです。映像編集ソフトのキーフレームアニメーションをイメージしてください。「0秒でここ、1秒でここ」と値の変化を指定すると、その間の中間値を自動で計算して滑らかに変化させてくれます。

Tweenの継承関係を見ると、通常のNodeではなくRefcountedを継承しています。これはNodeではなく、ノードから作成される「一時的なアニメーション制御オブジェクト」だからです。シーンツリーに追加せず、create_tween()メソッドで動的に生成します。

Tween

RefCounted

(Nodeではなくシーンツリーに追加しないため、通常とは異なる方法で生成・管理します)




Tweenのアニメーション概念
Tweenは時間軸に沿って値を滑らかに変化させます

このノードを使うべき場面

  • UI要素のアニメーション:ボタンのスケール変化、パネルのフェードイン/アウト、メニュー画面のスライドイン
  • キャラクター移動:プレイヤーの移動、敵の移動、オブジェクトの回転
  • ビジュアルエフェクト:色の段階的変化、パーティクルの拡大・縮小、光の点滅
  • カメラ制御:カメラのズーム、パンニング、ターゲット追従

別のノードが適切な場面

「毎フレーム何か判定する」「複数の連動した計算」といった処理には、Tweenより_process()_physics_process()の方が向いています。また、簡単な時間計測ならTimerノードを使う方が適切です。

主なプロパティと機能

プロパティ・メソッド 役割
tween_property(object, property, final_value, duration) Tween オブジェクトのプロパティを指定時間で変化させる。最も基本的なメソッド
tween_callback(callable) Tween 関数を実行する。アニメーション終了時の処理などに使う
tween_interval(time) Tween 指定時間だけ待機する。複数のアニメーションの時間差を作る
set_loops(loops) Tween アニメーションの繰り返し回数を指定(0で無限ループ)
set_ease(ease) Tween イージング関数を指定(EaseType.IN、OUT、INOUT等)
set_trans(trans) Tween トランジション関数を指定(LINEAR、QUAD、CUBIC等)
kill() void Tweenを中断して削除する

コード例1:UIのフェードイン・フェードアウト

extends Control

@onready var panel = $Panel

func _ready() -> void:
    panel.modulate.a = 0.0  # 初期状態で透明

func show_panel_with_fade() -> void:
    # Tweenを作成してpanelのalpha値を0から1に変化
    var tween = create_tween()
    tween.tween_property(panel, "modulate:a", 1.0, 1.0)  # 1秒かけてフェードイン

func hide_panel_with_fade() -> void:
    var tween = create_tween()
    tween.tween_property(panel, "modulate:a", 0.0, 0.5)  # 0.5秒かけてフェードアウト

func animate_button_click(button: Button) -> void:
    # ボタンをクリックしたときにスケール変化
    var tween = create_tween()
    tween.set_trans(Tween.TRANS_ELASTIC)  # 弾むような動き
    tween.set_ease(Tween.EASE_OUT)
    tween.tween_property(button, "scale", Vector2(1.1, 1.1), 0.3)
    # 完了後にスケールを戻す
    tween.tween_property(button, "scale", Vector2(1.0, 1.0), 0.2)

コード例2:複数のアニメーション連鎖と並列実行

extends Node2D

@onready var character = $Character
@onready var ui_label = $CanvasLayer/Label

func play_attack_sequence() -> void:
    var tween = create_tween()

    # キャラが移動
    tween.tween_property(character, "position", Vector2(500, 200), 1.0)

    # 移動完了後に回転(チェーン接続)
    tween.tween_property(character, "rotation", PI / 4, 0.5)

    # 同時に色を赤くする(set_parallel()で次のアニメーションを並列実行)
    tween.set_parallel(true)
    tween.tween_property(character, "modulate", Color.RED, 0.5)

    # 並列実行の終了
    tween.set_parallel(false)

    # 最後に完了通知
    tween.tween_callback(func(): print("攻撃アニメーション終了!"))

func animate_multiple_objects() -> void:
    # 複数のオブジェクトを別々にアニメーション
    var enemy1 = $Enemy1
    var enemy2 = $Enemy2

    var tween = create_tween()

    # 敵1が移動
    tween.tween_property(enemy1, "position", Vector2(400, 300), 2.0)

    # 0.3秒の遅延
    tween.tween_interval(0.3)

    # 敵2が移動(敵1より少し遅れて開始)
    tween.tween_property(enemy2, "position", Vector2(600, 300), 2.0)




Tweenのワークフロー
Tweenはメソッドチェーンで複数のアニメーションを組み合わせられます

もっと使いこなす:カスタマイズできるパラメータ

パラメータ・テクニック 変えると何が起きるか
set_trans()でトランジション関数を変更 LINEAR(等速)、QUAD(加速・減速)、ELASTIC(弾む)などで動きの質感が大きく変わる。UI要素は落ち着きのあるEASE_OUT_QUAD、ゲーム演出は遊び心のあるELASTICが効果的
set_ease()で加減速パターン指定 IN(遅く始まる)、OUT(遅く終わる)、INOUT(両端で遅い)で印象が変わる。一般的にOUTが自然で気持ちいい
set_loops()で繰り返し実行 set_loops(0)で無限ループ、set_loops(3)で3回繰り返し。点滅やパルスエフェクトに有効
tween_callback()で中間処理を挿入 アニメーション途中で関数を実行。敵が移動完了したら攻撃する、UI表示後に別のUIを表示するなど
tween_interval()で時間差を制御 複数のオブジェクトのアニメーション開始タイミングを調整。カスケード(段階的)な演出が作れる
kill()で途中中断 スキップボタンやキャンセル操作時に使用。プレイヤーの入力に応答できるゲームになる

まとめ

Tweenはゲーム開発の「見た目を良くする魔法」です。シンプルなメソッドチェーンで複雑なアニメーションが実装でき、コードもシンプルで読みやすいのが特徴です。イージング関数を理解すると、市販ゲーム並みの洗練された動きを再現できます。

  • Tweenは時間軸に沿ってプロパティを滑らかに変化させるアニメーション仕組み
  • tween_property()で値を変化、tween_callback()で関数実行、tween_interval()で待機を組み合わせる
  • set_trans()set_ease()で動きの質感を調整し、ゲームの世界観に合わせる

次回は、ゲームが外部のサーバーと通信する際に必須のHTTPRequestノードについて解説します。オンラインランキング取得やクラウド保存の仕組みを学べます。

シリーズ:Godot 4 ノード解説

この記事はGodot 4.xをもとに執筆しています。

コメント