こんにちは！夜の街2Dアクションゲームを作成中の怪獣です🦖
Unityで、
「体力UIを表示させるようにしたい」
「HPを数値だけで管理すると、プレイヤーにとって分かりづらい…」
ということはありませんか？
そんなときは、減っていくHPバー（体力ゲージ） を表示すると一気にゲームらしくなります！
この記事では、
UnityのImageコンポーネントの「Fill」機能を使ってHPバーを作る簡単な方法 を解説します！
※当記事は、HPゲージUIを作る方法を中心で解説しています。
⬇️ダメージ処理を受ける＋HPゲージUI込みで流れで作りたい方はこちらの記事を見るとスムーズです
⬇️こちらは、ダメージ処理を判定させる方法に特化した記事です
この記事でできること
- 画面にHPバーを表示できる
- ダメージを受けるとHPバーが減る
Image.fillAmountを使ったUI制御が理解できる
① HPバーUIを作る
① Canvasを作成
まずはUIの土台となるCanvasを作ります。
Canvas（キャンバス）とは、一言でいうと
Unityで「UIを表示するための土台（画面）」です。
テキスト、ボタン、パネルなどの UI要素は、必ず Canvas の子オブジェクトとして配置されます。
Hierarchy → 右クリック → UI > Canvas で作成します。
② HPの枠部分のバーを作る
背景バーのベースとなる枠部分を追加します！
①で作ったCanvasを選択 → 右クリック → UI → Imageを追加します
追加したImageを選択し、以下を変更します。
- 名前：HPBar_Backに変更
- 色：黒やグレーに変更する
- サイズ：横長（例：300×30ぐらい）
③ ゲージ部分を作る（赤のバー）
②で作った背景バーに対して、子オブジェクトとしてゲージ部分を作ります！
この③で作る部分はゲージのHPが減る見た目の赤い部分を指しています。
②で作ったHPBar_Backを選択→ 右クリック → UI → Imageを追加します
（親子関係にするのがポイントです💡）
追加したImageを選択し、以下を変更します。
- 名前：「HPBar_Fill」に変更する
- Inspector
>Image > Source Imageを適当なスプライトに設定する（Squareなど） - Color：赤など
- Image Type：Filledに変更（画像を少しずつ消したり、伸ばしたりできる機能にする）
- Fill Method：Horizontalに変更（横に左→右（または右→左）にゲージが減るようになる）
- Fill Origin：Leftに変更（左から減る）
➡️これで「左から減るHPバー」仕組みになります！
- 背景（Back）：HPの枠
- 前面（Fill）：実際に減る部分
こうして分けることで、見た目調整がしやすくなります！
② HPを減少させるソースコード
今回はHPバーUIの動きを確認しやすいように、Spaceキーを押すとHPが減るサンプルで解説します。ダメージを受ける処理の代わりに、Spaceキーを押すたびにゲージが減少していくことが確認できます。
using UnityEngine;
using UnityEngine.UI;
public class Player : MonoBehaviour
{
[SerializeField, Header("最大HP")]
private int _maxHP = 5;
[SerializeField, Header("HPバーのImage")]
private Image _hpBarFill;
private int _currentHP;
private void Start()
{
_currentHP = _maxHP;
_UpdateHPBar();
}
void Update()
{
// Spaceキーを押したらHPを1減らす
if (UnityEngine.Input.GetKeyDown(KeyCode.Space))
{
_currentHP--;
_currentHP = Mathf.Clamp(_currentHP, 0, _maxHP);
_UpdateHPBar();
}
}
private void _UpdateHPBar()
{
if (_hpBarFill == null) return;
_hpBarFill.fillAmount = (float)_currentHP / _maxHP;
}
}③ コードを1行ずつ解説
HPを管理する変数
[SerializeField] private int _maxHP = 5;
private int _currentHP;_maxHP は最大HPです。_currentHP は現在のHPです。
SerializeField を付けているので、Inspector から数値を調整することもできます。
StartでHPを初期化する
private void Start()
{
_currentHP = _maxHP;
}ゲーム開始時に、現在HPを最大HPと同じ値にしています。
これを入れておくことで、最初から満タンの状態でスタートできます！
HPバー更新処理
private void _UpdateHPBar()
{
if (_hpBarFill == null) return;
_hpBarFill.fillAmount = (float)_currentHP / _maxHP;
}ここで「見た目（UI）」を更新しています。
_hpBarFill.fillAmountは赤いゲージ部分の長さとなる部分です。
現在HPからMAXHPを割って今の体力の割合を求め、_hpBarFill（赤いゲージ部分のImage）にセットしています。
こうすることで、バーの長さを少しずつ削って体力が変動するように見せています！
④ プレイヤー側にバーをセットする
Playerオブジェクトを選択し、Inspectorの「HP Bar Fill」に対して、作ったHPBar_Fillをドラッグ＆ドロップします！
これを忘れると動かないので注意です！
❌よくあるエラー
HPバーが減らない
原因：
- Image Typeが「Simple」になっている
➡️ 必ず「Filled」にする
NullReferenceExceptionが出る
原因：
- _hpBarFillの設定忘れの可能性大
➡️ ④の手順通り、Inspectorの「HP Bar Fill」に対して、作ったHPBar_Fillをドラッグ＆ドロップする
まとめ
最後まで読んでいただきありがとうございました。
ImageのFill機能を使ったHPバー（体力UI）の作り方を解説しました！
動作確認はSpaceキーで行いましたが、実際のゲームでは敵に触れたときにHPを減らす形にしています。
敵に触れたらダメージを受ける処理の仕組みは、こちらの記事で詳しく解説しているので、
合わせて実装すると「敵に触れる」→「ダメージを受ける」→「HPを減らす」という風になり、一気にゲームらしくなります👾
コメント