Godot 音シュー12「シーンのインスタンスとアニメ 1/2」

エフェクトにこだわるとゲームが先に進まないが、「Good」とか「Miss」とか画面に表示されるようにしてみた。しかもちょっとだけアニメする。考え方は「Good」や「Miss」がアニメするシーンを作っておいて、そのシーンをノード化して子ノードに追加するだけ。

Goodシーンのアニメ　完成イメージ

こんな感じで、エリアの所からニョキッと「Good」の文字が出てくるシーンを先に作る。（「Miss」の方も同じようにやれば出来るから、これは省略する予定。）

新シーンのノード

まずは、メインパネルの所[+]を押して新規シーンの追加だ。そしたら、ノードを追加していく。出来上がったら適当な名前でセーブ。

1. ルートノードは「Control」。位置、大きさなどはイジラナイ。「Node」ノードとかにはしない事。今回は4か所あるエリアの位置により、表示させる場所を変えられるようにするため、プロパティにRectのPositionがある事が大事だ。
2. 「Label」ノード。プロパティのTextに"Good"と書き入れる。位置は原点（というか親ノードのポジション）を中心に設定する。回転や拡大・縮小はお好みで。今回はこのノードのプロパティをいじってアニメさせる。
3. アニメさせるから当然「AnimationPlayer」ノード。これを付けると、下部パネルが[Animation]に。なってなかったら、クリックで。

Animation

で、「Label」ノードをアニメさせるわけだが、

1. 下部パネルが[Animation]になっていることを確認して、
2. [新規アニメの作成]ボタンをクリック。
3. [アニメの名前どうしますか？]の窓が出るので、適当に名前を入れて[OK]。
4. すると、各ノードのプロパティの数値の右横に[鍵（キー）]のアイコンが表示されるようになる。このボタンを押すことで、アニメのトラックにキーを打ち込める。いろいろいじってて、「あれ？　[鍵（キー）]のアイコンがねーなー」てな具合になってしまった場合は、下部パネルが[Animation]になっていて、[新規アニメの作成]の状態になっているかどうか確認だ。

基本的に、どんなノードのどんなプロパティでも[キー]アイコンが出る。ってことは、Godotではなんでもかんでもアニメーションさせることが出来るって事だ。すごいねGodot！

キーを打つ前に・・・

この画面、前もどっかで解説してたような気もしないでもないが、、、

1. Length(s)：　アニメの長さを設定する。単位は秒。今回のアニメは"0.5"秒にした。ここの数値を変えると、連動して[4]の薄く塗られている範囲が設定したアニメの長さに変わる。
2. Step(s)：　キーを打てる間隔を設定する。単位は秒。デフォでは"0.1"。つまり、0.1秒毎にキーを打てるという事。今回は特にいじってない。
3. この青線の上にキーが打たれる。各ノードのプロパティの数値の右横に[鍵（キー）]のアイコンが表示されてるだろ。それ押した時、この線上にキーが打たれる。この線を動かしたい時は[4]の薄く塗られている範囲上でクリックする。線の動きは[2]で指定した間隔で動く。
4. [1]で設定した範囲だけ薄く塗られる。なんか狭いなー、と思ったら、この上で[Ctrl] + [マウスウィールくるくる] で伸びたり縮んだりする。アニメ時間が短い時は広げとくと、各キー間が広がってキーが打ちやすくなるって事。
5. ここの丸ポチをスライドさせても[4]の範囲が伸びたり縮んだり。アニメの時間が伸びるわけじゃないから。あくまで、見た目の拡大縮小。

キーを打つ

先ずは、「Label」のScaleのキーを打つ。アニメの始まりは4倍の大きさで表示させ、終わり（0.5秒後）では7倍の大きさで表示させる様にする。

1. Scaleの横に出た[キー]アイコンをクリック。これで、さっきの青線の所にキーが打たれるのだが、
2. [新しくトラックを作りますよ。]のダイアログが出るので、[Create]する。これは以後、Scaleの変化を記録する場所（トラック）を確保する事を示している。以降Scaleの変化があった場合、このトラックに記録する事になる。1つのプロパティで1つのトラックを使う。違うプロパティの変化は、それぞれ違うトラックで管理する。
3. Label:rect_scaleというトラックが作成され、青線上（0秒のとこ）にひし形のポチマークがついた。これがキーだ。

で次に、

4. 線を0.5秒の位置にずらし、
5. Scaleを7倍にして、[キー]アイコンをクリックすると、
6. キーが打たれるのだが、Scaleという同一プロパティの変化なので、同一トラック上に打たれる事になる。

これで、文字のスケールが4倍から7倍になる0.5秒のアニメが出来た。

簡単にまとめると

1. 「Animation」ノード追加
2. [新規アニメ追加]ボタン
3. 青線をキーを打ちたいところに動かして、
4. プロパティを好きな様に変えて、
5. [キー]アイコンクリックで、
6. トラックにキーが打たれる。
7. 以下、[3]～[6]を繰り返し。

という感じ。

追加で

文字が大きくなるだけだと寂しいので、表示位置と色の変化も加えてみた。プロパティ毎にトラックが出来るのが分かると思う。

また、トラック名が長くて見切れてる場合は、時間が表示されている行の左（トラック名の欄の上）の[⇔]マークをドラッグするとトラック名表示の欄を広げることが出来る。あと、トラック名の左にあるチェックは、そのトラックが有効という事。

ちなみに、

1. [逆再生]ボタン：　今ある青線の位置からアニメを逆再生する。
2. [一番最後から逆再生]ボタン：　アニメの一番最後から逆再生する。
3. [停止]ボタン：　そのまま。
4. [一番最初から再生]ボタン：　アニメの一番最初から再生する。
5. [再生]ボタン：　今ある青線の位置からアニメを再生する。
6. 青線の位置を指定したい時は、ここに数値を入れてもいいし、[上下]マークのアイコンをクリックしてもいける。
7. また、打ったキーを消したい時は、ひし形のマークの上で右クリ、[Remove Selection]。マウスのドラッグで囲めば複数キーを一気に選択できる。

アニメーションパネルの見方はキャラコンの17も参照のこと。

インスタンス

あとは、今作ったシーンをインスタンスさせるんだが、また今度。