🎮 CoolTime Button

공격이나 여러 스킬을 사용하는 게임을 제작하다 보면 쿨타임을 관리해야할 필요가 있다.

여러 모바일 게임에서 이런 쿨타임 시간만큼 돌아가는 버튼을 본 적이 있을 것이다. 오늘은 이런 버튼을 두가지 방법으로 만들어 보려고 한다.

📝 UI 만들기

쿨타임이 있는 공격 버튼을 만드려고 한다.

1. Canvas에 empty object를 하나 추가해준다.
   -> Attack 에 해당

2. Attack에 하위로 Button을 생성해 추가한다.
   -> Button에 해당 : 실제 눌리는 버튼 역할을 한다.

3. Attack에 하위로 실제 동작할 버튼과 같은 이미지를 추가해준다.
   -> Hide Image에 해당 : 시계방향으로 돌아가는 역할을 할 것이다.
   해당 이미지를 클릭하고 inspector에 들어가서 Type을 다음과 같이 설정해준다.

• Fill Amount 이 부분 값을 조정하면 시계방향으로 이미지가 차오르는 것을 볼 수 있다.
  
• 만약 위의 움짤처럼 살짝 불투명하게 이미지가 올라가길 원한다면 Color 값의 Alpha 값을 조정해주면 된다.
  

💡 주의) Hide Image는 꼭 Button 아래에 위치해야 한다. 이후 쿨타임 시간동안 Hide Image를 setActive해서 버튼이 눌리지 못하도록 할 것이기 때문이다.

📝 Script 작성

💙 Cooroutine 이용하기

버튼이 눌렸을 때 isUseSkill 변수를 true로 바꾸어 Update() 에서 코루틴이 실행되도록 구현했다. IEnumerator SkillTimeChk() 안에서는 미리 설정한 coolTime 만큼 HideIMG에 fillamount를 줄여서 적용하고 해당 시간동안 HideIMG가 setActive true로 버튼이 눌리지 못하게 막는다.

1. Attack 에 작성한 스크립트를 컴포넌트로 추가하고 Hide Img에 원하는 미리 만들어둔 Hide Image할당하기
   

2. Button 에서 On Click Evenet에서 작성한 함수 StartCoolTime() 바인딩해주기

❗ 전체 코드

using UnityEngine;
using UnityEngine.UI;
using DG.Tweening;

public class Test_UI : MonoBehaviour
{
    public GameObject hideImg; // Editor에서 Hide Image 할당
    private float hideImgFill;
    private bool isUseSkill = false;
    private float coolTime = 5;
    private float starTime = 0;


    void Start()
    {
        hideImgFill = hideImg.GetComponent<Image>().fillAmount;
        hideImg.SetActive(false);

    }

    void Update()
    {
        if (isUseSkill)
        {
            StartCoroutine("SkillTimeChk");
        }
    }

    public void StartCoolTime()
    {
        hideImg.SetActive(true);
        isUseSkill = true;
    }


    IEnumerator SkillTimeChk()
    {

        yield return null;

        if (starTime > 0)
        {
            starTime -= Time.deltaTime;

            if(starTime < 0)
            {
                starTime = 0;
                isUseSkill = false;
                hideImg.SetActive(false);
                starTime = coolTime;

            }
            float time = starTime / coolTime;
            hideImgFill = time;

        }
        
    }


}