フェーザー3とJavaScriptの基礎

最近、たくさん反応してきたので、実際のJavaScriptコードを書いていません.しかし、ありがたいことに、私は側でフェイザー3を学んでいました、そして、それがわかるように、それはJavaScript基礎を強化するすばらしい方法です.
最も顕著に、phaser 3はthisのしっかりした理解を必要とします、しかし、それもES 6疑似古典的な具体化パターンの重い使用を作ります.
このウォークスルーは、単純な宇宙船のゲームを作る方法を示すように設計され、より重要ないくつかのコアJavascriptの概念を強化する.だから、この簡潔を維持するために、私はイントロフェイザーの概念の多くをブラシにし、JavaScriptコアの概念を強調する部分に焦点を当てるつもりです.
私は、あなたがすでにすべてのステップに続いたと仮定します.そして、あなたはすでに空のシーンを設定している.
我々が我々の場面でするつもりであるものの大部分は我々のゲーム物を巻き込むつもりです.我々はいくつかのことを移動することができますし、ヒットし、潜在的に死ぬことができるので、他の人が受け継ぐことができるすべてのものを行う1つのオブジェクトを作ろう!
したがって、MoveEnentEntityを作成します.js

import Phaser from 'phaser';

export default class MovementEntity extends Phaser.Physics.Matter.Image {
  constructor(data){
    const { scene, x, y, texture, name, health } = data;
    super(scene.matter.world, x, y, texture);
    this.x = x;
    this.y = y;
    this.health = health;
    this._position = new Phaser.Math.Vector2(this.x, this.y);
    this.name = name;
    const { Body, Bodies } = Phaser.Physics.Matter.Matter;
    this.collider = Bodies.circle(x, y, 24, {
      isSensor: false,
      label: `${name}Collider`
    });
    const compoundBody = Body.create({
      parts: [this.collider],
      frictionAir: .3,
    });
    this.setExistingBody(compoundBody);
    this.scene.add.existing(this);
  }
};

私たちは、これらのオブジェクトを242479142のキーワードで宣言するので、物理学のイメージを広げたいと思っています.我々が我々が我々の建設者から得て、スーパーにそれを渡すデータから欲しいものを破壊する方法に注意してください.そして、すべてのMoveMenEntitiesを持つ変数のすべてを設定するために、Newを使い始めます.
私はコライダーを作る方法に行くつもりはないが、それは我々がヒット検出のために使用していることを知っている.それから、私たちのオブジェクトにそれを付けて、MovementEntitiesを場面に加えてください.
しかし、我々はより多くの方法を必要とするつもりです.つのゲッターをセットしましょう、我々が常にオブジェクトの位置にアクセスすることができるように、そして、それが健康を使い果たしているかどうかわかっていてください.

get position() {
  this._position.set(this.x, this.y);
  return this._position;
}

get dead() {
  return this.health <= 0;
}

また、オブジェクトがヒットしたときにコールするメソッドが必要になるでしょう.これは、すべてが同じでなければならないので、デフォルトのOnDeathメソッドでなければなりません.

hit() {
  this.health--;
  if(this.dead) {
    this.onDeath();
  }
}
onDeath() {}

今、我々は簡単に我々のmovemententityを拡張するために我々のプレーヤークラスをセットアップすることができます、そして、論理の大部分はすでにそこにあります.どこか他の場所でランダムに生成するカスタムondeathメソッドを与えます.そして、我々はプレーヤーのために使用しているイメージを読み込むためにthisメソッドを追加します.知られていない場合は、クラス自体のインスタンスではなく、クラス自体でのみstaticメソッドが存在します.

import MovementEntity from './MovementEntity';

export default class Player extends MovementEntity {
  constructor(data){
    super(data);
  }

  static preload (scene) {
    scene.load.image('ship', '/assets/player.png');
  }

  onDeath() {
    this.x = Math.random() * 512;
    this.y = Math.random() * 512;
    this.rotation = Math.random() * 360;
    this.health = 1;
  }

  update() { // This is our movement code
    if (this.inputKeys.W.isDown) {
      this.thrust(.005);
    }
    if (this.inputKeys.A.isDown) {
      this.setAngularVelocity(-.05);
    } else if (this.inputKeys.D.isDown) {
      this.setAngularVelocity(.05);
    } else {
      this.setAngularVelocity(0);
    }
  }
};

そして今、我々の敵のクラス!我々の建設者では、敵がプレーヤーに走ったかどうかチェックするためにコライダーをセットアップする必要があります.また,preload法では,色に基づいて敵の資産を動的にロードする必要がある.

import Phaser from 'phaser';
import MovementEntity from './MovementEntity';

export default class Enemy extends MovementEntity {
  constructor(data){
    super(data);
    this.scene.matterCollision.addOnCollideStart({
      objectA: [this.collider],
      callback: ({ gameObjectB }) => {
        if(gameObjectB && gameObjectB.name === 'player') {
          gameObjectB.hit();
        }
      },
      context: this.scene,
    });
  }

  static preload (scene, color) {
    scene.load.image(`${color}Enemy`, `/assets/${color}Enemy.png`);
  }

  onDeath() {
    this.scene.enemies = this.scene.enemies.filter(i => i !== this);
    this.destroy();
  }

  update(player) { // This is how our enemy follows the player
    const direction = player.position.subtract(this.position);
    direction.normalize();
    this.setVelocityX(direction.x);
    this.setVelocityY(direction.y);
    this.rotation = Phaser.Math.Angle.BetweenPoints(this.position, player.position);
  }
};

今私たちのプレーヤーと敵のオブジェクトの骨を持って、私たちのシーンでそれらを設定しましょう.
私は敵船、ピンクと青のために2つのイメージを持っているので、本当のクイックは、我々の場面の建設者にその情報で配列を加えましょう.我々はまた、我々のシーンのすべての敵を追跡するために空の配列をしたいと思いますので、同様にそれを設定しましょう.

this.enemyColors = ['blue', 'pink'];
this.enemies = [];

シーンのプリロードメソッドでは、プリロードメソッドを呼び出します.これは静的にシーンにプレーヤーのイメージを読み込み、浣腸の動的.

preload() {
  Player.preload(this);
  this.enemyColors.forEach(color => Enemy.preload(this, color));
}

今、我々はプレーヤーといくつかの敵を作る必要があります.シーンがそれらを追跡することができるように、我々は変数にプレーヤーを保存します、そして、我々は我々が以前設定した配列にすべての敵を加えます.

create() {
  this.player = new Player({
    scene: this, x: 40, y: 40, texture: 'ship', name: 'player', health: 1
    });
  this.enemies.push(...this.enemyColors.map(color =>  new Enemy({
    scene: this, 
    x: Math.random() * 512, 
    y: Math.random() * 512, 
    texture: `${color}Enemy`, 
    name: `${color}Enemy`, 
    health: 2
  })));
  // This gets the movement keys for the player
  this.player.inputKeys = this.input.keyboard.addKeys('W,A,D');
}

我々のプレーヤーと我々の敵が場面に加えられる今、我々はちょうど場面の最新版メソッドで彼らの最新版メソッドを呼ぶ必要があります.配列内のすべての敵を呼び出すことを忘れないようにしてください.

update() {
  this.player.update();
  this.enemies.forEach(i => i.update(this.player));
}

ご覧のように、フェイザーを使用するには、実際にどのようにstaticがやっていると実際にどのようにES 6擬似古典的なインスタンスの動作を理解するしっかりした把握を持っている必要があります.しかし、ちょうど覚えて、それはすべてのJavascriptです.そして、phaser 3でシンプルなゲームを作ることはJavaScriptの動作を強化するための楽しい練習です.