首先，在Canvas下创建一个image1，改名

然后把image1的source image换成技能图片，或者随便一张图片都行

接着，在image1下创建子类image2

接着，按照下面图片调整

source image改成UIsprite（打开旁边的圆圈，划到最底部）

然后Image Type改成Filled

color调一个自己喜欢的颜色，不透明度调低 

接下来，便可以开始写代码了

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class player : MonoBehaviour
{   public Image cd;
    dasdCD=2.0f;
    void Start(){
    cd.fillAmount = 0;//技能一开始就可以用
   }
    cd.fillAmount -= 1.0f/dashCD * Time.deltaTime;//dasdCD,技能时间
}

 代码写完后，记得把之前调整的那张image2拖拽上去

 但是这里并没有技能给我们使用，所以接下来我简单写一个冲刺技能与技能图标对应

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class player : MonoBehaviour
{
public float dashTime;//冲刺时间，自己设置
    private float dashTimeleft;//冲刺剩余时间
    private float dasdLast=-10f;//上一次冲刺时间，设置成-10是以便游戏开始便可以使用技能
    public float dashCD;//冲刺CD，自己设置
    public float dashSpeed;//冲刺速度，自己设置
    private bool isDash;//是否可以冲刺
 void Start()
    {
        cd.fillAmount = 0;//游戏开始技能图标显示
    }
 void Update()
    { if (Input.GetKeyDown(KeyCode.J)) {//按下J键，如果现在的时间大于上一次冲刺的时间加上冲刺CD，便可以进行冲刺
            if (Time.time>=(dasdLast+dashCD)) {
                dashreday();              
            }
        }
        dash();
        cd.fillAmount -= 1.0f/dashCD * Time.deltaTime;
}
void dashreday() { //冲刺准备
           isDash = true;
           dashTimeleft=dashTime;//冲刺剩余时间等于冲刺时间
           dasdLast = Time.time;//将此刻冲刺的时间赋给上一次冲刺的时间
          cd.fillAmount = 1.0f;//重置技能图标
    }

    void dash() {//冲刺
        if (isDash) {
            if (dashTimeleft < 0) {
                isDash = false;
            }
            if (dashTimeleft >= 0) {
                transform.Translate(transform.right * Time.deltaTime * dashSpeed * h);//h是Input.GetAxis("Horizontal")
            }
        }
    }

}