用NGUI做一个unity ugui 圆形遮罩罩的小地图该怎么写

来源：蜘蛛抓取(WebSpider) 时间：2017-11-03 21:17 标签： unity 圆形遮罩shader
用NGUI实现半圆形进度条，技能CD效果_Android开发_动态网站制作指南
用NGUI实现半圆形进度条，技能CD效果
来源：人气：196
半圆形进度条
首先将资源图片打进atlas图集，在场景上创建一个新的site。资源是一张半圆形的进度条，如下图。如果要实现进度条的效果，只需实现纵向的遮挡即可。通过UISPRITE的相关属性即可实现。
下面学习一下UISprite的相关属性：
Smple:除了显示内容从图集里面获取外，其他都和Texture一样的绘制
Sliced：这个模式支持九宫格拉伸，让四个角落的图片不变型，点击Sprite右侧的Edit按钮可以进行Sprite数据的编辑，设置Border的值即可。
Tiled：瓦片填充，会平铺进行填充
Filled：这个主要用来做技能CD、进度条等用。FillDir设置填充的模式（360度扇形，水平，垂直等），Fill Amount是填充百分比
Fl：对Sprite进行翻转：水平、垂直、水平+垂直
Fill Dir:表示填充的方向
Horizontal
从上到下减少的
是以图片左下角的点为圆心增减，
是以图片底边中点为圆心增减，
是以图片的几何中心为圆心进行增减，
设置如下：
代码如下：
using UnityE
using System.C
public class UpdateProgressbar : MonoBehaviour {
private UISprite _
// 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与进度条的不同之处在于，额外需要一个遮罩层，此外遮挡方式应当以图片的中心为圆心旋转。
实现过程：
首先创建GameObject
SkillIcon设置技能图片，挂载SkillCD.cs脚本
Mask设置UISprite的Type及Fill Dir
using UnityE
using System.C
public class SkillCD : MonoBehaviour
private UISprite _skillM
private int _skillCD = 10;
// cd为10秒
private bool _bStart =
// Use this for initialization
void Start ()
GameObject obj = gameObject.transform.Find("Mask").gameO
if (obj != null)
_skillMask = obj.GetComponent&UISprite&();
if (_skillMask == null)
Debug.LogWarning("SkillCD _skillMask == null!!!");
// Update is called once per frame
void Update () {
if (_skillMask == null)
Debug.LogWarning("Update _skillMask == null!!!");
if (_skillMask.fillAmount == 0f)
if (_bStart)
单位时间内更新量
_skillMask.fillAmount -= (1.0f / _skillCD) * Time.deltaT
void OnGUI()
if (GUI.Button(new Rect(50, 50, 100, 20), "Start CD"))
_skillMask.fillAmount = 1.0f;
测试工程添加了两个按钮用于触发测试。
参考文章：
Unity NGUI弧形血条的制作
优质网站模板The following error occurred:
The requested URL was not found on this server.
Please check the URL or contact the webmaster.大家好
&& & & & &大家好，我最近想实现一个功能，类似于一个透视镜的功能。就是手指拖动一个透视镜在一个指定区域，然后该区域就可以清楚的显示出来，其他部分都是模糊半透明的。不知道能实现这样的效果吗？如下图：
要评论请先&或者&
自己顶下。希望大神能看到
两种方法，第一种分三个步骤：1.确保下层物体已经渲染绘制完毕，通过renderqueue保证。2.选择一个圆形材质，shader里面的colorMask设置为0. 确保圆形材质renderqueue比1中的大。3.绘制半透明UI，确保半透明UI的renderqueue比2大第二种写一个shader，imageeffect效果，提供坐标计算在片段处理器中控制绘制部分。这两种方法都需要你有一定的shader知识。现成的请自行谷歌或者aol
楼上的办法不行呢，求解决啊。。。

我要回帖

更多关于 unity 圆形遮罩shader 的文章

 

随机推荐