2019-11-07に投稿

GodotでTweenを動的に使ってアニメーションする

GodotのTweenは他の言語やライブラリでもよくあるように、いちいち細かい処理を書かなくてもパラメータを指定するだけでアニメーションを行ってくれるもの。Cocos2dxでいうアクションみたいなもの。それの実際の使い方をいくつかメモ。

よく見かける例だとシーンに配置されているTweenを使っている物が多いので、その都度dynamicallyにTweenを使う方法。

パラメータを変動させるTween

移動したりサイズを変えたりというパラメータを変動させるタイプのTweenはinterpolate_propertyというメソッドを使う。例えば下記のような感じ。

    var tween = Tween.new()
    tween.interpolate_property(node,
        'position',
        Vector2(0, 0), 
        Vector2(100, 100),
        10,
        Tween.TRANS_LINEAR,
        Tween.EASE_IN_OUT)
    tween.start()
    scene.add_child(tween)

この例だとnodeを10秒かけて座標(0, 0)から(100, 100)に一定の速度で移動させるアニメーションを実行する、というもの。動的に作る場合の注意点としてTween自体もシーンにadd_childしておく必要がある。しないと多分そのまま消えてしまって何も起こらない。アニメーションするnodeに入れる形でも大丈夫。

コールバックを呼ぶためのTween

Tweenでアニメーションした後に例えばそのNodeを削除したりなど、特定の処理を実行させることも出来る。その場合はinterpolate_callbackというメソッドを使う。例えば下記のような感じ。

    var tween = Tween.new()
    tween.interpolate_callback(self, 10, 'remove_node', node)
    tween.start()
    scene.add_child(tween)


func remove_node(node):
    remove_child(node)
    node.queue_free()

これは10秒経ったらnodeをremove_nodeというメソッドを呼んでその中で削除する、というTween。さっきの処理と合わせるとアニメーションした後に自動的に削除することが出来る。メソッド名の後には5つくらいメソッドに渡す引数を指定することが出来る。

この例だとシーン上で行っているが、実際にはnode自体のスクリプト上でやった方がシンプルだと思う。

参考

Tween — Godot Engine latest documentation


だら@Crieit開発者

Crieitの開発者です。 主にLAMPで開発しているWebエンジニアです(在宅)。大体10年程。 記事でわかりにくいところがあればDMで質問していただくか、案件発注してください。 業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。 業務経験有:PHP, MySQL, Laravel5, CakePHP3, JavaScript, RoR 趣味:Elixir, Phoenix, Node, Nuxt, Express, Vue等色々

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

関連記事

コメント