Phaser.js + TypeScript + Viteでゲーム開発

2021.11.29

Phaser.jsとは

Phaser.js(フェイザー)とは、HTML5の2Dゲーム開発を行うことができるオープンソースのフレームワークです。 CanvasやWebGLを利用して、PCやモバイル上で動作するゲームを開発できます。Phaser.jsの初回リリースは2013年に行われ、継続的にアップデートが行われています。2021年現在もPhaser3.55.2がリリースされており、またPhaser4のベータ版もリリースされています。Phaser.jsは、JavaScriptとTypeScriptに対応しています。

環境構築

今回は Phaser.js + TypeScript + Vite でゲーム開発を行うための環境構築を行なっていきます。

・ Viteとは
Vite(ヴィート)とはビルドツールです。自分の書いたソースコードから、実行可能なアプリケーションのファイルを生成してくれます。よく使われるビルドツールとして、webpackがありますが、Viteはwebpackよりも高速にビルドを行なってくれます。

まずは、Phaserのプロジェクトをまとめるためのディレクトリを作って移動します。

mkdir phaser_projects
cd phaser_projects
Viteでプロジェクトを作成します。以下のコマンドを実行するとViteを使ってプロジェクトの作成が行われます。実行時にViteがまだインストールされていない場合は、インストールしても良いか尋ねられます。
npm init vite@latest

その後、プロジェクト名などを尋ねられるので、入力していきます。今回は以下のように設定しました。

Project name: myGame
Package name: mygame
Select a framework: vanilla
Select a variant: vanilla-ts

次に作成されたプロジェクトのディレクトリに移動して、PhaserとTypeScriptをインストールします。

cd myGame
npm install phaser --save
npm install typescript --save-dev

以上で開発環境は整いました。

入門用チュートリアル

開発環境は整いましたが、画面を作成していないため実行してもまだ何も表示されません。公式サイトに書いてある入門用チュートリアルを紹介します。

このチュートリアルを完了すると、以下のような画面を作ることができます。Phaserと書いてあるロゴが光りながら画面内を移動します。 ゲーム開発にはScene(シーン)と呼ばれるものがあり、プログラム上の画面や場面のことを指します。まずはSceneをまとめるためのディレクトリを作り、その中にMySceneというSceneを作ります。

mkdir src/scenes/
touch src/scenes/MyScene.ts

./src/scenes/MyScene.tsを編集して、以下のような内容にします。

import Phaser from "phaser";

class MyScene extends Phaser.Scene {
  constructor() {
    super({ key: 'myscene' });
  }

  preload() {
    this.load.setBaseURL("https://labs.phaser.io");

    this.load.image("sky", "assets/skies/space3.png");
    this.load.image("logo", "assets/sprites/phaser3-logo.png");
    this.load.image("red", "assets/particles/red.png");
  }

  create() {
    this.add.image(400, 300, "sky");

    const particles = this.add.particles("red");

    const emitter = particles.createEmitter({
      speed: 100,
      scale: { start: 1, end: 0 },
      blendMode: "ADD",
    });

    const logo = this.physics.add.image(400, 100, "logo");

    logo.setVelocity(100, 200);
    logo.setBounce(1, 1);
    logo.setCollideWorldBounds(true);

    emitter.startFollow(logo);
  }
}
・ preload関数

preload関数には、ゲームのアセット(画像や音楽などの素材)を読み込む処理を書きます。このリンク(https://labs.phaser.io/assets/)には公式が用意している様々なアセットファイルがあります。上記のコードでは三つの画像を読み込んで、それぞれsky,logo,redという変数名を割り当てています。

・ create関数

create関数は、preload関数の後に呼び出されます。上記のコードでは、preloadで読み込んだ画像を画面上に追加しています。またCreate Emitterという光を画面に追加しています。29行目ではロゴ画像を物理オブジェクトとして画面に追加しています。それ以降では、ロゴ画像の移動速度や、跳ね返り具合、画面枠の跳ね返りの有効化などを行なっています。

以下のページでは、各APIごとにサンプルコードがあり、実際に動作している画面も見ることができます。

ここまででSceneを作ることができました。次にSceneを表示する画面設定を行なっていきます。

./src/main.tsを編集して、以下のような内容にします。

import Phaser from "phaser";
import MyScene from "./scenes/MyScene";

const config: Phaser.Types.Core.GameConfig = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  physics: {
    default: "arcade",
    arcade: {
      gravity: { y: 200 },
    },
  },
  scene: MyScene,
};
new Phaser.Game(config);

terminalでプロジェクトのルートに移動して以下のコマンドを実行します。http://localhost:3000/をブラウザで開くとゲームが起動します。

npm run dev