캐주얼 슈팅 액션 대전 게임 (모바일) - 15 스킬 및 쿨타임 UI

오늘은 간단하게 버튼을 누를 시 스킬 애니메이션과 UI로 쿨타임을 알려주는 기능을 만들어보았다.

Skill Class

public class Skill : MonoBehaviour
{
    public enum SkillType { Dodge, SkillOne, SkillTwo}
    [SerializeField]
    private SkillType skill;
    private Button button;
    public PlayerMediator mediator;
    private void Start()
    {
        mediator = GetComponentInParent<PlayerMediator>();
        button = GetComponent<Button>();
        if(mediator != null)
        {
            SetButtonEvent();
        }
    }
    private void SetButtonEvent()
    {
        print("버튼 이벤트 추가");
        if(skill == SkillType.Dodge)
        {
            button.onClick.AddListener(() => mediator.Dodge());
        }
        else if(skill == SkillType.SkillOne)
        {
            button.onClick.AddListener(() => mediator.SkillOne());
        }
        else if(skill == SkillType.SkillTwo)
        {
            button.onClick.AddListener(() => mediator.SkillTwo());
        }
    }
}

이 스크립트는 스킬 버튼들한테 넣어줬다.

1. 각 스킬 버튼은 SkillType Dodge, SkillOne, SkillTwo 중에 한 가지의 SkillType을 가지고 있다.

Inspector 상에서 선택할 수 있게 SerializeField로 선언했다.

 

2. Start에서 PlayerMediator를 가지고 온다. 여기서 PlayerMediator는 Local Player 이다 (IsMine). 이전에 조이스틱 캔버스를 IsMine일 경우 자식으로 가지고 오는 코드를 작성을 했는데 Skill Button들도 그 캔버스에 넣어뒀다. 

 

3. Start 함수에 Button Event를 세팅하는 함수를 실행하게 했다.

 

4. 각 버튼이 눌리면 mediator에 있는 스킬 함수들을 실행한다.

원래 Dodge같은 경우에는 Input Class 에서 받아왔었는데 스킬 2종을 만들면서 같은 클래스에 묶었다.

 

Mediator에는 Dodge SkillOne 그리고 SkillTwo 함수가 있다. 

 

SkillOne

    public void SkillOne()
    {
        if (PV.IsMine && cooltime.canSkillOne && !isAttack && !isDodge && !isSkillTwo)
        {
            skillOneDir = lookDir;
            isSkillOne = true;
            aniCtrl.OnSkillOne();
            cooltime.CooltimeCal(CooltimeManager.SkillType.SkillOne);
            speed = 0;
        }
    }

SkillTwo

    public void SkillTwo()
    {
        if (PV.IsMine && cooltime.canSkillTwo && !isAttack && !isDodge && !isSkillOne)
        {
            skillTwoDir = lookDir;
            isSkillTwo = true;
            aniCtrl.OnSkillTwo();
            cooltime.CooltimeCal(CooltimeManager.SkillType.SkillTwo);
            speed = 0;
            print("mediator: SkillTwo");
        }
    }

스킬을 사용할 때 움직일 수 없게 하기 위해 speed를 0으로 맞췄다.

애니메이션이 끝나면 애니메이션 이벤트로 speed와 isSkillOne 또는 isSkillTwo를 true로 만들었다.

 

 

CoolTimeManager 

    public void CooltimeCal(SkillType skillType)
    {
        switch (skillType)
        {
            case SkillType.Dodge:       StartCoroutine(CRCooltime(skillType, skillCoolTime: dodgeCoolTime));        break;
            case SkillType.SkillOne:    StartCoroutine(CRCooltime(skillType, skillCoolTime: skillOneCoolTime));     break;
            case SkillType.SkillTwo:    StartCoroutine(CRCooltime(skillType, skillCoolTime: skillTwoCoolTime));     break;
            default: break;
        }
    }

 

1. 각 스킬은 실행될 때 CoolTimeCal 함수를 실행한다.

 

2. 매개변수로 자신의 Skill Type을 넣으면 Skill Type에 따라 CRCoolTime에 자신의 스킬타입과 쿨타임을 넣는다.

 

    IEnumerator CRCooltime(SkillType skillType, float skillCoolTime)
    {
        switch (skillType)
        {
            case SkillType.Dodge:       canDodge = false;       break;
            case SkillType.SkillOne:    canSkillOne = false;    break;
            case SkillType.SkillTwo:    canSkillTwo = false;    break;
            default: break;
        }

        float timer = 0;
        
        while(timer <= skillCoolTime)
        {
            timer += Time.deltaTime;
            UI.SkillUICoolTime(skillType, timer, skillCoolTime);
            yield return null;
        }

        switch (skillType)
        {
            case SkillType.Dodge:       canDodge = true;       break;
            case SkillType.SkillOne:    canSkillOne = true;    break;
            case SkillType.SkillTwo:    canSkillTwo = true;    break;
            default: break;
        }
    }

3 - 1. CRCoolTime안에서 Skill Type에 따라 bool 값을 false로 만들고

3 - 2. timer가 skillCoolTime과 같거나 커질 때 까지 While 문을 돌린다 이때 스킬 쿨타임을 표시해주는 UI 함수를 실행해준다.

3 - 3. skillCoolTime만큼 기다린 후에 에 다시 bool 값을 true로 바꿔 스킬을 사용할 수 있게 한다.

 

PlayerUI

UI를 담당하는 스크립트이다.

    public void SkillUICoolTime(CooltimeManager.SkillType skillType, float currentTime, float coolTime)
    {
        if(skillType == CooltimeManager.SkillType.Dodge)
        {
            dodge.fillAmount = 1 - (currentTime / coolTime);
        }
        else if (skillType == CooltimeManager.SkillType.SkillOne)
        {
            skillOne.fillAmount = 1 - (currentTime / coolTime);
        }
        else if (skillType == CooltimeManager.SkillType.SkillTwo)
        {
            skillTwo.fillAmount = 1 - (currentTime / coolTime);
        }
    }

 

이전번에 로컬 플레이어와 원격 플레이어(적)을 구분하기 위해 색깔을 바꿨던 스크립트이며 이번에 스킬 쿨타임 표시를 나타낼 스크립트이다.

 

1. 스킬 쿨타임은 간단하다. SkillType을 받고, 현재 시간, 그리고 스킬의 쿨타임을 받는다.

 

2. 그리고 이미지의 FillAmount를 1 - (currentTime / coolTime) 으로 한다.

 

※ 여기서 왜 1에서 빼냐면 쿨타임이 막 돌기 시작했을 때는 검은 이미지가 꽉 차있는 상태이고 그걸 쿨타임에 맞춰서 서서히 줄여가는 방식이기 때문이다. 만약에 1에서 빼지 않는다면 쿨타임이 다 되었을 때는 검은 이미지가 스킬 버튼을 꽉 채울 것이다. 왜냐면 fillAmount는 1이 꽉 채워진 상태이기 때문이다.

 

영상과 함께라면 이해가 쉬울 것이다.

 

https://youtu.be/RNkgLG4Q0n8

내일은 네트워크 환경에서 테스트를 해봐야겠다.

역시 네트워크 환경을 생각하지 않고 구현하면 구현 난이도는 확 내려가는 것 같다.

저번주는 포톤을 많이 사용해서 머리가 아팠는데 새로운 주의 시작이기 때문에 간단한 스킬 구현을 하는 판단 아주 좋았던 것 같다 헤헿