UE4初心者が頑張ってるブログ

Unreal Engine4を使用した開発メモ、及びそれに関連することについて不定期に書いています。

UE4 制限時間をProgress Barで表現する

ミニゲームなど制限時間を使用するゲームは多い気がするのですが、
あまり記事を見かけないと思ったので書くことにしました。

 

右下のゲージが減少していき

f:id:MozPaca:20161024175135p:plain

 

0になると時間切れを知らせるものをつくります。

f:id:MozPaca:20161024175149p:plain

 

参考にしたサイト(見かけないとはいったい...

制限時間の付け方などはこちらの方が詳しく解説してくれています。

pafuhana1213.hatenablog.com

 

準備する

今回はUE4 4.13.1 で作成します。

 

テンプレートは使用せず、適当な名前を付け

プロジェクトを作成します。

 

Widgetを作成する

プロジェクト作成後、

コンテンツフォルダを右クリック

User Interface → Widget Blueprint を選択。

f:id:MozPaca:20161024163207p:plain

 

適当に名前を付けます。

f:id:MozPaca:20161024163715p:plain

 

作成したWidget Blueprintを開き、

時間を表すバーを設置します。

 

Designer画面左側のPaletteで、

「Progress Bar」と検索します。

f:id:MozPaca:20161024163859p:plain

出てきたProgress Barを、

Drag&Dropで持ってきます。

 

サイズや場所などは適当に配置してください。 

f:id:MozPaca:20161024164120p:plain

 

Progress Barをクリック

右側のDetatailsタブの

Progress → Percentage → Bind → Create Binding をクリック 

f:id:MozPaca:20161024170508p:plain

 

Create Binding をクリックすると,

Widget Blueprint内に関数が作成されます。

 

この関数にゲージのPercentageを設定する処理を記述していきます。

(初期状態の関数名では使いにくいので、

関数の名前を使いやすいように変更しています)

f:id:MozPaca:20161024174607p:plain

 

次に変数を作成していきます。

Widget Blueprint 左側の Variables の右の + ボタンを押して

変数を追加していきます。

f:id:MozPaca:20161024174808p:plain

StartTime

・カウント開始時の時間を格納

・戻り値 : DateTime

・初期値 : 0

 

CurrentTime

・現在の(経過した)時間を格納

・戻り値 : Integer

・初期値 : 0

 

TimeLimit

・制限時間の数値を格納

・戻り値 : Float

・初期値 : 10.0(制限時間に合わせて変更する)

 

CurrentPercentage

・CurrentTimeの数値をProgressBarに合わせた数値で格納する

・戻り値 : Float

・初期値 : 0.0

 

ノードをつなげていく

先ほど作成された関数ではなく、

Widget BlueprintのEvent Graphを開きます。

 

そしてこのようにつなげます。

f:id:MozPaca:20161024180530p:plain

 

Event Construct には Widget が生成された時間を格納します。

実際にゲームに組み込む場合にはカウントを開始したいタイミングで設定します。

f:id:MozPaca:20161024180559p:plain

 

Event Tick には現在の時間から、カウントを始めた時間を引き、

その値が制限時間を超えていないか判定しています。

f:id:MozPaca:20161024180309p:plain

 

ここまで記述して、CurrentTimeの値を先ほどの関数の

Return Nodeにつなげれば、残り時間は表示できます。

 

 

Progress Barの最小値と最大値は 0 ~ 1なので

このままではうまくいきません。

 

そこで、Bindingを作成した際の関数でこのように記述します。

f:id:MozPaca:20161024180329p:plain

このようにして、現在の値を 0 ~ 1の間で収まるような数値に変えて

出力します。

これで、正しく表示されると思います。

 

これでWidget Blueprintの処理は終わりです。

 

Widgetを画面に取り付ける

忘れてました。

MapのLevel BlueprintでWidgetを生成しましょう。

f:id:MozPaca:20161024181425p:plain

 

これがないと画面にWidgetが出てきません。

 

実行画面

f:id:MozPaca:20161024175135p:plain

 

今回は制限時間が10秒でしたので、

かなり大きくゲージが削れましたが

もっと大きな数字や、秒ではなくミリ秒で計算すると

きれいに描画されると思います。