Phaser로 게임을 개발하는 방법(How to develop a game with Phaser)

이제는 인터넷 브라우저 용 게임을 개발하는 개발자들에게 대단히 흥미 진진한 시간이되었습니다. 이 게임 프레임 워크는 게임 개발을위한 친숙하고 직관적 인 생태계를 제공하고 우수한 Canvas 및 WebGL 렌더링 성능을 위한 우수한 Pixi.js를 활용합니다.

- 시작하기

Yeoman이 컴퓨터에 설치되어 있어야합니다. 따라서 가지고 있지 않다면 웹 사이트의 지침을 따르십시오. Yeoman이 게임을 시작하면 Yeoman 프로젝트 템플릿을 설치하여 게임 개발을 시작하십시오. 게임을 만들 때 많은 반복을 줄일 수 있습니다.

Yeoman 프로젝트 템플릿 생성기를 설치하려면 새 터미널 창을 열고 다음을 입력하십시오 (Mac의 경우 sudo로 접두사를 붙이십시오).

npm install -g yo generator-phaser-official

우리가해야 할 첫 번째 일은 모든 것을 테스트하기 위해 프로젝트를 생성하고 컴파일하는 것입니다. 게임에 사용할 새 폴더를 만들고 현재 터미널 디렉토리에서이 폴더로 이동 한 후 다음을 입력하십시오.

yo phaser-official

Yeoman은 게임 이름 (우리는 'netmag-phaser'를 사용했습니다), 사용하려는 Phaser 버전 (2.0.0) 및 게임의 너비 (900)를 템플릿 작성 중에 몇 가지 질문에 대한 답을 묻습니다. ) 및 높이 (480). Yeoman이 프로젝트 생성을 마쳤 으면 명령 줄에서 grunt를 실행하여 모든 것이 올바르게 설정되었는지 확인하십시오.

브라우저가 열리고이 프로젝트에 포함 된 기본 게임이 실행되기 시작합니다. 

- 구조와 상태

프로젝트의 구조를 살펴보면 다음과 같이 몇 가지 주요 폴더를 만들 수 있습니다.

/assets - 이미지 애셋을 포함하는 폴더

/game - 게임의 JavaScript 파일

/game/state - 게임의 상태

/dist - 온라인 호스팅을위한 컴파일 된 게임

게임과 상태 디렉토리에서 대부분의 시간을 보내 게됩니다. 이들은 핵심 프로젝트 파일입니다. 각 게임은 여러 가지 상태로 구성되어 있습니다.  게임의 여러 단계로 생각할 수 있습니다. 게임에서는 Preload, Menu, Play, Gameover 등 네 가지 상태 만 사용합니다. 이 JavaScript 파일은 /game/states 폴더에서 볼 수 있습니다.

각 상태는 공통 레이아웃으로 구성됩니다. 템플릿 상태를 보면 가장 일반적인 메소드가 Preload, Create 및 Update라는 것을 알 수 있습니다.

Preload - 상태가 생성되기 전에 자산 또는 데이터 사전로드를 배치 할 수있는 장소를 제공합니다.

Create - 우리가 객체를 인스턴스화하고, 그래픽을 배치하고, 재생할 준비가 된 상태를 설정합니다.

Update - 주 상태의 틱카운트로 생각할 수 있습니다. 이 함수는 초당 60 회 실행되며 게임 논리의 핵심을 포함합니다

이제 이 튜토리얼의 GitHub 저장소를 다운로드하거나 복제하기 좋은 시간입니다. 내부에는 이 게임의 이미지가 포함 된 저작물이라는 제목의 게임을 포함하여 게임의 여러 단계를위한 여러 폴더가 있습니다. 먼저 이 폴더의 전체 내용을 게임의 /assets 폴더에 복사합니다.

- 식별자

Preload.js 상태로 점프하면 게임이 시작되기 전에 복사 된 애셋을 미리 로드하도록 설정할 수 있습니다.

preload.js preload () 메소드에 다음을 추가하십시오.

this.load.image('menu', 'assets/menu.jpg');

this.load.image('background', 'assets/background.jpg');

this.load.image('player', 'assets/player.png');

this.load.image('creature_1', 'assets/creature_1.png');

this.load.image('creature_2', 'assets/creature_2.png');

this.load.image('creature_3', 'assets/creature_3.png');

this.load.image('gameover', 'assets/gameover.jpg');

load.image 메서드는 두 개의 매개 변수를 사용합니다. 첫 번째는 이미지가 로드 된 인스턴스를 생성해야하고 두 번째 매개 변수가 이미지의 경로 인 경우 이미지를 참조하는 데 사용할 문자열 기반 식별자입니다.

다음은 게임의 메인 상태입니다. 목표는 가능한 한 많은 생물을 스쿼시하는 것입니다.

다음은 게임의 메인 메뉴 장면입니다. Menu.js 상태를 열고 create () 메서드의 전체 내용을 제거하고 다음 내용으로 바꿉니다.

this.title = this.game.add.sprite(0, 0, 'menu');

Preload에서 자산을 제공 한 식별자를 기억하십니까? 우리는 단순히 game.add.sprite ()를 사용하고 수평 및 수직 위치 0을 부여한 다음 기본 메뉴 이미지의 사전로드 상태에서 지정한 메뉴 식별자를 사용하기만 하면됩니다.

터미널에서 Grunt를 실행하여 진행 상황을 테스트하여 브라우저에서 결과가로드되는지 확인하십시오. 게임은 그래픽이있는 새로운 메뉴로 부팅되어야 합니다.

- 기능적 구조

이 섹션에서는 게임구조를 살펴 보겠지만, 먼저 기본 게임 클래스를 만들었습니다. 함께 제공되는 소스 코드에서 3-Play라는 폴더에서 Play.js를 복사하고 현재 Play.js를 /game/states에 덮어 씁니다.

코드를 살펴보면, 프레임 워크의 몇 가지 중요한 라인이 지적됩니다. 10, 13, 14 행은 객체를 유지하기 위한 경계로 사용되는 직사각형을 만듭니다. 이 라인들은 Phaser의 내장형 아케이드 물리 시스템을 가능하게합니다.

17 번에서 21 번 라인은 우리 플레이어를 만듭니다. 이전과 같은 방식으로 이미지를 로드하지만 이번에는 20 번째 줄에 앵커를 설정합니다. 이는 본질적으로 대상의 x 및 y 위치가 오프셋 될 수 있음을 의미합니다. 따라서 플레이어의 중심점 (수평선)을 기준으로 플레이어의 위치를 지정하고 왼쪽 상단 점의 위치는 지정하지 않습니다.

우리는 game.physics.arcade.enable ()을 사용하고 경계와 충돌하도록 플레이어의 몸체를 설정하여 물리 시스템에 플레이어를 추가합니다. 이 단계에서 플레이어는 중력에 반응하고 바닥과 충돌합니다.

24 ~ 32 행은 위와 같은 방법으로 적군을 만듭니다. 점프 기능에 사용되는 각각의 적에 몇 가지 추가 속성이 있습니다. 이것은 점프 높이에 대한 강도와 각 점프 사이의 지연을 설정합니다. 점프 논리는 Statesupdate () 메소드에 있습니다.

39 ~ 54 행은 점수와 시간에 대한 변수를 만듭니다. 또한 텍스트 렌더링에 Phaser의 다른 기능을 사용합니다. game.add.text ()를 사용하여 글꼴, 채우기 및 정렬을 지정하면서 화면에 텍스트 문자열을 만들 수 있습니다. Phaser는 텍스트 기반 기능이 뛰어납니다.

- 업데이트 방법

이제 메인 게임의 로직이 있는 update () 메소드로 이동하겠습니다. 59 행과 60 행은 프레임 워크의 입력 시스템에 대한 바로 가기를 만듭니다. cursors 변수를 사용하면 cursors.right.isDown ()을 사용하여 키가 다운되었는지 확인할 수 있습니다.

66 번에서 73 번까지는 어떤 키가 눌러 졌는지 확인하고, 이전에 보았던 경계 물체와 플레이어가 충돌하지 않는 경우 player.body.onFloor ()를 사용하여 false를 반환하면 플레이어가 공중에 있으면 player.body.velocity.x를 사용하여 플레이어에게 속도 변경을 부여합니다. 우리는 실제 x-y 값을 사용할 필요가 없습니다. x-y에 속도를 부여하고 나머지는 Phaser의 물리 시스템에서 처리합니다. 이제 플레이어는 점프하는 동안 이동할 수 있습니다.

83 행에는 Phaser 텍스트 필드를 업데이트하는 방법의 예가 있습니다. 우리는 단순히 setText ()와 렌더링 하고자하는 텍스트 내용을 설정합니다. 우리가 인스턴스화 한 기존의 텍스트 스타일 속성을 사용합니다.

물리 기반 충돌이 아닌 두 스프라이트 간의 충돌을 테스트하는 방법의 예는 113 행에 따라 Phaser.Rectangle.intersectsmethod ()를 사용하는 것입니다. 두 개의 sprites.bounds ()를 전달하면 충돌 여부에 따라 true 또는 false가 반환됩니다. 만약 false를 반환하면 적 타이머가 새 타이머를 만들 때까지 적을 숨깁니다.

- 게임 끝

나머지는 대부분 표준 자바 스크립트이지만, 게임을 강조 할 Phaser의 마지막 부분이 하나 있습니다. state.start () 메소드는 129 행에 있습니다. 일단 이것이 호출되면 현재 상태를 끝내고 문자열로 지정한 상태로 이동합니다. 이 경우 타이머가 0에 도달하면 Gameover 상태로 점프합니다.

Gameover.js에서 create () 메소드의 내용을 지우십시오. Menu 상태와 마찬가지로 배경 이미지를 만들지만 이번에는 동적 텍스트 필드를 추가하여 사용자의 점수를 표시합니다.

create () 메소드에 다음을 입력하십시오.

this.gameoverbg = this.game.add.sprite(0, 0, 'gameover');

this.score_text = this.game.add.text(this.game.world.centerX, 325, this.game.score, { font: '32px Arial', fill: '#ffffff', align: 'center'});

this.score_text.anchor.setTo(0.5, 0.5);

이제 Gameover.js 파일을 저장하고 다시 Grunt를 실행하십시오. 이번에는 전체 메뉴 화면, 게임 및 훨씬 향상된 Gameover 화면을 가져와야합니다.

지금까지 Phaser로 게임 개발에 대한 경험을 얻었습니다. 환상적인 게임을 만드는 데 도움이되는 훌륭한 프레임 워크입니다.