[Unreal Engine 5]HPバーを表示してHPを可視化する

シンプルなタワーディフェンスゲームを作る part4

シンプルなタワーディフェンスゲームを作る part4

こちらのようなシンプルなタワーディフェンスゲームを作っています。本記事では「自軍拠点」の残りのHPを「プログレスバー」を使って表示し、「自軍拠点」に到達した敵ユニットからの攻撃を受けてHPが徐々に減っていく振る舞いを確認します。

HPバーを表示するウィジェットを作る

「headquater」フォルダを開きます。右クリック→「ユーザーインターフェース」→「ウィジェットブループリント」を追加し、名称を「WBP_HQ_status」とします。

「WBP_HQ_status」を開きます。左上のパレットで「Canvas Panel」を検索して追加します。同様に左上のパレットで「Progress Bar」を検索して追加します。「Progress Bar」は後で変数として使うので「hp_bar」という名称に変更しておきます。「hp_bar」の位置やサイズを調整して「Canvas Panel」の左上に来るように調整します。「hp_bar」の「Is variable」にチェックをつけておきます。(グラフで参照出来るようになります)

「WBP_HQ_status」右上の「グラフ」を押してイベントグラフに移ります。イベントグラフ上で右クリック→「Add Custom Event」を検索して追加します。Event名を「Update_health」にしておきます。

左の変数欄に先ほど「Is variable」にチェックを付けた「hp_bar」があるのでドラッグアンドドロップして「get hp_bar」を追加します。「get hp_bar」のピンから線を引き出し「Set Percent」を検索して追加します。

「Set Percent」の「In Percent」ピンから線を引き出し「Update_health」の上でドロップします。こうすることで、イベント「Update_health」に引数「In Percent」が追加されます。

HPバーを初期化する

作成したHPバーを表示するウィジェットを「BP_headquater」から呼び出して初期化します。

「BP_headquater」の「Event BeginPlay」の続きに「create widget」を追加します。

追加した「Create Widget」の「Class」に「WBP_HQ_Status」を割り当てます。
「Create Widget」の「Return Value」を右クリック→「変数へ昇格」を押下して変数を作成し、その変数名を「hq_status」とします。
「Create Widget」の次に「set hq_status」を繋ぎます。
その次に「Add Viewport」を追加し、「Add Viewport」の「Target」ピンに「hq_status」を繋ぎます。
「hq_status」の「Update Health」を追加します。(「hq_status」から線を引き出して「Update Health」を検索)
「Update Health」の「In Percent」ピンに「health」を「max_health」で割り算(divide)した値を繋ぎます。

これでゲームを実行時に画面左上にHPバーを表示することができました。

ダメージを受けたときHPバーを更新する

HPバーの表示が出来たので、次にダメージを受けた際にHPを減らしていく処理を追加します。

「BP_headquater」の「Event AnyDamage」のHPを減らす処理の続きに前節の⑧～⑨で作成したHPバーの更新処理と同じものを追加します。
変数欄から「get hq_status」を追加します。「hq_status」の「Update Health」を追加します。「Update Health」の「In Percent」ピンに「health」を「max_health」で割り算(divide)した値を繋ぎます。