NGUI实现技能CD效果

在NGUI中使用Sprite的遮罩效果可以很轻松的实现技能CD效果。

具体实现步骤:

①新建一个技能图标的Sprite 如图中的Skill001,再在该技能Sprite上添加一个Sprite做遮罩, Atlas中选一张纯灰色背景的图片,如图中的Shade_Sprite。

②在该遮罩Sprite中有三个属性用来控制遮罩的效果。

Type:Filled

Fill Dir:Radial360

Fill Amount:0

滑动Fill Amount,就可以看到效果了

③给技能游戏对象绑定一个快捷键或按钮的脚本

在技能Sprite上添加一个Box Collider和一个NGUI按钮脚本UIButton,给按钮绑定onClick事件,参考NGUI事件监听之UIEventListener的使用

public class Skill : MonoBehaviour {
    //冷却时间
    public float coldTime = 1f;
    //是否正在冷却
    private bool isColding = false;
    private UISprite shade_Sprite;

    void Awake()
    {
        //var Skill001_Shade = GameObject.Find("UI Root/Skill_Window/Skill_Border/Skill001/Shade_Sprite");
        //shade_Sprite = Skill001_Shade.GetComponent<UISprite>();
        shade_Sprite = gameObject.transform.Find("Shade_Sprite").GetComponent<UISprite>();
        UIEventListener.Get(this.gameObject).onClick += StartSkill;
    }
    void Update()
    {
        if (Input.GetKey(KeyCode.N) && !isColding)
        {
            //TODO 触发技能,技能特效等
            shade_Sprite.fillAmount = 1;
            isColding = true;
        }

        if (isColding)
        {
            shade_Sprite.fillAmount -= (1f/coldTime)*Time.deltaTime;
            if (shade_Sprite.fillAmount <= 0.001)
            {
                shade_Sprite.fillAmount = 0;
                isColding = false;
            }
        }

    }

    void StartSkill(GameObject go)
    {
        if ( !isColding)
        {
            //TODO 触发技能,技能特效等
            shade_Sprite.fillAmount = 1;
            isColding = true;
        }
    }   

}
时间: 2024-11-10 13:04:46

NGUI实现技能CD效果的相关文章

NGUI技能CD效果制作(sprite的type:filled)

一,我们先添加一个sprite,改名为skill.给当前skill添加图片,然后再sprite下添加一个sprite和一个label,结果如下 二现在我们来设置skill下的sprite,给他设置一个纯色空白图片,然后将他的type选择为filled和coloer tint 选择为黑色,然后设置为半透明, coloer tint 点击打开下选择颜色框 箭头区域为设置半透明重点 最终结果显示设置为: 现在我们手动修改fill amount,可以看到黑色遮罩层360度减少,效果如下: 三,我们添加一

(转)NGUI制作转圈的技能CD特效

在技能图标上面放个半透明的精灵,用来做技能冷却的特效,如下图所示,我就用NGUI中的图标来带代替. NGUI制作转圈的技能CD特效 然后修改一下特效的精灵类型,它是在技能图标上面悬浮半透明可旋转的精灵.如下图所示, Sprite Type:设置成Filled Fill Dir:设置Radial 360 . Invert Fill:顺时针旋转或者逆时针旋转. NGUI制作转圈的技能CD特效 到这里就简单了,只要在程序中动态的修改Fill Amount的数值就可以了.写了一段简单的代码,让它一直旋转

NGUI研究之制作转圈的技能CD特效

 昨天想做一个技能CD转圈的特效,花了大把的时间去用meshRender组件想通过三角形依据数学算法来绘制一个圆形的网格.通过动态绘制圆形网格的方法来实现技能CD特效.奶奶的昨天我研究了一晚上,最终做出来了.但是今天突然发现NGUI已经实现这个功能了,,真是坑爹啊啊---,在技能图标上面放个半透明的精灵,用来做技能冷却的特效,例如以下图所看到的,我就用NGUI中的图标来带取代.对事件方法不明确的看NGUI研究之三种方式监听NGUI的事件方法 然后改动一下特效的精灵类型,它是在技能图标上面悬浮

NGUI的技能冷却实现

使用NGUI实现技能冷却的原理是这样的:在表示技能的Sprite上加一个半透明的Sprite,将类型设置为filled类型,Fill Dir设置为Radial360,通过程序调节Fill Amount就可以模拟技能从冷却到被活的一段时间内渐变的效果.如下图所示: 代码中一个标志位isCooling表示是否正在冷却,只有当按下释放技能的按键并且该标志位为false时才可以释放技能,释放完成后isCooling立即变为true,然后冷却的部分在每帧都会减少,直至完全消失.代码如下: 1 using

横版游戏制作之英雄技能CD遮罩,人物头像血条属性

上图就是技能CD的一个效果,在此我需要给介绍下,cocosStuido这个工具中的UI Eidtor功能,编辑UI真的是很方便,至于怎么使用它,我相信您可以随便看看网上的东西,自己摸索,参考接下来的代码就知道了 在UI编辑器中,我们的技能是没有CD遮罩效果的,那怎么实现的呢? 答案就是:在点击触摸技能时,我们在技能的上方覆盖一张灰色的图片(这个你可以用PS去制作一张),大小与技能图标相同,然后根据每个技能的CD时间,产生一个扇形进度动画,动画结束后取消定时器跟这个遮罩对象就可以了 至于人物头像的

Unity的NGUI插件篇——入场效果

Unity的NGUI插件篇--入场效果 入场效果 入场效果需要借助于NGUI提供的TweenPosition类来完成,为了说明此类的使用方法,本节将使会讲解两个示例.本文选自  大学霸 <NGUI使用手册>  一书 匀速入场 将游戏主菜单看作一个整体,本小节会令其自上而下匀速入场,具体的实现过程如下: (1)在Project视图里,新建一个C#脚本,命名为AppearFromAbove,为其添加下面的代码: 01     using UnityEngine; 02     using Syst

使用NGUI制作技能冷却图标

最近在学习NGUI,有些小的知识点,个人觉得很不错,就记录下来了,毕竟好记性不如烂笔头,温故知新. 首先导入NGUI插件,插件我会在文章下面给出链接. 导入NGUI后,会在菜单栏,看到NGUI的按钮,我们首先创建一个Sprite,重命名为Skill,为其选择图集和精灵,调整Skill的大小和位置,我这里Size 为200*200. 在Hierarchy面板中选中Skill,然后再Scene面板中,右键创建一个Sprite,重命名为Filled,为其选择图集和精灵,最好选择一个单色的精灵,然后,T

弹出表情气泡&amp;仿魔兽的转技能CD实现

突然发现好久没有更新了,大冬天有点懈怠勒-- 以后陆续总结一些游戏中的好玩的小特效. 下面的代码中已经把两个特效的实现封装到了类里面,有要的朋友可以参考一下. 1. 红毛被打飞的时候的弹出气泡表情 关键实现就是 ScaleTo 的应用 void BubbleLayer::show() { m_IsVisible = true; this->setScale(0); ScaleTo* scaleTo = ScaleTo::create(0.15, 1.25); ScaleTo* scaleTo2

unity使用 NGUI制作技能冷却效果的思路

把NGUI精灵的type改为filled 然后更改fill Amount 这个值 就会实现效果