유니티 확장 UI - Image.Type.Fill을 이용한 쿨타임 아이콘

 예전에는 NGUI를 사용하거나 직접 구현하던 와우식 쿨타임 버튼을 유니티에서 Image.Type.Fill을 이용해 쉽게 구현할 수 있게 되었다.

 

 세상참.....

 

 그래서 한가지만 구현하기 아쉬워서 제공하는 기본 기능을 탐색하는 느낌으로 네가지 타입의 쿨타임 아이콘을 표현해 봤다.

 

 먼저 기본 기능인 만큼 코드는 매우 간단하다.

 

using UnityEngine.UI;
using UnityEngine;

public class CoolTimer : MonoBehaviour
{
    public Text text_CoolTime; // 쿨타임 텍스트를 표시할 UI 요소
    public Image image_fill; // fill type을 통해 연출할 이미지
    public float time_coolTime = 2; // 쿨타임 public으로 인스펙터에서 조절할 수 있게 했다.
    private float time_current; // 진행된 시간을 저장할 필드 변수
    private bool isEnded = true; // 종료 여부를 저장할 필드 변수


    private void Update() // 매 프레임 쿨타임을 체크한다.
    {
        if (isEnded)
            return;
        Check_CoolTime();
    }

    void Check_CoolTime() 
    {
        time_current += Time.deltaTime; //증가한 시간을 더한다.
        if(time_current < time_coolTime) //아직 쿨타임이 안됐으면
        {
            Set_FillAmount(time_current); //이미지를 갱신한다.
        }
        else if(!isEnded)//쿨타임이 다됐는데 안끝났으면
        {
            End_CoolTime(); //쿨타임을 끝낸다.
        }
    }

    void End_CoolTime()
    {
        Set_FillAmount(time_coolTime); //이미지를 갱신한다.
        isEnded = true; //끝낸다.
        text_CoolTime.gameObject.SetActive(false); //텍스트도 지워준다.
    }

    void Trigger_Skill() 
    {
        if (!isEnded) return; //아직 쿨타임이면 안한다.

        Reset_CoolTime(); // 쿨타임을 돌린다.
    }

    void Reset_CoolTime()
    {
        text_CoolTime.gameObject.SetActive(true); 
        time_current = 0;
        Set_FillAmount(0);
        isEnded = false;
    }

    void Set_FillAmount(float value)
    {
        image_fill.fillAmount = value / time_coolTime;
        text_CoolTime.text = string.Format("Rest : {0}",value.ToString("0.0"));
    }

    public void on_Btn() //버튼 입력을 받아서 스킬을 시전한 걸로 친다.
    {
        Trigger_Skill();
    }
}

 

반시계방향  180도 쿨타임

360 시계방향 쿨타임

좌에서 우로 쿨타임

아래에서 위로 쿨타임

 

 각 쿨타임이 주는 느낌이 다른 것을 알 수 있다. 바탕에 어두운 이미지를 깔고 차오르는 형태로 연출했지만 이미지 겹침등을 이용해 더 많은 느낌을 연출 할 수 있을 것이다.

 

 유니티에서 기본으로 제공하는 기능들만 잘 파악해도 점점 많은 연출이 가능해지는것 같다.