game

Unity中技能冷却效果

目标

  1. 游戏中常见的技能冷却效果
  2. 简单的UI布局
    img

最终效果

gif

步骤

  • 打开Unity新建一个工程，这里我们用2D的项目类型就可以。

  • 设置游戏界面比例为16:9，这个是当手机屏幕比较流行的横框比。
    img

  • 给我们的技能一个容器，选择新建->UI->Panel，将默认生成的Canvas的设置修改如下:
    img

  • 由于我们希望技能是栅格布局，所以给Panel增加一个GridLayoutGroup组件
    img

  • 技能栏放在屏幕下方中间，所以设置Panel的锚点，依次点击下面的按钮设置，在选择锚点时，同时按下shift和alt键。
    img

  • 修改pane的高度为120，宽度为 230

  • 将下载好的技能icon图片导入到工程中，注意要检查图片的Texture Type为 Sprite，如果不是，改为Sprite
    img

  • 向Panel中添加两个Button，删除默认的Text子节点，设置其Source Image，分别重名为SkillDot和SkillFlash，并修改其Color为灰色（就是冷却时想显示的颜色）完成后如下：
    img

  • 两个技能在panel的排列好像不太好看。。。如果每错的话，应该如下所示：
    img
    （注： 我把Camera的背景颜色调成了黑色。。）
    没关系，修改Panel中GridLayoutGroup的设置如下：
    img

现在再来看：
img

Ok， 好多了。

  • 分别给每个技能按钮添加一个Image子节点，然后设置其SourceImage属性为各自的技能图片，这两个图片将成为冷却效果的关键！！
    设置其属性如下：
    img

    这时候，拖动FillAmount感受下，看技能的icon，是不是有冷却的效果啦！！聪明的你可能已经知道怎么做了，下面还是说下脚本的实现吧。

  • 给SkillDot添加一个新的脚本 Skill，编辑如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
using UnityEngine;
using UnityEngine.UI;
using System.Collections;
public class Skill : MonoBehaviour
{
    // 技能的图标
    public Image icon;
    // 技能的冷却时间
    public float coolDown;
    // 技能名称，用于区分使用了哪个技能的
    public string skillName;
    // 保存当前技能的冷却时间
    private float currentCoolDown;
    // 技能的按钮
    private Button skillButton;
    public void UseSkill(string skillName)
    {
        if (currentCoolDown >= coolDown)
        {
            // 使用技能，这里只是简单的打印了。
            Debug.LogFormat("使用 【{0}】", skillName);
            // 重置冷却时间
            currentCoolDown = 0;
        }
    }
    void Start()
    {
        // 获得技能按钮，然后绑定点击事件
        this.skillButton = this.GetComponent<Button>();
        skillButton.onClick.AddListener(() => this.UseSkill(skillName));
        // 一开始冷却时满的，可以立即使用技能
        // 如果不想让玩家一开始能立即使用技能，这里设置成别的小于技能冷却的值
        currentCoolDown = coolDown;
    }
    void Update()
    {
        if (currentCoolDown < coolDown)
        {
            // 更新冷却
            currentCoolDown += Time.deltaTime;
            // 显示冷却动画
            this.icon.fillAmount = currentCoolDown / coolDown;
        }
    }
}

build通过后，返回Unity，选中Skill，设置参数：
img

运行游戏，使用点燃！冷却效果出来了。。不错，但是闪现还没有效果，再做一遍操作？当然可以，但是如果技能比较多呢。
如果爱偷懒的你肯定想到了一个东西，对，就是Prefab（而且后期如果是代码创建技能的话，这货更不能少）

在工程面板，创建一个Prefabs的文件夹，将SkillDot重名为Skill，并拖动到Prefabs文件夹，然后在Hierarchy面板上，删除SkillDot和SkillFlash。
将Skill Prefab重新拖动到Hierarchy面板中的Panel里面，拖动两次，并重命名、修改Icon和SkillName，CoolDown也一并改了吧，数值任意。

最终如下：
img

done

完整的代码：

https://github.com/le0zh/unity_skill_cooldown

转载请注明出处。