CHEWCHEWW/dont-catch-me-server

2.5D pac-man game with phaser

🐇 Don't Catch Me!

Deploy

게임 설명

싱글모드 stage 1 플레이 화면

• Don't catch me는 싱글모드, 멀티모드 두 가지로 구성 된 웹 게임입니다.
• 유명한 고전 게임인 pac-man게임에서 모티브를 얻어, 이를 2.5d로 구현해보고자 했습니다.

Features

• 싱글모드의 경우, 제한 된 시간 안에 쫓아오는 토끼들을 피해 동전을 먹는 형식입니다.
• 맵에 위치한 모든 동전을 다 먹는다면 다음 스테이지로 넘어갈 수 있습니다.
• 스테이지를 넘어갈 수록, 맵에 더 많은 토끼들이 등장하게 됩니다.
• 최종 스테이지를 통과한다면, 남은 잔여 시간을 통해 점수를 환산하여 기록할 수 있습니다.
• 10위 안에 든 플레이어들의 기록은 record 페이지를 통해 확인할 수 있습니다.
• 멀티모드의 경우, 역시 제한 된 시간 안에 더욱 많은 동전을 먹은 플레이어가 우승하게 됩니다.
• 멀티모드의 스테이지가 끝나고 난 후, 게임했던 플레이어들과 다시 게임하고 싶다면 이전 방으로 돌아갈 수 있습니다.

How to play

• 키보드 방향 키를 이용해 컨트롤합니다.
• 멀티모드의 경우, 초대 코드를 복사하거나 카카오톡을 통해 개설 된 방의 링크를 전송할 수 있습니다.

waiting page, 친구에게 전송받은 코드를 통해 방으로 입장할 수 있습니다.

🌌 Motivation

Single mode

• javascript 공부를 처음 시작 했을때에, Tick-Tac-Toe 라는 간단한 웹 앱 게임을 구현해 본 적이 있었습니다.
• 저는 2명이서 번갈아가며 플레이 할 수 있도록 단순하게 구현을 했었습니다. 그런데 게임 AI를 구현 해서 혼자서도 플레이 할 수 있도록 하고, 심지어는 AI 난이도 조정을 통해 단계까지 조절한 코드를 접하게 되었습니다. 제 자신에게 많이 부끄러웠습니다.
• 그때 처음으로 혼자서 다음 행동을 판단하는 AI를 구현해보고 싶다고 생각하게 되었습니다.

Multi mode

• 이전 프로젝트에서 웹 소켓을 통해 실시간으로 사용자들에게 상태 변화 및 이벤트를 전달하는 웹 사이트를 구현했었습니다.
• 이제까지 실시간으로 사용자들과 소통하면서 하는 게임들이 이런 식으로 구현됐겠구나 하는 생각이 들면서 시야가 열리는 기분이었습니다.
• 그렇기에 직접 웹 소켓을 이용한 멀티 게임을 만들어 보고 싶었습니다.

📌 Teck stack

FrontEnd

• React
• ES2015+
• Redux (Redux-toolkit)
• Phaser
• React-router-dom

BackEnd

• Express
• MongoDB Atlas
• NodeJS

Third Party Stack

• Git
• Socket.io
• Styled-components
• Jest, enzyme for unit-test

📅 Duration & Plan

프로젝트 시작 준비 [2021.05.03 ~ 2021.05.07]

• 프로젝트 기획 및 asset 확보
  • Task card
  • Mock up

캐릭터 스프라이트의 일부

• 게임 맵 작업

Tiled 프로그램을 이용하여 직접 맵을 구현 한 후에 json 파일로 변환

프로젝트 및 배포 [2021.05.08 ~ 2021.05.21]

• 싱글모드 구현
• 멀티모드 구현
• 기타 페이지 작업
• AI 난이도 조절
• 게임 난이도 조절 및 asset 최종 적용
• 스타일링
• 배포

⚙️ Deploy

Client

• netlify를 이용해 배포했습니다.

Server

• AWS Elastic beanstalk를 이용해 배포했습니다.

🗒️ Comments

구현 과정 중 어려움

• Phaser
  • isometric 형식의 게임을 구현하려 했기에 맵 렌더링과 같은 부분에서 일반 canvas를 사용 했을 때 어려움이 많을 것이라 생각을 했습니다.
  • phaser에서 그동안 비공식적인 플러그인을 통해 isometric 형식 게임 제작을 지원을 하다가, 작년 12월부터 공식적으로 isometric 게임 구현을 지원하게 됐다는 것을 알게됐습니다.
  • 그렇기에 phaser 라이브러리를 이용해 게임 개발을 해야겠다고 마음을 먹었으나, 실제로 개발을 하며 마주한 실상은 좀 달랐습니다.
  • 완전히 업데이트가 되지 않았기에 isometric 맵을 구현하는 tiled라는 프로그램을 통해 바로 맵을 게임에 꽂을 수 없었고, 관련 레퍼런스가 생각보다 많이 없었습니다.
  • 이전에 지원하던 플러그인을 통해서 구현하도록 방법을 바꿔볼까 생각도 했지만, 이미 어느정도 개발이 진행중이었고 시간도 꽤 소요된 상태였습니다.
  • 따라서 유니티의 코드 및 json 파일들의 형식을 참고해서 tiled에서 변환 된 json 파일들을 일일히 바꾸어주고, 하나씩 테스트 및 디버깅을 통해서 맵을 렌더링 할 수 있었습니다.
  • 하지만 이후에도 개발 도중 계속 버그가 발생했고 관련 로직들을 처리 할 때에 많은 딜레이가 생겼습니다. 다행히도 지금은 어느정도 절충안을 찾아서 게임 실행에 성공했습니다.
  • 프로젝트에 들어가기 전에 더 충분히 레퍼런스 및 조사를 하고, 기본적인 구현을 좀 더 촘촘히 시도해 본 다음에 본 프로젝트에 들어가는 것이 좋겠다는 교훈을 얻었습니다.
  • 또한 좀 더 어려움이 있더라도, 라이브러리를 이용하지 않고 바로 구현을 하는 것이 결과적으로 더 시간을 아낄 수 도 있겠다는 생각이 들었습니다.
• AI difficulty
  • 최초 기획때는 더 다양한 AI를 구현할 생각이었으나, 맵의 크기가 상대적으로 작은 편이기에 심플한 게임 컨셉과 달리 게임 진행이 필요 이상으로 복잡해 보일 수도 있다는 것을 깨달았습니다.
  • 따라서 원래 구현했던 AI의 정확성을 올리고, 속도를 올리는 식으로 바꿔서 2가지 타입의 AI를 만들었습니다.
  • isometric의 특성 상 캐릭터들이 상, 하, 좌, 우 4 방향으로 움직일 수 있는데, AI의 정확성이 올라가자 게임 화면이 자연스럽지 않게 보였습니다.
  • 기본적인 AI 로직의 베이스는, 플레이어와 제일 가깝게 이동할 수 있는 지점을 찾아서 방향을 결정하고 움직이는 형태로 구현됐는데, 정확성이 올라가니 수시로 다른 방향을 찾아서 계속 방향을 바꾸다보니 화면 상에서 지나치게 많이 깜빡거리게 된 것입니다.
  • 따라서 이미 이동했던 마지막 방향을 기록해두고 이 정보들을 다음 방향을 판단할 때에 사용했고, AI가 방향을 바꿀 때 의도적으로 딜레이를 줘서 화면적으로도 너무 부자연스럽지 않도록 개선했습니다.
  • 결과적으로 AI의 불필요한 방향 변동이 줄어드니, 상대적으로 플레이어를 쫓아오는 시간이 줄어드는 긍정적인 결과를 얻었습니다.
  • 하지만 애초에 8방향으로 구현을 했다면 화면상으로 보다 덜 부자연스러웠을 것이기에, 이 부분에 있어서는 아쉬움이 남습니다.
• Socket action control
  • 최초 socket 통신을 모두 redux middleware에 귀속시켜서 redux 액션을 통해 한번에 컨트롤 할 수 있도록 구현하고자 했습니다.
  • 이는 새로 플레이어들이 들어오고, 이 플레이어들의 정보를 설정하고 하는 것과 같은 액션엔 적절한 판단이었다고 생각합니다.
  • 하지만 게임이 시작하고 나서부터는, 각 플레이어들의 좌표 정보 및 이벤트 정보들을 실시간으로 전달을 해주어야 하는데, 이 정보들이 과연 redux에 들어갈 필요가 있는지 의문이 들었습니다.
  • 또한 phaser의 경우 canvas를 기반으로 작동하는데, canvas의 경우 렌더링이 매우 자주되기 때문에 redux의 액션이 지나치게 자주 일어났습니다.
  • 따라서 관련 이벤트들은 phaser class에 직접 꽂아주는 식으로 socket 로직을 바꾸었습니다.
  • 추후 성능 테스트를 통해 실질적으로 얼마나 효율적인지를 판단하여 개선해 나갈 예정입니다.

느낀 점

• 게임을 굉장히 좋아합니다. 프로그래밍 공부를 시작하기 전까지는 꽤 많은 시간을 게임에 투자하면서 살았습니다. 인디 게임들을 플레이하면서 저도 한번 쯤은 게임 제작을 해보고 싶다는 생각에 인생의 버킷 리스트에 "게임 개발"이라는 항목이 항상 있었습니다. 프로젝트를 완성한 지금은 버킷 리스트를 하나 달성했기에 매우 행복합니다. 제 손으로 게임을 만들 수 있다는 것을 깨달은지 비교적 얼마 되지 않았는데, 실제로 해내서 성취감이 들었습니다. 아직은 제가 원하는 만큼의 결과물이 나오지 않았지만, 지속적으로 업데이트를 통해 계속 개선해나가고 싶습니다.
• 이번 게임을 제작하면서, 게임 특성 상 (isometric 및 토끼가 당근을 쫓는다는 컨셉) asset을 찾기가 힘들었고, 관련된 소요 시간이 굉장히 길었습니다. isometric 및 토끼와 당근이라는 asset을 가지고 있는 사이트는 적었기 때문입니다. 그러다 운 좋게도 좋은 디자이너 분을 만나서 게임 asset 작업을 할 수 있었습니다. 프로젝트 초반 일때에, 아직 구현되지 않은 것들에 대해 많은 부담감이 있었는데 이런 심적인 불안감들을 좋은 디자이너분 덕분에 많이 해소 할 수 있었습니다. 디자인의 중요성이 얼마나 대단한지 알게 되었고, 앞으로 일하면서도 이런 디자이너 분들을 만나서 작업하고 싶다는 생각이 들었습니다. 저 또한 이 디자이너 분 처럼 좋은 팀원이 되고 싶다는 생각 역시 들었습니다.
• 프로그래밍 공부를 시작한지 오랜 기간이 지나지 않았지만, 지금까지 성장할 수 있었던 원동력의 기반은 바닐라코딩이라는 좋은 나침반을 빨리 알아보고 선택했기 때문이라고 생각합니다. 좋은 동료들과 방향 및 환경을 제공해 주신 켄님과 멘토님들께 정말 감사드립니다. 마지막으로 부트캠프 기간 동안 같이 날 밤을 지새며 힘들어하고, 같이 고민하며 새로운 시작을 위해 한 획을 그은 부트캠프 사람들에게 그동안 고마웠다고, 앞으로도 잘 부탁한다는 인사를 남기고 싶습니다.