[javascript] Phaser에서 게임 오브젝트의 이동과 회전 제어하기

Phaser는 HTML5 기반의 게임 개발 프레임워크로, 게임 오브젝트를 제어하고 다양한 동작을 구현할 수 있습니다. 이번 포스트에서는 Phaser를 사용하여 게임 오브젝트를 이동시키거나 회전시키는 방법에 대해 알아보겠습니다.

이동하기

Phaser에서 게임 오브젝트를 이동시키려면 velocity를 사용합니다. velocity는 해당 오브젝트의 속도와 방향을 설정하는 속성입니다. 아래는 오브젝트를 수직으로 이동시키는 예제입니다.

const game = new Phaser.Game(800, 600, Phaser.AUTO, '', {
  create: create
});

function create() {
  const sprite = game.add.sprite(400, 300, 'sprite');
  sprite.anchor.setTo(0.5);

  // 오브젝트를 위로 이동시킵니다.
  sprite.body.velocity.y = -100;
}

위의 예제에서는 게임 윈도우의 중앙에 위치한 sprite 오브젝트를 생성하고, sprite.anchor.setTo(0.5)를 사용하여 중앙을 기준으로 이동시킵니다. sprite.body.velocity.y를 -100으로 설정하면 오브젝트가 위로 이동합니다.

회전하기

Phaser에서 게임 오브젝트를 회전시키려면 rotation을 사용합니다. rotation은 해당 오브젝트의 회전 각도를 설정하는 속성입니다. 아래는 오브젝트를 회전시키는 예제입니다.

const game = new Phaser.Game(800, 600, Phaser.AUTO, '', {
  create: create
});

function create() {
  const sprite = game.add.sprite(400, 300, 'sprite');
  sprite.anchor.setTo(0.5);

  // 오브젝트를 시계방향으로 180도 회전시킵니다.
  sprite.rotation = Math.PI; 
}

위의 예제에서는 게임 윈도우의 중앙에 위치한 sprite 오브젝트를 생성하고, sprite.anchor.setTo(0.5)를 사용하여 중앙을 기준으로 회전시킵니다. 오브젝트의 rotationMath.PI로 설정하면 오브젝트가 시계방향으로 180도 회전합니다.

위의 예제에서는 sprite라는 이름의 이미지 파일을 사용하였습니다. 해당 이미지 파일은 미리 로드되어야 합니다. 자세한 내용은 Phaser의 공식 문서를 참조하시기 바랍니다.

결론

Phaser를 사용하여 게임 오브젝트를 이동시키거나 회전시킬 수 있습니다. 이를 활용하여 게임에 다양한 동작을 구현할 수 있습니다. Phaser의 다양한 기능과 API에 대해 더 알아보려면 Phaser 공식 문서를 참조하시기 바랍니다.