Phaser를 이용한 자바스크립트 게임만들기 - part 1

시작하기

웹게임을 개발하기 위한 게임 엔진은 아주 많다.

다만 나의 경우, pixi.js에 익숙하다보니 자연스럽게 phaser를 선택하게 되었다.

하지만 Phaser가 인기 있는 게임엔진이며 현재 유지보수가 가장 활발한 것 또한 사실이다.  (링크)

이번 포스팅에서는 Phaser의 겉만 살펴볼 예정이다. 실제 내용은 다음 포스팅부터 시작한다.

상세하게 들어가기 전에 유투브 동영상 하나 보자.webGL의 현재, 미래에 대해서 이야기하는 동영상이다.

동영상에 보면 수많은 webGL 관련 라이브러리들을 설명한다. (링크)

이걸 조금 정리하자면 다음과 같다.

	Present	Future
Graphics	Three.js Pixi.js	Mathbox
Game Engines	Phaser PlayCanvas Turbulenz	Unreal Engine 4 Unity 5

미래의 라이브러리는 미래에 고민하기로 하고 현재의 라이브러리만 상세하게 정리해보자.

Three.js

• webGL의 업계 표준 같은 라이브러리라고 한다.

• 거대한 커뮤니티와 예제, 리소스를 가지고 있다.

• 수많은 플러그인과 확장이 쉽다고 한다.

• 다만 성능이 느린 문제가 있으며 라이브러리가 상대적으로 크다고 한다. (414KB)

Pixi.js

• 내가 어느 정도 익숙하다 (ㅋㅋㅋㅋㅋ)

• 2D Graphic의 업계 표준 같은 라이브러리라고 한다.

Phaser

• pixi.js + others 로 구성된 게임 엔진이다.

• 2D 게임을 위한 모든 라이브러리가 포함되어 있다고 한다.

PlayCanvas

• HTML5로 게임을 만드는데 추천하는 라이브러리라고 한다.

• 툴까지 포함한 게임엔진이라고 한다.

Turbulenz

• 마찬가지로 게임엔진이고 오픈소스라고 한다.

• 근데 별로 설명이 되어 있지 않아서 잘 모르겠다.

Phaser라는 녀석이 현재 충분히 인기 있고 잘나가는 엔진이라는 소리를 하고 싶었고 (ㅋㅋㅋ) 추가로 unity 5가 출시된다면 살펴볼 필요가 있겠다.

살펴보기

자~ 홈페이지로 날라가 보자. 아래와 같은 문구가 나를 환영한다.

“Desktop and Mobile HTML5 game framework”

중요한건 위 문장에서 다 나온 것 같다. 그 아래 작은 사이즈의 폰트로 아래와 같은 문장도 있다.

“A fast, free and fun open source framework for Canvas and WebGL powered browser games”

오픈소스에 빠르다고 한다. 그리고 canvas와 webGL을 지원한다고 하는데 대충 pixi.js의 장점들과 연결되는 것 같다.

아래와 같은 기능들을 제공한다.

webGL and Cavas

이건 pixi.js의 도움으로 얻은 능력이다. 즉, webGL을 지원하는 브라우저에서는 webGL로, canvas만 지원하는 브라우저에서는 canvas로 렌더링을 한다는 이야기.

Preloader

게임에 관련된 리소스들을 미리 로딩해놓고 제공해준다고 하는데 pixi.js의 AssetLoader를 사용했을 것 같은데 이건 살펴봐야 안다.

Physics

3개의 Physics 시스템을 지원한다고 한다. Arcade, AABB, p2 라고 하는데 전혀모르겠다.

나중에 살펴보자.

Sprites

이전 포스팅에 나와 있겠지만 결국 하나의 이미지를 옮기고, 돌리고, 늘리고 하는 연산을 지원한다고 한다. 마찬가지로 pixi.js의 기능.

Groups

일종의 object poll을 제공해준다고 한다. 다음 포스팅에 한번 다뤄 볼려고 했던 내용인데 엔진상에서는 어떻게 지원해줄 지 궁금하군.

Animation

Sprite Sheets를 지원한다고 한다.

Particles

폭발, 비, 불 같은 효과를 쉽게 구현할 수 있도록 해준다고 한다.

Camera

Game World가 존재하고 camera 기능으로 쉽게 살펴볼 수 있다고 하는데 잘모르겠음.

Sound

webAudio와 HTML audio를 지원한다고 한다. 최선을 다했다고 하는데 한번 봐주지.

설치하기

그냥 다운 받으면 된다. (링크 : 만약 IDE를 Intel XDK로 한다면 다운 받지 않아도 된다)

개발언어는 TypeScript 혹은 JavaScript 인데 TypeScript를 아는 사람 외에는 당연히 JavaScript가 개발언어다.

IDE 혹은 Editor를 선택해야 하는데 유감스럽게도 eclipse가 없다. Phaser에서 추천하는 툴은 아래와 같다. (링크)

• Sublime

• Intel XDK

• WebStorm

• Brackets

느낌상 추천 순인 것 같다. Sublime을 회사 동료들이 많이 사용하는 것은 알고 있었는데 여기서 보게 될 줄이야.

Full Version은 $70 이기 때문에 일단 Intel XDK로 선택하기로 한다.

Intel XDK의 최초 화면은 아래와 같다. 재밌게도 Pixi와 Phaser 모두를 지원한다.

Phaser를 선택하고 Continue를 클릭하자.

다음과 같은 알림창이 나온다. Create 버튼을 누르고 넘어가자.

헐~ 프로젝트를 만들고 보니 이미 phaser가 다운 받아져 있다.

생성된 프로젝트의 파일 구조는 다음과 같다.

그런데 아래 디렉토리 구조가 Phaser의 가이드라인인지 XDK의 가이드라인인지 알 수가 없다.

이 부분은 다음 포스팅에서 조금 더 다뤄보기로 하자.

index.html 파일을 크롬 브라우저에서 열면 다음과 같다.

일종의 hello world 인 셈이다.

오늘은 자바스크립트 게임엔진인 Phaser에 대해서 다뤄봤다.

다음 포스팅부터 본격적으로 Phaser를 이용한 게임을 만들어보자.

2015.05.05