[태그:] 로그라이트

지난 글에서는 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 게임에서는 이 보드가 가장 기본이 되는 구조입니다.

앞으로 이 위에 타일 이동, 매칭 판정, 타일 제거, 새 타일 생성, 전투 시스템 연결이 하나씩 올라갈 예정입니다.

다음 단계에서는 타일을 클릭하거나 드래그해서 서로 위치를 바꾸는 기능을 만들어볼 예정입니다.

다음 작업 목표는 아래와 같습니다.

• 인접한 타일 선택하기
• 두 타일 위치 바꾸기
• 임시로 스왑 결과 확인하기
• 나중에 매칭 판정과 연결할 수 있도록 구조 잡기

아직 매칭 판정까지는 들어가지 않고, 먼저 플레이어가 타일을 조작할 수 있는 상태를 만드는 것이 목표입니다.

그러면 게임 개발 일지는 다음 편에서 이어가겠습니다.

혼자 아이디어를 정리하고 구현하는 방식이 아닌 AI Codex와 함께 게임의 방향성을 잡고 개발을 진행하여 최종적으로 게임 하나를 제작하는 것을 목표로 하고 있습니다.

처음에는 ‘길 연결 퍼즐’, ‘색 정렬 퍼즐’, ‘슬라이딩 퍼즐’ 등 간단한 퍼즐 게임을 만들어볼까 생각했지만 AI와 이것저것 이야기하고 여러 게임들을 서칭하다보니 욕심이 생겨서 첫 번째 목표는 **모바일 기반 매치-3 로그라이크**로 정했습니다.

# 어떤 게임을 만들 것인가

이 게임의 기본 구조는 단순합니다.

핸드폰 화면을 가로로 나눴을 때 상단 부분은 전투 화면이 있고, 하단 부분에는 매치-3 퍼즐 보드가 있어 플레이어는 하단의 퍼즐을 조작하고, 퍼즐 결과에 따라 상단의 전투가 진행되는 방식입니다.

예를 들어 이런 방식인데요.

• 검 타일을 맞추면 적을 공격.
• 방패 타일을 맞추면 적의 공격에 대한 방어 효과 적용.
• 특정 타일을 지정된 갯수 만큼 맞췄을 때 스킬 타일이 생성되고 클릭 시 스킬 발동 (체력 회복, 전체 공격, 강력한 공격 등의 스킬)
• 플레이어가 타일을 한번 움직일 때 마다 Time Count가 내려가고 Time Count가 0이 되었을 때 상대(몬스터)가 플레이어를 공격함.
• Stage 별로 맵이 5~10개 정도가 배치되고 맵 마다 몬스터의 종류 및 수가 달라져서 전투를 효율적으로 하기 위해 타일을 신중하게 옮기도록 유도
• 맵을 클리어하고 넘어갈 때 로그라이크의 전형적인 랜덤 효과 고르기를 진행하여 일반 공격을 강화하거나 방어, 스킬을 강화.
• 맵이 5개 있다면 중간에 갈림길을 배치하여 체력을 회복할 것인지 혹은 보물상자로 가서 아이템을 획득할 것인지에 대하여 선택

처음부터 거대한 게임을 만들 생각은 없고 우선은 전투 하나가 제대로 동작하는 작은 프로토타입을 만드는 것이 목표입니다.

# Unity 프로젝트 생성

이번 게임 제작 프로젝트는 Unity를 사용하여 진행하려고 합니다.

사용한 Unity 버전 등과 같은 환경은 아래와 같은데요.

• Unity 버전 : Unity 6.4 (6000.4.11f1)
• 템플릿 : Universal 2D
• 프로젝트 명 : MiniQuestMatch
• 목표 플랫폼 : 모바일 세로 화면

Unity Hub에서 Universal 2D 템플릿을 선택하고 ‘MiniQuestMatch’라는 이름으로 프로젝트를 생성했습니다.

(*Unity의 설치 방법에 대해서는 따로 설명하지는 않겠습니다.)

# 모바일 세로 화면 기준 잡기

이 게임은 처음부터 모바일 환경의 세로 화면을 기준으로 잡았기 때문에 Unity의 Game 뷰에 ‘1080×1920 Portrait’ 해상도를 추가해서 사용하겠습니다.

(*기존에 있는 1080×1920 해상도를 사용해도 되지만 AI Codex가 만들어서 사용하자고 하니 의견에 따라서 해상도를 추가해 사용하겠습니다.)

# 화면 구조 나누기

가장 먼저 만든 것은 실제 게임 화면에서의 큰 구조입니다.

Canvas를 만들어 화면을 두 영역으로 나눠 전투 화면과 퍼즐 영역을 나눴습니다.

• 상단 영역 : ‘BattleArea’
• 하단 영역 : ‘PuzzleArea’

~ Canvas 요소 추가 ~

1. Hierarchy 빈공간을 우클릭
2. UI (Canvas) 클릭
3. Canvas를 클릭하여 Canvas 추가

1. Canvas의 이름을 [MainCanvas]로 변경
2. Inspector에서 Canvas Scaler 컴포넌트를 찾은 뒤 이미지 혹은 아래와 같이 설정
   • UI Scale Mode : Scale With Screen Size
   • Reference Resolution : [X : 1080], [Y : 1920]
   • Match : 0.5
   • Reference Pixels Per : 100

1. MainCanvas를 우클릭
2. UI (Canvas) 클릭
3. Panel을 클릭하여 추가

1. Panel의 이름을 [BattleArea]로 변경
2. Left, Right, Top, Bottom을 모두 0으로 설정
3. Anchors를 클릭하여 Min값과 Max값을 이미지 혹은 아래와 같이 설정
   • Min : [X : 0], [Y : 0.62]
   • Max : [X : 1], [Y : 1]

1. [BattleArea]와 동일한 방법으로 Panel을 추가 후 이름을 [PuzzleArea]로 변경
2. Left, Right, Top, Bottom을 모두 0으로 설정
3. Anchors를 클릭하여 Min값과 Max값을 이미지 혹은 아래와 같이 설정
   • Min : [X : 0], [Y : 0]
   • Max : [X : 1], [Y : 0.62]
4. [BattleArea]와 구분될 수 있도록 배경 색상을 임의로 변경

상단의 회색 영역을 나중에 플레이어블 캐릭터와 몬스터, HP바, 전투 이펙트 등이 들어가서 실제 전투가 진행되는 영역입니다.

하단의 초록색 영역은 매치-3 퍼즐 보드가 들어갈 공간입니다.

아직은 단순한 색상 패널 두 개뿐이지만, 이 단계에서 게임의 기본 방향이 눈에 보이기 시작하네요.

이 게임은 퍼즐만 있는 퍼즐 게임이 아니고 전투만 있는 게임도 아닌 퍼즐을 풀어 나가며, 전투를 승리로 이끄는 구조를 만드는 것이 핵심이었습니다.

# 이번 작업에서 정리한 것

오늘 진행한 작업은 크지는 않습니다.

• Unity 프로젝트를 생성
• 모바일 세로 해상도 설정
• Canvas 생성
• 상단의 전투 영역과 하단의 퍼즐 영역을 분리

하지만 이 단계는 꽤 중요합니다.

게임의 화면 구조가 정해지면 이후에 어떤 기능을 어디에 배치할지 판단하기 쉬워지기 때문이죠

AI와 함께 개발하면서 느낀 점도 있는데 혼자서 생각을 정리하는 것 보다 AI와 함께 대화하면서 아이디어를 주고받다 보니 생각해보지 못한 아이디어가 떠오를 때도 있고 잘못된 정보들을 바로잡아주니까 훨씬 수월하네요.

앞으로 코드를 작성하는 부분 등 많은 부분에서 더욱더 많이 AI를 활용하게 되면 지금보다 더 크게 체감될 것 같습니다.

# 다음 목표

다음 단계에서는 하단의 [PuzzleArea]에 실제 매치-3 보드를 출력해 볼 예정입니다.

• 6×6 퍼즐 보드 만들기
• 임시 색상 타일 배치하기
• 타일 데이터를 코드로 관리하기
• 화면에 타일이 정상적으로 출력되는지 확인하기

아직 전투 시스템까지는 연결하지 않고 매치-3 퍼즐의 가장 기본이 되는 보드 출력부터 차근차근 진행할 예정입니다.

그러면 게임 개발 일지는 다음편에서 또 뵙겠습니다.