技能icon的原理和实现方法

UGUI简单版

直接创建一个Image，选择图片，修改aplah值为150左右。在此Image下再创建一个子Image(子Image可以命名为FillImage来区分)，选择原来的图片，Type选择Fill，添加脚本。完成

添加鼠标点击事件调用DoSkill函数也十分简单，直接在子Image下添加一个EventTrigger组件，选择Add new Event， 选择PointerDown，然后选择子Image物体中脚本函数即可。

 

using UnityEngine;

using System.Collections;

using UnityEngine.UI;

 

public class Simple_CD : MonoBehaviour {

 

private bool finished = true;

private Image fillImage;

void Start () {

fillImage = this.GetComponent<Image>();

}

void Update () {

if(Input.GetKeyDown(KeyCode.F))

{

DoSkill();

}

}

public void DoSkill()

{

if(finished)

{

finished = false;

StartCoroutine(SetSkillValue());

}

}

IEnumerator SetSkillValue()

{

for(int i = 0; i <= 100; i++)

{

fillImage.fillAmount = i*0.01f;

yield return new WaitForSeconds(0.01f);

}

finished = true;

}

}

 

 

技能icon进化版：

前面过程和上面差不多，再在子Image(就是FillImage)下创建一个Text来显示倒计时。在FillImage的脚本中控制Text倒计时的时间显示。控制脚本如下：

using UnityEngine;

using System.Collections;

using UnityEngine.UI;

 

public class test : MonoBehaviour {

 

public Text timerText;

public float coldTime;

private float timer;

private Image fillImage;

private bool isStartTimer = false;

void Start ()

{

fillImage = GameObject.Find("FillImage").GetComponent<Image>();

coldTime = 5f;

timer = coldTime;

timerText.enabled = false;

}

void Update () {

if(Input.GetKeyDown(KeyCode.A))

{

isStartTimer = true;

}

if(isStartTimer)

DoSkill();

}

public void DoSkill()

{

if(isStartTimer)

{

timer -= Time.deltaTime;

fillImage.fillAmount = timer/coldTime;

timerText.enabled = true;

if(timer <= 0)

{

fillImage.fillAmount = 1;

timer = coldTime;

isStartTimer = false;

timerText.enabled = false;

}

timerText.text = Mathf.CeilToInt(timer).ToString();

}

}

public void OnClick()

{

isStartTimer = true;

}

}