[유니티] 유니티에서 버튼 클릭했을 때 쿨타임 설정하기

유니티에서 쿨타임(쿨다운?) 기능을 사용하려고 한다.

RPG 게임에서 어떤 스킬을 사용했을 때, 

사용 후 일정 시간동안 못 쓰게 되고 일정 시간이 지난 후 다시 사용할 수 있게 된다.

[사용 방법]

하나 예제를 만들어보자..

Canvas - UI - Button으로 버튼을 생성한다.

Button을 클릭해보면, Image와 Button 컴포넌트가 기본적으로 만들어진것을 볼 수 있다.

[image 컴포넌트]

Source Image를 통해 버튼의 이미지 모양을 원하는대로 바꿀 수 있다. 

(Sprite 타입 이미지만 사용 가능)

버튼 이미지를 설정 후 Image Type을 Filled로 바꾸면 하위 항목이 다음과 같이 나온다.

여기서 Fill Amount 슬라이더가 생기는데, 

이 슬라이더 값을 0에서 1로 조절하면 버튼 이미지가 이에 따라 채워지는 영역이 변한다. 

이 값을 업데이트 해주면 쿨타임 버튼이 되는 것이다.

참고로,  

Fill Method를 통해 쿨타임의 형태를 바꿀 수 있고,

Fill Origin을 통해 쿨타임의 시작점(원점)을 바꿀 수 있다.

<Fill Method>

1. Horizontal : 수평으로 쿨타임 적용. 
2. Vertical : 수직으로 쿨타임 적용.
3. Radial 90 : 90도로 쿨타임 적용.
4. Radial 180 : 180도로 쿨타임 적용.
5. Radial 360 : 360도로 쿨타임 적용.

Fill Origin은 어디서 쿨타임이 시작될 것인지 지정하는 것인데, 위 5가지에 따라 달라진다.

Fill Amount 슬라이더 값을 움직여보면 버튼이 사라지는 것을 볼 수 있다.

이것은 배경은 자동으로 만들어지지 않기 떄문에 사라지는 것처럼 보인다.

즉, 버튼 뒤에 동일한 위치에 배경을 깔아줘야한다.

그리고, Color를 원하는 색상으로 설정해보자. 다음과 같이 된다.

참고로, 빨간 배경을 버튼 위에 놓아야한다.

왜냐하면 Canvas 안에서는 순서대로 겹쳐서 쌓이는 계층구조이므로

빨간 배경이 버튼보다 아래 위치하면 빨간색이 보여지게 된다.

이제 게임 도중에 값을 변화하도록 스크립트를 작성해보자.

Create > C# Script로 스크립트를 하나 생성한다. 이름은 CoolTimeScript.cs로 생성했다.

[CoolTimeScript.cs]

public class CoolTimeScript : MonoBehaviour {

    public Image image;

    public Button button;

    public float coolTime = 10.0f;

    public bool isClicked = false;

    float leftTime = 10.0f;

    float speed = 5.0f;

    

    // Update is called once per frame

    void Update () {

        if(isClicked)

            if (leftTime > 0)

            {

                leftTime -= Time.deltaTime * speed;

                if(leftTime < 0) {

                    leftTime = 0;

                    if(button)

                        button.enabled = true;

                    isClicked = true;   

                }

                float ratio = 1.0f - (leftTime / coolTime);

                if(image)

                    image.fillAmount = ratio;

            }

    }

    public void StartCoolTime() {

        leftTime = coolTime;

        isClicked = true;

        if(button)

        button.enabled = false; // 버튼 기능을 해지함.

    }

}

다음과 같이 작성한다.

유니티 On Click에서 버튼을 눌렀을 때 StartCoolTime()을 실행시키도록 하고,

Image와 Button은 버튼에 동일한 위치에 존재하는 컴포넌트를 집어넣어 주면 된다.

speed를 통해 쿨타임 시간을 조절할 수 있다.