MARIO.GAME
ko
개발 일지

제작 뒷이야기: Mario.Game Adventure 만들기

Mario.Game Adventure를 만든 과정을 소개합니다. 코드로 그린 픽셀 아트, 클래식한 감각으로 맞춘 물리 엔진, Web Audio 사운드트랙, 그리고 봇이 테스트한 여덟 개의 레벨까지.

읽는 데 5분

제작 뒷이야기: Mario.Game Adventure 만들기

Mario.Game Adventure는 엔진도, 이미지 파일도, 오디오 파일도 없이 JavaScript 파일 하나로 만들어졌습니다. 어떻게 완성되었는지 소개합니다.

코드로 그린 픽셀 아트

작은 모습과 큰 모습의 주인공, 워커, 엉금엉금, 가시돌이, 뻐끔플라워, 보스, 블록, 구름, 성까지 모든 스프라이트는 소스 코드 안에 색상 문자 행으로 적혀 있거나 작은 도형 루틴으로 그려집니다. 게임이 시작될 때 화면 밖 캔버스에 한 번만 그려 두고, 매 프레임마다 그것을 화면에 복사합니다. 월드마다 고유한 팔레트가 있어서, 같은 벽돌도 지하에서는 파랗게, 밤에는 얼음처럼, 성에서는 회색으로 바뀝니다.

클래식한 감각의 물리

플랫포머의 성패는 움직임에 달려 있습니다. 주인공은 걷기와 달리기 속도가 따로 있고, 가속과 감속이 있으며, 방향을 바꿀 때는 확실한 미끄러짐이 생기고, 가변 점프 높이도 지원합니다. 점프 버튼을 누르고 있고 아직 상승 중일 때는 중력이 더 약해집니다. 달리면서 뛰면 3칸짜리 틈을 넉넉하게 넘고 걸으면서 뛰면 넘지 못하도록 값을 계속 조정했습니다. 그래서 달리기가 익힐 만한 기술처럼 느껴집니다. 자세한 내용은 이동 가이드를 읽어 보세요.

여덟 개의 레벨, 네 가지 테마

각 월드에서는 하나의 핵심 아이디어를 선보입니다.

  1. 월드 1 — 기본기: 파이프, 구덩이, 파워업, 그리고 천장이 낮은 동굴.
  2. 월드 2 — 밟을 수 없는 가시돌이, 그리고 구름 위의 첫 움직이는 리프트.
  3. 월드 3 — 모든 요소가 섞인 밤 레벨, 그리고 끝없는 낭떠러지 위의 나무 꼭대기.
  4. 월드 4 — 적들로 붐비는 요새 길, 그리고 파이어 바, 용암, 보스가 있는 성.

모든 레벨을 플레이하는 봇

모든 레벨을 끝까지 클리어할 수 있도록, 무적 상태로 각 스테이지를 달리며 벽과 틈 앞에서 점프하는 테스트 봇을 만들었습니다. 봇이 멈춰 서면 그 지점을 살펴봤는데, 점프가 1픽셀 너무 높거나 닿을 수 없는 블록이 있다는 사실이 여러 번 드러났고, 그때마다 레벨을 고쳤습니다. 모든 블록의 점프 높이 검사와 함께 사용해, 찾을 수 있는 도달 불가능한 지점을 모두 잡아냈습니다.

Web Audio로 만든 음악

사운드트랙은 브라우저의 Web Audio API를 사용하는 작은 시퀀서가 실시간으로 생성합니다. 멜로디와 베이스에는 사각파와 삼각파를, 드럼에는 노이즈를 사용합니다. 월드마다 고유한 오리지널 곡이 있고, 파워업, 깃발, 게임 오버, 피날레용 징글도 있습니다. 타이머가 100 이하로 떨어지면 템포가 빨라집니다. 기대하신 바로 그대로예요.

직접 해 보세요

Mario.Game Adventure 플레이하기. 막히는 곳이 있다면 바로 공략으로 가 보세요.

뉴스 더 보기