[Unity] Knife Hit (6)

suhan0304·2024년 8월 28일

KnifeHit Unity

유니티 - Knife Hit

목록 보기

6/9

GameOver UI Update

게임 오버 씬에 Animation 효과를 줘보자. 기존 OnGameOver에서 gameOverUI를 활성화해줬는데 여기서 활성화한 후에 간단한 애니메이션이 나오도록 해보자.

이런 간단한 move나 scale의 변화는 DOTween Animation으로 바로 처리해줄 수 있다.

Local Move로 설정해 준후에 Duration과 Delay를 적절히 조절하고 TO를 목적지 좌표로 설정한다.

참고로 하단의Events를 사용해 OnStart나 OnComplete처럼 콜백함수를 설정해줄 수 있다.

무엇보다 게임을 실행하지 않고 바로 Animation을 Play 해볼 수 있다는게 진짜 편리성이 말이 안 된다.

이제 각 버튼들에도 애니메이션을 추가해준다.

각 오브젝트별 컴포넌트 값은 아래와 같이 설정했다. 이 때 RestartButton과 ContinueButton은 OnComplete 콜백함수로 DOPlay 시켜 줄거라서 AutoPlay를 꺼놔야한다. AutoKill을 하지 않은 이유는 나중에 Continue 버튼 로직을 구현할 때 재사용을 할 수도 있어서 일단은 체크 해제해주었다.

ScoreStagePanel

RestartButton

Continue Button

OnComplete에 다른 오브젝트를 추가하고 DOPlay()를 실행시켜서 다른 오브젝트의 DOTween Animation을 실행할 수 있다.

진짜 정말 간단하게 애니메이션을 만들어줬다.

나중에 UI ToolKit을 사용하는지는 모르겠는데 UI ToolKit도 Animation 자체는 굉장히 쉽게 구현 가능하다. 굳이 순위를 매기자면 (DOTween Animation > UI Tool Kit > DOTween Script > UGUI Animation ) 이 정도의 느낌? 하지만 DOTween Animation은 복잡한 제어가 어렵기 때문에 필요할 떄 적절히 사용하는게 좋긴 하겠다.

Boss System 구현

실제 Knife Hit 게임에서는 5 스테이지마다 보스가 등장한다.

이런 느낌으로 UI가 있어서 일단 한번 제작해보자.

유사하게 잘 만들어졌다. STAGE가 진행됨에 따라 색이 칠해지도록 하자. (아직 5라운드마다 보스가 나오는 것은 구현X)

UIManger.cs

private void Start() {
    gameOverUI.SetActive(false);
    NewBestUI.SetActive(false);

    foreach(var stageIcon in stageIcons) {
        stageIcon.color = stageInitColor;
    }
    stageIdx = 0;
    stageIcons[stageIdx++].color = stageClearColor;
}

public void OnAllKnivesOnHit() {
    if(stageIdx < 4) {
        stageIcons[stageIdx++].color = stageClearColor;
    }
    else if(stageIdx == 4) {
        //TODO - Boss Animation
        stageIdx = 0;
    }
    HideStageTextFadeAnimation();
}

그러면 스테이지가 진행됨에 따라 상단의 아이콘이 색이 잘 변한다.

실제 인게임을 보면 아이콘이 살짝 확대 되었다가 꺼지는 애니메이션이 적용되는데 이것도 적용시켜보자.

public void OnAllKnivesOnHit() {
    if(stageIdx > 4) {
        InitializeStageIcons();
    }
    else if (stageIdx == 4){
        // TODO - Boss Animation
        stageIdx++;
    }
    else {
        stageIcons[stageIdx].transform.DOPunchScale(new Vector3(0.25f, 0.25f, 0), 0.5f, 5, 1f)
            .OnComplete(()=> {
                stageIconsImage[stageIdx++].color = stageCurrentColor;
            });
    }
    HideStageTextFadeAnimation();
}

애니메이션이 잘 적용된다. 이제 보스를 만들어야 하는데.. Target Prefab을 기반으로 보스를 만들어보자.

일단 오렌지 스프라이트를 이용해 동일하게 Segment를 적용시켜주고, Target의 속도나 회전을 좀더 괴랄(?)하게 조절한다. 이제 5라운드 단위로는 보스가 생성되도록 해보자.

GameManager.cs

private void StartStage() {
    if (stageNum%5 == 0) {
        SpawnBoss(stageNum%5);
    }
    else {
        SpawnTarget();
    }

    UIManager.Instance.Initialize();
    UIManager.Instance.SpawnKnivesIcon(RemainKnives);
    
    SpawnKnife();
    Events.OnStartStage?.Invoke(stageNum);
}

private void NextStage() {
    stageNum += 1;
    StartStage();
}

[Button("SpawnBoss")]
public void SpawnBoss(int bossNum) {
    GameObject currentBoss = Instantiate(boss);
    RemainKnives = currentBoss.GetComponent<Target>().knivesToDestroy;
}

보스 몹이 잘 생성된다. 이제 보스 몹 등장 UI 애니메이션을 제작해주자. 이 때 보스몹이 별도의 이름을 가지고 있어야 해서 Target을 상속 받는 Boss.cs를 따로 작성해줬다.

Boss.cs

public class Boss : Target
{
    public string bossName;
}

일단 텍스트로 BossName을 먼저 설정해주게 해주자.

UIManager.cs

public void OnStartStage(int _stageNum) {
    if(_stageNum%5 == 0) {
        stageText.color = bossTextColor;
        stageText.text = "BOSS: " + GameManager.Instance.currentTarget.GetComponent<Boss>().bossName;
    }
    else {
        stageText.color = stageTextColor;
        stageText.text = "STAGE " + _stageNum;
    }
    ShowStageTextFadeAnimation();
}