半圆形进度条
首先将资源图片打进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;
}
}
}
最后
测试工程添加了两个按钮用于触发测试。
参考文章: