プレイヤーキャラクターのHPバーとMPバーの作成です。
HPバー
ウィジェットブループリントの作成
右クリックしてユーザーインターフェース > ウィジェットブループリントを選択。親クラスはUser Widget。
名前はUI_HpBarにしました。
ウィジェットブループリントの編集
UI_HpBarを開く。
パレットからパネル > Canvas Panelをドラッグ&ドロップで配置。
パレットから一般 > Progress Barをドラッグ&ドロップで配置。
パレットからパネル > Canvas Panelをドラッグ&ドロップで配置。
パレットから一般 > Progress Barをドラッグ&ドロップで配置。
Progress Bar(上側)の編集
Progress Barは画面に表示されるHPゲージそのものになります。今回は左上に配置します。
詳細を編集します。
名前がProgressBar_**になっていますので、HpBar_Frontにします。
スロット > アンカーを左上にします。
スロット > 位置 Xがライフゲージ左側の隙間。100にしました。
スロット > 位置 Yがライフゲージ上側の隙間。80にしました。
スロット > サイズ Xがライフゲージの横幅。600にしました。
スロット > サイズ Yがライフゲージの縦幅。18にしました。
スタイル > Style > Background Image > TintのAを0にします。こうすることによって下地が透明化されます。HPゲージは2枚重ねますから、上となるこちら側は透明化したいのです。
プログレス > Parcentを1.0にします。これは1.0で満タン、0.5で半分、0で空っぽとなるものです。
アピアランス > Fill Color and Opacityで色と透明度を変更できます。HPゲージ(上)ですから緑にしておきます。
詳細を編集します。
名前がProgressBar_**になっていますので、HpBar_Frontにします。
スロット > アンカーを左上にします。
スロット > 位置 Xがライフゲージ左側の隙間。100にしました。
スロット > 位置 Yがライフゲージ上側の隙間。80にしました。
スロット > サイズ Xがライフゲージの横幅。600にしました。
スロット > サイズ Yがライフゲージの縦幅。18にしました。
スタイル > Style > Background Image > TintのAを0にします。こうすることによって下地が透明化されます。HPゲージは2枚重ねますから、上となるこちら側は透明化したいのです。
プログレス > Parcentを1.0にします。これは1.0で満タン、0.5で半分、0で空っぽとなるものです。
アピアランス > Fill Color and Opacityで色と透明度を変更できます。HPゲージ(上)ですから緑にしておきます。
HpBar_Frontの複製
HPゲージは2枚重ねですから、階層でHpBar_Frontを複製し、名前をHpBar_Backにします。
HpBar_Back(下側)の編集
HpBar_Backを選択した状態で詳細の編集。位置とサイズはHpBar_Frontと同じにします。
スロット > アンカーを左上にします。
スロット > 位置 Xがライフゲージ左側の隙間。100にしました。
スロット > 位置 Yがライフゲージ上側の隙間。80にしました。
スロット > サイズ Xがライフゲージの横幅。600にしました。
スロット > サイズ Yがライフゲージの縦幅。18にしました。
スロット > ZOrderを-1にします。ZOrderの値が小さい方が重なった時に下になるからです。
スタイル > Style > Background Image > TintのAは1.0で良いです。こちらは下になるので下地を透明化させる必要はありません。
プログレス > Parcentは1.0にします。
アピアランス > Fill Color and Opacityから色を変更しましょう。赤が良いでしょう。
スロット > アンカーを左上にします。
スロット > 位置 Xがライフゲージ左側の隙間。100にしました。
スロット > 位置 Yがライフゲージ上側の隙間。80にしました。
スロット > サイズ Xがライフゲージの横幅。600にしました。
スロット > サイズ Yがライフゲージの縦幅。18にしました。
スロット > ZOrderを-1にします。ZOrderの値が小さい方が重なった時に下になるからです。
スタイル > Style > Background Image > TintのAは1.0で良いです。こちらは下になるので下地を透明化させる必要はありません。
プログレス > Parcentは1.0にします。
アピアランス > Fill Color and Opacityから色を変更しましょう。赤が良いでしょう。
グラフ編集モード
右上の「グラフ」をクリックしてグラフ編集モードに切り替える。
イベント Pre Constructとイベント Constructは削除して構いません。
空いている場所で右クリックしてカスタムイベントを追加し、名前はUpdateHpBarにします。HPゲージを更新させるためのイベントです。
左の変数欄からHpBar_Frontをドラッグ&ドロップでGet配置。そこから線を繋いでSet Percentを配置。Set PercentのIn Percentから線を伸ばしてUpdateHpBarに繋げます。繋がらないようで繋がります。
そしたらこの線をすぐに切ってUpdateHpBarのIn Percentから線を伸ばして変数へ昇格。UpdateHpBar→セット(In Percent)→Set Percentを2本の線で繋ぐ。
イベント Pre Constructとイベント Constructは削除して構いません。
空いている場所で右クリックしてカスタムイベントを追加し、名前はUpdateHpBarにします。HPゲージを更新させるためのイベントです。
左の変数欄からHpBar_Frontをドラッグ&ドロップでGet配置。そこから線を繋いでSet Percentを配置。Set PercentのIn Percentから線を伸ばしてUpdateHpBarに繋げます。繋がらないようで繋がります。
そしたらこの線をすぐに切ってUpdateHpBarのIn Percentから線を伸ばして変数へ昇格。UpdateHpBar→セット(In Percent)→Set Percentを2本の線で繋ぐ。
HPゲージが更新されると発生するイベントです。Percentの値が更新されます。
変数のIn Percentは後で使用します。
変数のIn Percentは後で使用します。
プレイヤーブループリントの編集
プレイヤーキャラクターのブループリントを編集し、ライフゲージを画面に表示する設定をします。
HPゲージを画面に表示させる
ノードを組む
プレイヤーキャラクターのブループリントを開く。
イベント BeginPlayが既に使われていますので、その線を辿って最後のノードから線を引いてウィジェットを作成を配置するのですが、セーブデータのLOAD処理よりは前にします。
そのClassにUI_HpBarを選択。
Return Valueから線を引いて変数に昇格。名前はHpBar。
セットから線を伸ばしてAdd To Viewportを配置。2本の線を繋ぐ。
プレイヤーキャラクターのブループリントを開く。
イベント BeginPlayが既に使われていますので、その線を辿って最後のノードから線を引いてウィジェットを作成を配置するのですが、セーブデータのLOAD処理よりは前にします。
そのClassにUI_HpBarを選択。
Return Valueから線を引いて変数に昇格。名前はHpBar。
セットから線を伸ばしてAdd To Viewportを配置。2本の線を繋ぐ。
これはウィジェットを作成でUI_HpBarを呼び出して、Add To Viewportで表示するノードです。
テストプレイするとライフゲージが表示されています。
テストプレイするとライフゲージが表示されています。
ダメージを受けた時の計算
ノードを組む
引き続きプレイヤーブループリントを編集し、ダメージを受けた時にHPが減る処理をします。
空いている場所で右クリックしてイベント AnyDamageを配置。ダメージを受けた時にイベントが発生するノードです。
変数欄からHpをドラッグ&ドロップでGet配置。そこから線を伸ばして-キーを押して減算する(-)を配置。左下はDamageから繋ぐ。
変数欄からHpをドラッグ&ドロップでSet配置。
引き続きプレイヤーブループリントを編集し、ダメージを受けた時にHPが減る処理をします。
空いている場所で右クリックしてイベント AnyDamageを配置。ダメージを受けた時にイベントが発生するノードです。
変数欄からHpをドラッグ&ドロップでGet配置。そこから線を伸ばして-キーを押して減算する(-)を配置。左下はDamageから繋ぐ。
変数欄からHpをドラッグ&ドロップでSet配置。
ダメージを受けるとイベント AnyDamageのDamegeからダメージの数値を貰い、現在のHpから引かれます。その結果をセットのHpにセットしています。
HPゲージ(上側)に反映させる
HPゲージにダメージ処理を反映させる処理をします。ここでカスタムベントのUpdateHpBarを使い、現在のHPを伝えます。
ノードを組む
先ほどの続きです。
変数からHpBarをGet配置。そこから線を伸ばしてUpdateHpBarを配置。UpdateHpBarは左上からセットとも繋ぐ。
UpdateHpBarのIn Percentに現在のHPを伝える必要がありますが、Progress BarのPercentは1.0で満タンですから、素直に線を繋げるとおかしくなります。0～1.0の基準に合わせるために現在HP÷最大HPの計算が必要です。
セットの右下から線を伸ばして/キーを押して除算する(÷)を配置。その下の0.0には変数欄からMaxHpをGet配置して繋ぐ。そして割り算の結果をIn Percentに繋ぎます。
先ほどの続きです。
変数からHpBarをGet配置。そこから線を伸ばしてUpdateHpBarを配置。UpdateHpBarは左上からセットとも繋ぐ。
UpdateHpBarのIn Percentに現在のHPを伝える必要がありますが、Progress BarのPercentは1.0で満タンですから、素直に線を繋げるとおかしくなります。0～1.0の基準に合わせるために現在HP÷最大HPの計算が必要です。
セットの右下から線を伸ばして/キーを押して除算する(÷)を配置。その下の0.0には変数欄からMaxHpをGet配置して繋ぐ。そして割り算の結果をIn Percentに繋ぎます。
現在のライフが80なら、80÷100で0.8。Progress Barの8割が青くなります。
ノードを組む
回復アイテムを作った時のノードにもHPバー更新のノードをつけます。
回復によってHPが最大HPを超えたら、最大HPの値をHPにセットします。
回復アイテムを作った時のノードにもHPバー更新のノードをつけます。
回復によってHPが最大HPを超えたら、最大HPの値をHPにセットします。
ウィジェットブループリントの編集
2本のHPゲージの動きに時間差をつける
ここまでは上側(緑)のProgress Barのみがダメージを反映している状態です。時間差をつけて下側(赤)のProgress Barも減少させます。
UI_HpBarの編集
ノードを組む
UI_HpBarを開き、イベントグラフ編集。
Set Percentから線を伸ばしてDelayを配置。そのDurationに1.0と入力。これは単に1秒待たせるだけのノードです。
左メニュー変数で+を押して変数(Boolean)を追加。名前はBackHpBarにします。
BackHpBarをSet配置してDelayの後に繋げます。BackHpBarのチェック欄にチェックを入れる。
ダメージを受けてHPが変動すると、BackHpBarにチェックが入るわけです。
UI_HpBarを開き、イベントグラフ編集。Set Percentから線を伸ばしてDelayを配置。そのDurationに1.0と入力。これは単に1秒待たせるだけのノードです。
左メニュー変数で+を押して変数(Boolean)を追加。名前はBackHpBarにします。
BackHpBarをSet配置してDelayの後に繋げます。BackHpBarのチェック欄にチェックを入れる。
ダメージを受けてHPが変動すると、BackHpBarにチェックが入るわけです。
ノードを組む イベント Tick
イベント Tickから線を伸ばしてブランチを配置。ConditionにはBackHpBarをGetして繋げます。
変数のHpBar_BackをGet配置。そこから線を伸ばしてSet Percentを配置し、ブランチのTrueから繋ぐ。
Set PercentのIn Percentから線を伸ばしてFInterp Toを配置。
変数のHpBar_BackをGet配置して、そこから線を伸ばしてPercentを取得。それをFInterp ToのCurrentに繋ぐ。現在のHPバー(下)の値です。
変数のIn PercentをGet配置して、FInterp ToのTargetに繋ぐ。
イベント TickのIn Delta TimeをFInterp ToのDelta Timeに繋ぐ。
FInterp ToのInterp Speedはゲージの減少する速度です。値が小さいほどゲージがゆっくり減少します。5.0にしておきます。
変数のHpBar_BackをGet配置して、そこから線を伸ばしてPercentを取得。
変数のHpBar_FrontをGet配置して、そこから線を伸ばしてPercentを取得。
これのPercentから==キーを押してNearly Equal (float)を配置。
Error Toleranceは0.001にしておきます。Return Valueからブランチを配置。
Set Percentからブランチに線を繋ぐ。
BackHpBarをSet配置してブランチのTrueから繋げる。
イベント Tickから線を伸ばしてブランチを配置。ConditionにはBackHpBarをGetして繋げます。
変数のHpBar_BackをGet配置。そこから線を伸ばしてSet Percentを配置し、ブランチのTrueから繋ぐ。
Set PercentのIn Percentから線を伸ばしてFInterp Toを配置。
変数のHpBar_BackをGet配置して、そこから線を伸ばしてPercentを取得。それをFInterp ToのCurrentに繋ぐ。現在のHPバー(下)の値です。
変数のIn PercentをGet配置して、FInterp ToのTargetに繋ぐ。
イベント TickのIn Delta TimeをFInterp ToのDelta Timeに繋ぐ。
FInterp ToのInterp Speedはゲージの減少する速度です。値が小さいほどゲージがゆっくり減少します。5.0にしておきます。
変数のHpBar_BackをGet配置して、そこから線を伸ばしてPercentを取得。
変数のHpBar_FrontをGet配置して、そこから線を伸ばしてPercentを取得。
これのPercentから==キーを押してNearly Equal (float)を配置。
Error Toleranceは0.001にしておきます。Return Valueからブランチを配置。
Set Percentからブランチに線を繋ぐ。
BackHpBarをSet配置してブランチのTrueから繋げる。
FInterp Toは、現在の値(Current)から目的の値(Target)までゆっくり変動させるノードです。
Nearly Equalは「ほぼ同じ」という意味です。HPゲージ(上側)とHPゲージ(下側)の値がほぼ同じになったら変数BackHpBarのチェックを外しています
Nearly Equalは「ほぼ同じ」という意味です。HPゲージ(上側)とHPゲージ(下側)の値がほぼ同じになったら変数BackHpBarのチェックを外しています
テストプレイ
プレイヤーキャラクターがダメージを受ける環境を作っていない時のテストのためのノードを組みます。
ノードを組む
スペースキーを押すとダメージを受けるようにします。
スペースバーを配置。他のキーでもゲームパッドのボタンでも構いません。
そこから線を伸ばしてApply Damageを配置。
Damaged Actorから線を伸ばしてGet a reference to selfを配置。
Base Damageを30.0にしておきます。
スペースキーを押すとダメージを受けるようにします。
スペースバーを配置。他のキーでもゲームパッドのボタンでも構いません。
そこから線を伸ばしてApply Damageを配置。
Damaged Actorから線を伸ばしてGet a reference to selfを配置。
Base Damageを30.0にしておきます。
これでテストプレイをして、HPゲージが正しく動けば成功です。
先に緑ゲージが減り、遅れて赤ゲージが減ります。
MPバー
ウィジェットブループリントの編集
デザイナーを開く。
HpBar_Frontを複製してMpBarにしました。
スロット > アンカーを左上にします。
スロット > 位置 Xがライフゲージ左側の隙間。100にしました。
スロット > 位置 Yがライフゲージ上側の隙間。110にしました。
スロット > サイズ Xがライフゲージの横幅。600にしました。
スロット > サイズ Yがライフゲージの縦幅。18にしました。
スタイル > Style > Background Image > TintのAを1.0にします。MPバーは重ねないので透明化しません。
プログレス > Parcentを0にします。
アピランス > Fill Color and Opacityは紫にしました。
イベントグラフを開く。
ノードを組む
空いている場所で右クリックしてカスタムイベントを追加し、名前はUpdateMpBarにします。HPゲージを更新させるためのイベントです。
左の変数欄からMpBarをドラッグ&ドロップでGet配置。そこから線を繋いでSet Percentを配置。Set PercentのIn Percentから線を伸ばしてUpdateMpBarに繋げます。繋がらないようで繋がります。
そしたらこの線をすぐに切ってUpdateMpBarのIn Percentから線を伸ばして変数へ昇格。名前をInPercentMpにします。
UpdatepBar→セット(In Percent)→Set Percentを2本の線で繋ぐ。
空いている場所で右クリックしてカスタムイベントを追加し、名前はUpdateMpBarにします。HPゲージを更新させるためのイベントです。
左の変数欄からMpBarをドラッグ&ドロップでGet配置。そこから線を繋いでSet Percentを配置。Set PercentのIn Percentから線を伸ばしてUpdateMpBarに繋げます。繋がらないようで繋がります。
そしたらこの線をすぐに切ってUpdateMpBarのIn Percentから線を伸ばして変数へ昇格。名前をInPercentMpにします。
UpdatepBar→セット(In Percent)→Set Percentを2本の線で繋ぐ。
BPI_GetExpの編集
Mpという名前にしていますが、敵を倒すとバーが溜まっていき、満タンになると必殺技が使えるシステムです。
Expと同じように入手できるようにしますから、ブループリントインターフェースのBPI_GetExpに関数を追加し、名前をGetMpにします。
そのインプットを+し、名前をMp、型をFloatにします。
そのインプットを+し、名前をMp、型をFloatにします。
プレイヤーブループリントの編集
ノードを組む
イベント Get Mpを配置。
ノードの組み方はHPの回復と同じです。
ウィジェットの名前がHpBarですからターゲットはMpBarではなくHpBarです。
イベント Get Mpを配置。
ノードの組み方はHPの回復と同じです。
ウィジェットの名前がHpBarですからターゲットはMpBarではなくHpBarです。
コメント
変数欄のHpとMaxHpの変数ピンタイプがわからないです
HPやMPの変数はFloat(小数)の単一です。
他にも攻撃力や防御力などの値もFloat(小数)で設定するのが一般的なようです。レベルはInteger(整数)ですけど。