[Phaser3]簡単環境構築 with Vite

はじめに

Phaser 3 を使ってゲーム開発を始めるなら、Vite を使うと 高速なビルド・ホットリロード で開発効率がアップします。

この記事では、Vite + Phaser 3 の環境構築から、Canvas に "Hello World" を表示する ところまでを解説します。

---

1. Vite プロジェクトを作成

まず、Vite のプロジェクトを作成します。

$ npm create vite@latest phaser3-vite-game --template vanilla-ts
$ cd phaser3-vite-game
$ npm install

vanilla-ts を指定することで、TypeScript 環境がセットアップされます。cd phaser3-vite-game で作成したフォルダへ移動し、npm install で依存関係をインストールします。

2. Phaser3をインストール

$ npm install phaser

3. Phaser3の基本手的なセットアップ

src/main.ts を編集し、Phaser の Game インスタンスを作成します。

import Phaser from "phaser";

class HelloWorldScene extends Phaser.Scene {
  constructor() {
    super("HelloWorldScene");
  }

  preload() {
    // ここでアセットをロードできる
  }

  create() {
    this.add.text(200, 150, "Hello World", { fontSize: "32px", color: "#ffffff" });
  }
}

const config: Phaser.Types.Core.GameConfig = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  scene: HelloWorldScene,
};

new Phaser.Game(config);

4. Viteを起動する

以下のコマンドでローカルサーバーを起動します。

$ npm run dev

ブラウザで http://localhost:5173 にアクセスすると、“Hello World” が表示されるはずです。

まとめ

これで、Vite + Phaser 3 の環境がセットアップでき、最小限のゲームを表示できるようになりました。 今後の記事では、これをベースにしてトップダウンの2dゲームを作る方法を解説していきます！🔥