体力を2層に分けて減らすタイプのダメージ表現

今回は、ダメージを受けた時に

体力を2層に分けて減らす

という、アクションゲームでよくあるダメージ表現の方法を紹介します。

体力を2層に分けて減らす、というのは

以下の画像のような表現を指します。

f:id:Free_Gamer:20220216155858j:plain

体力ゲージが2層になっていてるやつですね。

青色のゲージが減って、あとから遅れて後ろの赤色のゲージが徐々に減っていくアレです。

~目次~

HPウィジェットの作成

HPを表示するためのウィジェットの作成をします。

「WB_Health」命名

f:id:Free_Gamer:20220216160508j:plain

HPゲージの作成

ウィジェットの構成はこんな感じです。

ProgressBarを2つ重ねています。

DelayHealthBarは、遅れて体力ゲージ徐々に減らす用のバー

CurrentHealthBarは、普通に体力ゲージを減らすようのバーです。

f:id:Free_Gamer:20220216160752j:plain

DelayHealthBarもCurrentHealthBarも

HorizontalAlignmentとVerticalAlignmentを以下の設定にしています。

f:id:Free_Gamer:20220216161418j:plain

CurrentHealthBarのBackgroundImage(背景)を透明にします。

CurrentHealthBarの後ろにあるDelayHealthBarを見えるようにするためです。

f:id:Free_Gamer:20220216162006j:plain

A(Alpha)の値を「0」にすれば、透明になります。

f:id:Free_Gamer:20220216162129j:plain

DelayHealthBarの背景色は何色でもいいですが
とりあえずこの記事内では、黒にします。

f:id:Free_Gamer:20220216162328j:plain

位置は以下の通り。

画面の左上に来るようにしています。

f:id:Free_Gamer:20220216160831j:plain

ウィジェット用のBPインターフェースの作成

ウィジェット用のBPインターフェースを作成します。

「BPI_Widget命名

f:id:Free_Gamer:20220216162513j:plain

「BPI_Widget」を開き

イベントを3つ作成します。

「SetHealth」イベント

インプット値は、Float型。

体力値を取得するためのイベント。

f:id:Free_Gamer:20220216162801j:plain

「SetMaxHealth」イベント。

インプット値は、Float型。

最大体力値を取得するためのイベント。

f:id:Free_Gamer:20220216162855j:plain

「UpdateHealth」イベント。

インプット値は、Float型。

体力を減らすときに呼ばれるイベント。

f:id:Free_Gamer:20220216162940j:plain

体力減少処理の作成

変数の作成

「WB_Health」を開き

変数の作成をします。

DelayHealthUpdateSpeedのデフォルト値は、「5」になっています。

f:id:Free_Gamer:20220216163635j:plain

イベントグラフの作成

以下の処理を組みます。

ゲーム開始時、プレイヤーの最大体力値と実際の体力値を取得します。

取得した体力値を、ProgressBarに反映します。

f:id:Free_Gamer:20220216163752p:plain

体力を減らすダメージ処理です。

ダメージを受けて減った体力値を取得し、ProgressBarに反映させます。

その後、カスタムイベント「UpdateDelayHealth」をタイマーで繰り返し呼び出します。

f:id:Free_Gamer:20220216163952p:plain

カスタムイベント「UpdateDelayHealth」の処理です。

体力を遅れて徐々に減らす処理になります。

f:id:Free_Gamer:20220216164146p:plain

FInterpToノードで、DelayHealthの値をCurrentHealthの値に、指定した速度で近づける処理をしています。

指定した速度というのは、変数「DelayHealthUpdateSpeed」のことです。

この値が大きければ大きいほど、体力を減らす速度が速くなります。

f:id:Free_Gamer:20220216164453j:plain

DelayHealthとCurrentHealthの値が、等しくなったらタイマーを止めます。

f:id:Free_Gamer:20220216164633j:plain

ダメージ処理

変数の作成

「Health」が実際の体力値。

「MaxHealth」が最大体力値となります。

どっちもデフォルト値は、「1000」になっています。

f:id:Free_Gamer:20220216165221j:plain

ウィジェットの表示

「ThirdPersonCharacter」を開き

イベントグラフに以下の処理を組みます。

ゲーム開始時、ウィジェットを表示し、最大体力値と実際の体力値を「WB_Health」に渡しています。

f:id:Free_Gamer:20220216164939p:plain

体力減少処理

「Q」キーが押されたら、現在の体力(CurrentHealth)から、「200」引くようにしています。

引かれた値を、「WB_Health」に渡しています。

f:id:Free_Gamer:20220216165313p:plain

テスト

では実際にプレイしてみましょう。

「Q」キーを押して、以下の動画のように体力が減っていればOKです!


www.youtube.com

なかなかいいですね!

それではまた!^^ノシ