節分も過ぎて少しづつ暖かくなっていくのは嬉しい。今までこんな風に感じたことなかったのは、寒さに弱くなったせいかもしれない。
さてさて今回は、登場時に動きのあるUIを考えてみました。
グリッド状に並んだパネルが順にめくられていくやつ。
作りは結構単純です。
まずは、パネル１個分のWidgetを用意します。
表示する内容はパネルのWidgetが受け取るものによって変わります。今回はナンバー受け取る仕様で作りました。アイコンだったらテクスチャを受け取ってもいいです。
さっそくキャンバスから。
サイズは 120ｘ120にしました。
このキャンバスに対して、Image（下敷き） と TextBlock（数字）、Image（カバー用）を子供に します。
これにアニメーションを付けます。
手前に表示するカバー用のImageが最大サイズになったら、その下に隠すように他のパーツを表示開始。
カバー用のImageは、Pivotを左上にしています。
キャンバスはこれで終わり。次はブループリント。
値を受け取ってキャンバスに反映させる関数を用意します。
つぎに、イベントディスパッチャーを用意します。
これはアニメーションの終わりを通知するためのものです。
つぎに、アニメーションを再生するイベント。
時間差を作るためにDelayノードに頑張ってもらいます。
こういったアニメーションなど演出に時間が存在する場合、ちゃんと終わってから操作を受け付けないとカッコ悪いUIになってしまいます。また、アニメーションの尺調整をしても長さに応じて自動で処理したいもの。そこで setTimerByEventノードを使って、アニメーションの終了タイミングで通知をします。とはいうものの、たくさんのパネルを動かすことになるので、このタイマーイベントを全てのパネルで実行するのは処理負荷になります。最後のパネルだけでいいので、やるやらないを分岐するためのブール値も受け取れるようにしました。ちょっと処理が増えましたが、このパネルのWidgetが汎用的に利用できるようになります。
これで、パネルのWidgetは完成です。
つぎにパネルを並べるための親Widgetを作っていきます。
キャンバスに Wrap Box を一つ配置します。
5ｘ5 の 25枚を並べるので、Details タブ で調整します。
Explicit Wrap Width にチェックを付けると、指定した幅（Wrap Width）を越えないように改行してくれます。今回用意したパネルは幅が 120 なので、120ｘ5＝600
ここにパネル間のスキマ 2ｘ4＝8 を合わせて 610 にしています。
ではBlueprintでここにパネルを追加していきます。
ForLoopでパネルを生成しつつ、順次配列に追加していきます。配列に積んでおくことで、このForLoop処理を抜けた後でも扱うことができます。
この段階で、25枚の透明のパネルたちが、数値をもらって待機完了です。
パネルに待ち時間をセットする関数を用意します。
剰余（％）と除算（÷）を使って左上から右下に向かうように計算しています。
Index番号は左上 0 で始まって、右下に向かって増えていきます。
Index番号に対して、5の剰余を求めると、
一方の除算はというと、
整数の割り算は端数は切り捨てられます。
この２つを加算すると、
これに適当な小数を掛けて待ち時間にしてやるのです。
この関数をパネルの数ぶん呼び出すことになります。
カスタムイベントにしました。
全25枚のパネルのうち、24枚を ForLoop ノードで回して、最後のパネルだけ手動でやる感じ。ここでようやくイベントディスパッチャーをバインドします。
これで並べるWidgetは完成です。
Viewportに追加してテストしてみます。
レベルブループリントを編集。
再生して、ウィンドウをフォーカスした後、スペースキーを押すとこんな感じ。
剰余（％）のみだった場合。
除算（÷）のみの場合。
アニメーションでも見た目をアレンジできるので楽しいですね。
試しに数字をシャッフルすると・・・
なんだかBINGOカードに見えてきたので、BINGOカードにでもしてみようかな。
今回はこの辺で
ではでは
ステキなパネル出現ライフを！
