こんにちは！夜の街2Dアクションゲームを制作中の怪獣です🦖
前回の記事では、敵を作る方法を解説しました👾
今回はそこから一歩進んで、プレイヤーが敵に触れたら体力が減る仕組みを作ってみましょう👾
さらに、体力UI（HPバー）を画面に表示して、減っていく演出も追加します！
⬇️画像のように、左上に赤いHPバーを作成していきます！
完成イメージ
- 画面左上にHPバーが表示される
- プレイヤーが敵に触れるとHPバーが減る
- HPが0になったらプレイヤーが倒れる（Unity入門⑨で追加予定）
① 体力UI（HPバー）の準備
① 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処理を追加（Player.cs）
以下のように、Player.csに体力変数とダメージ処理を追加します⬇️
using UnityEngine;
using UnityEngine.UI; // ← UIを扱うために追加
public class Player : MonoBehaviour
{
[SerializeField, Header("最大HP")]
private int _maxHP = 5;
private int _currentHP;
[SerializeField, Header("HPバーのImage")]
private Image _hpBarFill;
private void Start()
{
_currentHP = _maxHP;
_UpdateHPBar();
}
// 敵に触れたときの処理
private void OnCollisionEnter2D(Collision2D collision)
{
if (collision.gameObject.CompareTag("Enemy"))
{
_TakeDamage(1);
}
}
// ダメージ処理
private void _TakeDamage(int damage)
{
_currentHP -= damage;
_currentHP = Mathf.Clamp(_currentHP, 0, _maxHP);
_UpdateHPBar();
if (_currentHP <= 0)
{
Debug.Log("プレイヤーが倒れました");
// 次回以降でリスポーンなどの処理を追加予定
}
}
// HPバーの見た目を更新
private void _UpdateHPBar()
{
if (_hpBarFill != null)
{
_hpBarFill.fillAmount = (float)_currentHP / _maxHP;
}
}
}
OnCollisionEnter2D()は「ぶつかったときに呼ばれる処理」です。
今回はここで敵かどうかを判定して、ダメージ処理を呼び出してHPバーの見た目を更新するようにしています。
各処理の詳しい説明は別記事で解説していますので、ご興味あればこちらを参照ください👾
③ 敵オブジェクトの設定
Enemyオブジェクトに Tag: Enemy を新規作成をして設定します。Rigidbody2DとCollider2Dをつけて、物理的に触れられる状態にします。
➡️これで、プレイヤーと敵がぶつかると OnCollisionEnter2D が発動します。
④ プレイヤーのInspector設定
_hpBarFillの欄に、Canvas上の HPBar_Fill をドラッグして割り当てます。
動作確認
- プレイヤーと敵を配置してプレイ
- 敵に触れるとHPバーがスッと減るのを確認
- 体力が0になると、コンソールに「プレイヤーが倒れました」と表示
➡️敵に触れたら赤いバーが減っていくようになりました！
まとめ
- 敵にぶつかると体力が減る仕組みを追加
- HPバーをUIとして表示して、減少を視覚化
- 体力が0になると「倒れた状態」にできるよう準備
最後まで読んでいただきありがとうございました！
体力UIを視覚的に作り、徐々に減少していく演出をさせることが出来ました！
これにプラスして、体力が0になったら「ゲームオーバー」と表示させるのが一般的ですよね。
次の記事では、体力が0になったときにゲームオーバー演出を出す処理を追加していきます！
コメント