html5 게임을 생성하는 방법

스페이스 카우보이에게 우주선에서 게임을 플레이 하라고 유혹당한 뒤, 갑자기 당신은 수많은 공격자들에게 총을 쏘고 포탄을 피하고 있는 자신의 모습을 발견합니다. 이것이War Games: Space Dementia라고 이름 붙여진 Spritted의 새로운 HTML5 이 시작된 방법입니다. Spritted의 프로젝트 매니저, 에두아르도 올테가(Eduardo Ortega)는 “저는 항상 액션 아케이드 게임을 만들고 싶어 했습니다. 저는Robotron 2084라는 게임을 아주 좋아 합니다. 아주 단순하지만 재미있다고 생각했고, 그렇기 때문에 이 게임에서 영감을 얻었습니다.” 라고 말했습니다. 그는 모든 비밀을 밝히기를 원했고, 팀의 도움으로, 우리에게 게임을 생성하는 것이 어떤것인지 밝힙니다.

에두아르도는 자기 자신을 “간단하고 직접적인 클래식 게임 플레이를 선호하는 열정적인 비디오 게이머” 라고 묘사했으며, War Games: Space Dementia을 만들때, “간단하고 가벼운 아케이드 게임” 이라는 컨셉에 기반을 두었습니다. 비디오 게임을 생성하는 첫번째 과정은 아이디어를 갖는 것입니다. 그에 기반하여 무엇에 관한 게임을 만들지 결정합니다. 그렇게 하기 위해서, 이 새로운 게임에 생명을 불어넣을 팀과 함께 모여 계획 및 과정에 대해 의논해야 합니다.

“게임의 올테가는 “컨셉이 정해지면 우리는 함께 만나서 게임이 어떻게 만들어 질지에 대한 전반적인 아이디어를 설계합니다.” 라고 말했습니다. 그는 프로그래머 및 디자이너와 함께 일합니다. 디자이너는 먼저 메뉴 및 화면 전환과 같은 사용자 인터페이스의 설계를 상세히 검토합니다. 그는 또한 화면이 직관적이며 우호적인 방식으로 흐르도록 하는 사용자 경험도 책임지고 있습니다. 그 후, 추상적인 화면, 적, 아이템 등을 스케치 하여 정식적인 게임 개발을 시작합니다. 일단 디자이너가 이 작업을 모두 마치고 에두아르도에게 보내면, 그가 승인을 하게 됩니다. 디자이너의 스케치 및 첫번째 코딩이 완성되었습니다.

열정 및 영감, 비디오 게임 디자인의 뮤즈.

다니엘 뻬냐(Daniel Peña) 는 캐릭터를 생성하고 게임 내 사물에 형태를 부여하는 역할을 맡고 있습니다. 처음에, 이 Spritted 디자이너는 광고 회사에서 일했지만, 비디오 게임을 향한 그의 열정으로 인해 결국 디자이너의 길을 택했습니다. 이 바야돌리드(Valladolid) 에서 온 젊은이는 그가 80년대 음악 ‘Avalon’ by Roxy Music 를 듣는 중에War Games: Space Dementia 디자인에 대한 아이디어가 떠올랐다고 말했습니다. 이 노래의 제목 덕분에, 에두아르도의 승인 이후, 그는 전설의 아서왕 및 원탁의 기사에 기반한 캐릭터를 생성하기로 결정했습니다.

초기 타이틀은Defenders of AVA 였지만, 그는 제목이 노르웨이의 유명한 팝 그룹 ABBA와 혼동될 수 있다고 생각하여, Knights of Space로 바꾸었습니다. 하지만, 게임은 마케팅 상의 이유로 현재의 타이틀을 갖게 되었습니다. 뻬냐는 “제목Knights of Space은, 마블의 가디언즈 오브 갤럭시를 위한 작은 공헌입니다.” 라고 말했으며 로고 디자인에 통합된 작은 공헌 또한 인정하였습니다.

디자인 과정은 놀랍게도 꽤나 고전적입니다. 다니엘은 스케치를 하기위해 오직 연필 및 종이만 사용하며 만족스러운 그림이 완성되면, 일러스트레이터를 사용합니다. 이 프로그램은 그가 종이에 모든 것, 즉, 아서왕에서 영감을 얻은 모든 그림들을 디지털화 할 수 있도록 합니다. “K1-ARZ 는 그의 우주선XK-LIBUR에 탑승하여KM-LOT에 둘러싸인 3 섹터를 방어해야 합니다”, 뻬냐는War Games: Space Dementia 의 줄거리를 다시 한번 이야기 하며K1-ARZ 은 우주 버전 아더왕이라고 설명 합니다.

그는 또한 게임의 미학이 뻬냐는 또한 게임의 미학이 헬보이의 창조자 마이크 미뇰라(Mike Mignola) 특유의 톤 대조 및 색상 표현법에서 인상을 받았다고 밝혔습니다. 덧붙여, 우리는 또한Tron, Asteroids 또는 R-Type 과 같은 80년 대의 고전 아케이드 게임의 영향을 확인할 수 있습니다.

프로그래밍, 비디오 게임의 뼈대.

단순한 게임방법을 향한 그의 열정에 중점을 두며, 올테가는 단순한 단일 화면 생존 게임에 대한 아이디어를 제안하였습니다. 데이비드 산틴(David Santin) 은 11살때 부터 비디오 게임을 만들기 시작하여 지금 현재 Spritted에서 일하고 있는 비디오게임 프로그래머 입니다. 프로젝트 매니저가 마드리드에서 온 이 젊은이를Robotron 2084에서 영감을 받은 게임을 만드는 프로젝트에 투입시키자 마자, 그는 즉시 Smash TV를 생각해 내었습니다.

데이비드는항상 Robotron 2084 의 전임인 고전 아케이드 게임을 좋아했기 때문에, Smash TV 를 향한 열정을War Games: Space Dementia 을 만드는데 계속하기로 결정하였습니다. Robotron은 1982년에 출시되었으며, 게임의 목적은 생존자들을 구하는 동시에 2084년에 인류에 대항하여 반역한 로봇들을 제거하는 것입니다. 그 후 1990년에, 미래형 TV 프로그램 참가자가 파워업을 수집하고 공격자들을 죽여야 하는 같은 생존 목표를 가진Smash TV 라는 게임이 생성되었습니다.

데이비드는 “우리가 우주선 게임을 만들기로 선택한 이유는 개발하기가 쉽기때문입니다” 라고 말했습니다. 게임이 하늘에서 본 광경으로 배경으로 할 것이기 때문에, 위에서 보이는 형태로 우주선을 디자인 하는것은 사람을 디자인 하는것 보다 쉽습니다. 데이비드는 비디오게임을 만드는 것이 “책 모서리에 그림을 그리고 페이지를 빠르게 넘길때, 작은 애니메이션이 생성되는것과 같습니다- 이것은 모든 페이지가 살아있다는 것을 의미합니다.” 이것은 영화에서도 동일합니다.

War Games: Space Dementia 의 경우, 처음부터 위에서 내려다 본 구조로 계획되어 있었기 때문에, 우주선의 앞면, 뒷면, 옆면 등 모든 것을 디자인 할 필요가 없었습니다. “위에서 내려다 보는 탱크 또는 비행기를 만들면 머리나 목까지 다 그릴 필요 없이 오직 한 면만 필요합니다,” 데이비드가 설명합니다. 8개의 면은 각 동작마다 유일한 코드가 필요하기 때문에 디자인 및 프로그래밍 하는데 8배의 시간이 듭니다.

데이비드는 다니엘로부터 디자인을 받으면 이를 프로그래밍 하기 시작합니다. 그들은 함께 일하고 결정도 함께 내리며, 데이비드는 게임 속 모든 항목에 특정 행위를 제공하는 역할 또한 맡고 있습니다. 산틴은 “모든 유형의 우주선은 특정 행위 및 지능을 가지고 있습니다. 사용자가 첫번째 레벨에서 만나는 우주선은 느리고 방랑하는듯 하며, 마지막 레벨의 것은 거의 오류가 발생하지 않으며 사용자의 모든 움직임을 감지할 수 있습니다” 라고 말했습니다.

게임에 존재하는 모든 항목은 우주를 구성하는 변수를 완벽하게 제어한 덕분에 독특한 움직임 및 행동을 장착할 수 있습니다. 산틴은 “이러한 변수는 속도, 중력, 반응 속도, 발사 능력, 건강 그리고 추적 및 자동 회전 능력 등으로 구성되어 있습니다”. 라고 설명했습니다.

War Games: Space Dementia 를 만드는 과정에서 데이비드에게 가장 어려웠던 점은, 의심의 여지없이, 게임 속에 존재하는 모든 우주선, 발사체, 캐릭터 등 사이에서 좋은 성능을 유지하려는 것이었습니다.. “좋은 성능을 유지하는 동시에 많은 물체들이 움직이는 HTML5 게임을 찾는것은 아주 힘듭니다.”

HTML5, 보편 언어?

사틴은 “HTML5 에서 프로그래밍 하는것은 꽤나 어렵습니다, 특히 성능은, 원시 언어 만큼 강력하지는 않지만, 크로스 플랫폼의 이점을 갖습니다” 라고 말합니다. 원시 언어는 특정 프로세서를 위해 생성된 것으로, Apple이나 Android 등도 가지고 있습니다. “프로그램이 원시 언어일때, 이것은 마치 모국어와 같기 때문에 더 빠르게 기능하기 위해 ‘번역’ 할 필요가 없습니다.”

HTML은 모두를 위한 보편적 언어 이지만 원시 언어는 아니기 때문에 그다지 능률적이지 못합니다. 데이비드는 “이것이 흔한 언어를 사용할때 발생하는 현상입니다, 이후에 각 장치는 자신의 언어로 해석해야 합니다,” 라고 말합니다.

이것이 프로그래머들이 아주 효과적인 코드를 생성하는데 심의를 기울여야 하는 이유입니다. 게임이 아주 강력한 컴퓨터 부터 아주 느린 오래된 휴대폰에서 까지 사용 될 것이기 때문입니다. HTML5는 모든 장치에서 같은 방식으로 행동하지 않기 때문에, 최종 상품이 모든 경우에 적절히 작동할 수 있도록 많은 테스트가 요구됩니다.

사실, 휴대폰에서 사용할때, Robotron 2084 과 Smash TV에도 존재하는 듀얼 조이스틱 동적 덕분에 우주선을 조종하는 기분을 느낄 수 있습니다. 그리고 데이비드가 게임을 프로그램 하기위해 사용하는 뼈대인Phaser가 듀얼 조이스틱 플러그인을 출시했기 때문에, 처음부터 모두 생성할 필요가 없었습니다.

살틴은 “Phaser는 뼈대, 즉, 문제 해결에 중점을 둔 프로그램 구조의 연속입니다. 특히, Phaser 는 비디오 게임 제작에 초점을 맞춥니다” 라며 분명히 말했습니다. 그것은 사운드를 도입하고 물체를 관리하는 역할을 하며, 게임을 만드는 도구를 가지고 있으며 그것에 고성능을 제공하는데 중점을 둡니다.

에두아르도 올테가의 초기 아이디어가 단순하고, 질때까지 무기한으로 플레이 할 수 있는 단일 화면 생존 게임을 제작하는 것이었지만, 최종 결과는 꽤나 다릅니다. 그들이 게임의 잠재력과 많은 시간을 종사할 수 있다는 것 (여름이었기 때문에) 을 깨달았을때, 제작자들은 더 나가아기로 결심했고 훨씬 더 발전되고 섬세한 HTML5 게임을 생성하였습니다. 결국, 이것은 3가지 공간으로 나누어진 우주선 게임으로, 주인공이 공격해오는 다섯개의 적들과 싸우고 최종 보스를 패배시켜야 하는 게임이 되었습니다. 이것이 비디오게임의 마법이자 제작 방법입니다.

작성자 Paula Gil Alonso.