春日部つむぎ no ゲーム作ってみよう!【UE5/UE4】 - スタミナゲージ【UE5/UE4】


https://youtu.be/mlUW-tafMjg

00:00 オープニング
00:23 1.スタミナの減算
03:10 2.スタミナの回復
05:57 3.ウィジェットの作成
07:54 4.バインド
10:32 5.ウィジェットの表示
11:41 ざっくりまとめ!
12:05 エンディング

起動


■スタミナゲージ作るよ!

・ある行動をするたびにキャラクターはスタミナを消費する
・その値が一定を下回ると実行することができなくなる
・通常の状態ではスタミナは徐々に回復する

1.Float型変数の追加

ThirdPersonCharacterのブループリントを開き、イベントグラフを開く。

変数を作成します。

Float型変数「Stmina」 :  スタミナの現在値 デフォルト値100

Float型変数「MaxStmina」 :  スタミナの最大値 デフォルト値100

2.ある行動実行時にスタミナを減算 00:23


スタミナの減算


例えば、P キー押すとスタミナを消費するようにします。

キーボードイベントP キーを配置します。

Branchノードを配置し、キーボードイベントP キーのPressedにつなぎます。

変数「Stmina」をドラッグアンドドロップでし、Getノードで配置します。

変数「Stmina」からパルスを伸ばし、条件式「>=」を配置し、値に20を記入。

条件式「>=」をBranchノードのConditionにつなぎます。

変数「Stmina」をドラッグアンドドロップでし、Setノードで配置し、
BranchノードのTrueにつなぎます。

変数「Stmina」をドラッグアンドドロップでし、Getノードで配置し、
パルスを伸ばし、条件式「-」を配置し、値に20を記入。
 
条件式「-」を変数「Stmina」Setノードにつなぎます。

テストプレイ用にPrint Stringでテキスト表示します。

Print Stringノードを配置します。
変数「Stmina」をドラッグアンドドロップでし、Getノードで配置し、
Print StringノードのInTextピンにつなぎます。

これでスタミナ値が20以上の時、P キーを押すとスタミナ値が20消費されます。

3.スタミナの回復 03:10


スタミナの回復


例えば、Q キー押すとスタミナを回復するようにします。

キーボードイベントQ キーを配置します。

変数「Stmina」をドラッグアンドドロップでし、Setノードで配置します。
キーボードイベントQ キーのPressedにつなぎます。

変数「Stmina」をドラッグアンドドロップでし、Getノードで配置します。

変数「Stmina」Getノードからパルスを伸ばし、条件式「+」を配置し、値に30を記入。

条件式「+」を変数「Stmina」Setノードとつなぎます。

次は、回復の最大値がMaxStminaを超えないようにします。

Branchノードを配置し、変数「Stmina」Setノードとつなぎます。

変数「MaxStmina」をドラッグアンドドロップでし、Getノードで配置します。

変数「Stmina」からパルスを伸ばし、条件式「>」を配置し、

条件式「>」をBranchノードのConditionにつなぎます。

(+30)したStminaがMaxStminaを超えていれば、MaxStminaに上書きします。

変数「MaxStmina」をドラッグアンドドロップでし、Setノードで配置し、
BranchノードのTrueにつなぎます。

変数「MaxStmina」をドラッグアンドドロップでし、Getノードで配置し
変数「MaxStmina」Setノードにつなぎます。

これでスQ キーを押すたびに、スタミナ値が最大値「100」の範囲で30回復します。

テストプレイ用にPrint Stringでテキスト表示します。

回避アクションや武器アクション時のスタミナに使用できますね

4.ポイントゲージと連動させる 05:57

4-1.ウィジェットの作成
右クリック-ユーザーインターフェース-WidgetBlueprintを選択します。
ファイル名を変更します。
StminaHPGauge
4-2.変数
キャラクターブループリント
変数「Stmina」
変数「MaxStmina」
4-3.デザイナー
ウィジェット(デザイナー)


ウィジェットブループリントを開きます。
「パネル」-「Canvas Panel」をドラッグアンドドロップし、サイズを1920×1080に合わします。
「一般」-「Progress Bar」から、ドラッグアンドドロップでProgress Barを配置します。
アンカーを左上に打ちます。

「Image」も配置して見栄えを良くします。

Progress Barの「詳細」-「プログレス」-「Percent」を設定します。
進捗をパーセントで表すものです。
例えば、0.4と記入すると、青いバーが表示されます。
アピランスで色を指定できます。
4-4.バインド 07:54

動的に変化させるために、バインドを編集します。
Petcentの右側にある「バインド」をクリックし、「バインディングを作成」をクリックします。
パラメータのブループリントが表示されます。
4-4-1.イベントグラフタブに移動します。

ウィジェットブループリント(イベントグラフ)


イベントConstruct
Add to Viewportで画面に追加された際に実行されるイベント
ウィジェットが表示された際に、最初に行われるイベントです。

プレイヤーキャラクターと連携させるために、Cast ノードを使用します。

Get Player Pawn ノードを配置し、
Return ValueピンからCast to BP_TherdPersonCharacter ノードを配置します。
※連動させたいプレイヤーキャラクターのブループリント
Cast to の右下のピンを変数に昇格します。
変数名を「MyPlayer」とします。
4-4-2.Get Percentタブ
ウィジェットブループリント(Get Percent)


Get Percentタブに切り替えます。
Progress Barの表示する計算式を作成します。
Percentの値が0が最小(0%)で1が最大(100%)ですので、
現在のStmina値 ÷ MaxStmina値で残りのStmina値をパーセントで表す事ができます。

変数MyPlayerをドラッグアンドドロップでGetノードを配置し、
パルスを伸ばし、Get StminaとGet MaxStminaノードを配置します。
Get Stminaからパルスを伸ばし、計算式「÷」を配置します。
乗算の下のピンはGet MaxStminaとつなぎます。
計算式「÷」をリターンノードのTeturn Valueとつなぎます。
これでMyPlayerのStmina値の割合を取得できます。

忘れずに、一度コンパイルします。

5.ウィジェットの表示 10:32


レベルブループリント


戦闘ステージに入るとゲージが表示されるようにしたいので、
今回はレベルブループリントを編集します。

ゲームをスタートするとタイトル画面が表示するように設定します。
ツールバーのブループリントからレベルブループリントを選択。
ノード:「BeginPlay」から出力ピンを伸ばし「ウィジェットを作成」を選択。
Classを作成したウィジェットブループリントに指定します。
ノード:「ウィジェットを作成」の出力ピンからパルスを伸ばし、
ノード:「Add to Viewport」を選択。
一旦、コンパイルしてゲームを起動してみます。
ちゃんと表示されましたね。

ざっくりまとめ! 11:41