Hya 개발스토리

[Unity] 2D 미로찾기 게임 만들기 #04 - 타임어택 적용하기 본문

Project/MyCat(미로찾기)

[Unity] 2D 미로찾기 게임 만들기 #04 - 타임어택 적용하기

Hya68 2024. 8. 20. 11:23

이전 포스터에서는 타일맵 스프라이트를 조정하여 오류를 잡았었습니다.

 

[Unity] 2D 미로찾기 게임 만들기 #03 - 타일맵 스프라이트 크기 조정

지난 포스트에서 플레이어 조작법에 대해 알아보았습니다. [Unity] 2D 미로찾기 게임 만들기 #02 - 플레이어 조작이전 포스트에서 맵 생성을 했었는데요, 이번에는 플레이어를 만들어봅시다. [Unity

hya68.tistory.com

 

플레이어부터 맵까지 기본 뼈대를 만들었다면

이제 클리어, 함정, 버프, 타임어택(UI) 등의 게임 요소들을 추가해보겠습니다.

 

이번 포스트에서 추가할 요소는 타임어택입니다.

함정을 먼저 만들려고 했는데 타임어택과 관련된 함정이 있어서 타임어택부터 만들게 되었습니다.

타이머(Bar 형식)와 시간이 다 되면 나타나는 게임 오버 장면까지 만들겠습니다.


게임 오버 장면 만들기

 

게임 오버 장면은 패널(배경)과 텍스트를 통해 만듭니다.

[경로]

게임 오브젝트 > UI > 텍스트 / 텍스트 - TextMechPro

게임 오브젝트 > UI > 패널

UI 경로 / 이름 변경 및 그룹화

Canvas 폴더 안에 Text 오브젝트와 Panel 오브젝트가 생성되면 이름을 바꾸고 그룹화 해줍니다.

Panel 설정 / Text 설정

저는 위와 같이 Panel과 Text 설정을 해주었습니다.

설정 전 / 후

게임 오버 장면은 이렇게 완성시킵니다.


타이머(bar 형식) 만들기

모든 UI는 Canvas 폴더 안에 있어야 하므로 Canvas 폴더 안에 이미지를 만들어줍시다.

[경로]

Canvas 폴더 우클릭 > UI > 이미지

이미지 오브젝트의 소스 이미지를 추가하면 원하는 이미지가 화면에 나타납니다.

Canvas 폴더 내의 이미지 오브젝트 생성
TimeBarFull 이미지 설정

타임바가 줄어들게 하는 설정은 TimeBarFull 이미지 타입을 채움(Filled)로 설정해주면 됩니다.

저희는 가로로 줄어들어야 하기 때문에 채우기 방법을 가로로 바꿔줍니다.

채우기 양에 따라 좌우로 타임바가 좌우로 움직이는 것을 볼 수 있습니다.

 

이제 타임바가 일정 시간마다 줄어들고, 시간이 다 되면 게임 오버 화면을 띄우는 스크립트를 작성하겠습니다.

 using System.Collections;
 using System.Collections.Generic;
 using UnityEngine;
 using UnityEngine.UI;

 public class GameOver : MonoBehaviour
 {
     [SerializeField]
     GameObject gameOver; // 게임 오버 폴더
 
     [SerializeField]
     float maxTime = 5f; // 타임어택 최대 시간

     float timeLeft; // 스크립트 내에서의 채우기 양

     Image timeBarFull; // 줄어드는 타임바 이미지

     // Start is called before the first frame update
     void Start()
     {
         gameOver.SetActive(false); // 게임 오버 폴더 비활성화
         timeBarFull = GetComponent<Image>(); // 스크립트가 적용된 이미지(타임바 이미지)
         timeLeft = maxTime; // 채우기 양을 타임어택 최대 시간으로 설정
     }

     // Update is called once per frame
     void Update()
     {  
         // 채우기 양이 0보다 크면 채우기 양을 줄인다.
         if (timeLeft > 0) {
             timeLeft -= Time.deltaTime;
             timeBarFull.fillAmount = timeLeft / maxTime; // 채우기 양 설정
         // 채우기 양이 0보다 작으면 게임 오버 화면을 활성화한다.
         } else {
             gameOver.SetActive(true); // 게임 오버 폴더 활성화
             Time.timeScale = 0;
         }
     }
 }

스크립트를 TimeBarFull에 적용 후 GameObject를 GameOver 폴더로 설정해줍니다.


이렇게 타임어택이 적용되었습니다.

최종적으로 게임 개발이 마무리 될 때 max time을 적절히 조정하여 게임 밸런스를 맞추면 됩니다.


참고자료

Ncube님의 유니티 튜토리얼 유튜브 - 시간 종료 시 글자 보이기