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

2019-11-08 00:31:01

字体：大中小

来源：转载

供稿：网友

半圆形进度条 首先将资源图片打进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弧形血条的制作

上一篇：CoordinatorLayout使用全解析

下一篇：Angular的 $q, defer, promise,$http