지난 글에서는 Unity 프로젝트를 생성하고, 모바일 세로 화면을 기준으로 상단 전투 영역과 하단 퍼즐 영역을 나누는 작업을 진행했습니다.
이번 글에서는 하단의 ‘PuzzleArea’에 실제 매치-3 퍼즐 보드를 출력하는 것이 목표입니다.
아직 타일을 움직이거나, 3개 이상 매칭되는지 판정하거나, 전투 시스템과 연결하는 단계는 아닙니다.
**PuzzleArea 안에 6×6 크기의 퍼즐 보드를 화면에 출력하는 것** 이것이 중요 포인트라고 할 수 있죠
# 오늘의 목표 정리
이번 작업을 시작하기 전에 AI Codex와 오늘 할 일을 먼저 정리해봤습니다.
이렇게 AI Codex와 대화하여 정한 오늘의 작업 범위는
- 보드 출력에 필요한 스크립트 만들기 (AI Codex가 만들어줄 수 있도록 하기)
- 타일 프리팹 만들기
- PuzzleArea 안에 BoardRoot 만들기
- 6×6 격자로 임시 색상 타일 출력하기
여기서 중요한 점은 오늘 당장 욕심 내지 않는다는 것인데요.
매치-3 게임이라고 하면 바로 타일 이동, 매칭 판정, 콤보, 낙하 처리까지 만들고 싶어지지만, 일단은 화면에 보드가 제대로 나오는지부터 확인하여 기초 공사를 확실히 진행하겠습니다.
# 스크립트 폴더와 기본 스크립트 생성
먼저 Unity 프로젝트의 ‘Assets’ 폴더 안에 ‘Scripts’ 폴더를 만들고, 보드 출력에 필요한 스크립트 2개를 생성했습니다.
이번에 만든 스크립트는 아래와 같은데요.
- TileView.cs
- 각각의 타일이 어떤 종류인지 저장하고, 타일 종류에 따라 색상을 바꿔주는 역할
- BoardView.cs
- 6×6 보드를 만들고, ‘Tile’ 프리팹을 반복 생성해서 ‘PuzzleArea’ 안에 배치하는 역할
위 2개의 스크립트 파일은 AI Codex가 작성하였으며, 각각의 스크립트들이 어떤 기능을 하는지를 AI Codex에게 질문하여 스크립트들의 기능을 하는지 확인해두는 것이 좋습니다.
# Tile 프리팹 만들기
다음으로 보드에 반복해서 생성될 타일 프리팹을 만들었습니다.
Hierarchy에서 ‘MainCanvas’ 아래에 ‘UI > Image’를 추가하고, 이름을 ‘Tile’로 변경했습니다.
이름을 변경한 뒤 Tile 오브젝트에 ‘Tile View’ 컴포넌트를 추가했습니다.
타일 크기는 임시로 ‘120×120’으로 설정했습니다.
아직 최종 UI 디자인을 정한 것은 아니기 때문에, 지금 단계에서는 타일이 화면에 잘 보이기만 하면 됩니다.
# Tile을 프리팹으로 저장하기
이제 만든 ‘Tile’ 오브젝트를 프리팹으로 저장했습니다.
Hierarchy에 있는 ‘Tile’을 ‘Assets > Prefabs’ 폴더로 드래그해서 프리팹으로 만들었습니다.
프리팹으로 만든 뒤에는 Hierarchy에 있던 원본 ‘Tile’ 오브젝트는 삭제했습니다.
이후 보드는 이 프리팹을 기준으로 타일을 자동 생성하게 됩니다.
# BoardRoot 만들기 및 BoardView 연결하기
다음으로 ‘PuzzleArea’ 아래에 실제 보드가 들어갈 컨테이너를 만들었습니다.
‘PuzzleArea’를 우클릭하고 ‘UI > Panel’을 추가한 뒤, 이름을 ‘BoardRoot’로 변경했습니다.
그리고 ‘BoardRoot’의 RectTransform을 ‘PuzzleArea’ 전체를 채우도록 아래와 같이 설정했습니다.
- Anchor Min : [X : 0], [Y : 0]
- Anchor Max : [X : 1], [Y : 1]
- Left : 0
- Right : 0
- Top : 0
- Bottom : 0
RectTransform을 설정한 뒤에는 Add Component를 클릭하여 Board View 컴포넌트를 추가했습니다.
Board View 컴포넌트에는 Tile Prefab 항목이 있는데, 여기에 앞에서 만든 Tile 프리팹을 연결했습니다.
Width와 Height는 각각 6으로 설정하여 실행했을 때 6×6 크기의 보드가 생성될 수 있도록 했습니다.
# 실행 결과
이제 Unity 상단의 Play 버튼을 눌러 실행해보면 6×6 크기의 보드가 정상적으로 생성되는 것을 확인할 수 있습니다.
일단 현재 타일 색상의 의미는 아래와 같이 임시로 정했습니다.
- 빨강 : 검
- 파랑 : 방패
- 보라 : 캐릭터 특수 타일
- 노랑 : 중립 타일 A
- 초록 : 중립 타일 B
아직 실제 아이콘이 들어간 것은 아니지만, 보드 구조는 정상적으로 만들어졌습니다.
오늘 작업은 게임의 재미를 만드는 단계라기보다는, 앞으로 모든 퍼즐 로직이 올라갈 기본 판을 만드는 단계였습니다.
# 이번 작업에서 진행한 것 & 다음 목표
이번 글에서는 아래 작업을 진행했습니다.
- TileView.cs 생성
- BoardView.cs 생성
- Tile 프리팹 생성
- BoardRoot 생성
- PuzzleArea에 6×6 보드 출력
아직까지는 색상 사각형만 출력되는 단계라서 조금 심심해 보일 수도 있지만 매치-3 게임에서는 이 보드가 가장 기본이 되는 구조입니다.
앞으로 이 위에 타일 이동, 매칭 판정, 타일 제거, 새 타일 생성, 전투 시스템 연결이 하나씩 올라갈 예정입니다.
다음 단계에서는 타일을 클릭하거나 드래그해서 서로 위치를 바꾸는 기능을 만들어볼 예정입니다.
다음 작업 목표는 아래와 같습니다.
- 인접한 타일 선택하기
- 두 타일 위치 바꾸기
- 임시로 스왑 결과 확인하기
- 나중에 매칭 판정과 연결할 수 있도록 구조 잡기
아직 매칭 판정까지는 들어가지 않고, 먼저 플레이어가 타일을 조작할 수 있는 상태를 만드는 것이 목표입니다.
그러면 게임 개발 일지는 다음 편에서 이어가겠습니다.
답글 남기기