【以前の投稿】
2DゲームにHPバーを実装する
今回は、2DゲームのHPバーを実装します。
プレイヤーの体力（HP）を視覚的に表現する「HPバー」は欠かせない要素の一つです。
以下の実装をします。
- HPバーを作成し、配置する
- スクリプトでHPバーを制御する
手順
1. プロジェクトの準備
Unityで新しい2Dプロジェクトを作成。
- Unity Hub を開き、「New project」をクリック。
- 「2D」テンプレートを選択し、プロジェクト名と保存場所を指定して「Create project」をクリック。
2. UIキャンバスの作成
HPバーなどのUI要素を配置するためのキャンバスを作成。
- Hierarchy ウィンドウで右クリック -> 「UI」-> 「Canvas」を選択。
- これにより、
CanvasとEventSystemオブジェクトがシーンに追加。
- これにより、
Canvasオブジェクトを選択し、Inspector ウィンドウで以下のように設定。Render Mode:Screen Space - Cameraに変更。Render Camera: シーン内のMain Cameraをドラッグ＆ドロップ。Canvas ScalerコンポーネントのUI Scale ModeをScale With Screen Sizeに変更。Reference Resolutionをゲームの解像度 (例: X: 1920, Y: 1080) に設定。今回は例として、X:1920 Y:1080。Matchを 0.5 に設定。
これらの設定により、異なる解像度の画面でもUIが崩れにくくなる。
3. HPバーの作成
次に、HPバーを作成します。HPバーは、背景部分とゲージ部分の2つの Image で構成します。
3-1. 背景部分 (HPBarBackground) の作成
- Hierarchy ウィンドウで
Canvasを右クリック -> 「UI」-> 「Image」を選択。 - 作成された
Imageオブジェクトの名前をHPBarBackgroundに変更。 HPBarBackgroundを選択し、Inspector ウィンドウで以下のように設定。Rect Transformコンポーネント:Anchors: 左上に設定 (Min: X=0, Y=1, Max: X=0, Y=1)Pivot: 左上に設定 (X=0, Y=1)Pos X,Pos Y: 左上からの位置を調整 (例: X=20, Y=-20)Width,Height: バーのサイズを調整 (例: Width=200, Height=30)
Imageコンポーネント:Source Image: 無し（デフォルトのままでOK） もしくは、ProjectウィンドウのAssetsを右クリック、CreateからSpritesからSquareを選択。Source Imageにドラッグ&ドロップColor: 背景色を調整 (例: 暗い赤色)
3-2. ゲージ部分 (HPBarFill) の作成
- Hierarchy ウィンドウで
HPBarBackgroundを右クリック -> 「UI」-> 「Image」を選択。 - 作成された
Imageオブジェクトの名前をHPBarFillに変更。 HPBarFillを選択し、Inspector ウィンドウで以下のように設定。Rect Transformコンポーネント:Anchors: 左に設定 (Min: X=0, Y=0, Max: X=0, Y=1)Pivot: 左に設定 (X=0, Y=0.5)Pos X,Pos Y:0に設定Width:HPBarBackgroundと同じ幅に設定 (例: 200)Height:HPBarBackgroundと同じ高さに設定 (例: 30)
Imageコンポーネント:Source Image: Source Imageに画像をドラッグ&ドロップImageコンポーネント: *Image Type:Filled*Fill Method:Horizontal*Fill Origin:Leftに設定Color: ゲージの色を調整 (例: 明るい赤色)
4. スクリプトによる制御
スクリプトを作成して、プレイヤーのHPとHPバーを連動させます。
- Project ウィンドウで
Scriptsフォルダを作成 。 Scriptsフォルダ内で右クリック -> 「Create」-> 「C# Script」を選択。- スクリプト名を
HPBarControllerに変更。 - 作成した
HPBarController.csをダブルクリックして開き、以下のコードを記述。
using UnityEngine;
using UnityEngine.UI;
public class HPBarController : MonoBehaviour
{
public Image fillImage; // HPバーのゲージ部分 (HPBarFill)
public PlayerController player; // プレイヤーのスクリプト
private RectTransform fillRectTransform;
private float maxWidth;
private void Start()
{
fillRectTransform = fillImage.GetComponent<RectTransform>();
maxWidth = fillRectTransform.sizeDelta.x; // ゲージの元の幅を記録
}
private void Update()
{
if (player != null)
{
// HPの割合を計算
float healthPercentage = (float)player.currentHealth / player.maxHealth;
// ゲージの幅をHPの割合に合わせて変更
fillRectTransform.sizeDelta = new Vector2(maxWidth * healthPercentage, fillRectTransform.sizeDelta.y);
}
}
}
Canvasオブジェクト (または別の UI オブジェクト) にHPBarControllerスクリプトをアタッチ。- Inspector ウィンドウで、
HPBarControllerコンポーネントの以下の変数を設定。Fill Image: Hierarchy ウィンドウからHPBarFillオブジェクトをドラッグ＆ドロップ。Player: Hierarchy ウィンドウからPlayerオブジェクトをドラッグ＆ドロップ。
5. プレイヤー側のスクリプト (PlayerController) の準備
プレイヤーの HP を管理し、ダメージを受けたときに HP を減らすスクリプトが必要です。
ここでは例として、PlayerController.cs というスクリプトを Player オブジェクトにアタッチし、以下のコードを記述します (既に同様のスクリプトがある場合は、必要な部分を追加してください)。
using UnityEngine;
public class PlayerController : MonoBehaviour
{
// 他の変数や関数は省略...
public int maxHealth = 100; // 最大HP
public int currentHealth; // 現在のHP
void Start()
{
currentHealth = maxHealth; // ゲーム開始時にHPを最大値に設定
}
public void TakeDamage(int damage)
{
currentHealth -= damage;
Debug.Log("Player HP: " + currentHealth);
if (currentHealth <= 0)
{
Die();
}
}
void Die()
{
// プレイヤーが倒されたときの処理
Debug.Log("Player Down!");
Destroy(gameObject);
}
// 敵と衝突したときにダメージを受ける処理の例 (必要に応じて追加)
void OnCollisionEnter2D(Collision2D collision)
{
if (collision.gameObject.CompareTag("Enemy"))
{
TakeDamage(10); // 例として、敵に衝突したら10ダメージ
}
}
}
7.表示されない場合
- Projectウィンドウから作成した
SpritesをHierarchyウィンドウで作成したHPBarFillとHPBarBackgroundにドラッグ＆ドロップで関連付けられていない可能性がある。 - PlayerControllerの
currentHealthがStart関数で100になっているか確認する。
