使用UGUI实现多层血条效果

玩过DNF的玩家应该都对这种多层血条效果不陌生

不同层数的血条拥有对应的颜色，但是颜色种类不能太多，所以当血条层数多于颜色种类数量的时候，需要按照颜色设定来重复使用血条颜色

【例如，总共设定了3种颜色：红、黄、绿，分别对应1、2、3层血条的颜色，那么当血条层数为4时，血条颜色即为红色，5时为黄色，以此类推】

实现该效果的主要思路如下：

1. 将颜色信息保存到一个数组中，索引顺序根据颜色所对应的层数决定
2. 计算出当前血量的血条层数
3. 根据层数从数组里获取到对应的前景色
4. 根据前景色来获取背景色
5. 计算出要显示的血条长度

主要代码如下：

public class MultiLayerHPCtrl : MonoBehaviour {

    //背景色图片和前景色图片
    public Image background;
    public Image foreground;

    //血条信息
    public Text CurrentHPInfo;
    public Text CurrentHPLayer;

    //血条颜色信息数组 默认红黄绿蓝白
    public Color[] hpColors = { Color.red, Color.yellow, Color.green, Color.blue, Color.white };
    
    //一层血条的血量 默认100
    public int singleLayerHP = 100;

    //总血量 默认700
    public int totalHP = 700;

    //当前剩余血量
    private int currentHP;
    public int CurrentHP
    {
        get
        {
            return currentHP;
        }

        set
        {
            currentHP = value;
            CurrentHPInfo.text = CurrentHP.ToString();
            ShowHPLayer();
        }
    }

    private void Start()
    {
        CurrentHP = totalHP;
    }

    /// <summary>
    /// 改变血量
    /// </summary>
    public void ChangeHP(int num) {
        CurrentHP += num;
        if (CurrentHP <= 0)
        {
            CurrentHP = 0;
        }
    }

    /// <summary>
    /// 根据当前血量 来显示多层血条
    /// </summary>
    /// <param name="currentHP"></param>
    private void ShowHPLayer() {
        //0血的特殊情况
        if (CurrentHP == 0)
        {
            foreground.fillAmount = 0;
            CurrentHPLayer.text = "0";
            return;
        }

        //首先计算出当前血量是第几层血
        int layerNum = CurrentHP / singleLayerHP;
        //无法整除的情况下多加1层（例如550血需要显示第6层）
        if (CurrentHP % singleLayerHP != 0)
        {
            layerNum++;
        }
        CurrentHPLayer.text = layerNum.ToString();

        //根据层数获取对应前景色
        int foregroundColorIndex = (layerNum % hpColors.Length) - 1;
        //层数是颜色数组长度的整数倍时，颜色为最后1种颜色
        if (foregroundColorIndex == -1)
        {
            foregroundColorIndex = hpColors.Length - 1;
        }
        foreground.color = hpColors[foregroundColorIndex];

        //根据前景色获取对应背景色
        //只剩最后1层血时，背景色固定为黑色
        if (layerNum == 1)
        {
            background.color = Color.black;
        }
        else
        {
            int backgroundColorIndex;
            if (foregroundColorIndex != 0)
            {
                 //前景色索引不为0就倒退1位（x不为0时，x层的背景色=x-1层的前景色）
                 backgroundColorIndex = foregroundColorIndex - 1;
            }
            else
            {
                //否则为最后1位
                backgroundColorIndex = hpColors.Length - 1;
            }
           
            background.color = hpColors[backgroundColorIndex];
        }

        //计算出要显示的血条长度
        float length = 1.0f *(CurrentHP % singleLayerHP) / singleLayerHP;
        //当前血量是一层血条代表血量的整数倍时，显示长度为100%
        if (length == 0)
        {
            length = 1;
        }
        //改变长度
        foreground.fillAmount = length;

    }

}

监听按钮点击事件的代码如下：

public class ChangeHP : MonoBehaviour {

    public MultiLayerHPCtrl ctrl;

    public void OnClick() {
        ctrl.ChangeHP(-10);
    }
}

最终效果演示：