보리 섬 개발 노트

1986년 4월 21일, 세가가 일본 오락실에 『원더보이』를 내놓았습니다. 개발사는 이스케이프였고, 감독과 기획, 작곡을 모두 니시자와 류이치가 맡았습니다. 오락실 기판에는 4MHz로 도는 Z80 프로세서가 들어 있었습니다.

이듬해 3월, 게임은 『슈퍼 원더보이』라는 이름으로 세가 마크 III로 옮겨졌습니다. 해외에서 마스터 시스템으로 팔린 게임기입니다. 화면은 256 × 192 픽셀이고, 이 화면을 8 × 8 타일로 덮으면 768칸이 됩니다. 16KB 비디오 메모리에서 타일 그림이 들어갈 자리는 448장이었습니다.

그 448장과 16색짜리 팔레트 두 개로 어떻게 섬 하나를 그리고, 사각파 세 개로 음악을 연주했을까요? 기계는 바뀌었어도 지금의 게임이 답해야 하는 질문은 그대로입니다. 게임은 1초에 예순 번 무슨 일을 할까요? 캐릭터는 자기가 땅 위에 서 있다는 것을 어떻게 알까요? 잘 만든 점프는 왜 발판 끝을 지나친 뒤에도 잠깐 동안은 먹힐까요? 보리 섬 개발 노트는 원더보이 스타일의 작은 횡스크롤 액션을 빈 캔버스에서 시작해, 돌아가는 부품을 하나씩 더해 가며 만들면서 이 질문들에 답합니다.

모든 데모가 실제 게임 엔진으로 돌아가므로, 숫자를 바꾸면 무엇이 달라지는지 바로 보입니다. 부품끼리도 이어져 있습니다. 픽셀 에디터에서 보리의 옷을 다시 칠하거나, 물리 실험실에서 중력을 올리거나, 레벨 에디터에서 구덩이를 옮기면 마지막 장의 완성 게임이 바뀐 대로 돌아갑니다. 게임의 규칙은 원더보이(1986)에서 빌려 왔습니다. 시간이 지나면 줄어드는 체력 게이지, 체력을 채우는 열매, 꽃봉오리에서 나오는 무기와 아이템, 발에 걸리는 돌, 뒤로 돌아가지 않는 화면입니다. 제약은 앞에서 본 마스터 시스템에서 가져왔습니다. 256 × 192 화면, 64색 가운데 16색으로 된 팔레트, 한 줄에 스프라이트 8개, 사각파 셋과 노이즈 하나로 된 음원 칩입니다. 캐릭터와 그림, 음악, 레벨, 코드는 모두 새로 만들었습니다.

완성 게임에서 보리가 물 위에 뜬 통나무 사이를 뛰어 건너는 장면. 위에 점수와 체력 게이지가 있고, 오른쪽 위의 도토리는 던질 도토리를 가지고 있다는 표시다

무엇을 해 볼 수 있나요

게임 루프(1장). 가변 시간 간격과 고정 시간 간격을 나란히 돌려 보고, 누산기가 프레임마다 업데이트를 몇 번 할지 정하는 과정을 타임라인으로 따라갑니다.
스프라이트와 배경(2장, 3장). 팔레트 번호로 저장한 픽셀, 애니메이션 표, 팔레트 스왑, 한 줄에 스프라이트 8개라는 제한과 그 때문에 생기는 깜빡임, 타일맵, 3D로 펼쳐 본 패럴랙스 레이어, 데드존 카메라를 다룹니다.
도구(4장). 픽셀 에디터, 오토타일, 지금 보고 있는 위치에서 바로 테스트하는 레벨 에디터가 있습니다. 여기서 만든 것은 곧바로 게임에 들어가고, 같은 레벨을 글자 지도와 런 렝스 부호화(RLE), JSON으로 나란히 보여 줍니다.
소리(5장). 칩에 쓰는 레지스터 값까지 보여 주는 음원 칩 건반, 효과음 디자이너, 배경 음악을 만드는 트래커가 있습니다.
물리(6장). 점프 궤적 실험실, 한 단계씩 들여다보는 타일 충돌, 코요테 타임과 점프 버퍼, 너무 빨라서 벽을 그냥 지나쳐 버리는 터널링을 다룹니다.
손맛(7장). 누르는 순간과 누르고 있는 상태를 구분하는 입력, 히트스톱과 화면 흔들림 같은 연출 스위치, 디버그 화면, 비트맵 폰트가 있습니다.

레벨 에디터에 섬의 첫 화면을 띄운 모습: 놓을 수 있는 타일과 오브젝트, 레벨 전체의 미니맵, 지금 위치에서 게임을 시작하는 버튼이 있다

점프 궤적 실험실: 버튼을 끝까지 누를 때, 8프레임만 누를 때, 톡 칠 때의 세 점프와 각각의 높이, 체공 시간, 거리, 그리고 중력과 점프 속도를 바꾸는 슬라이더

상태 기계

7장은 잠시 멈춰서 상태 기계가 무엇인지 설명합니다. 게임의 많은 부분이 상태 기계이기 때문입니다. 상태 두 개와 입력 두 개로 된 개찰구로 시작해, 동전을 넣고 밀어 보면서 상태 전이도와 전이표, 전이 기록이 서로 맞아떨어지는 것을 확인합니다. 이어서 같은 규칙을 참/거짓 플래그 여러 개로 들고 있으면 있을 수 없는 조합이 어떻게 끼어드는지 보여 주고, 마지막에는 보리의 상태 여섯 개(서기, 달리기, 점프, 낙하, 비틀, 죽음)에 플레이하는 대로 불이 들어오는 모습을 봅니다.

동전을 한 번 넣고 한 번 민 뒤의 개찰구 상태 기계: 방금 지난 전이가 빨간 화살표로 표시된 상태 전이도, 최근 전이 기록, 상태 전이표

1986년의 하드웨어와 지금

8장은 마스터 시스템을 지금의 컴퓨터와 나란히 놓고 비교합니다. 이 게임기에는 프레임버퍼가 없었습니다. 16KB 비디오 메모리에 담아 둔 8 × 8 타일로 화면을 한 줄씩 조립했고, 데모는 배경마다 서로 다른 타일이 몇 장 필요한지를 비디오 메모리에 들어가는 448장과 견주어 셉니다. 게임들은 줄을 그리는 도중에 스크롤 값을 바꿔 화면을 띠 여러 개로 나눴는데, 지금이라면 GPU로 레이어 몇 장을 겹쳐 그리면 됩니다. 음원 칩은 게임이 도는 동안 악보를 한 음씩 연주했지만, 요즘 게임은 대부분 녹음을 재생하고 원하는 만큼 섞으면서 중요한 소리가 날 때는 음악을 줄입니다. 차이마다 지금은 어떻게 처리하면 되는지도 함께 설명합니다. 큰 화면에서도 픽셀을 선명하게 보여 주는 정수 배율, 고정된 시뮬레이션 간격, 덕킹을 거는 믹서 버스 같은 것들입니다.

래스터 스크롤: 배경 레이어는 한 장이고 띠가 시작되는 줄에서 스크롤 값만 바꿔, 구름과 산, 언덕, 땅이 서로 다른 속도로 움직인다

어떻게 만들었나요

라이브러리나 프레임워크 없이 HTML, CSS, 자바스크립트만으로 만들었고, 빌드 스크립트가 모든 파일을 HTML 한 장으로 묶습니다. 스프라이트는 16진수 숫자로 된 격자로, 레벨은 192 × 12 글자 지도로 적어 두어서 도구들이 사람이 읽을 수 있는 데이터를 그대로 고칩니다. 음원 칩은 웹 오디오로 흉내 냈습니다. 진짜 칩처럼 사각파 채널마다 10비트 레지스터 값에서 음 높이를 얻고, 노이즈는 16비트 시프트 레지스터로 만듭니다. 노트 전체를 한국어와 영어로 볼 수 있고, 소스는 MIT 라이선스로 GitHub에 공개되어 있습니다.

보리 섬은 원더보이(Escape/세가, 1986)에서 영감을 받아 새로 만든 게임이며, 세가나 원더보이의 권리자와는 관계가 없습니다.

시작하기

0장부터 읽어도 되고, 바로 9장으로 가서 플레이해도 됩니다. 게임 화면을 한 번 누르면 키보드로 조작할 수 있습니다. 방향키나 WASD로 움직이고, Z나 스페이스로 점프하고, X로 던집니다. 휴대폰에서는 화면 아래의 버튼을 씁니다. 목차 아래의 소리 버튼으로 소리를 켜고 끕니다. 고친 내용은 브라우저에 저장되고, 목차 아래 상자에서 무엇을 바꿨는지 보고 버튼 하나로 모두 되돌릴 수 있습니다.