[토이 프로젝트] 온라인 웹게임 만들기 | IDT-game

개요

[프로젝트명] IDT-game
[기반 기술]
FrontEnd - HTML CSS JavaScript Canvas Fabric.js
BackEnd - Node.js Socket.io
[Github Repository] https://github.com/JaehyeokSong0/IDT-game

게임 개발 과정

개발 이유

지금까지 학교 강의에서 진행한 프로젝트들은 거의 다 웹 상에서 동작하는 어플리케이션을 만드는 것들이었다. 그치만 웹 쪽에는 거의 관심이 없던 이유로 어찌어찌 프로젝트를 진행했더라도 별로 남는 게 없다는 생각이 들었다. 이렇게 된 거 웹 프로그래밍에 조금이라도 친숙해지기 위해서 본 프로젝트를 진행하기로 마음 먹었다.
또, 프로젝트를 좀 더 재미있게 진행하기 위해서 평소에 플레이해보고 싶던 게임을 직접 만들어 보기로 했다. 컴퓨터를 상대로 1대1 전투를 펼치는 고전 플래시게임Inuyasha Demontournament를 모티브로 하였고, 이를 컴퓨터가 아닌 사람을 상대로 플레이할 수 있도록 게임을 제작하였다.

모티브 게임 소개

이누야샤 데몬토너먼트... 당시에는 이런 이름인지도 몰랐다.

모티브가 된 게임은 4 * 3 크기의 필드를 바탕으로 하며, 다음과 같은 step을 통해 플레이하게 된다.

1. (선택 페이즈) 플레이어와 컴퓨터는 이동, 공격, 회복, 방어 등의 행동을 총 3개 선택할 수 있다. 이 때 각 행동을 수행하기 위해서는 EN이라는 자원이 필요하고, 플레이어는 현재 지니고 있는 EN 이상의 EN을 요구하는 행동을 선택할 수 없다.
2. (배틀 페이즈) 양 측의 선택이 완료되면 앞서 선택된 행동들이 순서대로 진행되고, 이를 통해 상대의 체력을 모두 소진하면 이긴다.

이 게임을 플레이하는 유저는 컴퓨터의 행동을 예측하여 자신의 행동을 선택해야 했는데, 이 과정에서 정해진 알고리즘대로 행동하는 컴퓨터의 행동을 예측하는 것보다는 실제 사람을 상대로 플레이하면 심리전의 요소가 들어가서 훨씬 재밌을 것 같다고 생각했다.

기반 기술

구현

• HTML / CSS / Javascript
• Node.js
• Socket.io
• Canvas / Fabric.js

로직이 간단하고 플레이타임이 짧은 게임의 특성 상 별도의 클라이언트를 다운받는 형식보다는 웹에서 간단히 한 판씩 플레이할 수 있는 형식이 적합하다고 판단하였다. 따라서 기획과 구현 과정에서 io게임의 형태나 구조를 많이 참고하였다.

또한 만들고자 하는 게임이 온라인 상에서 여러 개의 game room과 플레이어를 관리하는 구조이기 때문에 이를 위한 별도의 서버가 필요했고 이는 Node.js를 통해 구축하였다. 또한, Socket.io 라이브러리를 통해 서버-클라이언트 간 통신을 구현하여 서버에서 각 플레이어 간의 통신을 지원하도록 하였다.

디자인은 Canvas와 Fabric.js 을 통해 진행하였다. 초반에는 Canvas 만으로 모든 디자인 작업을 진행하고자 하였으나 Canvas에서 제공하는 기능만으로 원하는 디자인을 진행하기에는 너무 복잡하거나 비효율적인 경우가 많았다. 특히, 제작한 그래픽을 객체화하거나 이와 상호작용하는 부분에 대한 기술이 부족하거나 혹은 번거로웠다. 따라서 Fabric.js 라이브러리를 프로젝트에 추가로 적용하여 이 문제를 해결하였다. Fabric.js 도입을 통해 빠르고 간편하게 도형 객체를 만들 수 있었으며 객체의 이동, 감지, 심지어는 객체 자체에 캐릭터 정보를 넣는 등의 작업 역시도 쉽게 가능하게 되었다.

배포

• Heroku
• Render

배포는 Heroku를 통해 진행했으며, 본 링크에 push하여 플레이할 수 있도록 하였다. 몇몇 제약사항에도 불구하고 Heroku를 선택한 가장 큰 이유는 무료였기 때문이다.

Heroku가 2022년부터 프리 티어 서비스 지원을 종료함에 따라 Render로 배포 서비스를 대체했다.
Heroku와 마찬가지로 배포가 간단했고, 별도의 카드 등록이 필요가 없었기 때문에 Render 서비스를 선택하게 되었다. github와 연동되어 배포할 레포지토리를 선택 후 약간의 설정만 하면 바로 배포가 되는 점이 굉장히 편리했다.

플레이 링크
https://idt-game.onrender.com

버전 관리

• GitHub

현황

IDT-game의 버전은 Github의 Releases와 Tag 기능을 통해 관리하고 있으며, 현재 v0.3.0까지 release되었다. 업데이트를 통해 디자인과 유저 편의성을 개선하고, 추가 컨텐츠(ex. 캐릭터 분화)를 적용하였다.

v0.3.0에서의 게임 화면을 일부 수록한다.

홈 화면

유저의 닉네임을 입력받는 홈 화면이다. 서버 내의 닉네임 데이터들과 비교를 통해 중복되거나 양식에 맞지 않는 닉네임은 사용할 수 없게 한다.

행동 카드 선택 화면

다음 전투 페이즈에 수행할 행동 카드를 선택하는 페이즈이다.
각 플레이어별 현재 체력, 에너지(EN)을 게이지바 형태로 표시하며, 각 캐릭터의 위치는 우측 하단의 미니맵에 표현하였다.
행동 카드에는 소모 에너지, 데미지, 사정거리 등을 표시하였고, 캐릭터 별 고유 카드는 해당 캐릭터의 고유 색으로 배경색을 설정하여 구분되게 하였다.

게임 플레이 화면

앞서 선택한 행동카드들이 순서대로 하나씩 사용되는 전투 페이즈이다.
각 행동별로 간단한 애니메이션을 구현하여 캐릭터의 움직임을 표현하였고, 전투가 미친 영향(ex. 체력 감소, 에너지 회복 등)을 판단하여 플레이어의 상태를 갱신하거나 승패를 판정하게 된다.

개발 중 어려웠던 점

디자인

가장 어려웠던 점은 역시 디자인이다. 디자인 감각이 부족해서 이런저런 레퍼런스들을 참고해가며 만들었지만 여전히 많이 엉성해보인다. 특히 별다른 애셋을 사용하지 않고 Canvas나 Fabric.js에서 제공하는 기본 도형만으로 디자인을 진행하다보니 더욱 아마추어틱하게 느껴지는 것 같다.

테스트 환경

온라인 게임이다보니 실제 플레이 환경에서 테스트가 필요한 경우 직접 창을 여러 개 띄워놓고 양 플레이어를 대신하며 테스트를 수행했다. 문제는 종종 정확한 발생 원인을 모르는 버그가 발생한 경우인데, 이 경우 다양한 조건을 주어가며 버그가 발생하는 지점을 찾아나가느라 많은 시간 소요가 발생했다. 버그가 특정 기능에서 발생한 것이 확실한 경우에는 해당 기능에 대해서 간단한 테스트 코드를 작성하며 테스트를 진행할 수 있었지만, 정확히 어느 부분에서 버그가 발생했는지를 알기 힘든 경우에는 이런 방법 역시 쉽지 않았다. 따라서 프로젝트에 특화된 테스트 환경 구축의 필요성을 느꼈다.

개선

개선점이나 추가 컨텐츠 등에 대한 아이디어는 주로 해당 프로젝트 레포지토리의 TODO.md를 통해 관리하고 있다. 또한, 버그나 필요 기능 등은 주로 github issue를 통해 관리하고 있다.