使用NGUI制作进度条（血条/蓝条）

制作血条和蓝条，原理都是一样的，下面创建一个可以复用的进度条。

第一步，搭建基本的UI显示界面，使用NGUI（没有插件的童鞋可以看我上一遍文章 ）创建一个基本的进度条界面。

好了，现在我们将NumberBar托给Background，Progress拖给Foreground。现在我们可以测试下，我们的一个简单进度条就可以了。

这就完了？？？

当然，这是不可能的~~

下面，我们将进行脚本编写，来控制进度条。在添加脚本之前，为了更好显示我们的进度值，我们需要在NumberBar上创建一个Lable，来负责显示我们的进度值。

 

第二步，现在，我们来编写脚本。选择NumberBar,为其添加脚本，命名为NumberProgress。

打开脚本，编写代码。

using UnityEngine;
using System.Collections;

public enum NumberStyle
{
    None = 0,    //不显示
    Number,    //数值样式
    Percent,   //百分比样式
}
public class NumberProgress : MonoBehaviour
{
    public UISlider slider;     //滑动条引用
    public UILabel lable;   //显示lable

    private float progress = 1f;    //当前进度
    private int targetNumber = 0;   //目标值
    private float animationSpeed = 10f;   //动画速度
    private float tempNumber = 0f;

    private int maxNumber;    //最大数值
    public int MaxNumber
    {
        set { maxNumber = value; ResetNumber(); }
        get { return maxNumber; }
    }
    private int currentNumber;     //当前数值
    public int CurrentNumber
    {
        set { currentNumber = value; ResetNumber(); }
        get { return currentNumber; }
    }
    private NumberStyle numberStyle; //数字样式
    public NumberStyle NumberStyle
    {
        set { numberStyle = value; ResetNumber(); }
        get { return numberStyle; }
    }
    //设置当期数值
    public void SetCurrentNumber(int number, bool isAnimation = true)
    {
        //检测数值有效性
        number = number <= 0 ? 0 : number;
        number = number >= maxNumber ? maxNumber : number;
        tempNumber = currentNumber;  //设置一个进行动画的临时数值
        //更新当前值和目标值
        currentNumber = number;
        targetNumber = number;    //记录目标值
        if (isAnimation)
        {
            StartCoroutine(PlayAnimation());  //开启协程
        }
        else
        {
            ResetNumber();    //如果没有动画，这正常显示
        }
    }

    IEnumerator PlayAnimation()
    {
        while ((int)tempNumber != targetNumber)     //未到达目标值，则需要做动画
        {
            int flag = (targetNumber - tempNumber) > 0 ? 1 : -1;  //计算符号
            tempNumber = tempNumber + flag * Time.deltaTime * animationSpeed;   //计算数值变化量
            float tempProgress = tempNumber * 1.0f / maxNumber;  //这里要记得乘上1.0f，
            SetProgressValue(tempProgress, (int)tempNumber);
            //计算下一帧的数值，用来判断是否到达目标数值
            float tempNum = tempNumber + flag * Time.deltaTime * animationSpeed;   //计算数值变化量
            float f = (tempNumber - targetNumber) * (tempNum - targetNumber); //如果上一祯 ，和下一帧在目标值的两侧，那么表示当前帧已经等于目标值了
            if (f <= 0f)
                tempNumber = targetNumber;
            yield return null;
        }
        ResetNumber();  //执行完while语句后，最后需要执行一次重置数值
    }
    //重新设置数值
    private void ResetNumber()
    {
        //检测数值有效性
        maxNumber = maxNumber <= 0 ? 0 : maxNumber;     //检测最大值是否小于等于0
        currentNumber = currentNumber <= 0 ? 0 : currentNumber;     //检测当前值是否小于等于0
        currentNumber = currentNumber >= maxNumber ? maxNumber : currentNumber;  //检测当前值是否大于等于最大值
        //重新计算进度
        progress = currentNumber * 1.0f / maxNumber;
        SetProgressValue(progress,currentNumber);
    }

    private void SetProgressValue(float progressValue,int currentValue )
    {
        //修改滑动条的值
        slider.value = progressValue;
        //设置标签显示内容
        string str = "";  //显示的字符串
        switch (numberStyle)
        {
            case NumberStyle.None:
                lable.gameObject.SetActive(false);
                break;
            case NumberStyle.Number:
                lable.gameObject.SetActive(true);
                str = currentValue.ToString() + "/" + maxNumber.ToString();
                lable.text = str;
                break;
            case NumberStyle.Percent:
                lable.gameObject.SetActive(true);
                str = (int)(progressValue * 100) + "%";
                lable.text = str;
                break;
        }

    }

}

好了，进度的脚本编写完成，保存脚本，我们回到Unity中，为脚本赋引用。将NumberBar拖给Slider，将lable拖给Lable。

下面，我们来编写测试脚本，选择摄像机，为其添加脚本Test.打开脚本，编辑。

using UnityEngine;
using System.Collections;

public class Test : MonoBehaviour
{

    public NumberProgress numberProgress;
    void Start()
    {
        numberProgress.MaxNumber = 100;
        numberProgress.CurrentNumber = 100;
        numberProgress.NumberStyle = NumberStyle.None;
    }
    void Update()
    {
        if (Input.GetKeyDown(KeyCode.J))
        {
            //numberProgress.CurrentNumber -= 4;
            numberProgress.SetCurrentNumber(numberProgress.CurrentNumber -= 4);

        }
        if (Input.GetKeyDown(KeyCode.K))
        {
            //numberProgress.CurrentNumber += 6;
            numberProgress.SetCurrentNumber(numberProgress.CurrentNumber += 4);
        }
        if (Input.GetKeyDown(KeyCode.Alpha1))
        {
            numberProgress.NumberStyle = NumberStyle.None;
        }
        if (Input.GetKeyDown(KeyCode.Alpha2))
        {
            numberProgress.NumberStyle = NumberStyle.Number;
        }
        if (Input.GetKeyDown(KeyCode.Alpha3))
        {
            numberProgress.NumberStyle = NumberStyle.Percent;
        }
    }

}

保存脚本，我们回到Unity中，将NumberBar拖给Test的NumberProgress。运行游戏，当我们按下1键时，不显示数值，2显示数值，3显示百分比。我们选择2测试下，我们按下J键，会发现，

 

我们还可以多测试几次。

Ok，至此，我们的进度条完成，我们选择进度条将其拖到Assets面板中，保存为预设体，下次我们就可以使用了。