[javascript] Phaser의 다양한 기능과 API

22 Nov 2023

javascript

Phaser는 HTML5 기반의 게임 개발 프레임워크로, 다양한 기능과 API를 제공하여 게임 개발을 보다 간편하고 효율적으로 할 수 있도록 도와줍니다. 이번 글에서는 Phaser의 주요 기능과 API를 살펴보겠습니다.

게임 객체와 씬

Phaser는 게임을 구성하는 다양한 객체를 생성하고 관리할 수 있는 기능을 제공합니다. Phaser.GameObject 클래스를 상속하여 직접 객체를 생성하거나, 이미 구현된 객체 클래스를 사용할 수 있습니다. 게임 객체는 씬(Scene)에 속해 있으며, 서로 다른 씬 사이를 전환하거나 여러 씬을 병렬로 실행할 수 있습니다. Phaser.Scene 클래스를 상속하여 씬을 구현하고, Phaser.Game 클래스의 scene 메서드를 사용하여 씬을 추가할 수 있습니다.

// Game 객체 생성
var config = {
  width: 800,
  height: 600,
  scene: [Scene1, Scene2] // 여러 씬을 배열로 전달하면 병렬로 실행됨
};
var game = new Phaser.Game(config);

// Scene 객체 구현
class Scene1 extends Phaser.Scene {
  constructor() {
    super({ key: 'scene1' });
  }
}

class Scene2 extends Phaser.Scene {
  constructor() {
    super({ key: 'scene2' });
  }
}

키보드 및 마우스 입력 처리

Phaser는 키보드 및 마우스 입력을 쉽게 처리할 수 있는 API를 제공합니다. Phaser.Input.Keyboard 클래스를 사용하여 키 입력을 감지하고, Phaser.Input.Mouse 클래스를 사용하여 마우스 입력을 감지할 수 있습니다. 이를 활용하여 플레이어 조작 등을 구현할 수 있습니다.

// 키 입력 처리 예시
var keyboard = this.input.keyboard;
if (keyboard.isDown(Phaser.Input.Keyboard.KeyCodes.LEFT)) {
  // 왼쪽 키를 누를 때 실행할 코드
}
if (keyboard.isDown(Phaser.Input.Keyboard.KeyCodes.RIGHT)) {
  // 오른쪽 키를 누를 때 실행할 코드
}

// 마우스 입력 처리 예시
var mouse = this.input.mouse;
if (mouse.buttons === 1) {
  // 마우스 왼쪽 버튼을 클릭할 때 실행할 코드
}
if (mouse.buttons === 2) {
  // 마우스 오른쪽 버튼을 클릭할 때 실행할 코드
}

애니메이션과 Tween

Phaser는 애니메이션 처리를 위한 강력한 기능을 제공합니다. Phaser.Animation 클래스를 사용하여 애니메이션을 생성하고, Phaser.Tween 클래스를 사용하여 속성의 변화를 부드럽게 처리할 수 있습니다.

// 애니메이션 구현 예시
var config = {
  key: 'walk',
  frames: this.anims.generateFrameNumbers('character', { start: 0, end: 3 }),
  frameRate: 10,
  repeat: -1 // 반복 실행
};
this.anims.create(config);
this.add.sprite(400, 300, 'character').play('walk');

// Tween 구현 예시
this.tweens.add({
  targets: sprite,
  x: 600,
  y: 400,
  duration: 2000,
  ease: 'Power2',
  yoyo: true, // 앞뒤로 반복
  repeat: -1 // 무한 반복
});

충돌 감지

Phaser는 충돌 감지를 쉽게 처리할 수 있는 기능을 제공합니다. Phaser.Physics 클래스를 사용하여 충돌이 필요한 객체를 등록하고, Phaser.Physics.Arcade 클래스의 메서드를 사용하여 충돌을 감지할 수 있습니다.

// 충돌 감지 예시
this.physics.add.collider(player, enemy, hitEnemy);
this.physics.add.overlap(bullet, enemyGroup, hitEnemy);

function hitEnemy() {
  // 충돌 처리
}

참고 자료

Phaser 공식 문서