Zenn
🧪

Godot 4.0 & 3.5+でTweenを試してみる

2022/01/30に公開
#
ゲーム開発
#
gamedev
Godot
Godot
#
gdscript
tech

概説

約2年の開発期間を経て、先日遂にGodot 4.0 (alpha1)がリリースされました。

まだアルファ版ですので、本格的な開発環境として使用することは非推奨とされています[1]。動作が重く感じられる場面や軽微な不具合があったりしますが、予想以上に安定しており、大幅にアップデートされたGDScript 2.0や、さまざまな機能をテストには十分な状態です[2]。

そこで、この記事では4.0系から使い方が大幅に刷新されたTweenの仕様を確認してみることにします。早速Godot 4.0 (alpha1)[3]での、Tweenの変更点などを見ていきましょう。

[追記 2022/8/6]
Godot 3.5がリリースされましたが、4.0からTree (=SceneTree)機能がバックポートされ、今までのTweenと並行して使えるようになりました。ですので、この記事のタイトルにも、3.5+ と追加いたしました。3.5から使えるようになったTweenに関しても、基本的にはこの記事に書いてあるとおりに動くはずです。

呼び出し編

alpha1でTweenを使おうと思って最初に驚くのが、ノードの新規作成画面にTweenがないことです。
Tweenがない、ノード新規作成画面

どうやら4.0からはTweenはスクリプトから直接呼び出すように変更されたようです。確かに、もともとTweenはスクリプトで使うことが多いですし、こっちの方がスッキリして良さそうです。

4.0でTweenを呼び出す
var _tween = get_tree().create_tween()

デバッグ画面のノード一覧にも表示されない上記の方法で呼び出しても、デバッグ画面のノード一覧には表示されません

メソッド名の変更・メソッドの追加

4.0からは、Tweenの各メソッド名が変更されています[4]。主だったものを以下に列挙します。引数は省略しますが、tween_**()系のメソッドはいずれも引数が減っており、例えばアニメーションの始点を指定する引数も削除されています。

~3.x 4.0~
interpolate_property() tween_property()
interpolate_method() tween_method()
interpolate_callback() tween_callback()
start() play()

また、仕様変更に伴い新しく追加されたメソッドもあります。頻繁に使いそうなものを列挙します。

追加されたメソッド 用途
chain() Tweenを連続して実行するように変更
parallel() Tweenを並行して実行するように変更
set_parallel(bool = true) Tweenを並行して実行するかどうかを引数で指定
set_ease(EaseType) イージングの種類を指定
set_trans(TransitionType) トランジションの種類を指定
set_loop(int = 0) ループ回数を指定。引数無しで呼び出すと無限にループする
tween_interval(float) インターバルを差し込む

動作編

実際にスクリプトを書いて実行した様子をご覧ください。スクリプトの書き方が刷新され、Tweenだけで以前よりも簡単に、そして自由にアニメーションを実装することができることがわかります。

連続実行

4.0では、Tweenの処理を非常に簡単にリレーすることができます。Tweenのセットアップをした後、tween_property()などのメソッドを連続して書くだけでOKです。

Tweenを連続して実行
func _tween_test():
    # スプライトのスケールを2倍にした後で、x方向に40px移動する
    _tween = get_tree().create_tween()
    _tween.tween_property(_sprite, "scale", Vector2.ONE * 2, 2.0)
    _tween.tween_property(_sprite, "position", _sprite.position + Vector2.RIGHT * 40, 2.0)
    _tween.play()

実行結果（gifアニメではループしていますが、実際には1回だけ実行されます）

並行実行

また、処理を連続して行わず、同時並行で実行することもできます。parallel()やset_parallel()メソッドを使うだけです。先程のスクリプトに、set_parallel(true)の一行だけ追加して、実行してみます。

Tweenを並行して実行
func _tween_test():
    # スプライトのスケールを2倍にしながら、x方向に40px移動する
    _tween = get_tree().create_tween()
    _tween.set_parallel(true) # 前述のスクリプトにこの一行だけ追加
    _tween.tween_property(_sprite, "scale", Vector2.ONE * 2, 2.0)
    _tween.tween_property(_sprite, "position", _sprite.position + Vector2.RIGHT * 40, 2.0)
    _tween.play()

実行結果（gifアニメではループしていますが、実際には1回だけ実行されます）

インターバルを挟み込む

4.0から追加されたtween_interval()メソッドを追加するだけで、アニメーションにインターバルを差し込むこともできます。一番最初のスクリプトに、set_interval(2.0)の一行を追加して、実行してみましょう。

Tweenにインターバルを差し込んで実行
func _tween_test():
    # スプライトのスケールを2倍にした後で、2秒待って、x方向に40px移動する
    _tween = get_tree().create_tween()
    _tween.tween_property(_sprite, "scale", Vector2.ONE * 2, 1.0)
    _tween.tween_interval(2.0) # 最初のスクリプトにこの一行を追加（※上下の2行のメソッドは、durationを1.0に変更しています）
    _tween.tween_property(_sprite, "position", _sprite.position + Vector2.RIGHT * 40, 1.0)
    _tween.play()

実行結果（gifアニメではループしていますが、実際には1回だけ実行されます）

イージング、トランジションを指定する

alpha1時点では、イージングとトランジションは個別のメソッドで指定する必要があります。先程のインターバルを実装したスクリプトに、set_ease()とset_trans()を追加して、実行してみましょう。

イージングとトランジションを指定して実行
func _tween_test():
    _tween = get_tree().create_tween()
    _tween.set_ease(Tween.EASE_IN_OUT) # イージングの種類をEASE_IN_OUTに指定
    _tween.set_trans(Tween.TRANS_ELASTIC) # トランジションの種類をELASTICに指定
    _tween.tween_property(_sprite, "scale", Vector2.ONE * 2, 1.0)
    _tween.tween_interval(2.0)
    _tween.set_trans(Tween.TRANS_CIRC) # トランジションの種類をCIRCに指定
    _tween.tween_property(_sprite, "position", _sprite.position + Vector2.RIGHT * 40, 1.0)
    _tween.play()

実行結果（gifアニメではループしていますが、実際には1回だけ実行されます）

コールバックを追加する

コールバックにも変更があります。3.xまではTweenのコールバックはinterpolate_callback()メソッドで呼び出していました。ただ、あらかじめコールバックを呼び出すタイミングを「呼び出しまでの秒数」で指定する必要があります。4.0ではそれが変更になり、コールバックを呼び出したい箇所に処理を追加するだけで良くなりました。

実際に先ほどまでのスクリプトの途中と最後にコールバック処理を追加してみましょう。

先程のスクリプトにコールバックを追加
func _tween_test():
    _tween = get_tree().create_tween()
    _tween.set_ease(Tween.EASE_IN_OUT)
    _tween.set_trans(Tween.TRANS_ELASTIC)
    _tween.tween_property(_sprite, "scale", _sprite.scale * 2.0, 1.0)
    _tween.tween_callback(_tween_callback) # アニメーションの途中にコールバックを追加
    _tween.tween_interval(1.0)
    _tween.set_trans(Tween.TRANS_CIRC)
    _tween.tween_property(_sprite, "position", _sprite.position + Vector2.RIGHT * 40, 1.0)
    _tween.tween_callback(self, "_tween_callback") # アニメーションの最後にコールバックを追加
    _tween.play()


func _tween_callback():
    # スプライトの色を変更する処理
    _sprite.modulate = _sprite.modulate + Color.ORANGE_RED

実行結果（gifアニメではループしていますが、実際には1回だけ実行されます）

まとめ

以上がGodot 4.0 (alpha1)を使った、4.0系のTweenの仕様の簡単なチェックでした。

以前よりもメソッドの種類が増え、ひとつひとつのメソッドで指定できるパラメータが少なくなりました。個人的には以前よりも色々と自由に表現できるようになった印象がします。Godot 4.0の正式なリリースが楽しみですね。

脚注

  1. ベータ版までは”破壊的”な機能変更の可能性もあり、アルファ版はあくまで機能の確認やデバッグ用とのことです。また、今現在携わっているプロジェクトをアルファ版で読み込むことについても非推奨とされています。もし読み込む場合には、「必ずバックアップを取った後で」との但し書きがありますので、アルファ版の試用をご検討の方はご注意ください。 ↩︎

  2. Contributorの皆さま、本当にお疲れさまです。ソースコードを確認してみると並々ならぬ作業量であったことが窺えます。 ↩︎

  3. 以下 Godot 4.0 (alpha1) を指す場合には「alpha1」、 Godot 4.0 を指す場合には「4.0」と記載。 ↩︎

  4. 引数なども違うので、3.xまでのメソッドが削除され、同じ機能を持つ別のメソッドが追加されたとも言えます。どちらにせよ、同じ役割を持つメソッドですので、ここでは便宜上「変更」と書きます。ちなみに、3.x系のような使い方ができるinterpolate_value()メソッドも新たに用意されています。 ↩︎

Discussion