Phaser 3pt 시작하기 III

소개

지난 주에 우리는 정적 자산을 게임에 추가하는 프로세스에 대해 논의했으므로 이제 사용자가 볼 수 있는 게임 스프라이트 및 기타 개체를 게임에 렌더링할 수 있습니다. 또한 새 게임 내에서 사운드를 생성하기 위해 오디오 파일을 추가하는 방법도 다루었습니다. 이번 주에는 게임에 컨트롤을 추가하는 과정과 컨트롤러 입력을 받고 게임 스프라이트에 움직임을 추가하는 과정을 살펴보겠습니다. 지난 주 튜토리얼을 놓쳤다면 확인하세요. 그렇지 않다면 시작해 봅시다!

움직임 추가

약간의 컨텍스트를 제공하기 위해 현재 PlayScene.js 파일은 다음과 같습니다.

export default class PlayScene extends Phaser.Scene {
  constructor() {
    super('PlayScene');
  }

  preload() {
    this.load.image('background', './assets/img/background.png');
    this.load.image('ship', './assets/img/spaceship.png');
    this.load.image('asteroid', './assets/img/asteroid.png');
  }

  create() {
    this.add.image(0, 0, 'background').setOrigin(0, 0).setScale(0.6);
    this.add.image(0, 400, 'background').setOrigin(0, 0).setScale(0.6);

    this.ship = this.physics.add.image(400, 300, 'ship').setScale(0.1);

    this.asteroid = this.physics.add.image(225, 550, 'asteroid').setScale(0.03);
    this.asteroid1 = this.physics.add.image(225, 250, 'asteroid').setScale(0.03);
    this.asteroid2 = this.physics.add.image(525, 250, 'asteroid').setScale(0.03);
 }
  update() {

  }
}

이제 화면에서 배를 움직이고 화살표 키로 제어할 수 있게 해주는 코드를 살펴보겠습니다.

PlayScene.js 파일의 생성 기능 내에 다음 줄을 추가합니다.

  this.ship.setDrag(0.99);
    this.ship.setMaxVelocity(150);
    this.ship.setCollideWorldBounds(true);

    this.cursors = this.input.keyboard.createCursorKeys();

자! 장면에서 이동할 때 항력을 갖도록 배를 설정하고 최대 속도 또는 속도를 150으로 설정했습니다. 배도 게임 뷰의 경계와 충돌하도록 설정하고 있습니다. 마지막으로 this..cursors를 키보드 입력, 특히 커서 키로 설정합니다.

다음으로 업데이트 기능을 수정하여 해당 입력을 받고 우주선 스프라이트를 장면 전체로 이동합니다. 첫 번째는 업데이트 기능이 이제 시간과 델타를 매개변수로 사용한다는 것입니다. 다음으로 업데이트 함수에 다음 코드 줄을 추가합니다.

if (this.cursors.up.isDown) {    
  this.physics.velocityFromRotation(this.ship.rotation, 150, 
  this.ship.body.acceleration);
} else {
  this.ship.setAcceleration(0);
}

if (this.cursors.left.isDown) {
  this.ship.setAngularVelocity(-300);
} else if (this.cursors.right.isDown) {
  this.ship.setAngularVelocity(300);
} else {
   this.ship.setAngularVelocity(0);
}

각 키 누름 이벤트에서 무슨 일이 일어나고 있는지 정확히 볼 수 있도록 이 코드 블록의 각 줄을 분해하겠습니다.

먼저 위쪽 커서가 아래에 있으면 먼저 this.ship.rotation의 회전에서 속도를 가져오고 앞에서 설명한 대로 최대 속도를 제공한 다음 현재 가속도를 제공합니다. 이것은 모든 회전 속도와 선박의 현재 가속도를 고려하고 위로 키를 누를 때마다 선박에 대한 새로운 가속도 벡터를 생성합니다. 다음으로 왼쪽 화살표 키를 누르면 배는 왼쪽으로 회전하고 오른쪽 화살표 키를 누르면 오른쪽으로 배를 회전시킵니다. 해당 라인이 추가된 후에는 게임 페이지에서 화살표 키를 사용할 때마다 선박을 제어할 수 있습니다. 그렇게 간단합니다!

결론

키보드의 방향 키를 사용하여 게임 장면에서 스프라이트를 이동하는 기능을 추가하는 것은 매우 간단한 과정입니다. 스프라이트의 속도를 원하는 대로 설정하여 게임 캐릭터를 원하는 만큼 빠르게 또는 느리게 만들 수 있습니다. 이것이 Phaser 3로 스프라이트 움직임을 제어할 수 있는 방법에 대한 약간의 관점을 제공하는 데 도움이 되었기를 바랍니다!