← Back to blog

[KR] Speed Watermelon 개발 일지 1

Speed Watermelon

작년 말부터 유행한 수박게임을 해보다가 테트리스와 같이 조금더 긴박한 맛이 있으면 재미있을 것 같다는 생각이 들어 아이데이션을 시작했습니다.

Speed watermelon은 이름에 Speed가 들어가 있는 만큼, 내려오는 속도가 시간이 지날수록 빨라지며, 내려오는 동안 과일을 직접 좌우로 움직일 수 있습니다.

수박게임과 테트리스의 장점을 모두 취한 게임이라고 할 수 있습니다!

Speed Watermelon

개발 계획

본 프로젝트는 웹 기반으로 HTML, CSS, JavaScript를 사용하여 개발하였습니다.

Unity, Unreal Engine, Godot 등의 게임 엔진을 사용하지 않은 이유는 다음과 같습니다.

  • 웹 개발 경험이 많았다.
  • 게임 엔진을 사용하면 웹 배포가 쉽지 않다. (지원되어도 stable하지 않음)
    • 웹으로 빌드가 가능해도, 용량이 크다.

(물론 나중에는 full blown 게임엔진을 사용했더라면… 후회가 들긴했습니다😭)

안드로이드, iOS는 Flutter를 사용하여 Webview로 제공할 예정입니다.

HTML5 Games라고도 불리는 웹 게임 개발은 상대적으로 마이너한 분야입니다. 따라서 상대적으로 정보가 부족하고, 라이브러리나 프레임워크도 많지 않습니다. 그래서 이번 개발기를 통해 제가 삽질했던 경험들을 공유해보려고 합니다.

게임 엔진

웹에서도 게임엔진으로 Phaser와 같은 라이브러리가 있습니다. 하지만, 이번 프로젝트에서는 Vanilla JavaScript로 개발하기로 했습니다. 웹이기 때문에 용량에도 민감하고, 웹 게임엔진들은 상대적으로 성숙하지 않은 것으로 보였던 것도 있고, 해당 프로젝트의 규모에선 굳이 사용할 필요는 없어 보였습니다. (하지만 생각보다 어려웠다…)

렌더링은 Pixi.js 라이브러리를 사용했습니다.

물리 엔진

Javascript에서 가장 유명한 물리엔진으로는 Matter.js가 있습니다. 하지만 여러 가지 한계가 있어서, Box2D를 WebAssembly로 포팅한 box2d-wasm를 사용했습니다.

물리 엔진 선택에 있어서 얘기하고 싶은 내용이 많아서, 따로 기회가 되면 포스팅을 해보겠습니다.

마치며

앞으로 이 게임을 개발하면서 겪은 경험들을 공유해보겠습니다. 감사합니다! 🍉