目次
はじめに
今回はゴルフゲームなどによくあるパワーゲージのUIをサクッと解説します。
個人の備忘録としてまとめています。誤った情報がある場合があります。
コメントにてご指摘のほどお願いいたします。
TPSサンプル UE5.4.3で解説します。
解説
①UIの作成
コンテンツフォルダで右クリックしユーザーインターフェース->ウィジェットブループリントをおします。
ユーザーウィジェットを選びます。
できたアセットをWB_PowerGageと名付けました。
②プログレスバーの追加
ゲージの仕組みはプログレスバーを活用すると楽にできるのでこれを使います。
ウィジェットを開き、キャンバスパネルとProgressBarの２つを追加します。
配置はお好みで。
プログレスバーの詳細のパーセントから0～1の値を入れることでゲージをコントロールできます。BarFillTypeなどから方向も変更できます。
このままだと味気ないので独自の素材を入れてみましょう。
それっぽい素材を気合で書きました。
（そのまま使うときは PowerImage: Created by Namiton をどこかに表記してね）
画像のように設定すると綺麗に使えます。
設定ができたらパーセントを0.0にしておきましょう。
③関数の追加
WB_PowerGageのグラフから関数UpdatePowerGageを作ります。
画像のように入力された値で上書きするようにします。
④キャラクター側の実装
このUIを表示したいキャラクターBP、今回はBP_ThirdPersonCharacterを開きUIを表示する処理を書きます。
Widgetを構築して
変数化
画面に表示させて完了です。
一度実行して画面に表示されることを確認しましょう。
⑤ゲージ処理の実装
BP_ThirdPersonCharacterにカスタムイベントStartPowerGageとStopPowerGageを作成します。
タイムラインを追加します。
以下のように接続します。
タイムラインのノードを開きます。
画像のように長さを1、ループ設定を行います。
Percentというフロートトラックを追加し、0->1->0のカーブを作ります。
コンパイル後イベントグラフに戻ります。
値をキャッシュするための変数CurrentPercentを作成しWB_PowerGageで作成した関数UpdatePowerGageを呼びます。
⑦完成
最後に入力イベントなどと接続して完成です。
出力されたCurrentPercentでモノを吹き飛ばしたりなどいろいろ使いましょう。
⑧使い方の例
ゲージの速度を調整したい
SetPlayRateでタイムラインの時間を動的に変更できます。
カーブの形状を変更するのもおすすめです。
結果の値をいい感じに使いたい
MapRangeClampedを利用すれば0-1の値を任意の範囲に変更できます。
が画像の場合0の時は100、0.5で300が出力されます。
最後に
UE4やUE5向けの記事を書いています。
皆様の応援が投稿のモチベーションになりますので
コメントやX（Twitter）のフォローなどしていただけるとありがたいです。
それではよきゲーム開発を。
