こんにちはAM0500です。
今回はアクションゲームメーカーでキャラクターの上に表示するHPバー（体力ゲージ）の作り方を説明します。同じノードでも変数を工夫すれば「タイマーゲージ」や「必殺技ゲージ」など、さまざまな応用も可能です。
以下は実際に配置を行ってみた例です。
アクションゲームメーカーでは、以下の2種類のゲージが用意されています。
-
SimpleGauge（簡易ゲージ：色指定で表現するタイプ）
-
ImageGauge（画像ゲージ：テクスチャを使って表現するタイプ）
それぞれの特徴と使い方を順に解説していきます。
※上記はアクションゲームメーカー用に用意されたゲージ用のノードです。Godotをベースにしているので、Godot用のゲージを作るノード「ProgressBar」と「TextureProgress」も存在していますが、パラメータの指定が難しいので、アクションゲームメーカー用のSimpleGaugeとImageGaugeを使用するのをおすすめします。
1. SimpleGauge（簡易ゲージ）
特徴
-
シンプルに「ゲージ色」「背景色」を指定して表示できる。
-
素早く作成でき、動作も軽量。
-
画像を用意しなくてもよい。
作成手順
-
シーンに SimpleGauge ノードを追加します。（右クリックの「子ノード追加」の画面で検索すると見つけやすいです。）
-
変数名 に「hp」を指定（プレイヤーや敵のHP変数に対応させる）。
-
最大値には「max_hp」を指定。
-
「最大値として変数を使用」をオンにして、最大体力に応じたゲージ長に調整できます。
-
-
ゲージ色と背景色を設定。たとえば「緑：HP」「赤：背景」といった形。
-
プレイヤーや敵の上に配置して完成です。
2. ImageGauge（画像ゲージ）
特徴
-
任意の画像（テクスチャ）をゲージとして利用可能。
-
よりリッチなデザインを作れる。
-
9スライス（Nine Patch Stretch）に対応し、伸縮しても破綻しにくい。
作成手順
-
シーンに ImageGauge ノードを追加します。
-
変数名 に「hp」を設定。
-
最大値を必要に応じて「max_hp」にリンク。
-
「テクスチャ」欄に、ゲージ画像（空バーと進行バー）を設定。
-
Under：背景用の画像。
-
Over：ゲージ部分の画像。
-
進捗：動的に伸び縮みするバー部分。
-
-
ゲージの表示方向は Fill Mode で変更可能（例：Left to Right）。
3. ゲージの応用例
-
タイマーゲージ：変数を「残り時間」に設定すれば、時間経過をゲージで表現できます。
-
必殺技ゲージ：攻撃を当てると溜まっていくゲージにするなど、変数の設定を変えるだけで応用可能です。
【注意】向きに合わせてゲージが反転します
キャラクターのアニメーションセットの所で、自動でY軸反転を使っていると、ゲージも自動で反転する事を確認しました。この画像が分かりやすいと思いますが、左を向いているキャラクターのゲージが左右反転しているのがわかると思います。
これを避けるには：
-
方法1：自動でY軸反転を使用しない。
→ Y軸反転を外し、左右別々のアニメーションを設定する。 -
方法2：UI用の所にゲージを作成してしまう。
→ 公式チュートリアルで行っている方法ですがキャラに追従させず、画面の位置に固定してしまう方法です。
SimpleGauge（シンプルゲージ）のプロパティ解説
変数タイプ / 変数名
ImageGauge と同じで、対象とするオブジェクトと変数を指定します。
ゲージ色 / 背景色
ゲージ部分と背景部分の色を直接指定します。画像を使わない分、軽量です。
最大値として変数を使用
最大値を固定値ではなく、別の変数にできます。
最大値のオートスケール
状況に応じて最大値を自動調整します。HPやゲージの上限が変化する場合に便利です。
Fill Mode
ゲージの伸びる方向を設定します。横方向、縦方向などを選択できます。
Show Percentage
ゲージの値をパーセントで表示するかどうかを切り替えます。
Indeterminate
不確定表示モード。読み込み中のアニメーションのように使えます。
Min / Max / Value
ゲージの最小値、最大値、現在値を設定します。
Step / Page / Exp Edit / Rounded / Allow Greater / Allow Lesser
ImageGaugeと同じ動作です。値の増減方法や入力の制御を行います。
ImageGauge（画像ゲージ）のプロパティ解説
変数タイプ
ゲージが参照する対象を指定します。自分自身か、特定のオブジェクトを選びます。
変数名
ゲージの現在値に使う変数名を指定します。例：hp。
最大値として変数を使用
最大値を数値で固定するか、別の変数を指定するかを切り替えます。
Fill Mode（塗り方向）
ゲージがどの方向に伸びていくかを指定します。横（左から右など）、縦、円形などを選べます。
Nine Patch Stretch
画像を9分割して伸縮させる機能です。枠を歪ませずに拡大縮小ができます。
テクスチャ（Under / Progress / Over）
-
Under：ゲージの背景画像
-
進捗：ゲージの進捗部分の画像
-
Over：上に重ねる装飾画像
Progress Offset
進捗画像の位置を微調整します。
Tint（色調整）
ゲージの背景や進捗に色をかぶせられます。HPが減ったら赤くする演出に使えます。
Min / Max / Value
最小値・最大値・現在値を設定します。現在値をHPなどに割り当てます。
Step
値の刻み幅です。1なら整数ごと、0.1なら小数点も扱えます。
Page
値をまとめて増減させる単位です。
Exp Edit
スライダー操作を指数的にして細かい調整をしやすくします。
Rounded
値を四捨五入して整数にします。
Allow Greater / Allow Lesser
最小値や最大値の範囲を超えた値を許可するかどうかを設定します。
まとめ
HPゲージはゲーム中の分かりやすい情報提示に必須の要素です。
SimpleGaugeは手軽に実装でき、ImageGaugeはデザイン性に優れています。
プロジェクトの用途に応じて使い分けるのがおすすめです。
さらに、タイマーや必殺技ゲージなどにも応用できるので、ぜひ工夫してみてください。
【演出のコツ】HPバーを「プロっぽく」見せるための調整
ProgressBarを表示させた後、さらにひと工夫加えるだけで、ゲームのクオリティがぐっと上がります。私が実際に設定してみて感じたポイントを紹介します。
① 「色の変化」で危機感を演出する
デフォルトでは単色ですが、HPが減った時にバーの色が変わるように見せたい場合、AGMakerの「条件付きレンダリング」やVS（ビジュアルスクリプト）を組み合わせるのが有効です。
例： HPが30%以下になったら、ProgressBarのカラープロパティを「赤」に変更するようにスクリプトを組むと、プレイヤーにピンチを直感的に伝えられます。
② 「非表示」をうまく活用する
常に頭上にHPバーが出ていると、画面がごちゃついて見えることがあります。
テクニック： 普段はバーの透明度（Alpha）を0にしておき、**「ダメージを受けた瞬間から5秒間だけ表示する」**といった制御を入れると、画面がスッキリし、必要な時だけ情報を提示する洗練されたUIになります。
③ バーのサイズと解像度のバランス
ドット絵のゲームの場合、HPバーが滑らかすぎると浮いてしまうことがあります。あえてバーのサイズを小さめにし、ドットの質感を合わせることで、ゲームの世界観に馴染ませることができます。
前回記事：アクションゲームメーカーで「LightOccluder2D」「PointLight2D」を使用して影を自動生成する方法
0 件のコメント:
コメントを投稿