[유니티]나도코딩 - 기억력 테스트 게임 클론코딩(5) : 게임 보드 만들기

지난시간에 이어 유튜브의 나도코딩 채널에 있는 기억력 테스트 게임을 따라 실습해보도록 하겠습니다.

이미 한 번 실습을 마치고 완성되어있는 상태라 제 스스로 복습하고 기록을 남기고자 블로그를 작성하고 있습니다.

따라서 영상과 다른 사진들이 있으니 유튜브 영상을 보고 따라 만드시길 추천드립니다.

 

오늘은 실제 게임을 할 수 있는 게임 보드를 만들어 보겠습니다.

---

(저는 이미 Board가 완성되어 있는 상태라 사진에는 Board2로 되어있습니다. 이걸 보고 따라하시는 분들은 Board로 진행하시면 됩니다.)

1. Board 기능 구현

(1) 보드 오브젝트 및 스크립트 생성

① Hierachy 창에서 마우스 오르쪽 버튼 클릭 -> Create Empty -> Board로 이름 변경

② Project에 있는 Scripts 폴더에서 마우스 오른쪽 버튼 클릭 -> Create -> C# Script -> Board로 이름 변경

③ 생성된 스크립트를 Board 오브젝트에 드래그 앤 드롭하여 적용시키기

스크립트 적용까지 완료

 

(2) Card 오브젝트를 Prefabs로 변경

① Project창에서 Assets 폴더 안에 Prefabs라는 폴더를 만든다.

② 그 폴더 안에 Hierarchy창에 있는 Card 오브젝트를 드래그 앤 드롭한다.

③ Hierarchy창에 있는 Card 오브젝트는 삭제한다.

Prefab 생성

 

※ Prefab

프리팹(Prefab)은 미리 만들어 놓은 게임 오브젝트, 템플릿이다. 

프리팹은 Asset에 저장되어 있으며, 프리팹 인스턴스(Prefab Instance)를 생성하여, 월드 상에서 동작한다. 

프리팹으로부터 원하는 만큼의 프리팹 인스턴스를 생성할 수 있다. 생성된 프리팹 인스턴스는 서로 독립적으로 동작하며, 프리팹 인스턴스의 프로퍼티를 수정해도, 다른 프리팹 인스턴스에는 영향을 주지 않는다. 

즉, 미리 만들어진 Object를 재활용 가능한 형태로 만들어 두는 것을 의미합니다.

 

(2) Board 스크립트 작성

① Board 스크립트를 아래의 코드로 작성한다.

② Board 오브젝트의 prefab에 카드 prefab을 드래그 앤 드롭하여 적용시킨다.

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

public class Board : MonoBehaviour {

    [SerializeField]
    private GameObject cardPrefab;

    void Start() {
        InitBoard();
    }

    void InitBoard() {
        float spaceY = 1.8f;
        float spaceX = 1.3f;


        int rowCount = 5; // 세로줄
        int colCount = 4; // 가로줄

        for(int row = 0; row < rowCount; row++) {
            for(int col = 0; col < colCount; col++) {
                float posX = (col - (colCount / 2)) * spaceX + (spaceX / 2);
                float posY = (row - (int)(rowCount / 2)) * spaceY;
                Vector3 pos = new Vector3(posX, posY, 0f);
                Instantiate(cardPrefab, pos, Quaternion.identity);
            }
        }
    }
}

 

코드를 한 번 리뷰해보도록 하겠습니다.

 

1. [SerializeField]
    private GameObject cardPrefab;

- card 프리팹을 사용하기 위해 선언한 GameObject형 변수입니다.

2. float spaceY = 1.8f;
    float spaceX = 1.3f;

- 카드 사이간 세로 간격과 가로 간격을 저장할 변수입니다. 세로는 1.8, 가로는 1.3의 간격을 가집니다.

 

3. int rowCount = 5;
    int colCount = 4;

- 20장의 카드를 배치하기 위해 세로 5줄, 가로 4줄로 배치하기 위한 변수입니다.

4. float posX = (col - (colCount / 2)) * spaceX + (spaceX / 2);

- 카드들을 배치하기 위한 X좌표를 계산한 식입니다. 계산식이 나오는 과정을 한 번 알아보도록 하겠습니다. 점의 개수가 짝수일 경우 기준이 되는 0의 값의 좌표를 가지는 점이 없으므로 약간의 추가된 계산식이 들어갑니다.

 

① 점의 개수의 절반의 정수값을 각각의 점들에서 빼준다. 이 과정은 각 점들을 원점 0을 중심으로 대칭시키기 위한 기준으로 사용됩니다. 점의 개수가 4개이므로 절반인 2를 계산하여 각 점에서 뺍니다. (-2, -1, 0, 1)

=> col - (int)(colCount / 2)
② 점들의 간격을 맞추기 위해 원하는 간격만큼 각각의 점들에 곱해줍니다. 우리는 1.3 만큼의 간격을 갖기 위해 각각의 점들에 1.3을 곱해줍니다. (-2.6, -1.3, 0, 1.3)

=> (col - (int)(colCount / 2)) * spaceX
③ 간격의 절반의 값을 각각의 점들에 더해준다. 이 과정은 각 점들을 원점 0을 중심으로 좌우 대칭하게 배치하기 위해 사용됩니다. 점을 좌우 대칭으로 배치하기 위해서는 각 점을 양쪽으로 반씩 이동해야 합니다. ( -1.95, -0.65, 0.65, 1.95)

=> (col - (int)(colCount / 2)) * spaceX + (spaceX / 2)
④ 그럼 최종적으로 -1.95, -0.65, 0.65, 1.95의 위치로 이동된다.

 

5. float posY = (row - (int)(rowCount / 2)) * spaceY;

- 카드들을 배치하기 위한 Y좌표를 계산한 식입니다. 계산식이 나오는 과정을 한 번 알아보도록 하겠습니다. 점의 개수가 홀수인 경우 가운데 기준이 되는 0의 값을 갖는 좌표가 존재하므로 마지막 간격의 절반을 더하는 과정이 필요하지 않습니다.

 

① 점의 개수의 절반의 정수값을 각각의 점들에서 빼준다. 이 과정은 각 점들을 원점 0을 중심으로 대칭시키기 위한 기준으로 사용됩니다. 점의 개수가 5개이므로 절반인 2를 계산하여 각 점에서 뺍니다. (-2, -1, 0, 1, 2)

=> row - (int)(rowCount / 2)
② 점들의 간격을 맞추기 위해 원하는 간격만큼 각각의 점들에 곱해줍니다. 우리는 1.8 만큼의 간격을 갖기 위해 각각의 점들에 1.8을 곱해줍니다. (-3.6, -1.8, 0, 1.8, 3.6)

=> (row - (int)(rowCount / 2)) * spaceY;
③ 그럼 최종적으로 -3.6, -1.8, 0, 1.8, 3.6의 위치로 이동된다.

 

6. Vector3 pos = new Vector3(posX, posY, 0f);
- 카드를 배치하기 위해 계산한 X,Y 좌표의 값을 pos변수에 저장합니다.

 

7. Instantiate(cardPrefab, pos, Quaternion.identity);

- cardPrefab을 복제하여 씬에 게임 오브젝트를 생성합니다. 이를 복제하여 새로운 게임 오브젝트를 생성합니다. pos는 새로운 게임 오브젝트의 위치를 나타내는 Vector3입니다. Quaternion.identity는 회전을 나타내는 Quaternion으로, 여기서는 기본 회전을 나타내는 값입니다. 따라서, cardPrefab의 복제본이 pos 위치에 생성됩니다.

카드 프리팹을 스크립트 변수에 적용시키기

배치된 카드 모습

 

앞면에 악어가 들어간 모습

 

이렇게 하여 보드 오브젝트 및 스크립트를 완성시켜 카드를 배치시키는 과정까지 완료해봤습니다. 오늘의 핵심을 카드를 배치하기 위해 어떻게 계산해야 하는지 과정이 굉장히 중요한 챕터였습니다.

 

다음에는 카드 짝을 맞추기 위해 카드들을 한 쌍씩 배치시킬 수 있게 카드 세트를 만드는 과정을 다뤄보도록 하겠습니다.