melonJS
melonJS는 JavaScript와 TypeScript로 브라우저 게임을 개발하기 위한 오픈 소스 게임 엔진이다. 전통적인 HTML5 2D 게임 개발에서 출발해 타일맵과 스프라이트·객체·입력·충돌·오디오 시스템을 발전시켰으며 최신 버전에서는 WebGPU와 WebGL 2 GPU 렌더링,...
| 분류 | 게임 엔진, HTML5 기반 2D·2.5D 게임 엔진 |
|---|---|
| 개발·유지 | melonJS 팀, AltByte |
| 주요 언어 | JavaScript, TypeScript |
| 실행 환경 | 웹 브라우저 |
| 주요 객체 | Application, Scene, Container, Sprite |
| 렌더러 | WebGPU, WebGL 2, Canvas 2D 대체 경로 |
| 3D 확장 | 기본 3D 메시와 카메라 기능 |
| 월드·물리 | 2D 충돌 및 지형·다각형 처리 |
| 타일맵 | Tiled 지도 파일 활용 |
| 오디오 | 웹 오디오 기술 기반 재생 |
| 자산 | 이미지·사운드·지도 사전 로딩 |
| 프로젝트 | npm·Vite 및 일반 JavaScript 모듈 |
| 라이선스 | MIT License |
| 공식 웹사이트 | melonjs.org |
| 소스 | melonjs/melonJS |
| 개발 문서 | melonJS 위키 |
melonJS는 JavaScript와 TypeScript로 브라우저 게임을 개발하기 위한 오픈 소스 게임 엔진이다. 전통적인 HTML5 2D 게임 개발에서 출발해 타일맵과 스프라이트·객체·입력·충돌·오디오 시스템을 발전시켰으며 최신 버전에서는 WebGPU와 WebGL 2 GPU 렌더링, 3D 메시와 카메라 등까지 지원 범위를 확장했다. 독립 게임 제작자가 필요에 따라 직접 게임 코드를 작성하는 코드 중심 엔진이다.[1]
게임의 실행 구조는 애플리케이션과 실행 루프, 현재 화면 상태와 씬 그래프 등으로 구성된다. 개발자는 화면 객체와 부모 컨테이너에 그래픽스·게임 동작을 연결해 월드를 만들고, 일정한 갱신 단계에서 입력·게임 규칙을 계산한다. 씬 그래프는 부모·자식 객체의 상대 좌표와 표시 순서를 관리하며, 게임 상태와 화면 렌더링·자산 로딩의 역할을 분리하는 방식으로 프로젝트의 규모를 확장할 수 있다.
렌더링 API는 HTML5 Canvas의 변환과 도형 출력에 익숙한 프로그래머가 사용할 수 있는 형태를 지향한다. 최신 소스는 WebGPU·WebGL 2 및 Canvas2D 대체 경로를 제공하며, 지원되는 GPU와 브라우저에 따라 백엔드를 선택한다. GPU의 후처리 효과, 셰이더와 커스텀 메시 등의 기능을 활용할 수 있지만, WebGL 1만 제공되는 구형 장치는 최신 렌더러의 제약을 고려해야 한다.[2]
타일맵과 게임 자산 관리에는 Tiled로 작성한 지도·텍스처와 스프라이트, 사운드·글꼴을 가져오는 기능이 포함된다. 물체의 이동과 다각형 충돌, 씬의 자식 요소 관리 및 게임 이벤트 처리는 엔진 API에서 수행한다. 개발자는 복잡한 3D 에디터를 반드시 설치하지 않고도 외부 맵 편집기와 JavaScript 코드, 웹 개발 도구를 결합해 게임을 구성할 수 있다.
2026년 공식 위키는 npm create melonjs my-game으로 프로젝트를 생성하고 의존성 설치·개발 서버 실행을 진행하는 방식을 설명한다. TypeScript·Vite를 이용하는 템플릿도 제공되며 웹 프로젝트에 라이브러리를 독립 모듈로 포함하는 방식도 가능하다. 실제 게임 실행은 브라우저의 화면 출력·입력·미디어 API에 의존하므로 모바일 사파리 등 플랫폼별 지원 상태는 다를 수 있다.[3]
melonJS는 MIT License로 공개되며 소스와 관련 자료를 GitHub에서 확인할 수 있다. 최근 공식 README는 2D에 제한되던 초기 정체성보다 2.5D 및 일부 3D 표현까지 설명하고 있으므로 구버전과 최신 버전의 렌더링 능력을 구분해야 한다. 이는 HTML5 Canvas 게임 엔진이 브라우저 GPU 기술의 발전을 활용하는 방향으로 확장된 사례다.