마지막은 Phaser 3.

Phaser 3 튜토리얼로 돌아온 것을 환영합니다. 이번 주에 우리는 이 튜토리얼 2부분에서 만들어진 소행성 설정 운동을 어떻게 하는지 보고 배에서 발사되는 레이저를 설정할 것입니다!만약 당신이 이 강좌의 신출내기라면, 첫 번째 부분을 보십시오. 네, 우선 소행성부터 시작하겠습니다.

소행성js
소행성의 이동을 처리하기 위해서, 우리는 장면 디렉터리에 소행성이라는 새 파일을 만들 것입니다.js.이 파일은 게임에서 작은 행성의 모든 논리를 처리할 것이다.우선, 우리는 이렇게 파일을 설정할 것이다.

export default class Asteroid extends Phaser.Physics.Arcade.Sprite {
  constructor (scene, x, y) {
    super(scene, x, y, 'asteroid');

    this.speed = Phaser.Math.GetSpeed(100, 1);
    this.orbiting = false;
    this.direction = 0;
    this.factor = 1;
  }
}

이것은 소행성 파일의 시작이다.Phaser 3 arcade sprite 클래스를 확장할 새 클래스를 만듭니다.우리는 구조 함수를 정의하고 다른 속성을 추가할 것이며, 이러한 속성은 이후에 작용을 발휘할 것이다.이제 소행성류 중의 다른 방법을 봅시다.

launch(shipX, shipY) {
  this.orbiting = true;
  this.setActive(true);
  this.setVisible(true);
  let xOrigin = Phaser.Math.RND.between(0, 800);
  let yOrigin = 0;
  this.setPosition(xOrigin, yOrigin);
  if (shipY > xOrigin) {
    let m = (shipY - yOrigin) / (shipX - xOrigin);
    this.direction = Math.atan(m);
  }
  else {
    this.factor = -1;
    let m = (shipY - yOrigin) / (xOrigin - shipX);
    this.direction = Math.atan(m);
  }
  this.angleRotation = Phaser.Math.RND.between(0.2, 0.9);
}

위의 발사 방법은 게임 장면에서 소행성을 발사하는 것을 책임진다.잠시 후 간격으로 실행할 것입니다.발사 기능 중의 많은 논리는 비행선의 현재 위치를 고려하여 새로운 소행성의 여행 벡터를 생성하는 데 달려 있다.이 블로그를 위해서 나는 그 중의 수학 문제를 깊이 토론하지 않을 것이다. 그러나 만약 당신이 어떤 문제가 있으면 나에게 연락하세요.다음은 게임에서 스크린을 통과하는 소행성 업데이트 기능을 살펴보자.

 update(time, delta) {
   this.x += this.factor * Math.cos(this.direction) * this.speed * delta;
   this.y += Math.cos(this.direction) * this.speed * delta;
   this.angle += this.angleRotation;

   if (this.x < -50 || this.y < -50 || this.x > 800 || this.y > 600) {
     this.setActive(false);
     this.setVisible(false);
     this.destroy();
   }
 }

업데이트 함수를 호출할 때마다 소행성은 자신에게 새로운 x와 y 좌표와 각도를 생성합니다.그런 다음 Phaser 3은 이러한 정보를 사용하여 화면에서 소행성의 새 위치를 계산합니다.다시 한 번, 이 새 좌표들을 계산하는 데는 수학 지식이 필요하지만, 너무 걱정하지 마세요.마지막으로 소행성이 게임 화면의 크기를 초과하면 setActive와 setVisible는false입니다. 이것은 잘못된 것입니다.화면에 나타나지 않기 때문에 소행성을 없애기 위해 Destroy () 가 호출됩니다.

게임 장면으로 돌아가다.js
자, 이제 새로운 소행성류가 생겼으니 게임 장면에서 실제로 사용해야 합니다.js 파일.이것이 어떻게 일할 것인지 우리에게 보여 주시오.

// Be sure to import the Asteroid.js file into the play 
scene

create() {
  // New logic for handling the asteroids
  this.asteroidsGroup = this.physics.add.group();
  this.asteroidsArray = [];
  this.asteroidTimedEvent = this.time.addEvent({
    delay: 1000,
    callback: this.addAsteroid,
    callbackScope: this,
    loop: true,
  });
 }

여기서, 우리는 게임 장면에서 새로운 소행성군을 만들고, 소행성 진열을 만들 것이다.우리는 초당 새로운 소행성을 만드는 새로운 시간evet도 설치했다.이 이벤트의 리셋은 실행 함수입니다.이게 뭔지 보여줘.AddAsterone은 무엇을 하고 있습니까?

addAsteroid() {
  let asteroid = new Asteroid(this, 0, 0, 'asteroid', 0).setScale(0.02);
  this.asteroidsGroup.add(asteroid, true);
  this.asteroidsArray.push(asteroid);
}

addasteroid를 호출할 때마다 우리는 새로운 소행성을 만들 것입니다. 이 소행성은 우리의 소행성류에서 생성됩니다.우리는 또 새로운 소행성을 소행성 그룹과 진열에 첨가할 것이다.마지막으로, 우리는 업데이트 함수를 업데이트할 것이다. (내가 거기서 무엇을 했는지 봐라.)이 코드 블록을 업데이트 함수에 추가합니다.

for (const asteroid of this.asteroidsArray) {
  if (!asteroid.isOrbiting()) {
    asteroid.launch(this.ship.x, this.ship.y);
  }
  asteroid.update(time, delta);
}

이 순환은 소행성 진열을 검사합니다. 만약 어떤 소행성이 궤도를 돌지 않으면 소행성은 게임 장면에 발사되고 업데이트 기능은 실제 소행성처럼 화면에서 이동할 수 있도록 호출됩니다!

총을 쏘다.js
자, 이제 우리는 소행성이 스크린에서 이동하는 것을 보았으니, 게이머들을 위해 실제 사격을 하고 파괴하는 방법을 설정하자!이를 위해, 우리는 shoot이라는 새 파일을 만들 것입니다.js.이 문서에서 우리는 비행선이 발사하는 레이저의 모든 논리를 처리할 것이다.간결하게 보기 위해서 나는 전체 촬영 과정을 포함할 것이다.다음은 js입니다.

import Phaser from 'phaser';

export default class Shoot extends Phaser.Physics.Arcade.Sprite {
  constructor(scene, x, y) {
    super(scene, x, y, 'shoot');

    this.speed = Phaser.Math.GetSpeed(500, 1);
  }

  fire(x, y, direction) {
    this.setPosition(x, y);
    this.setActive(true);
    this.setVisible(true);

    this.direction = direction;
    this.rotation = this.direction;
  }

  update(time, delta) {
    this.x += Math.cos(this.direction) * this.speed * delta;
    this.y += Math.sin(this.direction) * this.speed * delta;

    if (this.x < -50 || this.y < -50 || this.x > 800 || this.y > 600) {
      this.setActive(false);
      this.setVisible(false);
      this.destroy();
    }
  }
}

이제 사격 수업이 생겨서 게임 장면에서 사용해야 한다.js 파일.이제 이 파일에 필요한 변경 사항을 살펴봅시다.우선, 우리는 우리가 생성할 레이저 정령에 새로운 이미지를 추가해야 한다.나는 기본적인 파란색 반점 하나만 사용했지만, PNG 파일 형식이라면 원하는 그림을 사용할 수 있다.이 그림을 먼저 미리 불러오는 함수에 불러옵니다.

preload() {
  this.load.image('shoot', shoot);
}

다음에, 우리는create 함수를 업데이트하여, 불러오는 새로운 이미지를 새로운 위상기 그룹에 포함하고, 레이저와 소행성에 충돌 처리 프로그램을 설정할 것입니다.

this.shootsGroup = this.physics.add.group({
  classType: Shoot,
  maxSize: 1,
  runChildUpdate: true,
});

this.physics.add.overlap(this.shootsGroup, this.asteroidsGroup, this.collision, null, this);

현재create 함수가 업데이트되었습니다. 업데이트 함수에 들어갑니다.스페이스 바로 레이저를 발사할 수 있는 추가 컨트롤러를 추가할 것입니다.

if (this.cursors.space.isDown) {
  const shoot = this.shootsGroup.get();
  if (shoot) {
    shoot.fire(this.ship.x, this.ship.y, this.ship.rotation);
  }
}

좋습니다. 이제 스페이스 바를 누르면 게임에 새로운 레이저 대상을 만들 것입니다.마지막으로 우리는 두 게임 대상의 충돌을 처리하는 함수를 정의해야 한다.이 함수는 충돌이라고 불릴 것이다.

collision(laser, asteroid) {
  laser.destroy();
  asteroid.destroy();
}

충돌 기능은 두 정령이 서로 충돌할 때 제거합니다.이제 우리는 게임에서 소행성을 파괴하는 데 성공할 수 있다!

결론
우리는 이미 Phaser 3에 대한 기본적인 이해에서 소행성을 사살하고 파괴할 수 있는 기능이 완비된 게임으로 바뀌었다.이것은 기본적인 예이지만, 이곳에는 확장할 수 있는 곳이 매우 많다.Phaser 3 문서를 더 많이 읽으면 유용한 정보가 많아서 더 강한 상호작용 게임을 만들 수 있습니다!나는 너희들이 이 시리즈를 좋아하길 바란다. 나는 곧 돌아와서 더 많은 Phaser 3 강좌를 볼 것이다.