概要

Phaser2 版のサンプルを参考にインベーダーゲームを作ります。

今回はプレイヤーと敵キャラクターを作成し、画面に表示させます。
また背景を表示し、無限にスクロールするように動かします。

以下のサンプルではこちらのテンプレートを使っています。

準備

まず、src/scenes フォルダに Game.js という名前でファイルを作成します。

// Game.js
import Phaser from "phaser";

export default class Game extends Phaser.Scene {
  constructor() {
    super("game");
  }

  preload() {}

  create() {}

  update() {}
}

そして、テンプレートファイルに変更を加えます。
先ほど作成した Game クラスを読み込みます。
また、今回作成するゲームはトップビュー視点なので、gravity 属性を削除しています。

// main.js
import Phaser from "phaser";
import Game from "./scenes/Game";

const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  physics: {
    default: "arcade",
    arcade: {},
  },
  scene: [Game],
};

export default new Phaser.Game(config);

ゲーム中で使用する画像などは public/assets フォルダを作成して、そこに置いておきます。

プレイヤーの作成

まずはプレイヤーを画面に表示させます。
preload() でアセットを読み込みます。

// Game.js
preload() {
  this.load.image("ship", "assets/player.png");
}

読み込んだアセットを画面に表示させるには create() で以下のように呼び出します。

// Game.js
create() {
  this.player = this.physics.add.sprite(400, 500, "ship");
}

敵キャラクターの作成

敵キャラクターはアニメーションをつけられるよう Spritesheet を使って読み込みます。

// Game.js
preload() {
  this.load.image("ship", "assets/player.png");
  this.load.spritesheet("invader", "assets/invader32x32x4.png", {
      frameWidth: 32,
      frameHeight: 32,
    });
}

敵キャラクターはプレイヤーとは違い、複数体以上画面に表示する必要があります。
それらの敵キャラクターをまとめて扱えるように Group オブジェクトを経由して一つ一つ画面に追加していきます。

// Game.js
  create() {
    // ...略
    this.aliens = this.physics.add.group();

    for (let y = 0; y < 4; y++) {
      for (let x = 0; x < 10; x++) {
        let alien = this.aliens.create(x * 48, y * 50, "invader");
        alien.setOrigin(0, 0);
      }
    }
    this.aliens.incX(100);
    this.aliens.incY(50);
  }

無限スクロールする背景を追加

最後に動く背景を追加します。
アセットの読み込みから画面の表示まではプレイヤーの時とほとんど同じです。

// Game.js
preload() {
  // ...略
  this.load.image("starfield", "assets/starfield.png");
}

create() {
  // ...略
  this.starfield = this.add.tileSprite(400, 300, 800, 600, "starfield");
}

背景を動かすには update() で y プロパティを操作します。

// Game.js
this.starfield.tilePositionY -= 2;

つづく。