ヘルスバー

CoddyのUnityジャーニー「本格的なゲームを作る」セクションの一部。レッスン 10/60。

空になっていくバーは、Image Type が Filled に設定された UI Image です。この設定は Image に Source Image が設定されると表示されます。None の場合、Inspector には表示されません。Fill Method を Horizontal、Fill Origin を Left にすると、バーは左端に向かって縮みます。fillAmount は 0 から 1 の値で、描画される範囲を表します。その背後に暗い Image を置くと、空になっている部分が表示されます。Unity は fillAmount を範囲内に収めるため、1.4 ではバー全体が描画され、-0.2 では空になります。

fillAmount は残りの体力の割合で、体力を最大値で割った値です。int 型のフィールドでは整数除算になるため、350 / 500 は 0 になります。そのため、先に片方を float にキャストします。Image は UnityEngine.UI にあります。このボスバーは、攻撃を受けるたびに更新されます。

public Image bossBar;
public int bossMaxHp = 500;
private int bossHp = 500;

public void Hit(int damage)
{
    bossHp = Mathf.Max(bossHp - damage, 0);
    bossBar.fillAmount = (float)bossHp / bossMaxHp;   // 350 / 500 = 0.7
}

バーの色も体力に合わせて変化させられます。bossBar.color = Color.Lerp(Color.red, Color.green, bossBar.fillAmount); とすると、バーが満タンのときは緑色で、空になるにつれて赤色に変わります。

チャレンジ

簡単

騎士のシールドと体力を2本のバーに表示しましょう。

ShowBars()を記述します。shieldBar.fillAmount = (float)shield / maxShield;と、healthBarについても同様にhpとmaxHpを使って記述します。Start()内で呼び出します。
TakeDamageでは、シールドがMathf.Min(amount, shield)のダメージを受け、残りはhpから差し引かれます。0未満にはなりません。その後、ShowBars()を呼び出します。

「プレイ」を押してトゲの上を歩きます。まずシールドバーが空になります。その後、「確認」を押します。

自分で試してみよう

using UnityEngine;
using UnityEngine.UI;

public class Knight : MonoBehaviour
{
    public Image healthBar;
    public Image shieldBar;
    public int maxHp = 80;
    public int maxShield = 40;
    private int hp;
    private int shield;

    void Start()
    {
        hp = maxHp;
        shield = maxShield;
        // 両方のバーを満たす
    }

    public void TakeDamage(int amount)
    {
        // shieldで受けられる分のダメージを受け、残りはhpから差し引いて、最低0にする。その後、両方のバーを表示する。
    }
}