[Unity][3D-Game] Tower Defense Game (15)

• preview Link : https://velog.io/@suhan0304/Unity3D-Game-Tower-Defense-Game-14
• gitHub Link : https://github.com/suhan0304/TowerDefenseTutorial

---

강의영상 (17)

---

개발

게임 오버 UI

게임 오버 시 뜰 화면을 만들기 위한 UI를 제작하기 위해 OverlayCanvas에 GameOver이라는 빈 오브젝트를 만든 후에 패널을 하나 자식 오브젝트로 생성해준다.

• GameOver을 전체화면에 꽉 차도록 앵커 설정을 해준다.
• Panel의 Image의 색상을 적절하게 조절한다.

GameOver의 자식 오브젝트로 Text를 하나 생성해준다.

• 이름을 GameOverText로 설정
• 사이즈를 150, 색상을 흰색으로 설정
• 글꼴을 Roboto-Medium으로 설정
• Shadow컴포넌트 추가

빈 오브젝트 Rounds Survived를 해서 해당 오브젝트의 자식 오브젝트로 GameOverText를 Ctrl+D로 하나 더 만들어준 후에 드래그드랍해서 넣어준 다음에 살아남은 라운드를 표시해주기 위해 사용한다.

• 이름을 Rounds로 설정
• 사이즈를 200으로 설정
• 글꼴을 Roboto-Black으로 설정
• 그림자를 보라색으로 투명도를 낮게(알파를 높게) 설정

Rounds를 하나 더 복사해서 라운드 숫자 밑으로 옮긴 후에 작은 사이즈로 "ROUNDS SURVIVED"를 붙여준다.

이제 GameOver의 자식 오브젝트로 버튼을 하나 추가해준다.

• Image의 Source Image의 UISprite를 제거해서 None으로 설정
  - 각진 사각형 모양으로 설정
• Text를 "RETRY"로 설정

이제 이 버튼을 Ctrl+D 해준 다음 "MENU"로 만든 후에 두 버튼의 위치를 적절히 수정한다. 두 버튼의 이름은 각각 Retry, Menu로 설정한다.

이제 GameOver에 GameOver 스크립트를 컴포넌트에 생성해서 추가해준다. 이후에 GameOver 오브젝트를 비활성화 해놓고 게임 오버 시에만 나오도록 한다.

GameManager 업데이트

게임 오버시에 게임 오버 UI가 뜨도록 구현한다.

GameManager.cs

public GameObject gameOverUI;

private void Start()
{
    GameIsOver = false; //게임 시작 시에 게임 오버를 False로 설정
}

void EndGame() 
{
    GameIsOver = true;
    gameOverUI.SetActive(true); //게임 오버 UI 활성화
}

이제 게임 오버 후에 게임 카메라가 움직일 수 없도록 아래와 같이 CameraContorller 스크립트를 수정해준다.

CameraController.cs

void Update()
{
    if (GameManager.GameIsOver)
    {
        this.enabled = false;
        return;
    }
    
    ~~(생략)~~
}

PlayerStats에 Rounds 변수를 하나 만들어준 후에 WaveSpawner에서 SpawnWave에서 1씩 증가되도록 설정한다.

PlayerStats.cs

public class PlayerStats : MonoBehaviour
{
    public static int Money; //Static으로 선언하면 메모리 상에 바로 올라가 다른 스크립트에서도 편하게 접근 가능
    public int startMoney = 400; //시작 머니

    public static int Lives; //현재 생명 값
    public int startLives = 20; //초기화 값

    public static int Rounds = 0;

    void Start()
    {
        Money = startMoney; //게임 시작 시 Money를 시작 머니로 설정    
        Lives = startLives;

        Rounds = 0;
    }
}

WaveSpawner.cs

IEnumerator SpawnWave() //코루틴
{
    waveIndex++;//웨이브가 올때마다 레벨업
    PlayerStats.Rounds++;

    for (int i = 0; i < waveIndex; i++)  //웨이브 레벨만큼 몬스터 소한
    {
        SpawnEnemy();
        yield return new WaitForSeconds(0.5f);
    }
}

GameOver 스크립트

게임 오버 스크립트 내부에서는 게임 오버시 출력할 라운드 수를 찾아서 UI에 반영하고 Retry, Menu 버튼 이벤트를 작성한다.

GameOver.cs

public class GameOver : MonoBehaviour
{
    public Text roundsText;

    void OnEnable() //게임 오버 UI가 Active 시 실행
    {
        roundsText.text = PlayerStats.Rounds.ToString(); //라운드 설정
    }

    public void Retry()
    {
        //이름 또는 인덱스로 로드 씬 가능
        SceneManager.LoadScene(SceneManager.GetActiveScene().buildIndex); //현재 로드 중인 MainScene을 그대로 다시 불러옴
    }

    public void Menu()
    {
        Debug.Log("Go to menu.") // Menu ui 구현 후 연결
    }
}

SceneManager.LoadScene(SceneManager.GetActiveScene().buildIndex) 를 통해 현재 로드 중인 MainScene을 이름이나 씬 인덱스를 사용하지 않고 바로 다시 로드할 수 있다. 장면에 관계없이 어디에서나 사용할 수 있기 때문에 매우 자주 사용하는 코드 중 하나이다.

File > Build Settings에서 Scenes In Build 안에 MainScene을 드래그드랍해서 초기화 할 수 있다. 그러면 오른쪽의 인덱스를 확인할 수 있다.

이제 버튼 이벤트를 연결해준다.

애니메이션 구현

게임 오버 UI 애니메이션 구현을 위해 GameOver.anim라는 애니메이션을 생성해준다.

• BackGround(패널)의 컴포넌트로 Canvas Group을 추가해준 후 0초에서 alpha = 0, 0.3초에서 alpha가 1로 바뀌도록 설정한다.

• GameOverText도 Canvas Group을 추가해준 후 alpha 값은 0.15초에 1, 위치도 초기 시작을 상단에서 부터 0.15초에 원래 위치에 오도록 설정한다.

• RoundsSurvived도 Canvas Group을 추가해준 후에 스케일을 1.2에서 다시 1로 줄어들도록, 알파값도 다시 증가하도록 애니메이션을 추가해준다.

• 버튼에도 동일하게 Canvas Group을 추가해주고 스케일이 0.9 ~ 1.0으로 증가되도록 하고 알파도 동일하게 1까지 증가하도록 설정한다.

애니메이션은 자기가 원하는데로 설정하는 것이 베스트, 재생 해보면서 가장 어울리는 애니메이션으로 설정하자.

시작 위치와 끝 위치가 모두 같으면 애니메이션이 오히려 너무 로봇 같아 보이므로 시작과 끝 시점을 적절히 섞어서 배치하자.

모드 애니메이션을 선택 후에 Curves에서 우클릭한 다음에 Flat으로 바꾸면 더 자연스럽게 애니메이션을 설정할 수 있다.

이제 GameOver 애니메이션의의 Loop 설정을 꺼준다.

이렇게 설정하고 나면 GameOverUI가 활성화 될 때 자동으로 애니메이션이 한 번 실행된다.

---

결과물