2020-08-24に投稿

GodotのAnimationPlayerの使い方の基礎

GodotにはAnimationPlayerという、コードを書かなくてもアニメーションを作ることができる機能がある。シーン上のオブジェクトのプロパティを変動させたりすることができるため、ちょっとした動きをつけたり、あとはスプライトアニメーションなどもできるっぽい。一応公式にも詳しい説明がある。

アニメーション — Godot Engine (stable)の日本語のドキュメント

ただ、微妙に知りたい情報が不足していたりするためざっと書いてみる。

必要なノードをシーンに配置

今回はLabelを配置し、それがフェードするアニメーションを作ってみる。まずはシーンのルートにそのLabelとAnimationPlayerを配置する。

アニメーションの設定を追加

AnimationPlayerのノードを選択すると、シーンプレビューの下にアニメーション用のパネルが現れる。

最初は空になっているため、ここにフェードアニメーション用のタイムライン的なものを追加する。まずはこの「アニメーション」ボタンをクリックし、現れるメニューで「新規」を選択する。作成するアニメーション名を聞かれるため、適当に名前をつける。すると下記のようにタイムラインが追加される。

ノードのプロパティをアニメーションに割り当てる

このタイムラインにLabelのModulateプロパティを割り当てたい。AnimationPlayerが選択されている状態でシーン上の各ノードを選択すると、ノードのプロパティにはキーフレームをアニメーションに登録するためのアイコンが表示される。

これをクリックすることで現在のプロパティの値をキーフレームとしてアニメーションに登録できる。ベジェ曲線はアニメーションのタイムライン上での値を変え方をどうするかの設定で、他にも色々と方法はあるようなのでどちらでもよい。色々試してみると面白そう。今回はとりあえずオフで。

するとこのようにキーフレームが追加される。ちなみにベジェの場合はRGBAそれぞれのタイムラインが追加される(アルファだけ設定したいとかであれば適宜削除も可能)。

キーフレームでアニメーション

アニメーションするためにはキーフレームを追加し、その時点でのプロパティの値を設定する。まずは0.5秒経った時に薄くしてみる。タイムラインの時間(0, 0.5, 1…と表示されている場所)をクリックするとキーフレームを追加する時間を指定できるため、まずはそこで0.5を選択する。

この状態でLabelのModulateを例えばアルファ50くらいにして再度キーフレームの追加ボタンを実行すると、キーフレームが作成される。同様にして、1秒のところにも元々のα値でキーフレームを追加する。

これでアニメーションプレイヤーの再生ボタンを実行すると実際にフェードされる状態が確認できる。自動で0秒の時点には戻ってくれないため、必要であれば0をクリックしてスタート地点に戻しておいてから確認する。

ループさせる

ちなみにタイムラインの右側にあるこのループっぽいボタンをクリックしてオンにしておけばループ再生してくれる。

タイムラインの長さを設定

また、その左の数字はタイムラインの長さ。これを増やせば1秒よりおおきいアニメーションも設定できる。

自動再生

ループの左上にあるボタンは自動再生ボタン。これをオンにしておけば自動的に再生しておいてくれる。

デフォルトのアニメーションを指定

AnimationPlayerには、デフォルトで再生するアニメーションを設定できる。固定で再生するならこれで十分だろう。

ちなみに、さっきの自動再生の設定がオンになっていないと、ここが勝手に無指定に戻ってしまったりするので、うまく自動再生されない場合はそのあたりを要確認。

まとめ

とりあえず基本的な導入部分の解説をした。あとはメソッドでアニメーションを切り替えたりスピードを変えたり色々コントロールもできるし、イベントでアニメーションの終了時を判断したりもできる。色々使いこなすと面白そう。

ツイッターでシェア
みんなに共有、忘れないようにメモ

だら@Crieit開発者

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

Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。

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

有料記事を販売できるようになりました!

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

コメント