71.プレイヤーのHPバーを作る②実践

😺では前回に引き続き、今回はHPバーのUIの部分を作っていきます。

https://scrapbox.io/files/65cb6cc4280c120025ce932f.gif

①HPバーのUIを作る|実践

ではHPバーを作っていきましょう。

UIフォルダを作成してユーザーインターフェース > ウィジェットブループリント > (UserWidgetを選択) > 名前をWBP_Playerにします。

https://scrapbox.io/files/65cb6d94707eb3002483750d.jpg

開いたらCanvasとProgressBarを追加します。

https://scrapbox.io/files/65cb6da14daa1b0023cd5b88.jpg

ProgressBarとは？

ProgressBarを選択した状態でスロット > サイズをXを700にして、Yを100にします。

https://scrapbox.io/files/65cb6ddc28fa2b0024bab653.jpg

HPバーのアンカーを左下にしておきましょう。アンカーをクリックして左下に固定されるように設定します。

https://scrapbox.io/files/65cb6df39494df00251fd690.jpg

位置Xを30にしてYを-130にします。

https://scrapbox.io/files/65cb6dff98dc5e0026e8c41b.jpg

HPバーを満タンにしておきましょう。プログレスからPercentを1にします。

https://scrapbox.io/files/65cb6e0da5aba20025dab351.jpg

Percentとは？

https://scrapbox.io/files/65cb6e3156306d0024c07bf4.gif

このPerscentの値をいじる事で表示を変化させる事ができます

最終的にHPバーはこんな感じになります。ではゲーム画面に表示させましょう。

https://scrapbox.io/files/65cb6e71ef15080024c55e1d.jpg

BP_FirstPersonCharacterにUIの表示機能を持たせるので開きます。

https://scrapbox.io/files/65cb6e7c2d0a560025a9c52c.jpg

😺ちなみにですがUIの表示するノードをどこに作るべきなのかですが、まずはわかりやすい場所です。プレイヤーのHPを表示する機能なので直感的にプレイヤーがUIを表示させた方がわかりやすいと思ったのでBP_FirstPersonCharacterに実装しますが、レベルブループリントなどにUIを表示させる処理を作っても構いません。今回の場合だとどっちでも良いですがブループリントで作る機能はわかりやすい場所に作っていきましょう。

BP_FirstPersonCharacterのイベントグラフにまず以下のノードを追加します。

https://scrapbox.io/files/65cb6e9d2d0a560025a9c64e.jpg

そしたらReturnValue上で右クリック > 変数へ昇格 > 作成された変数の名前をWBP_Playerにします。

https://scrapbox.io/files/65cb6ec6b8ed22002599eecb.jpg

最後にAdd to viewportでUIを表示させます。

https://scrapbox.io/files/65cb6ef4fc98b7002461022f.jpg

プレイしてみましょう。HPバーが表示されました。

https://scrapbox.io/files/65cb6efd280a350025ca0840.jpg

😺まだこの状態ではHPバーは変化しないので、作成したHPの変数をこのHPバーに適用していきましょう。

②HPバーにHPの変更を適用する|実践

では動的にHPバーの表示を変更していきましょう。ProgressBarウィジェットはプログレスのPercentを調整すると表示が変わります。つまりこのPercent(0~1の値)をノードから変更してあげる必要があります。

https://scrapbox.io/files/65cb6f4709faf400246910df.gif

PlayerUIを開いてProgresBarを選択した状態で、IsVariableのチェックが入っている事を確認します。自動でチェックは入っているはずです。

https://scrapbox.io/files/65cb6f85ba20d60023abd1c7.jpg

IsVariableとは？

ちょっと前のページで解説しましたが、IsVariableでウィジェットを変数化する事ができます。またバインディングでHPバーを作る方法もありますが、毎フレーム処理が走って重たい処理になってしまうため、必要な時にしか処理を行わないIsVariableを使った方法がおすすめします。

では右上からグラフを開きます。

https://scrapbox.io/files/65cb6faa8120c40024b74843.jpg

カスタムイベントを作成して、名前をSetHPBarにします。インプットからプラスボタンで追加して「HP」という名前でfloat型に選択します。

https://scrapbox.io/files/65cb6fb6ba20d60023abd2de.jpg

SetHPBarからSetPercentを作成して、変数からProgressBarをGetでドラッグ追加します。さらにHPから「/」と検索して除算ノードを追加し、100で割ります。

https://scrapbox.io/files/65cb70076aa61a002405dcb9.jpg

ノード解説

これでプレイヤー側からSetHPBarのカスタムイベントを呼ぶとともにHPを渡して100で割り、パーセントでProgressBarに適用させます。例えばHPが50なら、100で割ると0.5になってセットされます。0.5の場合だとつまり50％なのでHPバーの表示は以下のようになります↓

https://scrapbox.io/files/65cb7046f270db00245da8e8.jpg

BP_FirstPersonCharacterを開きます。イベントAnyDamageから繋がるノードから以下の強調されている部分のノードを追加してください。まずはWBP_PlayerをGetで追加して、WBP_PlayerからSetHPBarと検索して作成、その後HPにSetHPBarのHPから接続します。

https://scrapbox.io/files/65cb7a9314f4730024d84293.jpg

拡大図↓

https://scrapbox.io/files/65cb7aaac24b4400243a516e.jpg

BP_FirstPersonCharacterに追加した全ノード↓

これでHPバーの実装は完成です！一旦プレイしてみましょう。

③HPバーの完成!

https://scrapbox.io/files/65cb6cc4280c120025ce932f.gif

これでHPバーは完成しました。弾にヒットするとHPが10ずつ減っていき、HPバーの表示にも変更が適用されます。

こんな感じにHPバーは実装していきます。HPバーはこれで以上になります。

😺弾にヒットするとダメージが入るようになりましたが、エフェクト等が無いためダメージを受けてる感じがあまりしないですね..そこでヒットした時に画面を赤くする機能と、HPが0になった時にゲームを終了させる処理を追加で作成していきます。

④おまけ(ヒットした時に画面を赤くするなど) |実践

以下はおまけですので興味ある方だけやってみてください。まず雰囲気だけですが人を配置させて、FPS風にします。

コンテンツブラウザの追加から機能またはコンテンツパックを追加をクリックしてサードパーソンテンプレートを選択した状態でプロジェクトに追加を選択します。

https://scrapbox.io/files/65cb7b19fc98b70024617aa8.jpg

サードパーソンのキャラを配置します。

https://scrapbox.io/files/65cb7b2cba20d60023ac2f8d.jpg

次にWBP_Playerを開いてImageを配置します。

https://scrapbox.io/files/65cb7b43b92ba100235f7b9d.jpg

アンカーを画面に合わせて伸縮する下の場所に設定します。

https://scrapbox.io/files/65cb7b54bec91800235eb332.jpg

オフセットを0にします。

https://scrapbox.io/files/65cb7b593cd3650024c4c2f8.jpg

色をアピアレンス > Brush > Tintから赤色に変更して透明度となるA値を0.1ぐらいにします。

https://scrapbox.io/files/65cb7b618c35ef0025970711.jpg

このImageは最初は見えなくて良いのでVisibiltyからCollapsedに設定します。

https://scrapbox.io/files/65cb7b68280a350025ca74da.jpg

Visibilityとは?

VisibilityはUIの表示,非表示を切り替える設定項目です。Visibleで表示、Collapsedで非表示になるので基本的にこの二つを切り替えていきましょう。

WBP_Playerのグラフを開きます。既存のノードの後にノードを追加していきます。

https://scrapbox.io/files/65cb7ba9280a350025ca76b6.jpg

SetVisibilityでImageを表示にして、その後Delayで0.7秒後にImageを非表示にします。Imageは変数からドラッグで追加しましょう。

https://scrapbox.io/files/65cb7bc7a5aba20025db4d85.jpg

最初のSetVisibilityがvisible、Delayで0.07秒後に今度はSetVisibilityをcollapsedにします。

https://scrapbox.io/files/65cb7bdb754f3a0023cdd756.jpg

これで0.07秒間だけ赤色のImageを表示する機能を作れました。(プレイ映像は下の動画で)

弾にヒットした瞬間に薄い赤色のImageを0.7秒間だけ表示させてダメージを受けたっぽい表現を行えました。これでHPバー実装は以上になります。

《実践演習》

HPが０になったら、画面上に大きな文字で『GameOver』という風にテキストが表示されるようにしていきましょう。

３秒文字が表示されたら、ゲーム終了するようにします。