Phaser Js 프레임 워크를 사용하여 'Gravity Quest'를 어떻게 개발 했나요? - Part 4

레벨 디자인

이전 문서에서 나는 Gravity Quest의 비주얼과 사운드를 어떻게 만들 었는지 설명했습니다. 게임 플레이, 영상 및 사운드를 제작했으면 다음 단계는 레벨을 제작하는 것입니다. Gravity Quest의 레벨 생성은 도전적이었습니다. 단일 레벨 디자이너는 반복적 인 레벨로 인해 특정 스타일을 고수 할 위험이 있으므로 플레이어가 빠르게 지루해집니다. 아직도 게임을 합리적으로 판매하기 위해 적어도 20 레벨 (완전히 주관적으로 선택한 숫자)을 특징으로했습니다. 따라서 레벨을 만들고 편집하고 표현할 수있는 효율적인 방법을 찾아야 했습니다. 그리고 궁극적으로 이것이 내가 레벨을 설계하는데 적 접근 방식을 시도하기로 결정한 이유입니다.

레벨 표현

Gravity Quest의 세계를 만들기 시작하기 전에 한 가지 결정을 내려 레벨 데이터를 표현하는 방법을 결정했습니다. 플랫폼 게임에서 타일 맵은 Phaser가 지원하는 일반적인 접근 방식입니다. 타일 맵에서 레벨은 거친 타일 (예 : 16x16, 32x32 또는 64x64 픽셀 크기의 사각형)로 나뉩니다. 모든 타일에 대해 렌더링 할 텍스처와 타일이 플레이어 또는 적과 충돌하는지 여부가 지정됩니다. Tile 맵은 Phaser에서의 지원과 Tiled 맵 에디터와 같은 툴을 생성 할 수있는 Gravity Quest의 유일한 접근 방법이었습니다.

그러나 Gravity Quest의 요구 사항은 타일 맵을 사용하여 제외되었습니다. 레벨의 요소는 다양한 크기로 되어 있으며 거친 격자에 꼭 맞을 필요는 없습니다. 게다가, 그들의 위치는 세밀하게 아주 정교하게 정의 될 필요가 있습니다. 예를 들어, 레벨 13에서 우주 비행사는 노바와 충돌하기 전에 마지막 순간에 소행성으로 가속하기 위해 중력총을 사용해야합니다. 이 레벨을 생성하기 위해 소행성과 왜소 노바가 픽셀 단위로 정확하게 배치되었습니다.

결과적으로, Gravity Quest에있는 레벨 데이터를 JavaScript 객체에 저장하기로 결정했습니다 (목록 1 참조). 레벨의 모든 요소는 최소한 x 및 y 좌표를 나타냅니다. 게임 플레이 상태의 create 함수에서 레벨을 설정할 때 JavaScript 객체가 반복되고 모든 요소가이 좌표에 따라 배치됩니다. 일부 요소는 사용중인 스프라이트의 이름을 지정하는 키와 충돌 감지에 사용되는 반경을 나타냅니다 (게임 플레이 구현 : 충돌 감지 관련 도움말 참조). 예를 들어, 소행성이나 nova가 다른 크기를 가질 수 있기 때문에이 정보가 필요합니다. maxDistance 값은 우주 비행사가 손실되기 전에 가장 가까운 소행성에서 얼마나 멀어 질 수 있는지를 결정합니다. 

Game.Level_02 = {
 player: {
  x: 431,
  y: 607,
 },
 asteroids: [
  {
   x: 680,
   y: 410,
   key: "asteroid_32",
   radius: 16
  },
  {
   x: 465,
   y: 548,
   key: "asteroid_32",
   radius: 16
  }
 ],
 target: {
  x: 606,
  y: 307,
  key: "target",
  radius: 18
 },
 goodies: [
  {
   x: 687,
   y: 514
  },
  {
   x: 776,
   y: 361
  },
  {
   x: 517,
   y: 460
  }
 ],
 maxDistance: 250
}

목록 1 : Gravity Quest의 레벨 2를 정의하는 JavaScript 객체.

레벨 편집기 구현하기

Gravity Quest의 레벨 빌드를 시작할 때 처음에는 텍스트 편집기를 기본 도구로 사용했습니다. 즉, 코드를 작성하여 레벨 요소와 위치를 정의했습니다. 이것은 쉽게 문제가 되는 것으로 판명되었습니다 : 레벨이 많은 요소로 구성되어있을 때 코드의 위치를 ​​추적하기가 어려워지며 코드를 이동하는 것이 번거로워집니다. 생산성을 높이기 위해 필자는 시각화 및 최종 편집 작업을 시작했습니다. 그래서 레벨 편집기를 개발하기 시작했습니다. 필자는 HTML5 캔버스 요소의 드래그 앤 드롭 기능을 지원하는 Fabric.js를 사용하여 레벨을 표시하고 요소를 편집했습니다. 나는 다음과 같은 기능 세트에 도달 할 때까지 편집기를 끊임없이 수정했습니다.

- 편집기는 blueprint로 기존 레벨 중 하나를 로드하여 새로운 레벨을 생성 할 수 있습니다.

- 팔레트에서 요소를 추가 및 선택하고 휴지통 버튼을 눌러 제거 할 수 있습니다.

- 드래그 앤 드롭을 사용하여 요소를 이동할 수 있습니다.

- 설계된 레벨은 편집기에서 테스트 할 수 있습니다. 그렇게 하기 위해, Gravity Quest는 팝업 창에서 시작되고 편집기의 레벨은 해당 팝업 창으로 전달되어 즉시 시작됩니다. 이 기능을 사용하면 레벨을 신속하게 테스트하고 설계를 반복 할 수 있습니다.

- 디자인 수준의 양방향 데이터 바인딩 JSON 표현이 지속적으로 표시됩니다. a)는 레벨 요소 (예 : 좌표)를 프로그래밍 방식으로 조정하고 b) 복사 및 붙여 넣기 레벨을 허용합니다.

- 브라우저의 로컬 저장소는 변경 사항을 지속적으로 저장하여 작업을 일시 중지하고 나중에 계속할 수 있습니다.

비디오 1은 Gravity Quest의 레벨 편집기에 대한 간단한 데모를 보여줍니다.

 
비디오 1 : Gravity Quest의 레벨 편집기 데모 

참여 수준 디자인

처음에는 레벨을 생성하기 위해 내 노트북에서만 실행되는 편집기 (임시 버전)를 사용했습니다. 편집기는 디자인하는 과정을 가속화했습니다. 그러나 20 레벨 이상을 만드는 것은 지루하고 반복적 인 레벨을 만들 수 있다는 것을 깨달았습니다. 따라서 편집자가 친구와 가족이 게임에 자신의 레벨을 제공 할 수 있도록 허용하기로 결정했습니다.

편집기로 참여 레벨 디자인을 사용하려고 약간 확장했습니다. 완성 된 레벨의 이름을 지정하고 편집자로부터 검토하여 최종 게임에 포함시킬 수 있습니다. 그런 다음 Heroku에 편집기를 배치하여 웹에서 액세스 할 수 있도록했습니다. 편집자가 (대부분) 안정 버전으로 배포되면 선택한 친구에게 전자 메일을 보내서 게임에 레벨을 기여하도록 요청했습니다. 처음에 16 명에게 요청을 보냈습니다. 일부 업데이트 및 알리미에서는 반복적으로이 숫자를 늘려 궁극적으로 25 명이 해결되었습니다.

Gravity Quest의 친구들이 레벨을 만들도록 허용하는 것은 여러모로 긍정적인 효과가 있었습니다. 첫째, 최종 게임을 완성 할 수있는 수준으로 발전했습니다. 대체로 5 명의 친구로부터 10 레벨을 받았습니다. 게임 레벨의 40 %만이 아니라, 모두 아주 즐겁고 재미있게 플레이 할 수 있습니다! 둘째, 참여 방식은 게임을 베타 테스트 할 수있는 견고한 수단임을 입증했습니다. 레벨 디자이너가 레벨을 테스트 할 수있게되면서 게임 플레이, 영상 및 사운드를 자연스럽게 검토했습니다. 레벨 디자이너의 피드백은 게임을 개선하는 데 매우 중요했습니다. 예를 들어, 우주 비행사가 움직이는 속도에 대한 힌트, 중력 총에 의해 목표 된 경우 우주 비행사에게 소행성을 이동하라는 제안, 시차 스크롤을 구현하기위한 제안, 또는 버전 1.1에서 3 가지 보너스 레벨을 추가하라는 제안이 포함됩니다. 게임. 셋째, 레벨 디자인에 대한이 참여 방식은 조기 마케팅 조치로 작용하여 진행중인 게임에 대한 단어를 전파했습니다.

물론 모든 공헌자는 Gravity Quest의 출품작에 대해 감사를 표합니다.

결론

게임을 개발할 때 많은 단계를 생각해내는 것이 어려운 작업입니다. Gravity Quest의 경우, 레벨 편집기는 레벨 설계에 대한 시각적 피드백을 제공하고 레벨 편집 속도를 높이며 아이디어와 디자인을 신속하게 테스트 할수 있어 작업을 쉽게 수행 할수 있었습니다.

웹을 통해 배포되고 액세스 할 수있는 편집기는 가족과 친구들을 레벨 생성에 추가 할수 있었습니다. 이것은 훌륭한 수준일뿐 아니라 귀중한 피드백과 게임에 대한 토론에도 귀결되었습니다. 그리고 궁극적으로 개발 과정을 보다 사회적이고 재미있게 만들어주는 것으로 입증되었습니다. 게임에 수준을 수동으로 만들어야하는 경우이 방법을 적극 권장합니다.

이 시리즈의 다음 기사에서는 Apple App Store에서 Gravity Quest의 배포에 대해 설명합니다.