13 kB 가 어느 정도의 크기일까요? 요즘 세상에서 몇 킬로바이트는 넓은 바다에서 물 한 방울이 차지하는 비중도 안될 것입니다. 비디오 게임의 태동기로 되돌아가 봅시다. 그러면 우리는 초기 개척자들이 정말 엄청난 제약 속에서 일했다는 것을 이해하게 될 것입니다.

예를 들어, 우리가 사랑했던 Atari 2600 은 RAM 크기가 겨우 128 바이트였습니다. 카드리지를 꼽아야 4 킬로바이트를 추가로 사용할 수 있었습니다. 흔히 말하는 것처럼 제약이 창의력을 낳습니다. 창의력이 필요한 대회가 있습니다. 매년 열리는 js13kGames 대회입니다. 이 대회는 열정에 찬 게임 개발자들이 단지 13,312 바이트 한도 안에서 게임 개발을 겨루는 대회입니다. 다행히 압축 기술도 사용할 수 있습니다.

HTML5 게임 개발자들을 위한 코딩 대회

Js13kGames 은 2012년부터 HTML5 게임 개발자들을 위해 매년 열리는 온라인 JavaScript 대회입니다. 재미 있는 것은 파일 크기를 13 킬로바이트로 제한한 점입니다. 참가자들은 한달 (8월 13일부터 9월 13일까지) 동안 대회가 지정하는 테마에 맞는 게임을 개발해야 합니다. 2015년의 테마는 Reversed 였습니다.

이 대회는 친구들과 스폰서들의 도움으로 심사위원 상패를 비롯해서 티셔츠와 기념품 등 푸짐한 보상을 제공합니다. 더구나 이를 전세계에 무료로 배송합니다. 하지만 이런 보상은 대회에 참가해서 얻을 수 있는 아주 작은 일부에 불과합니다. js13kGames 커뮤니티에 참여하면 보다 큰 이득을 얻을 수 있습니다. 무엇을 개발하다가 막히면 많은 사람들이 도와줍니다. 많은 사람들이 자신의 도구, 작업방식(workflow), 팁, 트릭 등을 공유합니다. 그리고 시간 제약이 있기 때문에 당신은 어떻게든 게임 개발을 마무리 지을 것입니다. 그 과정에서 당신의 능력이 향상될 것입니다.

작년도 수상작들

13 킬로바이트는 저해상도 이미지를 담기에도 충분한 공간이 아닙니다. 참가작 페이지를 찍은 작은 스크린샷 이미지가 정작 게임 자체보다도 큽니다! 당신은 그렇게 작은 크기 안에서 이룰 수 있는 성취에 놀랄 것입니다. 작년도 수상작들을 둘러보면서 영감을 얻어보세요.

• Gaëtan Renaudeau 이 만든 Behind Asteroids – The Dark Side
• Ash Kyd 이 만든 Road Blocks
• Eoin McGrath 이 만든 RoboFlip

어떻게 구현했는지 궁금하시죠? 그래서 수상자들을 인터뷰했습니다. 저는 그들의 성공 비결을 물어 보았고, 그들은 극도의 제약 아래서 게임을 개발할 때 사용했던 도구들과 기법들을 공개해주었습니다. 더 상세한 내용이 궁금한가요? 모든 게임들이 GitHub 에 공개되어 있습니다. 직접 소스코드를 파헤쳐 보세요.

RoboFlip

Eoin McGrath 이 RoboFlip 을 만들 때 사용했던 자신의 작업방식에 대해 설명합니다.

“이 대회는 최종 결과물을 압축할 수 있습니다. 아시겠지만 Zip 압축은 파일 하나에 적용할 때가 파일 여러개에 적용할 때보다 압축 효율이 좋습니다. 그래서 최선의 방법은 모든 이미지들을 인라인으로 처리하고, 모든 파일들을 이어붙이고(concatenate), 또 모든 JavaScript 파일에서 공백을 없애고 최소화(minify)시키는 것입니다. Grunt 와 Gulp 같은 타스크러너(task runner)들 덕분에 이 프로세스를 대부분 자동화시킬 수 있습니다. 제가 사용했던 Gulp 파일을 확인해 보세요. 그냥 gulp build 명령만 치면 온갖 번잡한 일들이 자동으로 처리되고, 제가 사용할 수 있는 귀한 공간이 얼마나 남았는지 알 수 있습니다”

그래픽 처리

“우선, 풍부한 애니메이션 프레임을 갖춘 고해상도 스프라이트 시트는 잊어버리세요. 간결함이 중요합니다. 코드를 이용한 그래픽(procedural generation)이나 SVG 로도 많은 것을 이룰 수 있습니다. 저는 개인적으로 고전적 스타일의 픽셀 느낌을 살리는 방향으로 갔습니다. 우선, 모든 이미지들을 GIMP 에서 저해상도 (가장 낮은 해상도는 6×6 픽셀입니다)로 만들었습니다. 그다음 이미지들을 base64 포맷으로 인코딩해서 Canvas API 를 이용해서 크게 다시 그렸습니다.”

“제게 유용했던 또다른 트릭은 불투명 컬러 값을 흰색으로 대치한 함수로 모든 이미지들의 움직임을 처리한 것이었습니다.”

“이 기법은 모든 스프라이트 객체들이 데미지 프레임(damage frame)을 갖게 만드는 저렴하고도 효과적인 방법입니다.”

사운드

“사운드 효과가 없는 게임은 카페인이 없는 커피 같은 겁니다. 분명 주어진 제약 아래서는 .mp3 나 .ogg 파일 한 개도 게임에 포함시킬 수 없습니다. 고맙게도, jsfxr 가 있습니다. 이것은 8비트 스타일의 비프(beep) 음을 만들 때 사용하는 아주 훌륭한 라이브러리입니다.

음악적으로 욕심이 있다면 Sonant-X 라이브러리 같은 멋진 도구를 이용해서 사운드트랙을 만들 수도 있습니다. 재생 가능한 멋진 샘플을 확인해보세요.” (재생하려면 “Play Song” 을 클릭해야 할 것입니다.)

Road Blocks

“제가 js13kGames 대회를 좋아하는 이유 중 하나는 우리가 할 수 있는 일에 인위적 제약이 있다는 점입니다.” 호주에 있는 게임 개발자 Ash Kyd 가 보내온 답장입니다.

“인디 개발자로서 제가 알게된 것이 있다면, 프로젝트의 일정이 유동적일 경우 온갖 가능성을 검토하다 일정이 지연되고 결국 아무런 성과 없이 프로젝트가 끝나는 경우가 많다는 것입니다. 하지만 어느정도 확고한 제약이 있을 경우 우리는 좀더 생산적이 됩니다.”

“Road Blocks 은 기본적으로 간단한 게임입니다. 파일 크기의 제약 덕분입니다. 그래서 코딩 작업량은 많지 않았습니다. 대회 기간 동안 저는 대부분의 시간을 게임 플레이를 손보고 모난 부분을 다듬는데 투자했습니다. 그 결과로 한달만에 수준 높은 품질의 작품을 만들게 된 것 같습니다.”

Behind Asteroids – The Dark Side

“Js13kGames 은 WebGL 이나 Web Audio 같은 멋진 기술을 발견하고 실험하면서 당신의 스킬을 높일 수 있는 훌륭한 기회입니다. 13 kB 제약 때문에 우리는 프레임워크의 도움을 기대할 수 없습니다. 또, 분명히, 이미지도 사용하면 안됩니다. 우리는 코드로 화면을 만들어내야 합니다. 말하자면 온전히 자신의 힘으로, 자신만의 스타일을 만들고, 적합한 트릭을 찾아야 합니다. 현실 세계에 존재하는 모든 트릭들을 시도하지 마세요. 우선 프로토타입을 먼저 만들고 코드를 극한까지 압축하세요.” 베터랑 게임 개발자이자 js13kGames 우승자인 Gaëtan Renaudeau 의 조언입니다.

“제가 코드 크기를 아끼기 위해 사용했던 재미있던 트릭 중 하나는 객체지향 스타일을 피하는 것이었습니다. 대신, 저는 단순한 함수를 작성하고 데이터 타입 처리를 위해 Array 를 사용했습니다. 저는 과거 js1k 참가작을 만들 때부터 이 기법을 사용해왔습니다.

제가 js13kGames 대회에 참여한지 이제 3년째 입니다. 그리고 제가 WebGL 을 재미있게 경험한 것도 이제 3번째입니다. 저의 2015 년도 출품작은 Asteroids 의 리메이크 버전입니다. 이 작품에서 우리는 우주선을 조종하는 것이 아니라 소행성(asteroid)을 조종해야 합니다. 바로 제가 대회가 제시한 Reversed 라는 테마를 해석한 방식입니다.

데스크탑의 경우, 게임은 타이핑에 의해 진행됩니다. 화면 상의 소행성마다 글자가 표시되고 당신은 적절한 순간에 그 글자를 타이핑해야 합니다. 모바일의 경우, 이 게임은 간단히 터치에 의해 진행되는 형태로 바뀝니다.

이 게임은 우주선을 조종하는 플레이어가 초심자인 경우부터 숙련자인 경우까지 각기 다른 난이도로 진행됩니다. 당신은 소행성으로 그 우주선을 격추시켜야 합니다. 우주선 조정은 AI algorithm 이 처리합니다.”

게임 랜더링 방식

“이 게임은 하이브리드 랜더링 기법을 사용했습니다. 우선 Canvas 위에 기본적인 2D 도형들을 그립니다. 그리고 그려진 결과물들을 여러개의 WebGL 포스트-프로세싱 이펙트로 전달(pipe)합니다.

2D Canvas 드로잉은 입자나 총알을 표현하기 위해 원(circle)을, 소행성과 우주선을 표현하기 위해 폴리곤(polygon)을, 글자를 표현하기 위해 선(line)을 사용했습니다. 글자는 글자 외곽선을 하드코딩하는 방식으로 처리했습니다. 게임의 객체들을 3색 채널(red, blue, green) 중 하나의 채널에만 그렸는데, 이는 객체들을 각기 다른 그룹으로 분리하기 위해서였습니다. 분리된 그룹의 객체들에는 각기 다른 포스트-프로세싱 과정이 적용됩니다. 예를 들어, 총알은 blue 채널에 그려지고 저는 거기에 반짝임 효과를 부여했습니다. 이것은 게임이 흑백이기 때문에 가능한, 여러 대상을 동일한 텍스처(texture) 위에 최적화시켜 놓을 수 있는 재미있는 기법입니다.

WebGL 포스트 프로세싱(post-processing) 방식으로 처리되는 다양한 이펙트들에 대해 설명한 상세 개발후기가 있습니다. 이 마지막 단계의 중요한 목표는 오리지널 아케이드 머신의 위대한 벡터 그래픽을 재현하는 것입니다.

플레이어가 아케이드 게임 스크린을 지켜보고 있는 배경 화면도 추가했습니다. 이것은 Fragment Shader 를 이용해서 순수하게 코드로 만들어낸 것입니다.”

요약

당신은 수없이 다양한 기법을 사용해서 당신의 게임 코드로부터 귀중한 바이트를 덜어낼 수 있습니다. 잘 알려진 일반적인 방법도 있고, 잘 알려지지 않은 생소한 방법도 있습니다. Tuts+ Game Development 사이트에 HTML5 게임 최소화 방법에 관한 기사가 있습니다. 또 js13kGames Resources 페이지에 당신이 사용할 수 있는 도구들과 자료들이 잘 정리되어 있습니다.

js13kGames 의 배경과 지난 코드 골프 수상자들의 기술을 소개한 이번 기사가 마음에 들었으면 좋겠습니다. 올해 대회에 참여하고 싶지 않나요? 2016년 대회가 8월 13일에 시작됩니다. 참가하세요! 코딩을 시작하기에 늦은 때란 없습니다.

이 글은 Andrzej Mazur 이 쓴 js13kGames: Code golf for game devs 의 한국어 번역본입니다.