突然ですが、ブループリントのタイムラインノードってものすごく便利なのです。
UMGには専用のタイムラインが装備されていますが、UMG以外でUIのインタラクションを表現する際に利用します。
ただトラックに直接的な値のKeyを打ってしまうと、とたんに汎用性が無くなってしまいます。
先日のぷちコン第11回でも使った方法なんですが、ちょっと扱い方を工夫するだけで汎用性が高くなってさらに調整がラクになる方法があるので記事にしておくことにします。
賢明な読者諸兄はすぐに気づかれるかと思いますが、種明かしをするとこれです。
タイムラインノードから出てくる値は、0.0 ～ 1.0 のみ。
この１個のタイムラインを値を煮るなり焼くなりして使い回すのです。
掛け算したり、
↑この場合、0.0 ～ 5000.0 の値でアニメーションします。
また 0.5から引き算して、２倍すると、 -1.0 ～ 1.0 の値のアニメーションが可能。
しかも、カーブを調整すれば好みのイージングも作れます。
変に計算が増えると処理への負荷が無視できなくなりますが、ほどほどに、汎用的に使えるカーブを効率よく使えば、調整にかかる時間が減るのでおススメです。
さらにこれを便利に活用するためのノードが、Lerp 系のノード
扱う型専用にいくつか用意されているようです。
入力ピンの Alpha に 0 ～ 1.0 の数値を入れることで 同じく入力ピン A と B の２つの違う値についてその途中の値を取り出すことができます。例えば、Alphaに 0.5 と入れると、A と B のちょうど中間の値がReturnValueから取り出せます。0 だと A に、1 だと B に近い値になります。
Vector や Color のような複数の値を持っている場合で、同時にアニメーションさせる場合にとても効果的なのです。
ちなみに Lerp は Linear Interpolate の略で、 漢字で書くと「線形補間」です。
ですがタイムラインのカーブを使えば、変化量が線形じゃなくなります。
今回この仕組みを使って、UIのメニューに合わせてカメラを切り替えるのをやってみます。
切り替えUIメニュー
まずメニュー用のWidgetから。メニューといっても簡単に四角いボタン的なものが並んでいるだけのものです。
そのボタン的なものは、さくっと簡単に UMG の Button というコンポーネントで作ることにします。まず Button を左のリストから探してキャンバスに 配置します
Anchor は ストレッチ（親要素に合わせて最大まで拡大）でドーンとスクリーンサイズに。Anchor を変えただけでは変化しないのでパラメータを変えます。
Button の Slot（Canvas Panel Slot） は ↓ こんな感じ。
中にTextBlockを子供として持たせます。
TextBlockは ↓ こんな感じ
階層構造は↓下のようになってます。
ここで、クリックイベントを作成します。
配置した Button のDetails（詳細）パネルの下の方に緑色のボタンが並んでいるので、
On Clicked のボタンをクリックします。
強制的に編集モードがGraphモードに切り替わります。
イベントノードが置かれていますが、一旦置いておきます。
Integer型の変数をひとつ追加します。
自身が何番目のボタン番号かを受け取っておくためのものです。
次にカスタムイベントを用意します。
Inputピンに、Integer型とText型を追加して、作っておいた 変数 と TextBlock にそれぞれつなぎます。
次はイベントディスパッチャーを用意します。
Inputsのところで＋ ボタンを押してInteger型のピンを追加します。
このイベントディスパッチャーを、On Clicked イベントにつなぎます。
イベントディスパッチャーをグラフにドロップすると小さなコンテキストメニューがポップするので、 Call を選択します。
クリックされたら、自分が持たされているボタン番号を返す仕組みです。
コンパイルして保存します。これでボタンWidgetは完成です。
ボタンWidgetを配置するWidget
次にボタンを並べるための親になるWidgetブループリントを用意します。
キャンバスに HorizontalPanel をひとつ配置します。
Slotはこんな感じ。
このHorozontalPanelに、先に作ってあったボタンのWidgetを追加します。
既に作成済みのWidgetブループリントはアセットになっているので、
UserCreated カテゴリで探すと見つかるはずです。
それを Hierarchey パネルの HorizontalBox 以下にドロップします。
とりあえずカメラを５台置く予定なのでその数ぶん追加します。
追加したらそのまま、まとめて選択状態にします。
レイアウトの設定を変更します。
Size が 初期状態でAuto になってるのを Fill に切り替えます。
HorizontalPanelにぴっちり並んでくれるはず。
キャンバスはこのくらいで。
グラフの方を編集します。
まずは並べたボタンたちを一旦配列にします。配列にした方がForEachLoopが使えるのでこ後でちょっとラクができます。
ざっくりですが手順をGIFにしてみました。
次にボタンのラベルをテキスト型の配列で用意します。
一度コンパイルすると、DefaultValue（初期値）がセットできるようになります。
ここで ForEachLoopの出番です。
右端のノードは、イベントディスパッチャーが存在することが前提で、そのイベントディスパッチャーにBind（バインド：紐づけ）することが可能になります。そうすることで、ボタンのWidgetからイベントディスパッチャー経由で通知を受け取ることができます。要するにボタンが押されたら、カスタムイベントが実行されます。
カスタムイベントにはとりあえず今は何もつなげないで、コンパイルしてみます。
すると、キャンバスが変化します。
Event Pre Cnstruct につないだ処理は、Play していなくてもコンパイルした時点で、キャンバスに配置したものに影響を与えることができます。
Widgetは一旦ここまでにします。
カメラの設置
次はカメラとステージを 用意します。
準備としてレベルに、カッコイ風景とカッコイイオブジェクトを設置します。
レベルに直接カメラを５台配置。アングルを決めます。Field Of View（視野角）も調整します。
前編はここまで。
後編は、メインカメラの作成と制御を作っていきます。タイムラインは後編で登場します。
ではでは
