HTML5 게임 프레임워크 Phaser

Phaser : HTML5 게임을 쉽게 만들도록 도와주는 게임 프레임워크

직접 캔버스를 이용해서 만들수도 있지만 자동차 만드는데 굳이 바퀴까지 직접 만들필요가 있나? 원리만 알고 잘 만들어진 도구를 사용하는게 좋다고 생각한다. 수 많은 게임 프레임워크(혹은 엔진, 툴)들이 많은데 이를 활용하면 훨씬 효율적으로 게임을 개발할 수 있다.

 

위키에서 게임 엔진 목록 검색했더니 엄청 나온다.

https://en.wikipedia.org/wiki/List_of_game_engines

List of game engines - Wikipedia

 

Phaser 특징

• 데스크톱 및 모바일용 HTML5 게임 개발 편의
• 무료 (MIT 라이선스)
• 내부적으로 Canvas와 WebGL 렌더러 사용. 렌더링을 위해 Pixi.js 사용
• 튜토리얼 및 컨퍼런스 많음

주요 API

이미지 로드 -> physics 등록

this.load.image("player", "./player.png");
this.player = this.physics.add.image(250, 250, "player");

그래픽 생성 -> 텍스쳐로 전환 -> physics 등록

var graphics = this.make.graphics().fillStyle(0x00ff00).fillRect(0, 0, 20, 20);
graphics.generateTexture("player", 20, 20);
graphics.destroy();
this.player = this.physics.add.image(250, 250, "player");

게임화면 밖으로 이동 못하게 설정

this.ship.setCollideWorldBounds(true);

일반키

this.keyW = this.input.keyboard.addKey("W");
if (this.keyA.isDown) {
}

커서키

this.cursorKeys = this.input.keyboard.createCursorKeys(); // 커서 이벤트 설정
if (this.cursorKeys.up.isDown) {
    // todo
} else if (this.cursorKeys.down.isDown) {
    // todo
}
if (this.cursorKeys.left.isDown) {
    // todo
} else if (this.cursorKeys.right.isDown) {
    // todo
}

터치

this.input.on("pointerdown", (pointer) => {
    // todo
});

Math

Phaser.Math.Between(0, 500)

이벤트

//  Create our own EventEmitter instance
var emitter = new Phaser.Events.EventEmitter();

//  Set-up an event handler
emitter.on('addImage', this.handler, this);

//  Emit it a few times with varying arguments
emitter.emit('addImage', 200, 300);

handler (x, y) {
    // todo
}

화면 가운데 텍스트 출력

const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const screenCenterY = this.cameras.main.worldView.y + this.cameras.main.height / 2;
const text = this.add.text(screenCenterX, screenCenterY, 'Hello').setOrigin(0.5);

정리

취미로 간단한 웹 게임을 개발해보고 싶다면 Phaser 추천한다. PlayFab에서 Phaser.io도 지원하던데 연동해서 사용하면 좋을듯

https://blog.playfab.com/blog/playfab-now-supports-phaser-io

PlayFab Now Supports Phaser.io