みつまめ杏仁

アンリアルエンジン(UE4)でGUIを作るためにゴニョゴニョしてます。UIデザイナーの皆様の助けになれば幸いです。

パラパラとアイテムが表示されるやつ

 節分も過ぎて少しづつ暖かくなっていくのは嬉しい。今までこんな風に感じたことなかったのは、寒さに弱くなったせいかもしれない。

 

 さてさて今回は、登場時に動きのあるUIを考えてみました。

グリッド状に並んだパネルが順にめくられていくやつ。

f:id:hiyokosabrey:20190205045827j:plain

 

作りは結構単純です。

まずは、パネル1個分のWidgetを用意します。

表示する内容はパネルのWidgetが受け取るものによって変わります。今回はナンバー受け取る仕様で作りました。アイコンだったらテクスチャを受け取ってもいいです。

 

さっそくキャンバスから。

サイズは 120x120にしました。

f:id:hiyokosabrey:20190204001027p:plain

このキャンバスに対して、Image(下敷き) と TextBlock(数字)、Image(カバー用)を子供に します。

f:id:hiyokosabrey:20190204001340p:plain

これにアニメーションを付けます。

手前に表示するカバー用のImageが最大サイズになったら、その下に隠すように他のパーツを表示開始。

f:id:hiyokosabrey:20190204002032p:plain

カバー用のImageは、Pivotを左上にしています。

f:id:hiyokosabrey:20190204001816g:plain

 

キャンバスはこれで終わり。次はブループリント。

値を受け取ってキャンバスに反映させる関数を用意します。

f:id:hiyokosabrey:20190204002708p:plain

 

つぎに、イベントディスパッチャーを用意します。

f:id:hiyokosabrey:20190204225623p:plain
これはアニメーションの終わりを通知するためのものです。

 

つぎに、アニメーションを再生するイベント。

時間差を作るためにDelayノードに頑張ってもらいます。

f:id:hiyokosabrey:20190204225604p:plain

こういったアニメーションなど演出に時間が存在する場合、ちゃんと終わってから操作を受け付けないとカッコ悪いUIになってしまいます。また、アニメーションの尺調整をしても長さに応じて自動で処理したいもの。そこで setTimerByEventノードを使って、アニメーションの終了タイミングで通知をします。とはいうものの、たくさんのパネルを動かすことになるので、このタイマーイベントを全てのパネルで実行するのは処理負荷になります。最後のパネルだけでいいので、やるやらないを分岐するためのブール値も受け取れるようにしました。ちょっと処理が増えましたが、このパネルのWidgetが汎用的に利用できるようになります。

 

これで、パネルのWidgetは完成です。

つぎにパネルを並べるための親Widgetを作っていきます。

 

キャンバスに Wrap Box を一つ配置します。

f:id:hiyokosabrey:20190204231713p:plain

f:id:hiyokosabrey:20190204231852p:plain

5x5 の 25枚を並べるので、Details タブ で調整します。

f:id:hiyokosabrey:20190204233027p:plain

Explicit Wrap Width にチェックを付けると、指定した幅(Wrap Width)を越えないように改行してくれます。今回用意したパネルは幅が 120 なので、120x5=600

ここにパネル間のスキマ  2x4=8 を合わせて 610 にしています。

 

ではBlueprintでここにパネルを追加していきます。

f:id:hiyokosabrey:20190204234103p:plain

ForLoopでパネルを生成しつつ、順次配列に追加していきます。配列に積んでおくことで、このForLoop処理を抜けた後でも扱うことができます。

この段階で、25枚の透明のパネルたちが、数値をもらって待機完了です。

 

パネルに待ち時間をセットする関数を用意します。

f:id:hiyokosabrey:20190205001502p:plain

剰余(%)と除算(÷)を使って左上から右下に向かうように計算しています。

Index番号は左上 0 で始まって、右下に向かって増えていきます。

f:id:hiyokosabrey:20190205002714p:plain

Index番号に対して、5の剰余を求めると、

f:id:hiyokosabrey:20190205003147p:plain

一方の除算はというと、

f:id:hiyokosabrey:20190205003420p:plain

整数の割り算は端数は切り捨てられます。

この2つを加算すると、

f:id:hiyokosabrey:20190205003923p:plain

これに適当な小数を掛けて待ち時間にしてやるのです。

 

 この関数をパネルの数ぶん呼び出すことになります。

 

カスタムイベントにしました。

f:id:hiyokosabrey:20190205000909p:plain

全25枚のパネルのうち、24枚を ForLoop ノードで回して、最後のパネルだけ手動でやる感じ。ここでようやくイベントディスパッチャーをバインドします。

 


 これで並べるWidgetは完成です。

 

Viewportに追加してテストしてみます。

レベルブループリントを編集。

f:id:hiyokosabrey:20190205004847p:plain

 

再生して、ウィンドウをフォーカスした後、スペースキーを押すとこんな感じ。

f:id:hiyokosabrey:20190205010004g:plain


剰余(%)のみだった場合。

f:id:hiyokosabrey:20190205051617g:plain

 

除算(÷)のみの場合。

f:id:hiyokosabrey:20190205051055g:plain

 

アニメーションでも見た目をアレンジできるので楽しいですね。

 

たにみに数字をシャッフルすると・・・

f:id:hiyokosabrey:20190205052948g:plain

 

なんだかBINGOカードに見えてきたので、BINGOカードにでもしてみようかな。

 

今回はこの辺で

 

ではでは

ステキなパネル出現ライフを!