unity技能CD的实现方式

天の川

技能CD的实现方式。

打开Unity新建一个项目，

创建一个技能的按钮（Button），顶级导航栏GameObject->UI->Button

可以看到，我们的Button已经创建好了


可以看到一个Canvas（画布），ps：做屏幕适配就需要给画布添加一个组件

具体的创建按钮，要是不会的可以搜一下

创建好一个技能按钮之后，再创建一个遮罩，也就是Image，和创建按钮的步骤一样

接着点击我们刚刚创建的Image，在Inspector找到下图的控件




点击Image Type 选择 Filled



Fill Origin 从哪里开始，

Fill Amount填满量。

Clockwise 没错，顺时针方向。

Preserve Aspect 图像的宽度和高度是保持原始比例的还是重新调整



设置完成，创建一个C#代码（注意，那个引号部分要写你场景中的图片实例名称）

1. using UnityEngine;
   
2. using System.Collectio自行去掉汉字ns;
   
3. using UnityEngine.UI;
   
4. 
   
5. public class v1 : MonoBehaviour
   
6. {
   
7.     //UIImageButton sprite;
   
8. 
   
9.     //public GameObject sprites;
   
10.     Image sprite;
    
11.     public GameObject sprites;
    
12.     // Use this for initialization
    
13.     bool isskillcd = false;
    
14. 
    
15.     /*
    
16.      * 开始获取到实例对象
    
17.      */
    
18.     void Start()
    
19.     {
    
20. 
    
21.         sprite = gameObject.GetComponent<Image>();
    
22.         sprites = GameObject.Find("Image");
    
23.         /*
    
24.         开始先把遮罩隐藏掉
    
25.          */
    
26.         sprites.SetActive(false);
    
27.         //sprite.fillAmount = 0;
    
28. 
    
29.         Debug.Log("" + sprite);
    
30. 
    
31. 
    
32.         Debug.Log(".." + sprite.fillAmount);
    
33.     }
    
34. 
    
35.     public void skillsstart()
    
36.     {
    
37.         isskillcd = true;
    
38.         /*
    
39.          点击技能按钮之后显示技能cd（遮罩）
    
40.          */
    
41.         sprites.SetActive(true);
    
42. 
    
43.     }
    
44.     // Update is called once per frame
    
45.     void Update()
    
46.     {
    
47.         /*
    
48.          根据isskillcd值来判断是不是点击了，是不是该进行运算了
    
49.          */
    
50.         if (isskillcd == true)
    
51.         {
    
52.             sprite.fillAmount -= 0.01f;
    
53. 
    
54.             Debug.Log(".." + sprite.fillAmount);
    
55. 
    
56.             /*
    
57.              当遮罩的填满量（fillAmount）为零的时候，重新把遮罩的填满量为1
    
58.              这里1表示fillAmount为填满，0表示空，
    
59.              */
    
60.             if (sprite.fillAmount == 0)
    
61.             {
    
62.                 sprite.fillAmount = 1;
    
63. 
    
64.                 sprites.SetActive(false);
    
65.             }
    
66.         }
    
67. 
    
68.         //  sprite.fillAmount -= 0.1f;
    
69.     }
    
70. }

复制代码

把脚本拖到新建的Image上，记得给建好的Image一个图片，

然后点击我们创建的Button，在On Click



把Image拖到红色方框内，在红色的椭圆里面，选择我们刚刚写的那个脚本



运行一下看一下效果，