저번 포스트에서 클리어 처리까지 완료하여 게임이 거의 완성되어 갑니다.

 

[Unity] 2D 미로찾기 게임 만들기 #06 - 클리어 처리

저번 포스트까지 클리어 조건에 대한 설정을 전부 만들었습니다. [Unity] 2D 미로찾기 게임 만들기 #05 - 클리어 조건(키 획득)저번 포스트에서 타임어택을 설정하였습니다. [Unity] 2D 미로찾기 게임

hya68.tistory.com

 

이번에는 씬 전환을 통한 시작 씬을 게임 씬과 연결하고 각종 버튼들을 활성화시키겠습니다.

 

저는 아래와 같이 게임 로직을 구성했습니다. 이에 따라 버튼을 만들어 보겠습니다.

게임 로직


먼저 UI를 통해 버튼을 만듭니다.

버튼 만들기 : GameObject > UI > 버튼-TextMeshPro

버튼 생성

시작 씬에서는 설명 버튼(왼쪽 위), 시작 버튼(중앙 아래), 닫기 버튼(오른쪽 위)로 구성되게 만들었습니다.

열고 닫을 수 있는 설명 UI는 중앙에 위치시켰으며, UI 안에 닫기 버튼도 추가했습니다.

또한, 게임 오버와 게임 클리어 시 나타나는 UI에는 RESET 버튼, HOME 버튼으로 구성되며, 닫기 버튼도 만들었습니다.

이후에 게임 스테이지를 추가하여 게임 클리어 UI에 NEXT 버튼도 추가할 예정입니다.

 

[버튼 구성]

- 설명 버튼(토글 형식) : 설명 UI창 표시/미표시

- 설명 UI창 닫기 버튼 : 설명 UI창 미표시

- 시작 버튼 : 게임 씬 불러오기(씬 전환)

- X(닫기) 버튼 : 게임 종료

- RESET 버튼 : 게임 다시 시작

- HOME 버튼 : 시작 씬 불러오기(씬 전환)

- (이후 추가될) NEXT 버튼 : 다음 게임 스테이지 씬 불러오기(씬 전환)

 

이제 버튼을 활성화해보겠습니다.

버튼 활성화 스크립트는 아래와 같습니다.

    using System.Collections;
    using System.Collections.Generic;
    using UnityEngine;
    using UnityEngine.SceneManagement;

    public class ButtonSample : MonoBehaviour
    {

        [SerializeField]
        GameObject sp; // 설명 UI창

        // close 버튼을 누르면
        public void OnClickClose()
        {
            Application.Quit(); // 게임 종료
        }

        // setting 창 띄우기(토글)
        public void OnClickSetting()
        {
            if (sp.activeSelf == true) {
                sp.SetActive(false);
            } else {
                sp.SetActive(true);
            }
        }

        // setting 창 닫기
        public void OnClickSettingOut()
        {
            sp.SetActive(false);
        }

        // reset 버튼을 누르면
        public void OnClickReset()
        {
            // 게임 다시 시작
            SceneManager.LoadScene(SceneManager.GetActiveScene().name);
        }

        // home 버튼을 누르면
        public void OnClickHome()
        {
            // 시작 화면으로
            SceneManager.LoadScene("StartTest");
        }

        // start 버튼을 누르면
        public void OnClickStart()
        {
            // 게임 시작
            SceneManager.LoadScene("MyCatTest");
        }
    }

위의 스크립트를 모든 버튼에 적용시킵니다.

게임 오브젝트 Sp는 설명 UI 이므로 설명 버튼에서만 설정해두면 됩니다. (나머지는 빈 오브젝트로 두기)

설명 버튼 스크립트 적용 및 버튼 설정

 

 

 

여기까지 하시고 START(씬 전환) 버튼을 실행해보시면 오류가 하나 뜰겁니다.

Scene "씬 이름" couldn't be loaded because it has not been added to the build settings or the AssetBundle has not been loaded. To add a scene to the build settings use the menu File->Build Settings...

 

빌드 설정에 해당 씬이 포함되지 않았다는 말입니다. 빌드 설정에 씬을 추가해주시면 됩니다.

빌드 설정에 씬 추가하기 : 파일(File) > 빌드 설정( Build Settings) > 열린 씬 추가 or 씬 드래그

빌드 설정에 씬 추가하기

빌드 씬의 순서는 로직 순서대로 맞춰주는 게 좋습니다. 만들어지는 게임 첫 시작 화면이 0번째 씬이기 때문입니다.


여기까지 무사히 하셨다면 최종적으로 아래 영상과 같이 만들어집니다.

 

저번 포스트까지 클리어 조건에 대한 설정을 전부 만들었습니다.

 

[Unity] 2D 미로찾기 게임 만들기 #05 - 클리어 조건(키 획득)

저번 포스트에서 타임어택을 설정하였습니다. [Unity] 2D 미로찾기 게임 만들기 #04 - 타임어택 적용하기이전 포스터에서는 타일맵 스프라이트를 조정하여 오류를 잡았었습니다. [Unity] 2D 미로찾

hya68.tistory.com

 

이제 클리어 처리를 해보겠습니다.

먼저 골 지점을 표시해 줄 이미지에 Collider2D를 적용시킵니다.

그리고 클리어 화면을 만들어보겠습니다.

 

이제 클리어 처리 스크립트를 작성하겠습니다.

이전 포스트에서 말했듯이 클리어 조건은 2가지로 모든 열쇠 획득과 골 지점에 도착하는 것이었습니다.

이 두 조건을 모두 만족해야 클리어가 가능하도록 스크립트를 짜면 아래와 같습니다.

최종적으로 아래와 같이 만들어집니다.

키를 다 얻지 못하면 골 지점에 닿아도 클리어 할 수 없으며,

키를 전부 얻고 골 지점에 도착하면 클리어 화면이 띄워지게 됩니다.

저번 포스트에서 타임어택을 설정하였습니다.

 

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

이전 포스터에서는 타일맵 스프라이트를 조정하여 오류를 잡았었습니다. [Unity] 2D 미로찾기 게임 만들기 #03 - 타일맵 스프라이트 크기 조정지난 포스트에서 플레이어 조작법에 대해 알아보았습

hya68.tistory.com

 

이번에는 클리어 조건 중 하나인 키 획득 설정을 추가하려고 합니다.

 

제가 만들 미로찾기의 클리어 조건은 2가지입니다.

1. 정해진 수량의 키 획득 (전부 얻지 못하면 끝나는 지점에 도착해도 클리어 불가)

2. 제한 시간 내에 클리어 (타임어택)

 

타임어택은 만들었으니 이제 키 획득에 관한 설정을 만들어 봅시다.

키 이미지 및 이름

위의 사진처럼 맵에서 키를 획득하면 아래 키 그림이 채워지는 방식입니다.

변수명

- 맵에 나타나는 키 이미지 : KeyItem

- 맵 아래에 나타나는 비어있는 키 카운트 : KeyCount

- 맵 아래에 나타나는 채워진 키 카운트 : KeyCountFull (비활성화)

 


플레이어와 키 이미지 충돌 처리

먼저 맵에 나타나는 키 이미지에 충돌 처리를 적용하기 위해 circle collider2D를 적용시킵니다.

키 이미지에 circle collider2D 적용

그 후 스크립트를 통해 충돌 처리를 적용시킵니다.

충돌 처리를 위해 OnTriggerEnter2D 메소드를 사용합니다.

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

    public class Key : MonoBehaviour
    {
        // 플레이어와 키 아이템 충돌 감지
        private void OnTriggerEnter2D(Collider2D other) {
            // 키와 충돌한 오브젝트의 태그가 Player이고 해당 키의 태그가 KeyItem이면
            if (other.gameObject.tag == "Player" && gameObject.tag == "KeyItem") {
                gameObject.SetActive(false); // 플레이어와 충돌한 키를 비활성화 한다.
            }
        }
    }

위의 Key 스크립트를 모든 키 오브젝트에 추가합니다.

플레이어가 맵 밖으로 나가는 걸 막기 위해 box collider2D가 적용된 오브젝트를 배치했습니다.

따라서 플레이어는 맵 안에서의 키하고만 충돌 처리가 일어납니다.

 

여기까지 하셨을 때 게임 플레이 화면입니다.

맵에서 플레이어가 키를 획득하면 키 이미지가 사라지는 것이 확인되었습니다.

이제 맵 아래의 키 카운트를 적용시키겠습니다.


키 획득 시 카운트 적용

저는 시작 지점에서 가까운 순으로 키 순서를 정했습니다.

카운트 또한 해당 키 순서에 맞게 채워질 예정입니다.

 

즉, 만약 플레이어가 KeyItem2를 획득한다면

KeyCount2는 비활성화, KeyCountFull2는 활성화되는 것을 구현하면 됩니다.

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

    public class Key : MonoBehaviour
    {
        // 플레이어와 키 아이템 충돌 감지
        private void OnTriggerEnter2D(Collider2D other) {
            // 키와 충돌한 오브젝트의 태그가 Player이고 해당 키의 태그가 KeyItem이면
            if (other.gameObject.tag == "Player" && gameObject.tag == "KeyItem") {
                gameObject.SetActive(false); // 플레이어와 충돌한 키를 비활성화 한다.
               
                // 플레이어와 충돌한 키 이름의 마지막 숫자
                int kLastName = int.Parse(gameObject.name.Substring(gameObject.name.Length-1, 1));

                // 채워진 키 카운트 활성화시키기
                GameObject.Find("KeyCountFull").transform.GetChild(kLastName-1).gameObject.SetActive(true);

                // 빈 키 카운트 비활성화시키기
                GameObject.Find("KeyCountBlank").transform.GetChild(kLastName-1).gameObject.SetActive(false);
            }
        }
    }

KeyCountFull 이미지들이 비활성화되어 있기 때문에 스크립트에서 직접 이미지를 찾는 것은 불가능합니다.

따라서 부모 폴더를 활용하여 코드를 작성하면 아래와 같이 잘 동작하게 됩니다.

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

 

[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님의 유니티 튜토리얼 유튜브 - 시간 종료 시 글자 보이기

 

지난 포스트에서 플레이어 조작법에 대해 알아보았습니다.

 

[Unity] 2D 미로찾기 게임 만들기 #02 - 플레이어 조작

이전 포스트에서 맵 생성을 했었는데요, 이번에는 플레이어를 만들어봅시다. [Unity] 2D 미로찾기 게임 만들기 #01 - 맵 생성유니티로 간단하게 2D 미로찾기 게임을 만들어 봅시다. 먼저 미로찾기

hya68.tistory.com

 

이번에는 저번에 말했던 오류에 대해 알아보겠습니다.

 

 

영상을 보시면 미로 사이를 통과하는 걸 볼 수 있습니다.

이 이유는 각 미로를 이루고 있는 스프라이트의 크기가 작아서 사이사이에 공간이 생기기 때문입니다.

해결방안으로는 스프라이트 크기를 키워서 사이공간이 사라지게 하면 될 것 같습니다.

 

스프라이트의 크기를 조정하는 방법은 간단합니다.

스프라이트 자체 단위당 픽셀을 조정하면 되는데, 숫자가 클수록 스프라이트 크기가 작아집니다.

단위당 픽셀 100 / 단위당 픽셀 70

단위당 픽셀 초기값은 100이며, 맵에 맞게 픽셀 크기를 조정하면 됩니다.

 

여기서 주의할 점은 타일맵에 Tilemap Collider 2D를 사용한 후

단위당 픽셀을 수정하면 Tilemap Collider 2D 컴포넌트를 다시 초기화시켜야 합니다.

컴포넌트 초기화
컴포넌트 초기화 전/후

바뀐 스프라이트를 적용시켜야하기 때문에 초기화는 반드시 필요합니다.

초기화 말고 컴포넌트 자체를 삭제했다가 다시 추가해도 괜찮습니다.

 

이제 미로 사이로 빠져나가지 않게 됐습니다.

 

다음엔 함정을 만들어보도록 하겠습니다.

+ Recent posts