지난 글에서는 ‘PuzzleArea’에 6×6 크기의 매치-3 퍼즐 보드를 출력하는 작업을 진행했습니다. 아직은 색상으로 구분된 임시 타일이었지만, 보드가 화면에 정상적으로 출력되는 것까지 확인했기 때문에 이번에는 한 단계 더 나아가 보려고 합니다.
이번 글의 목표는 플레이어가 직접 타일을 선택하고, 인접한 타일과 위치를 바꿀 수 있도록 만드는 것입니다.
아직 3개 이상의 타일이 매칭되는지 판정하거나, 타일이 사라지고 위에서 내려오는 기능까지는 구현하지 않습니다.
오늘 핵심은 아래와 같습니다.
** 인접한 두 타일을 선택했을 때 서로 위치가 바뀌는지 확인하는 것 **
# 오늘의 목표 정리
이번 작업을 시작하기 전에 AI Codex와 오늘 할 일을 먼저 정리했습니다.
오늘 작업 범위는 아래와 같이 잡았습니다.
- 타일에 좌표 정보 추가하기
- 타일 클릭 이벤트 처리하기
- 선택한 타일에 표시 추가하기
- 인접한 타일을 선택했을 때 위치 바꾸기
- 인접하지 않은 타일을 선택했을 때는 스왑되지 않도록 확인하기
처음에는 일반적인 매치-3 게임처럼 드래그 방식으로 타일을 움직여야 하는 것 아닌가 하는 생각도 들었습니다.
대부분의 매치-3 게임은 타일을 누른 상태로 상하좌우 방향으로 드래그하면 인접한 타일과 위치가 바뀌고, 매칭이 되지 않으면 다시 원래 자리로 돌아갑니다.
하지만 이번 단계에서는 드래그가 아니라 ‘클릭 → 클릭’ 방식으로 먼저 구현하기로 했습니다.
이유는 단순한데요.
드래그 조작, 스왑 애니메이션, 매칭 판정, 실패 시 원위치 복귀까지 한 번에 구현하면 문제가 생겼을 때 어디서 문제가 발생했는지 찾기가 어려워지기 때문입니다.
그래서 이번에는 가장 기본이 되는 로직부터 확인하기로 했습니다.
** 두 타일이 인접해 있는지 판단하고, 인접해 있다면 서로 위치를 바꿀 수 있는가? **
이 부분이 먼저 정상적으로 동작해야 이후 드래그 조작을 추가해도 안정적으로 확장할 수 있다고 판단했습니다.
# 타일 선택 기능 구현
먼저 타일을 클릭했을 때 선택 상태가 표시되도록 만들었습니다.
(이 글의 목적이 코드를 그대로 따라 치게 만드는 튜토리얼이 아니기 때문에 코드 변경 및 추가 과정은 따로 이미지로 업로드하지는 않겠습니다.)
~ 수정된 코드 파일 참고 ~
- TileView.cs에 클릭/선택 관련 코드 추가
- BoardView.cs에 선택/인접, 판정/스왑 코드 추가
타일을 클릭하면 해당 타일에 흰색 테두리로 임시 표시되어 직관적으로 어떤 타일이 선택됐는지 확인할 수 있도록합니다.
나중에는 실제 게임 분위기에 맞게 선택 효과를 바꿀 수 있을 것 같습니다. 예를 들면 타일이 살짝 커지거나, 빛나는 효과가 들어가거나, 테두리가 부드럽게 깜빡이는 식으로 바꿀 수 있겠죠.
하지만 지금 단계에서는 기능 확인이 먼저이기 때문에 가장 단순하게 흰색 테두리로 처리했습니다.
# 인접한 타일 스왑 확인
다음으로 선택한 타일과 인접한 타일을 클릭했을 때 두 타일의 위치가 바뀌는지 확인했습니다.
테스트 결과, 선택한 타일과 바로 아래에 있는 보라색 타일을 클릭했을 때 정상적으로 위치가 바뀌는 것을 확인했습니다.
이번 단계에서 중요한 것은 단순히 화면에서 색상이 바뀌어 보이는 것만이 아닌 내부적으로 각 타일이 가지고 있는 보드 좌표도 함께 바뀌어야 한다는 것 입니다.
예를 들어 ‘(0, 0)’ 위치에 있던 타일과 ‘(1, 0)’ 위치에 있던 타일이 서로 바뀌었다면, 화면상의 위치뿐 아니라 코드에서 관리하는 좌표 정보도 함께 바뀌어야 합니다.
그래야 이후 매칭 판정 기능을 만들 때, 현재 보드 상태를 기준으로 같은 타일이 3개 이상 이어져 있는지 확인할 수 있습니다.
# 인접하지 않은 타일 테스트
어떠한 기능을 만들 때 중요한 것은 내가 원하는 기능이 내 계획에 맞게 동작하는지만 확인하면 대부분 나중에 새로운 기능이 추가되거나 다른 기능의 동작과 충돌하는 등 여러가지 이유로 버그가 발생할 수 있기 때문에 본인이 할 수 있는 최대한으로 여러가지 동작을 시험해보는 것이 좋습니다.
예를 들어 이번 기능의 경우
‘선택한 타일을 기준으로 상하좌우 4방향의 인접한 타일을 클릭했을 때 선택한 타일과 위치를 변경한다.’
위 내용이 제가 생각한 결과이고 해당 동작은 정상적으로 동작하는 것을 확인했습니다.
다만 염려되는 부분이 두가지 있었는데요
- 대각선에 인접한 타일을 클릭했을 때는 어떤 동작을 하는가?
- 인접하지 않은 다른 위치에 있는 타일을 클릭했을 때는 어떤 동작을 하는가?
두가지 경우 모두 제가 생각하는 정상 동작은 ‘타일 위치가 변경되지 않고 선택 타일이 변경되어야 한다.’ 인데요.
테스트 결과로는 모두 정상적으로 선택 타일만 변경되는 것을 확인하였습니다.
이와 같이 개발하는 도중에 본인이 꾸준히 여러가지 동작을 시험해보는 것을 추천드립니다.
# 왜 클릭 방식으로 먼저 만들었는가?
이번 작업을 하면서 한 가지 의문이 생겼습니다.
대부분의 매치-3 게임은 클릭해서 두 타일을 선택하는 방식이 아니라, 타일을 드래그해서 자연스럽게 스왑하는 방식인데 왜 AI Codex는 지금 두 타일을 선택하는 방식을 선택했을까 였습니다.
궁금한건 역시 물어봐야죠?
AI Codex에게 그냥 단순하게 “왜 클릭 방식으로 했어?” 가 아닌
“대부분의 매치-3 게임들은 클릭 방식이 아닌 드래그를 사용한 자연스러운 스왑을 지향하던데 왜 우리의 개발 방향은 클릭 방식이야? 혹시 방향을 다르게 생각한건지 나중에 기능을 추가할 건지 알고싶어”
라고 질문하면 꽤나 상세하게 이야기 해줍니다.
질문에 대한 AI Codex의 대답은 이렇습니다.
“방향을 다르게 잡은 건 아니고, 지금은 구현 단계를 일부러 쪼갠 것이다.”
“최종적으로는 당신이 말한 방식이 맞으며, 매치-3 조작은 겉으로 보면 단순해 보이지만 실제로는 여러 기능이 겹쳐 있기 때문에 단계별로 진행할 예정이다.”
- 타일 선택
- 인접 타일 판정
- 두 타일 위치 교환
- 매칭 여부 확인
- 매칭 성공 시 유지
- 매칭 실패 시 원위치
- 타일 제거
- 낙하
- 새 타일 생성
- 연쇄 매칭 확인
- 입력 잠금 처리
- 애니메이션 처리
한번에 모든 기능을 다 처리하려고 하면 문제가 생겼을 때 어디에서 문제가 발생했는지 파악하기 어려워지기 때문에 단계별로 진행했고 지금은 ‘디버깅 가능한 중간 단계’ 라고 합니다.
# 이번 작업에서 진행한 것
이번 글에서는 아래 작업을 진행했습니다.
- 타일 클릭 처리 추가
- 선택된 타일 표시 추가
- 인접 타일 판정 추가
- 인접한 두 타일 위치 교환
- 인접하지 않은 타일 클릭 시 스왑되지 않는지 확인
이제 보드는 단순히 화면에 출력되는 상태에서 벗어나, 플레이어가 직접 조작할 수 있는 상태가 되었습니다.
아직은 클릭 방식이고, 매칭 판정도 없지만 게임에 조금씩 가까워지고 있다는 느낌이 드네요.
# 다음 목표
다음 단계에서는 스왑 이후에 같은 타일이 3개 이상 이어져 있는지 확인하는 매칭 판정을 만들어볼 예정입니다.
다음 작업 목표는 아래와 같습니다.
- 가로 방향으로 같은 타일 3개 이상 찾기
- 세로 방향으로 같은 타일 3개 이상 찾기
- 매칭된 타일을 임시로 표시하기
- 매칭이 없으면 원래 자리로 되돌리는 구조 준비하기
아직 타일 제거와 낙하까지는 들어가지 않고, 먼저 “매칭된 타일을 찾을 수 있는가?”를 확인하겠습니다.
그러면 게임 개발 일지는 다음 편에서 이어가겠습니다.
답글 남기기