【NGUI】实现半圆形进度条，技能CD效果

半圆形进度条
首先将资源图片打进atlas图集，在场景上创建一个新的sprite。资源是一张半圆形的进度条，如下图。如果要实现进度条的效果，只需实现纵向的遮挡即可。通过UISPRITE的相关属性即可实现。

下面学习一下UISprite的相关属性：
Type:
Smple:除了显示内容从图集里面获取外，其他都和Texture一样的绘制
Sliced：这个模式支持九宫格拉伸，让四个角落的图片不变型，点击Sprite右侧的Edit按钮可以进行Sprite数据的编辑，设置Border的值即可。
Tiled：瓦片填充，会平铺进行填充
Filled：这个主要用来做技能CD、进度条等用。FillDir设置填充的模式（360度扇形，水平，垂直等），Fill Amount是填充百分比
Flip：对Sprite进行翻转：水平、垂直、水平+垂直

Fill Dir:表示填充的方向
Horizontal 从左到右
Vertical 从上到下减少的
Radial90 是以图片左下角的点为圆心增减，
Radial180 是以图片底边中点为圆心增减，
Radial360 是以图片的几何中心为圆心进行增减，

设置如下：

效果图：

代码如下：

using UnityEngine;
using System.Collections;

public class UpdateProgressbar : MonoBehaviour {

    private UISprite _sprite;

    // Use this for initialization
    void Start () 
    {
        _sprite = gameObject.GetComponentInChildren<UISprite>();
        if (_sprite == null)
        {
            Debug.LogWarning("UpdateProgressbar _sprite == null!!!");
        }
    }

    // Update is called once per frame
    void Update () 
    {

    }

    void OnGUI()
    {
        if (GUI.Button(new Rect(50, 20, 100, 20), "Minus 10%"))
        {
            if (_sprite != null)
            {
                _sprite.fillAmount -= 0.1f;
                if (_sprite.fillAmount <= 0f)
                {
                    Debug.LogWarning("OnGUI _sprite.fillAmount:" + _sprite.fillAmount);
                    _sprite.fillAmount = 1.0f;
                }
            }
        }
    }
}

技能CD
技能CD与进度条的不同之处在于，额外需要一个遮罩层，此外遮挡方式应当以图片的中心为圆心旋转。
实现过程：
首先创建GameObject

SkillIcon设置技能图片，挂载SkillCD.cs脚本

Mask设置UISprite的Type及Fill Dir

效果图：

代码：

using UnityEngine;
using System.Collections;

public class SkillCD : MonoBehaviour 
{
    private UISprite _skillMask;
    private int _skillCD = 10;          // cd为10秒
    private bool _bStart = false;
    // Use this for initialization
    void Start () 
    {
        GameObject obj = gameObject.transform.Find("Mask").gameObject;
        if (obj != null)
        {
            _skillMask = obj.GetComponent<UISprite>();
        }
        if (_skillMask == null)
        {
            Debug.LogWarning("SkillCD _skillMask == null!!!");
            return;
        }      
    }

    // Update is called once per frame
    void Update () {
        if (_skillMask == null)
        {
            Debug.LogWarning("Update _skillMask == null!!!");
            return;
        }

        if (_skillMask.fillAmount == 0f)
        {
            _bStart = false;
            return;
        }

        if (_bStart)
        {
            //                       单位时间内更新量       单位时间
            _skillMask.fillAmount -= (1.0f / _skillCD) * Time.deltaTime;
        }
    }

    void OnGUI()
    {
        if (GUI.Button(new Rect(50, 50, 100, 20), "Start CD"))
        {
            _bStart = true;
            _skillMask.fillAmount = 1.0f;
        }
    }
}

最后
测试工程添加了两个按钮用于触发测试。

参考文章：

Unity NGUI弧形血条的制作