LittleJS
LittleJS는 Frank Force가 KilledByAPixel이라는 개발자 이름으로 공개한 경량 JavaScript 기반 HTML5 게임 엔진이다. 브라우저에서 작동하는 작은 2D 게임을 빠르게 작성할 수 있도록 렌더링과 충돌·물리, 타일맵, 카메라·입력, 오디오·파티클을 간결한...
| 분류 | 게임 엔진, 경량 HTML5·JavaScript 2D 게임 엔진 |
|---|---|
| 개발자 | Frank Force (KilledByAPixel) |
| 엔진 언어 | JavaScript |
| TypeScript 지원 | 타입 정의·예제·모듈 제공 |
| 실행 환경 | 현대 웹 브라우저 |
| 핵심 목표 | 작은 코드 크기·속도·간단한 게임 제작 |
| 기본 렌더링 | 2D Canvas·WebGL 가속 출력 |
| 선택적 기능 | Three.js 연동 3D 장면 플러그인 |
| 핵심 기능 | 게임 루프, 카메라, 스프라이트·애니메이션 |
| 물리·충돌 | 아케이드 물리, 타일맵·레이캐스팅, Box2D 연동 |
| 입력 | 키보드, 마우스, 터치, 게임패드 |
| 음향 | 음향 효과 합성·재생, ZzFX 연계 |
| 도구 | 라이브 예제 브라우저·코드 에디터·디버그 오버레이 |
| 프로젝트 시작 | npm·Vite 템플릿과 TypeScript 예제 |
| 주요 활용 | 소규모 브라우저 게임, 게임잼, Js13kGames |
| 플랫폼 | 웹·모바일 브라우저, 선택적 데스크톱 웹 래핑 |
| 라이선스 | MIT License |
| 공식 소스 | KilledByAPixel/LittleJS |
| 공식 예제 | LittleJS Examples |
| API 자료 | LittleJS Reference |
LittleJS는 Frank Force가 KilledByAPixel이라는 개발자 이름으로 공개한 경량 JavaScript 기반 HTML5 게임 엔진이다. 브라우저에서 작동하는 작은 2D 게임을 빠르게 작성할 수 있도록 렌더링과 충돌·물리, 타일맵, 카메라·입력, 오디오·파티클을 간결한 API로 제공한다. 큰 편집기나 복잡한 외부 빌드 시스템 없이 시작하는 사용 사례를 강조하며 게임잼과 파일 크기를 제한하는 Js13kGames 같은 대회에도 적용할 수 있다. TypeScript로 게임을 작성하기 위한 타입 선언과 예제도 지원하고, MIT 라이선스로 소스를 공개한다.[1]
엔진의 기본 실행 모델은 일정한 프레임 주기에 따라 게임의 상태를 갱신하고 렌더링 명령을 출력하는 방식이다. 개발자는 engineInit에 초기화·갱신·렌더링 등의 콜백을 전달하여 프로그램을 시작할 수 있다. 월드 좌표를 처리하는 2D 벡터와 카메라, 오브젝트·애니메이션 및 게임 상태 관련 기능이 제공된다. 자체 게임 규칙을 JavaScript로 정의한 후 엔진이 입력을 수집하고 화면 출력을 관리하게 할 수 있어 웹 페이지의 일반 UI와 게임 화면을 결합하기에도 적합하다.[2]
2D 렌더링은 스프라이트와 텍스처·타일맵, 기본 도형·글꼴과 화면 효과를 중심으로 구성된다. 브라우저의 Canvas와 WebGL을 이용하여 화면을 그릴 수 있으며 카메라 이동·화면 흔들림과 여러 렌더링 옵션을 제공한다. 선택적으로 Three.js 플러그인을 연결하면 2D 게임 화면의 뒤쪽에 3D 장면을 렌더링하고 두 카메라의 좌표계를 맞춰 2D 스프라이트와 3D 메시를 같은 공간에 배치할 수 있다. 이는 LittleJS가 Three.js 전체를 자체 구현했다는 의미가 아니라 상위 확장 플러그인으로 3D 렌더러를 연결한다는 의미다.[3]
게임플레이를 위한 물리 기능에는 기본적인 아케이드 형태의 충돌·속도 갱신, 타일맵 충돌과 레이캐스팅이 포함된다. 복잡한 강체 물리가 필요한 경우에는 Box2D의 WebAssembly 기반 구현을 선택적으로 결합할 수 있다. 경로 탐색용 A* 플러그인과 격자·타일맵 관련 유틸리티도 제공하므로 캐릭터의 이동과 상호작용을 구현할 수 있다. 키보드·마우스·터치·게임패드 입력을 같은 게임 루프에서 처리하며 모바일에서는 화면상 가상 게임패드를 구성할 수 있다.
오디오 기능은 게임 효과음을 실시간으로 합성하거나 재생하는 방법과 경량 음악·사운드 자원 처리에 중점을 둔다. ZzFX와 같은 소형 효과음 합성 기술을 활용하면 별도의 대형 오디오 파일을 사용하지 않고 코드로 소리를 만들 수 있다. 디버그 오버레이와 도형 표시, 실시간으로 예제를 실행하는 편집기, Vite 시작 템플릿과 Node.js 기반 빌드 지원도 제공한다. 따라서 단일 HTML 파일에 가까운 게임부터 자산과 모듈을 분리한 TypeScript 프로젝트까지 여러 크기의 개발 흐름을 지원한다.[4]
LittleJS는 고수준 3D 장면 제작 환경이나 대형 프로젝트의 완전한 콘텐츠 파이프라인보다 작은 2D 게임을 코드 중심으로 만드는 데 초점을 둔다. 사용 가능한 브라우저·그래픽스 기능과 선택적 플러그인의 종류는 버전에 따라 달라지므로 오래된 예제와 최신 배포판의 API를 동일하게 취급하지 않는 것이 중요하다. 공개 소스는 MIT License로 상용·비상용 프로젝트에 사용할 수 있지만 프로젝트에서 별도로 사용하는 이미지·음악·글꼴과 서드파티 라이브러리는 각각의 권리를 따른다. 현대 브라우저 게임에서 작은 코드 크기와 사용 편의성을 주요 설계 목표로 삼은 엔진의 사례다.[5]