유니티 아이템 / 스킬 쿨타임 UI 표시 in Script

 

 

리그오브레전드, 던전앤 파이터, 등 다양한 온라인 게임에서 일반 공격 외에 스킬이라는 개념을 두어 사람들이 더 게임을 재밌게 합니다. 스킬은 일반적으로 무제한으로 사용하게 되면 게임 밸런스가 무너지기 때문에 일정 시간의 텀을 두어 사용할 수 있게 설계를 합니다. 스킬을 한 번 사용하고 그 스킬을 일정 시간 뒤에 재사용할 수 있고 그 시간이 다 될 때까지 기다려야 합니다. 이렇게 재사용까지 기다리는 시간을 쿨타임이라고 합니다. 이 쿨타임이라는 요소는 게임 유저에게는 더 흥미진진하게 만듭니다. 내가 스킬을 사용할 수 있는데 상대는 사용할 수 없을 때의 쾌감, 반대로 상대는 스킬이 사용 가능하고 나는 스킬을 사용할 수 없을 때의 불안감을 느낄 수 있습니다. 일반적으로 스킬의 쿨타임은 시각적으로 시계가 돌아가는 듯한 효과를 주고 가운데 남은 시간(보통은 초)을 표시해서 얼마 뒤에 다시 스킬을 쓸 수 있는지 표시합니다. 사용자가 스킬을 사용하면 다시 기다리는 시간이 표시되고의 반복입니다. 유니티에는 이미지를 360도로 돌아가면서 구획을 표시하고 나머지는 마스킹 할 수 있는데 fillAmount를 활용해서 구현이 가능합니다.

 

 

 

C# (UNITY 3D)

 

 

 

이미지를 fillAmount를 사용해서 쿨타임 2초 동안 남은 시간을 텍스트와 시각적 이미지로 표현하고, 남은 시간을 소수점 첫 번째 자리까지 표시하는 예시입니다.

 

 

 

using UnityEngine.UI;

 

스크립트 안에서 남은 시간을 시각적으로 표시할 Text와 Image를 사용하기 위해 UnityEngine.UI를 사용합니다.

 

 

구조

 

구조는 스킬 아이콘(Image_Icon)을 부모로 두고 시각적으로 표시할 이미지(Image_Fill)와 텍스트(Text_Time)를 자식으로 둠. fillAmount를 사용할 게임 오브젝트는 Image_Fill로 맞춰줍니다.

 

 

쿨타임 할당

 

사용할 스크립트에 각 컴포넌트를 가지고 있는 게임 오브젝트 할당합니다.

 

 

 

 

    public Text text_CoolTime;
    public Image image_fill;
    private float time_cooltime = 2;
    private float time_current;
    private float time_start;
    private bool isEnded = true;

    void Start()
    {
        Init_UI();
        Trigger_Skill();
    }

    void Update()
    {
        if (isEnded)
            return;
        Check_CoolTime();
    }

    private void Init_UI()
    {
        image_fill.type = Image.Type.Filled;
        image_fill.fillMethod = Image.FillMethod.Radial360;
        image_fill.fillOrigin = (int)Image.Origin360.Top;
        image_fill.fillClockwise = false;
    }

    private void Check_CoolTime()
    {
        time_current = Time.time - time_start;
        if (time_current < time_cooltime)
        {
            Set_FillAmount(time_cooltime - time_current);
        }
        else if (!isEnded)
        {
            End_CoolTime();
        }
    }

    private void End_CoolTime()
    {
        Set_FillAmount(0);
        isEnded = true;
        text_CoolTime.gameObject.SetActive(false);
        Debug.Log("Skills Available!");
    }

    private void Trigger_Skill()
    {
        if(!isEnded)
        {
            Debug.LogError("Hold On");
            return;
        }

        Reset_CoolTime();
        Debug.LogError("Trigger_Skill!");
    }

    private void Reset_CoolTime()
    {
        text_CoolTime.gameObject.SetActive(true);
        time_current = time_cooltime;
        time_start = Time.time;
        Set_FillAmount(time_cooltime);
        isEnded = false;
    }
    private void Set_FillAmount(float _value)
    {
        image_fill.fillAmount = _value/time_cooltime;
        string txt = _value.ToString("0.0");
        text_CoolTime.text = txt;
        Debug.Log(txt);
    }

 

변수(variable)

text_CoolTime : 남은 시간 표시 (Text)
image_fill : 남은 시간 시각적으로 표시 (Image)

time_cooltime : 쿨타임으로 사용할 시간 (float) 
time_current : 스킬 재사용까지 남은 시간 (float)
time_start : time.Time과 비교해서 time_current를 만들기 위해 시간을 저장 (float)
isEnded : 쿨타임이 끝났을 때 true (bool)

 

함수(function)

Init_UI : image_fill의 fillAmount를 360도 시계 반대 방향으로 회전하게 설정
Check_CoolTime : 스킬 재사용까지 남은 시간을 검사 및 표시 (Update, for, while, 등 반복문에 삽입) 
End_CoolTime : 쿨타임이 끝나서 스킬 재사용이 가능해진 시점
Trigger_Skill : 스킬 발동
Reset_CoolTime : 쿨타임 리셋
Set_FillAmount : 스킬 재사용 시간 시각화

 

 

 

Skill Cool Time / fillMethod / Radial360 / Image type / Type Filled / fillOrigin / Oringin360.Top / fillClockwise / 이미지 타입 / 스킬 사용