[javascript] Phaser에서 다양한 적 AI 동작 패턴 구현하기

22 Nov 2023

javascript

Phaser는 HTML5 기반의 게임 개발 프레임워크로서, 다양한 기능과 도구를 제공하여 게임 개발을 용이하게 해준다. 이번 글에서는 Phaser를 사용하여 다양한 적 AI 동작 패턴을 구현하는 방법에 대해 알아보겠다.

1. 기본 적 동작 패턴 구현하기

적의 기본 동작 패턴은 일반적으로 플레이어를 향해 이동하거나 공격하는 것이다. 이를 구현하기 위해서는 다음과 같은 단계를 따를 수 있다.

function createEnemy(x, y) {
  // 적 스프라이트 생성
  const enemy = this.physics.add.sprite(x, y, 'enemy');

  // 적의 이동 속도 설정
  enemy.speed = 100;

  // 적의 동작 패턴
  enemy.moveTowardsPlayer = function() {
    const player = this.scene.player;
    
    // 플레이어를 향해 이동
    this.scene.physics.moveToObject(this, player, this.speed);

    // 플레이어와 충돌할 경우 공격
    this.scene.physics.add.overlap(this, player, this.attack);
  };

  // 적의 공격 패턴
  enemy.attack = function() {
    // 공격 로직 구현
  };

  // 적의 업데이트 함수 설정
  enemy.update = function() {
    this.moveTowardsPlayer();
  };

  // 추가 코드...

  return enemy;
}

위 코드에서 createEnemy 함수는 적 스프라이트를 생성하고, 이동 속도를 설정한다. moveTowardsPlayer 함수는 적이 플레이어를 향해 이동하도록 만들어주고, attack 함수는 적이 플레이어와 충돌할 경우 호출되는 공격 로직을 구현한다. update 함수는 적 스프라이트가 매 프레임마다 업데이트되는 동작을 담당한다.

2. 다양한 적 AI 동작 패턴 구현하기

위에서 구현한 기본 동작 패턴을 바탕으로 다양한 적 AI 동작 패턴을 구현할 수 있다. 예를 들어, 적이 주위를 돌며 플레이어를 향해 이동하는 원형 운동 패턴을 구현하고 싶다면 다음과 같이 코드를 작성할 수 있다.

enemy.circularMovement = function(radius) {
  const center = { x: this.x, y: this.y };
  const angle = this.scene.physics.angleBetween(center, this.scene.player);

  const destinationX = center.x + Math.cos(angle) * radius;
  const destinationY = center.y + Math.sin(angle) * radius;
  
  this.scene.physics.moveTo(this, destinationX, destinationY, this.speed);
};

위 코드에서 circularMovement 함수는 적이 원형 운동을 하도록 만드는 함수이다. radius 파라미터는 원의 반지름을 의미한다. 이 함수를 사용하여 적이 원형 운동 패턴을 따르도록 update 함수를 수정한다.

enemy.update = function() {
  this.circularMovement(100);
};

이제 적은 주위를 돌며 플레이어를 향해 이동하게 된다.

마무리

이번 글에서는 Phaser에서 다양한 적 AI 동작 패턴을 구현하는 방법에 대해 알아보았다. Phaser를 사용하면 게임 개발에 적용할 수 있는 다양한 AI 동작 패턴을 쉽게 구현할 수 있다. 추가로 Phaser의 공식 문서나 예제 코드를 참고하면 더 다양한 기능을 활용할 수 있다.