유니티 스킬 쿨타임 표시 구현하기

모처럼 폭염이 누그러진 시원한 일요일 주말입니다 ~ 덕분에 에어컨 없이도 쾌적하게 살고 있네요. 요며칠 또 이런 저런일이 겹치는 바람에 포스팅을 못했었는데 그게 벌써 6일째였네요... 매일 한개씩 포스팅을 하려고 노력하고 있지만 마음처럼 되질 않네요 .. 그래도 꾸준히 올리려고 노력하고 있습니다!

오늘은 스킬 쿨타임을 구현해보려고 합니다. 게임을 해보신 분들이라면 스킬 쿨타임이 무슨 말인지는 아실꺼라 생각하지만 짚고 넘어가자면

( 출처 : http://www.inven.co.kr/mobile/board/powerbbs.php?come_idx=4677&my=chu&l=5837 )

대부분 아실 게임들을 생각하고 찾다보니 구현하려는 효과와 비슷하면서 다들 한번 쯤은 보셨을 것 같은 '오버워치' 게임을 예로 들겠습니다.

저기 노란색 박스에 있는 그림이 바로 스킬 이미지입니다. 마우스 우측을 누르면 스킬이 나가도록 되어 있네요. 지금 이미지의 상태는 사용이 가능한 상태입니다.

( 출처 : http://www.inven.co.kr/mobile/board/powerbbs.php?come_idx=4677&my=chu&l=5837 )

스킬을 사용하고 나면 저렇게 스킬 이미지가 특정한 색상(노란색)으로 바뀌고 시간 표시가 나오게 됩니다. 저 상태가 바로 '스킬 쿨타임' 상태에요.

그렇다면 쿨타임이 왜 필요 한가?

만약 체력이 100인 동일한 캐릭터를 가지고 두 플레이어가 대전을 하는 게임이 있다고 가정해봅시다. 그리고 캐릭터는 마우스 우측 클릭을 하면 상대방 캐릭터의 체력을 50감소 시키는 스킬이 발동됩니다. 여기서 만약 '스킬 쿨타임' 이라는 개념이 없다면 게임이 시작하는 대로 마우스 우측 클릭을 2번이상 빠르게 클릭하는 플레이어가 무조건 승리하겠죠? 

하지만 '스킬 쿨타임' 개념을 넣어서 마우스 우측 클릭을 입력하면 발동되는 스킬은 발동 직후 5초의 시간 동안 사용하지 못하고 5초의 시간이 지난 후에 다시 사용 가능한 상태로 만들면 스킬을 바로 재사용하지 못하게 됩니다. 그러면 스킬을 어떻게 적재적소에 사용하냐에 따라 게임의 판도가 달리지겠죠, 때문에 쿨타임 개념을 넣는 겁니다.

말로 설명하기에는 너무 길고 복잡한 설명이였네요 ㅠ

---

자 언제나처럼 서론이 길었고 바로 구현 해보도록 하겠습니다.

우선 프로젝트 상에서 'Image' UI를 추가시켜줍니다. 

저는 스킬의 모양이 동그랗다고 가정하고 눈에 잘 보이게 해주기 위해서 하늘색으로 바꾸어주었습니다.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
 
public class FillAmount : MonoBehaviour {
 
    public Image img_Skill;
 
    // Use this for initialization
    void Start () {
        
    }
    
    // Update is called once per frame
    void Update () {
        if (Input.GetKeyDown (KeyCode.T))
        {
            StartCoroutine(CoolTime (3f));
        }
    }
 
    IEnumerator CoolTime (float cool)
    {
        print("쿨타임 코루틴 실행");
 
        while (cool > 1.0f)
        {
            cool -= Time.deltaTime;
            img_Skill.fillAmount = (1.0f / cool);
            yield return new WaitForFixedUpdate();
        }
        
        print("쿨타임 코루틴 완료");
    }
}
 

그리고 스크립트를 작성합니다 !

자칫 복잡해 보일 수도 있는데 살펴보면 간단합니다.

우선 스킬을 발동시키는 버튼을 if (Input.GetKeyDown (KeyCode.T)) 에서 키보드 'T' 버튼으로 지정해주었습니다. 그리고 if 문을 이용해서 "만약 T키를 입력했다면 StartCoroutine(CoolTime (3f)); CollTime 이라는 코루틴 함수를 실행시킵니다. 여기서 '3f'는 쿨타임을 3초로 만들어 주려고 들어가 있는겁니다. 만약 3f가 아니고 StartCoroutine(CoolTime (10f)); 였다면 쿨타임은 10초가 되겠죠 ?

그리고 IEnumerator CoolTime (float cool) 코루틴 함수를 만들 때 cool이라는 float형 값을 받아오도록 해줍니다.

while (cool > 1.0f)

        {

            cool -= Time.deltaTime;

            img_Skill.fillAmount = (1.0f / cool);

            yield return new WaitForFixedUpdate();

        }

이 부분이 결국 쿨타임에 전부라고 할 수 있는 부분 입니다.

코루틴 함수가 실행될 때 받아온 'cool'이라는 이름의 float형 자료형이 1.0 보다 크다면 반복 실행되게 합니다. 그리고 cool -= Time.deltaTime; 을 사용하여 일정 시간마다 cool 값을 감소 시킵니다. 그러면 실행될 때 마다 cool 값은 감소될 것이고 while 조건문에 cool이 1.0보다 작아지는 순간이 오겠죠? 그러면 루프가 끝나고 쿨타임이 끝나게 되는겁니다.

img_Skill.fillAmount = (1.0f / cool); 그리고 이 부분은 Image UI에 보면

Image Type을 Filled로 했을 때 Fill Amount 값이 생겨납니다. 1값이 Image가 완전히 표현되는 상태이고 Fill Method에 Radial 360은 그림에서 보듯이 동그란 원을 말합니다. Fill Origin에 Bottom은 어느 방향에서 부터 이미지가 채워지는지를 정해주는 부분이구요.

말로는 복잡하니까 이미지를 통해 보도록 합시다.

이렇게 됩니다 ! (Radial 360의 0.5는 Horizontal 0.5와 같은 모양이므로 0.25로 했습니다)

결국

Fill Amount는 이미지를 얼마나 표현할 것인가

Fill Method는 이미지를 어떤 모양으로 표현할 것인가

Fill Origin은 이미지를 어떤 위치에서 부터 표현할 것인가

이겠네요 ~

아마 직접 유니티 내에서 만져보시면 제가 말로 설명한 것 보다 백배천배 간단하고 쉽게 이해하실 수 있을거에요 :D

이제 완성한 스크립트를 아무 곳에나 넣어줍니다 (저는 Player에 넣었습니다.)

그리고 Img_Skill에 스킬 아이콘으로 사용할 Image를 드래그드랍 해서 넣어주세요.

그리고 씬을 실행시켜서 스킬 발동키를 입력하면 (제 스크립트에서는 T 키입니다.)

보이는 것 처럼 아이콘이 시간에 따라 바뀌게 됩니다 !

게임에서는 보통 스킬 아이콘은 그대로고 색상만 변하게 되는데 그건 원본 아이콘 위에 같은 모양 같은 위치에 회색 Image를 만들어놓고 그 회색 Image에 스크립트를 적용시키면 똑같은 효과를 볼 수 있습니다 ~

---

나름 이미지를 많이 넣고 설명하려고 쓴 글이지만 역시나 이해도 못하게 장황하게 텍스트가 잔뜩 들어간 글이 되어버렸네요 하하 :D 이 글을 보시는 분들은 어렵지 않게 이해해주시리라 믿습니다.

혹시나 이해가 되지 않는 분들은 댓글 달아주시면 빠른 시간내로 답장해드리겠습니다.

개발자를 꿈꾸는 분들에게 조금이나마 도움이 되는 글이였으면 좋겠습니다 !