게임 코드 들여다 보기 — 빌드

자바스크립트 게임 코드를 분석하고 있다.

Photo by James Harrison on Unsplash

그래픽 카드의 성능을 극한으로 사용하는 그런 게임 말고 웹에서 간단하게 할 수 있는 게임을 골랐다. 어떻게 동작하는지 궁금했다. 매년 8월에 게임 만들기 대회가 열리는데 이 대회에서는 자바스크립트로 만들어야 하고 크기가 13K 이하고 테마에 따라서 만들어야 하는 등등의 요구사항을 제시한다. 올해 1등 한 게임을 살펴보고 싶었다. GitHub에서 코드를 볼 수 있고 js13kgames에서 바로 수행할 수 있다. 이 글을 더 읽기 전에 내 취향의 게임인지 확인할 만하다.

이런 게임 코드를 분석하는 강좌가 있다면 미리 봤을 것이지만 그런 강좌를 아직 찾지 못했으므로 아무 준비 없이 걸어 들어가기로 했다. 내가 지금 가지고 있는 경험은 자바스크립트뿐이다. 취미 생활로 코딩을 할 때 딱 적당한 만큼의 기술만 알고 싶다. 적정 코딩이 필요하다. 그래야 즐거움을 잃지 않고 오래 할 수 있다. 이런 마음으로 이 코드를 살펴보려고 한다. 줄줄이 이어질 나의 시행착오를 같이 경험하기 바란다.

코드 다운로드

우선 코드를 받는다. 물론 git을 설치해야 한다. 윈도즈라면 git bash가 필요하다.

git clone https://github.com/remvst/ninja.git
cd ninja

빌드

README.md 파일에서 빌드 하려면 아래 두 명령을 사용하라고 했다.

make install
make build

make install 명령에서 brew 가 없다고 에러가 났다.

▶ make install
git submodule init
git submodule update
brew install node advancecomp
make: brew: Command not found
Makefile:10: recipe for target 'install' failed
make: *** [install] Error 127

우분투를 사용하고 있어서다. 맥에서만 사용하는 brew가 우분투에 있을 리가 없다. 윈도즈를 사용하는 사람이라면 make 가 없다는 메시지를 받을 수도 있다. 여기서 brew를 사용하는 목적은 node, advancecomp를 설치하는 것이다. node와 advancecomp는 아래 명령으로 각각 따로 설치했다.

• https://nodejs.org/en/download/
• https://www.advancemame.it/download

우분투를 사용하건 윈도즈를 사용하건 굳이 make를 사용할 필요는 없고 Makefile의 내용 중 일부를 직접 수행하면 된다. 이 파일의 install: 부분을 보면 아래 내용인데 brew 명령을 제외한 라인을 한 줄씩 입력한다.

git submodule init
git submodule update
# brew install node advancecomp
cd js13k-compiler && git checkout master && git pull && npm install && rm package-lock.json

이 명령들의 목적은 js13k-compiler를 사용하려는 것이다. 게임 소스와는 직접 관계없다. 이제 make build 차례다. Makefile의 build: 부분을 그대로 입력하자.

▶ node build.js
[00:00.002] Building main files
[00:00.002] Building JS
[00:00.002] Building CSS
[00:00.002] Building HTML
[Error: ENOENT: no such file or directory, open '/home/br/src/ninja/build/index.html'] {
errno: -2,
code: 'ENOENT',
syscall: 'open',
path: '/home/br/src/ninja/build/index.html'
}

또 에러가 나타났다. 에러 메시지 그대로 build/index.html가 없다는 뜻인데 build.js를 살펴보니 build/index.html은 src/index.html로부터 만들어진다. src/index.html은 분명 있지만 build/index.html 파일이 만들어지지 않은 것이다. 말은 길었지만 build 폴더가 없어서 나는 에러다. build 폴더를 하나 만들자.

▶ mkdir build

다시 빌드를 시도하자.

▶ node build.js
[00:00.001] Building main files
[00:00.002] Building JS
[00:00.002] Building CSS
[00:00.002] Building HTML
[00:00.899] Building ZIP
[##################################################] 103%
ZIP file size: 13705 bytes (-393 bytes remaining)
[##################################################] 100%
ZIP file size: 13314 bytes (-2 bytes remaining)
[00:00.962] Building debug files
[00:00.962] Building CSS
[00:00.962] Building HTML
[00:00.962] Building JS
[00:01.002] Building debug files
[00:01.002] Building CSS
[00:01.002] Building HTML
[00:01.002] Building JS
[00:01.229] Done

빌드된 파일들을 build 폴더에서 확인할 수 있다.

▶ ls build
debug.html  debug.js  debug_mangled.html  debug_mangled.js  game.zip  index.html

빌드 명령어는 게임과는 직접 관계가 없다. index.html 파일을 만들기 위해서 필요한 작업이다. 이렇게 만들어진 index.html 파일을 브라우저에서 열면 게임을 즐길 수 있다. build/index.html로 빌드된 코드는 보기 힘들다. 빌드 전 코드를 살펴보자 빌드 전 코드는 모두 src 폴더에 들어있다.

▶ ls src
index.html  js  style.css

하나의 html 파일과 하나의 css 파일 그리고 js 폴더 아래에 있는 41개의 js 파일로 이루어져 있다. 시작하는 코드를 찾고 싶었다. 물론 시작하는 파일은 index.html 파일임을 알고 있다. 이 파일에 삽입되는 자바스크립트 파일 중, 어느 파일의, 어느 함수에서 시작하는지 알고 싶다. build.js에 그 힌트가 있다. 이 파일의 BuildJS 함수에서 JS_FILES를 사용하고 이 변수는 config/js.json 파일로부터 읽어 들인다. 이 파일 안에 41개의 파일 목록이 모두 들어있다. 이 자바스크립트 파일들은 정확히 src/js 폴더 안에 들어 있는 파일들이다. 이 목록 순서대로 자바스크립트 파일을 이어 붙이고 있다. 아래 코드에서 세 번째, 네 번째 라인에서 파일들을 이어 붙인다.

// build.js
const sequence = [
tasks.label('Building JS'),
tasks.loadFiles(JS_FILES),
tasks.concat(),
tasks.macro('optimizeMatrix', optimizeMatrix),
tasks.constants(constants),
tasks.macro('evaluate'),
tasks.macro('nomangle'),
tasks.macro('rawFile', rawFile),
];

생성된 build/index.html 파일 안의 자바스크립트 코드는 src/js에 있는 코드와 영 다른 형태를 하고 있는데 아래 두 함수 때문이다.

// build.js
if (mangle) {
sequence.push(tasks.mangle(MANGLE_SETTINGS));
}
if (uglify) {
sequence.push(tasks.uglifyES());
}

이런 처리를 하지 않고 단순히 이어 붙인 자바스크립트 파일을 보려면 build/debug.js 파일을 보면 된다. 이 파일은 build.js에 있는 아래 함수를 호출하여 생성된다.

// build.js
buildDebug({
'mangle': false,
'suffix': ''
}),

build/debug.js 파일은 build/debug.html에서 읽어 들이고 우리는 build/debug.html 파일을 브라우저에서 읽음으로써 자바스크립트가 온전히 보이는 버전을 수행할 수 있다. src/js의 파일들은 총 3786 라인인데 debug.js 파일은 이보다 크다. 전처리 과정이 들어가서 그렇다. 확인을 위해 js 전처리 과정을 생략해 보자. 아래처럼 일부 코드를 주석으로 만들고 node build.js를 수행하면 된다.

const sequence = [
tasks.label('Building JS'),
tasks.loadFiles(JS_FILES),
tasks.concat(),
// tasks.macro('optimizeMatrix', optimizeMatrix),
// tasks.constants(constants),
// tasks.macro('evaluate'),
// tasks.macro('nomangle'),
// tasks.macro('rawFile', rawFile),
];

이렇게 만들어진 build/debug.js 파일은 3826 라인이다. 3786 보다 40 라인이나 더 많은 것은 js 파일이 41개라서 각각 파일 사이에 공백 라인이 삽입되었기 때문이다.

빌드가 끝났다. 혹시 js13k-compiler의 동작이 더 궁금하다면 js13k-compiler/sample 폴더를 살펴보길 바란다.

build/debug.html 파일을 로딩하고 브라우저에서 build/debug.js 파일의 원하는 곳에 브레이크를 걸고 동작을 확인할 수 있다. 크롬 브라우저를 사용한다면 DevTools를 사용하면 된다. build/debug.js 파일은 하나의 파일처럼 debug.html에 포함됨으로 위에서 아래로 순서대로 수행한다. build/debug.js를 에디터에서 열어보자.