## 기획

“용맹한 소인들이어, 거인들의 소굴에서 보물을 되찾아오라.”

게임 “Wi, Zard!”는 거인들이 마법사 소인 마을을 공격해 빼앗아간 보물을 두 소인이 몰래 거인들의 마을로 잠입해 다시 찾아오는 여정을 그린 퍼즐 + 소울라이크 + 협동 장르의 게임입니다.

동료와 함께 미지의 세계를 추리하며 헤쳐나아가자!

“Wi,Zard”는 총 3개의 스테이지로 구성되어있고, 각 스테이지당 3개의 퍼즐이 존재합니다.

또한 각 스테이지는 고유의 컨셉과 풀이방식을 가지고 있어 스테이지를 넘어가며 분위기를 환기시킴과 동시에 참신함과 재미로 플레이어를 몰입하게 합니다.

모든 퍼즐들은 두 플레이어가 서로 정보를 공유하는 등의 협동을 통해 풀어야 합니다.

그리고, 이 3개의 퍼즐들에서 사용된 퍼즐 기믹들은 그대로 버려지지 않고, 더 응용되어 연결성과 개연성을 동시에 챙겼습니다.

이 앞을 지나가려는 자, 큰 시련을 마주할지니.

각 스테이지에서 퍼즐 단계가 끝나면, 레이드 단계로 돌입하게 됩니다.

이 레이드에서 등장하는 보스들은 거대한 거인들로, 소인들과의 크기차이를 직관적으로 대비되게하여 플레이어에게 긴장감과 스릴을 선사합니다.

또한, 레이드 보스들은 전 퍼즐 스테이지에서 사용했던 퍼즐 기믹을 이용한 고유 패턴을 지니고 있습니다. 플레이어들은 퍼즐을 풀었던 기억을 떠올려 보스의 패턴을 파훼하며 쾌감과 재미를 느끼게 됩니다.

레이드 보스를 클리어하면, 다음 스테이지로 넘어가게 됩니다.

## 조작

메인 화면에 들어가자마자 방 생성 / 방 참가 버튼이 나옵니다.

방을 생성하면 방 코드가 나옵니다. 그 코드를 다른 플레이어에게 공유하여 자신의 방에 들어오게 하거나 다른 플레이어의 방으로 들어갈 수 있습니다.

두 플레이어가 모두 준비되면, 게임이 시작됩니다.

인게임 조작법은 다음과 같습니다.

- W/A/S/D : 이동
- 스페이스 바 : 점프
- 좌클릭 : 공격
- T : 상호작용
- 상호작용 요소는 퍼즐이 될 수도 있고, 때에 따라서는 보스가 될 수도 있습니다.
- F : 동료 살리기
- ‘동료 살리기’ 기능은, 보스의 공격을 맞아 기절한 동료를 살리는 용도입니다.

## 디자인

‘협동 레이드’와 ‘퍼즐’, ‘소인과 거인’이라는 게임의 메인 아이덴티티를 레벨 디자인 및 애니메이션, 게임 플레이 전반에 적용하였습니다. Maya와 Unity를 활용하여 맵과 메인 캐릭터, 보스 애니메이션을 직접 제작하였습니다.

▶ 게임 전반의 디자인 기획

매주 2~3회 회의를 통해 게임 기획과 디자인을 논의하였습니다. 게임의 아이덴티티를 게임 전반에 반영하기 위해 기획 단계부터 아이덴티티를 명확히하고, 이를 디자인에 반영하는 작업을 중점적으로 진행했습니다. 이 단계에서는 팀원들과 실시간, 비실시간 회의를 지속적으로 진행하며 의견을 교환했습니다. 이를 통해 게임의 방향성을 보다 구체화하고, 개발 및 디자인 작업의 로드맵을 계획했습니다.

▶ 플레이어, 보스별 3D 애니메이션 제작

Maya를 사용하여 플레이어와 보스 캐릭터 Rigging 작업을 진행하고 3D 애니메이션을 제작하였습니다. 각 캐릭터별 성격과 특징을 반영하여 모션을 기획한 뒤 Idle, Walk, Jump, Groggy 등 여러 기본 모션과 더불어 플레이어의 공격, 궁극기 모션, 보스의 각 패턴 별 공격 모션 등 게임에 필요한 애니메이션을 직접 제작하였습니다. 작업 과정에서 SyncSketch를 활용하여 결과물을 공유하고 피드백을 주고받으며, 게임 전체의 퀄리티를 높이고 캐릭터 특성에 최적화된 애니메이션을 제작하고자 하였습니다. 이후 게임 플레이로 구현이 어려운 공간이동이나 보스 등장 등 상황에 맞춰 스테이지별 컷씬을 추가할 예정입니다. 게임 플레이만으로는 전달이 어려운 캐릭터들의 감정, 위기 상황 등을 연출하여 플레이어의 몰입도와 기대감을 높이고자 합니다. 이는 전투의 긴장감을 조성할 뿐만 아니라 이동 경로, 플레이 방식, 중요한 아이템 등을 직관적으로 안내하여 게임 플레이의 이해를 돕습니다. 이를 통해 게임 전체의 완성도를 향상시키는 것을 목표로 하고 있습니다.

▶ 인게임 에셋 제작

게임 기획 단계에서 설정된 캐릭터, 아이템, 맵 구성 등을 바탕으로 게임 플레이 시 캐릭터에게 필요한 아이템과, 맵에 활용되는 상호작용 오브젝트 등을 제작하였습니다. 또한 본격적인 레벨 디자인에 앞서 더미 모델링을 통해 플레이어와 보스, 맵 오브젝트 간의 스케일을 조정하며 구조를 설계하였습니다.

▶ 캐릭터 간 크기 차이를 활용한 맵 디자인

소인 마법사들이 거인들의 도서관에 몰래 들어왔다는 컨셉을 살려 거인들이 사용하는 도구, 가구, 건축물 등을 맵 오브젝트로 활용하고 플레이어와 크기 및 높이의 차이를 강조하였습니다. 이 점을 통해 자연스럽게 공간을 분리하고, 스토리텔링을 연출할 수 있도록 맵을 디자인하였습니다.

▶ 게임의 흐름을 반영한 레벨디자인

두 플레이어는 퍼즐을 풀 때에 다른 층으로 분리되어 있다가 보스 레이드 진행 시에 다시 재회하게 됩니다. 이에 따라 퍼즐 맵의 구조를 1층과 2층으로 나누어 체계적으로 설계하고 상호작용할 수 있는 주요 오브젝트를 각 층에 적절히 배치하였습니다. 스토리텔링과 연계하여 퍼즐을 풀어가면 두 플레이어가 자연스럽게 만나게 되어 게임의 흐름이 일관성 있게 유지되도록 디자인하였습니다.

▶ 시각적 요소를 통한 분위기 연출

각 스테이지와 맵을 인위적으로 분리하지 않고, 맵의 구조와 라이팅에 변화를 주어 구분하도록 기획하였습니다. 밝고 차분한 분위기의 지상 맵에서 시작하여 보스 맵 등 이어서 만나게 되는 맵들을 더 어둡고 위험한 분위기로 연출하였고 이를 통해 플레이어가 자연스럽게 게임에 몰입할 수 있도록 하였습니다.

▶ 게임 진행도에 따른 기믹요소와 다양한 상호작용 오브젝트

게임의 후반부로 갈수록 맵 구조가 복잡해지고 퍼즐의 난이도가 올라갑니다. 이 과정에서 각 퍼즐과 스테이지마다 새로운 기믹을 도입하였습니다. 퍼즐 맵에서 등장하는 각도 퍼즐, 상형 문자 퍼즐, 체스 암호 퍼즐 등 세 가지와 더불어 액자, 계단, 전등, 체스 말, 서랍, 쪽지, 책, 짚라인 등 여러 상호작용 오브젝트를 통해 퍼즐에 재미 요소를 더했습니다. 또한 텍스쳐 작업을 통해 퍼즐 단서나 약도 등 게임 플레이에 필요한 정보를 발견할 수 있도록 디자인했습니다.

## 음향

손수 만든 BGM

Wi, Zard!는 단순히 기획, 개발, 아트만 만들어내지 않았습니다. 게임의 컨셉인 마법사의 여행, 거인과 소인이라는 것을 극대화시키기 위해 배경음악 또한 직접 제작하였습니다.

소인 시점에서 진행되는 게임에서 거인이 등장하기에, 여기서 나오는 웅장함을 극대화 시키기 위해 오케스트라 장르를 채택했습니다.

그리고, 퍼즐 단계의 배경음악은 호기심을 자극하는 윈드와 퍼커션를 주로 사용하고, 중간중간 스트링과 살살 들려오는 하이 톤의 퍼커션 소리로 주로 사용된 악기들을 강조했습니다. 약간의 긴장감을 위해 반음을 많이 섞기도 하였습니다.

또한, 게임 시스템에서 알 수 있듯 퍼즐에서 사용된 기믹을 보스가 패턴으로써 가지고 있기 때문에, 음악에서도 이를 표현했습니다. 퍼즐 배경음악에서 사용된 멜로디 진행이나 BPM등을 그대로 그 단계의 보스 배경음악으로 사용했습니다. 그리고, 보스전이기에, 호른과 트럼펫같은 웅장함을 강조하는 악기를 더욱 채용하고 퍼커션과 윈드류의 악기들은 뺐습니다. 그리고 저음역대를 강조하는 베이스나 첼로같은 스트링을 사용하여 사용자에게 위압감과 긴장감을 제공하고자 했습니다.

### 보스 몬스터 구현: Behavior Tree

상태 패턴의 필요성

- 동적 행동 관리: AI는 환경이나 내부 상태 변화에 따라 행동을 변경해야 하며, 상태 패턴은 이러한 동적 행동 변화를 효율적으로 관리합니다.
- 코드 모듈화와 유지보수성 향상: 각 상태를 별도의 모듈로 분리하여 코드의 가독성과 재사용성을 높이고, 새로운 상태 추가 시 기존 코드에 최소한의 영향만 줍니다.

상태 패턴: Finite State Machine(FSM)

- 간단한 상태 전이와 행동을 구현할 때는 직관적이고 효율적이지만, 행동이 복잡해질수록 필요한 상태와 전이의 수가 기하급수적으로 늘어나는 상태 폭발(State Explosion) 문제가 발생합니다.

상태 패턴: Behavior Tree(BT)

- 레이드에 등장하는 보스의 복잡한 행동을 구현하기에 Finite State Machine 은 부적합하다고 생각했고, 이에 Behavior Tree를 사용하여 구현하게 되었습니다.
- 제가 구현한 BT Node 들은 다음과 같습니다.

- Selector: 자식 노드에서 true를 return 할 때까지 자식 노드들을 순차적으로 실행
- Sequence: 자식 노드에서 false를 return 할 때까지 자식 노드들을 순차적으로 실행
- ActionNode: 특정 행동을 실행하는 노드
- ConditionNode: 특정 조건을 만족시킬 때 실행되는 노드
- WhileNode: 특정 조건을 만족시킬 때까지 계속 실행되는 노드

### 패턴 1

- ChangeBooksToGreen
- 7개의 책장 중 4개를 선택하여 그 안에 있는 책들 중 일부를 초록색 빛으로 변경합니다.
- FixAggroTargetAndDisplay
- 랜덤으로 어그로 대상을 선정하고, 이를 UI 상에 표시합니다.
- ActivateCipherDevice
- 중앙에 암호 입력 장치를 활성화합니다.
- RandomBasicAttack
- 5개의 기본 공격(기획 문서 참고) 중 랜덤으로 한 가지를 실행합니다.
- IsCipherCorrect
- 암호 입력 장치에 올바른 암호가 입력되었는지 확인합니다.
- ResetBookLightsAndAggro
- 책의 초록색 빛을 끄고 보스 어그로가 풀립니다. 또한, 정답을 맞췄으므로 successCount가 1 올라갑니다.
- ReleaseInvincibilityAndGroggy
- 무적 상태를 해제하고, 그로기 상태로 만듭니다.

### 패턴 2

- AttackAreas
- 8개의 구역 중 1개의 구역을 제외한 구역을 모두 타격합니다. attackCount가 1 올라갑니다.
- ActivateCipherDevice
- 중앙에 암호 입력 장치를 활성화합니다.
- ChargeAttack
- 10초간 기를 모은 뒤 충격파를 날립니다. 이후 암호가 초기화됩니다.
- IsCipherCorrect
- 암호 입력 장치에 올바른 암호가 입력되었는지 확인합니다.
- ReleaseInvincibilityAndGroggy
- 무적 상태를 해제하고, 그로기 상태로 만듭니다.

### 패턴 3

- DisplayBookCaseOrder
- 패턴 파훼까지 남은 성공 횟수를 UI에 표시합니다.
- LightAndAttackBookCase
- 책장을 빛나게 하고, 일정 시간 후에 책장에게 돌진하여 책장을 타격합니다. 또한, 올바른 책장을 타격하였는지 판단하고, 올바른 책장이라면 collisionCount가 1 올라갑니다.
- DamageAllMap
- 맵 전체에 데미지를 입힙니다.
- ReleaseInvincibilityAndGroggy
- 무적 상태를 해제하고, 그로기 상태로 만듭니다.

### 애니메이션 로직

- 보스는 많은 애니메이션을 포함하고 있다보니, 최대한 효율적으로 애니메이션 로직을 작성할 필요가 있었습니다. 애니메이션 로직이 상태를 전환하는 FSM의 형식이므로, transfer trigger만을 생성하여 보스 스크립트 상에서 trigger를 켜도록 구성하였습니다.

## Photon Unity Networking 2

*갱신의 빈도가 높을 수록 윗 방법 사용합니다. (PhotonView - RPC - Custom Properties)

PhotonView
- 플레이어와 보스를 동기화 시키기 위해서 필요한 컴포넌트입니다.
- 플레이어의 행동은 모두 PhotonView를 통해서 관찰된 후에 동기화 됩니다. 즉, Wi가 이동을 했을 때 다른 세계(Zard의 컴퓨터)에 있는 Wi의 clone은 PhotonView를 통해서 이동명령을 받는 것입니다. 그렇기 때문에 동기화를 위해서는 PhotonView가 필수적으로 플레이어의 component로 있어야 됩니다.
- Observable components list에 PhotonTransfromView와 PhotonAnimatorView 컴포넌트를 할당시킴으로써 네트워크 상에서 자동으로 플레이어와 보스의 위치, 애니메이션을 동기화 합니다.

PhotonTransformView
- 플레이어와 보스의 위치, 회전, 크기를 동기화 합니다.

PhotonAnimatorView
- 플레이어와 보스의 애니메이션을 동기화 합니다.

RPC
- PunRPC 함수 호출을 통해 동기화 합니다.
- 예시: 보스의 체력을 깎는 함수, 플레이어가 무기를 교체하는 함수 등에 사용됩니다.

Custom Properties
- Photon의 Hashtable을 사용하여 key에 value를 저장합니다. 그런 후, ‘PhotonNetwork.LocalPlayer.SetCustomProperties’ 코드를 통해 저장한 값을 서버에 전송하고, 모든 클라이언트에 동기화 합니다.
- 예시: 게임에 들어가기 전, 준비 버튼을 통한 로컬 플레이어의 준비 여부를 동기화 합니다.