UE4 制限時間をProgress Barで表現する
ミニゲームなど制限時間を使用するゲームは多い気がするのですが、
あまり記事を見かけないと思ったので書くことにしました。
右下のゲージが減少していき
0になると時間切れを知らせるものをつくります。
参考にしたサイト(見かけないとはいったい...)
制限時間の付け方などはこちらの方が詳しく解説してくれています。
準備する
今回はUE4 4.13.1 で作成します。
テンプレートは使用せず、適当な名前を付け
プロジェクトを作成します。
Widgetを作成する
プロジェクト作成後、
コンテンツフォルダを右クリック
User Interface → Widget Blueprint を選択。
適当に名前を付けます。
作成したWidget Blueprintを開き、
時間を表すバーを設置します。
Designer画面左側のPaletteで、
「Progress Bar」と検索します。
出てきたProgress Barを、
Drag&Dropで持ってきます。
サイズや場所などは適当に配置してください。
Progress Barをクリック
右側のDetatailsタブの
Progress → Percentage → Bind → Create Binding をクリック
Create Binding をクリックすると,
Widget Blueprint内に関数が作成されます。
この関数にゲージのPercentageを設定する処理を記述していきます。
(初期状態の関数名では使いにくいので、
関数の名前を使いやすいように変更しています)
次に変数を作成していきます。
Widget Blueprint 左側の Variables の右の + ボタンを押して
変数を追加していきます。
StartTime
・カウント開始時の時間を格納
・戻り値 : DateTime
・初期値 : 0
CurrentTime
・現在の(経過した)時間を格納
・戻り値 : Integer
・初期値 : 0
TimeLimit
・制限時間の数値を格納
・戻り値 : Float
・初期値 : 10.0(制限時間に合わせて変更する)
CurrentPercentage
・CurrentTimeの数値をProgressBarに合わせた数値で格納する
・戻り値 : Float
・初期値 : 0.0
ノードをつなげていく
先ほど作成された関数ではなく、
Widget BlueprintのEvent Graphを開きます。
そしてこのようにつなげます。
Event Construct には Widget が生成された時間を格納します。
実際にゲームに組み込む場合にはカウントを開始したいタイミングで設定します。
Event Tick には現在の時間から、カウントを始めた時間を引き、
その値が制限時間を超えていないか判定しています。
ここまで記述して、CurrentTimeの値を先ほどの関数の
Return Nodeにつなげれば、残り時間は表示できます。
が
Progress Barの最小値と最大値は 0 ~ 1なので
このままではうまくいきません。
そこで、Bindingを作成した際の関数でこのように記述します。
このようにして、現在の値を 0 ~ 1の間で収まるような数値に変えて
出力します。
これで、正しく表示されると思います。
これでWidget Blueprintの処理は終わりです。
Widgetを画面に取り付ける
忘れてました。
MapのLevel BlueprintでWidgetを生成しましょう。
これがないと画面にWidgetが出てきません。
実行画面
今回は制限時間が10秒でしたので、
かなり大きくゲージが削れましたが
もっと大きな数字や、秒ではなくミリ秒で計算すると
きれいに描画されると思います。