[javascript] Phaser에서 행동 및 리액션 시스템 구현하기

22 Nov 2023

javascript

Phaser는 HTML5 기반의 게임 개발 프레임워크로, 게임 개발자들이 쉽게 게임을 만들 수 있도록 도와줍니다. 이번 포스트에서는 Phaser에서 행동(Action)과 리액션(Reaction) 시스템을 구현하는 방법에 대해 알아보겠습니다.

행동(Action) 시스템

게임에서 행동은 주로 캐릭터나 오브젝트가 수행하는 동작을 의미합니다. Phaser에서 행동 시스템을 구현하기 위해서는 다음의 단계를 따릅니다.

1. Action 클래스 만들기

먼저 Action 클래스를 만들어야 합니다. Action 클래스는 행동을 정의하고 실행하는 기능을 제공합니다. 다음은 예시로서 이동 동작을 실행하는 Action 클래스입니다.

class MoveAction {
  constructor(sprite, targetX, targetY, duration) {
    this.sprite = sprite;
    this.targetX = targetX;
    this.targetY = targetY;
    this.duration = duration;
    this.startTime = null;
  }
  
  start() {
    this.startTime = Phaser.Time.TimeManager.now;
  }
  
  update() {
    const elapsedTime = Phaser.Time.TimeManager.now - this.startTime;
    const progress = elapsedTime / this.duration;
    const newX = Phaser.Math.Linear(this.sprite.x, this.targetX, progress);
    const newY = Phaser.Math.Linear(this.sprite.y, this.targetY, progress);
    this.sprite.setPosition(newX, newY);
  }
}

2. 게임 개체에 Action 추가하기

게임 개체에 Action을 추가하여 해당 개체가 원하는 행동을 수행할 수 있도록 해야 합니다. 다음은 예시로서 플레이어 캐릭터에 이동 동작을 추가하는 코드입니다.

const player = this.add.sprite(100, 100, 'player');

const moveAction = new MoveAction(player, 500, 300, 2000);
moveAction.start();

this.actions.add(moveAction);

3. Action 업데이트하기

게임 루프에서 Action들을 업데이트해야 합니다. Phaser의 루프에서 Action들을 업데이트하여 정의된 행동을 수행하게 됩니다.

update() {
  this.actions.update();
}

리액션(Reaction) 시스템

리액션 시스템은 주로 게임 개체들 사이의 상호작용을 구현하는데 사용됩니다. Phaser에서 리액션 시스템을 구현하기 위해서는 다음의 단계를 따릅니다.

1. Reaction 클래스 만들기

먼저 Reaction 클래스를 만들어야 합니다. Reaction 클래스는 어떤 조건에 따라 특정 행동을 수행하는 기능을 제공합니다. 다음은 예시로서 충돌 시 움직임을 멈추는 Reaction 클래스입니다.

class StopMovementReaction {
  constructor(sprite) {
    this.sprite = sprite;
  }
  
  check() {
    if (Phaser.Collision.CheckOverlap(spriteA, spriteB)) {
      return true;
    } else {
      return false;
    }
  }
  
  react() {
    this.sprite.setVelocity(0);
  }
}

2. 게임 개체에 Reaction 추가하기

게임 개체에 Reaction을 추가하여 해당 개체가 원하는 조건에 따라 리액션을 수행할 수 있도록 해야 합니다. 다음은 예시로서 플레이어 캐릭터에 충돌 시 움직임을 멈추는 Reaction을 추가하는 코드입니다.

const player = this.add.sprite(100, 100, 'player');

const stopMovementReaction = new StopMovementReaction(player);
this.reactions.add(stopMovementReaction);

3. Reactions 업데이트하기

게임 루프에서 Reactions을 업데이트해야 합니다. Phaser의 루프에서 Reactions을 업데이트하여 정의된 조건에 따라 리액션을 수행하게 됩니다.

update() {
  this.reactions.update();
}

마무리

Phaser에서 행동과 리액션 시스템을 구현하는 방법에 대해 알아보았습니다. 이러한 시스템을 사용하면 게임에서 개체들이 보다 자연스럽게 움직이고 상호작용할 수 있게 됩니다. 추가적인 정보를 얻고 싶다면 Phaser 공식 문서를 참고해주세요.