Thanh máu

Thuộc phần Xây dựng trò chơi thực tế trong hành trình Unity của Coddy. Bài học 10 trên 60.

Một thanh vơi dần là một ảnh giao diện có Image Type được đặt thành Filled. Tùy chọn này xuất hiện khi ảnh có Source Image; nếu là None, Inspector sẽ ẩn tùy chọn đó. Fill Method Horizontal với Fill Origin Left làm thanh co về phía đầu bên trái, còn fillAmount, từ 0 đến 1, cho biết phần thanh được vẽ. Một ảnh tối phía sau hiển thị phần còn trống. Unity giới hạn fillAmount, vì vậy giá trị 1.4 vẫn vẽ thanh đầy, còn -0.2 vẽ thanh trống.

fillAmount là phần máu còn lại, tức máu hiện tại chia cho mức tối đa. Với các trường int, phép chia sẽ cho kết quả là số nguyên, nên 350 / 500 bằng 0. Vì vậy, trước tiên hãy ép kiểu một vế sang float. Image nằm trong UnityEngine.UI. Thanh máu của boss này được cập nhật sau mỗi lần trúng đòn:

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
}

Màu của thanh cũng có thể thay đổi theo lượng máu: bossBar.color = Color.Lerp(Color.red, Color.green, bossBar.fillAmount); thanh có màu xanh lá khi đầy và chuyển dần sang đỏ khi vơi đi.

Thử thách

Dễ

Hiển thị khiên và máu của hiệp sĩ trên hai thanh.

Viết ShowBars(): shieldBar.fillAmount = (float)shield / maxShield;, và làm tương tự với healthBar bằng hp và maxHp. Gọi hàm này trong Start().
Trong TakeDamage, khiên chịu Mathf.Min(amount, shield) sát thương, phần còn lại trừ vào hp, nhưng không để máu giảm xuống dưới 0. Sau đó gọi ShowBars().

Nhấn Chơi rồi đi lên gai: thanh khiên sẽ cạn trước. Sau đó nhấn Kiểm tra.

Tự làm thử

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;
        // Lấp đầy cả hai thanh
    }

    public void TakeDamage(int amount)
    {
        // Khiên hấp thụ sát thương tối đa có thể; phần còn lại trừ vào hp, nhưng không thấp hơn 0. Sau đó, cập nhật cả hai thanh.
    }
}