UGUI实现简单的技能冷却效果
发表于2015-07-29
先看看最终效果
如上图，我的技能不是像LOL一样每个技能对应一个按键，而是，先选择一个技能，然后按下某一个键释放 [类似于Button Group]
技能后方有一个灰色的蒙版，有蒙版的技能即为当前选中的技能。
每个技能CD可以在脚本中自定义。
倒计时蒙版与CD会同步。
怎么实现先选择一个技能然后按下键来释放技能不是本教程的目标。
本教程只简单说明怎么实现技能CD。
我们在实现效果之前先简单了解一下UGUI的Image组件。
重点介绍一下Image Type 【显示模式】
Image组件中，Image Type（显示方式）有Simple、Sliced、Tiled、Filled四种。
下面一一介绍。
*Simple【普通】
*此显示模式下，Sprite将直接显示在控件中。如果大小不一致，将通过拉伸来填充控件。
*如果preserve Aspect勾选，图片将保持长宽比
*
*Sliced【切片】
*此显示模式下，Sprite将被视为9个切片[3*3]组成，图片控件只显示中间切片的边缘。
*如果Fill Center勾选，将显示完整切片
*
*Tiled【平铺】
*此显示模式下，sprite尺寸不变
*[自行类比Windows桌面壁纸填充方式中的平铺]
*
*Filled【填充】
*显示模式类似于Simple，但是可以有多个选项来选择展示“从无到有”的变化
*填充方式由Fill-Method属性决定。
*本帖不一一说明各个显示模式。如果你感兴趣，请自行查找资料。
在脚本中，我们需要几个重要的变量来关联各个物体。
比如你需要一个这样的结构体或者类：
控制代码如下：
剩下的部分比较简单啦。我就不在这里再做说明了。
如上图，我的技能不是像LOL一样每个技能对应一个按键，而是，先选择一个技能，然后按下某一个键释放 [类似于Button Group]
技能后方有一个灰色的蒙版，有蒙版的技能即为当前选中的技能。
每个技能CD可以在脚本中自定义。
倒计时蒙版与CD会同步。
怎么实现先选择一个技能然后按下键来释放技能不是本教程的目标。
本教程只简单说明怎么实现技能CD。
我们在实现效果之前先简单了解一下UGUI的Image组件。
重点介绍一下Image Type 【显示模式】
Image组件中，Image Type（显示方式）有Simple、Sliced、Tiled、Filled四种。
下面一一介绍。
*Simple【普通】
*此显示模式下，Sprite将直接显示在控件中。如果大小不一致，将通过拉伸来填充控件。
*如果preserve Aspect勾选，图片将保持长宽比
*
*Sliced【切片】
*此显示模式下，Sprite将被视为9个切片[3*3]组成，图片控件只显示中间切片的边缘。
*如果Fill Center勾选，将显示完整切片
*
*Tiled【平铺】
*此显示模式下，sprite尺寸不变
*[自行类比Windows桌面壁纸填充方式中的平铺]
*
*Filled【填充】
*显示模式类似于Simple，但是可以有多个选项来选择展示“从无到有”的变化
*填充方式由Fill-Method属性决定。
*本帖不一一说明各个显示模式。如果你感兴趣，请自行查找资料。
在脚本中，我们需要几个重要的变量来关联各个物体。
比如你需要一个这样的结构体或者类：
[System.Serializable]
public struct skillSprite
{
public Sprite skill_On;
public Sprite skill_Off;
public float skillTimer;
public Text timerText;
public Image timerMask;
public GameObject tipPanel;
[HideInInspector]
public bool isOn; //冷却时间到
[HideInInspector]
public bool isOpen; //拥有此技能
[HideInInspector]
public bool isPressDown; //是否使用了技能
}
要实现技能效果，我们会在技能面板中使用Filled模式来实现倒计时效果。
我们在Hierarchy面板中建立这样的父子关系
我们在Hierarchy面板中建立这样的父子关系
if(skillSprites[index].isOpen) //如果已经获得该技能执行
{
//Debug.Log("index = " + index);
if (skillSprites[index].isPressDown) //当技能被激活时执行
{
skillSprites[index].isOn = false; //冷却时间重置
skillSprites[index].timerMask.enabled = true; //CD蒙版激活
skillSprites[index].skillTimer -= Time.deltaTime; //CD时间开始倒计时
//startTimer[index]为该技能的冷却时间
//因为在Image组件fillAmount的值范围是[0,1]的float值，所以这里做一个计算转化为百分比
skillSprites[index].timerMask.fillAmount -= (Time.deltaTime / startTimer[index]); //更新蒙版状态
skillSprites[index].timerText.text = skillSprites[index].skillTimer.ToString("F1"); //更新时间显示
}
}
这样你可以继续完善脚本逻辑来实现效果。剩下的部分比较简单啦。我就不在这里再做说明了。