UMGでタイマー表示をつくってみたので、「ぷち」っとご紹介。ぶっちゃけ「ぷちコン」用の制作メモみたいなものです。過去にテクスチャを使ったやつを記事にしているんだけど、今回はNo Texture です。UMGです。
タイマー表示にもいろいろあるのですが、今回は 100分の１秒を表示するタイプです。細かい数字がせわしなく動くと、急かされる印象を与えることができます。
さらに残り時間を感覚的に伝えるために、数字だけでなく円ゲージも合わせて動かします。
さっそく タイマー表示用のWidgetブループリントを作成。
キャンバスに TextBlock を３つ配置。 30秒想定です。
外側のリングは、Image で、マテリアルをセットします。
マテリアルは以下。
Value と書かれたノードは Scalar Parameter です。リングの太さや大きさを調整する場合は、Add ノードで、少しだけ値を足してやります。
すると、プレビューウィンドウ内が↓のようになります。
調整が終われば Add ノードは 削除します。
Valueの値が 0.0 ～ 1.0 に変化するとこうなります。
ブループリントを編集していきます。
まず残り時間を管理する変数を３つ用意します。Float型です。
0.2 を掛けているのは、残り 20％以下になったら点滅させるので、その判定用の変数です。
マテリアルのパラメーターをいじるので、早い段階でDynamic Material Instance 化しておきます。
この場合、Add to Viewport した直後になります。
このWidgetが表示されてすぐにタイマーが動き出すのを防ぐために、Boolean型の変数を１つ用意してフラグとして使います。
カウントダウン開始は、他のブループリントからの呼び出しが合図です。
そのためのカスタムイベントを用意してフラグを立てるようにします。
カウントダウン開始で「Ready?」 から 「Go!!!」に変えるのですが、少ししたらフェードアウトするように、アニメーションを作って再生しています。
タイマーの心臓部を作っていきます。
続き
タイマーがゼロになったら、次の表示に進めるために、イベントディスパッチャーを用意してCall（呼び出し）でつないでいます。
グラフにドラッグ＆ドロップするときに選択します。
表示更新用の関数はこんな感じ。
続いて 小数部分。
何をやっているかというと、小数点を境に数字を取り分けています。
例えば 23.4567 という値があったとしたら、まずは整数部分。
次は 小数部分。
最後は、リングゲージへの反映です。
これで出来上がりです。
テストしてみます。
実際は、HUDクラスのブループリントを用意して、
そこからカウントダウン開始のカスタムイベントを呼び出します。HUDブループリントの Event BeginPlay で、Create Widget して ReturnValue を変数化しておくのがポイント。
で HUD用のWidgetをまとめて Add to Viewport します。
タイマー作動させるイベント。
カウントダウンが終了したらリザルト表示に移行。タイマー作動と同時にイベントディスパッチャーに対してバインド（紐づけ）しておけば、勝手に流れてくれます。
最終的に、このHUDのタイマー作動イベントを呼ぶヤツが必要になるのですが、何がトリガーになるかはゲームの内容次第なので、ひとまず今回はこの辺までにしておくことにします。
思ったより「ぷち」っという感じにならなかったですね。テキストの表示だけだったらシンプルに作れますが、ちょっと欲張ってしまいました。
ではでは
ステキなタイマーライフを！
