1. 環境設定

はじめに

Phaserを始めてみたので、ここに学習メモを書いていきます。 とりあえずの目標はTop-Viewの画面でヴァンサバもどきを作ってみたいです。 今回は初期設定とPhaserの基本コードが動くまでです。

環境設定

npm使いたいので、Phaser + Vite + TypeScript でやります。

  1. npm create vite@latest . -- --template vanilla-ts
  2. npm install phaser

初期コード

index.html,src/main.ts,src/Scenes/Start.tsを作成して、下記のコードを貼り付けて保存しておきます。

注意：画像などのアセットは public/assets/以下に入れておきます。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>Phaser + Vite + TS</title>
  <style>body{margin:0}</style>
</head>
<body>
  <div id="game"></div>
  <script type="module" src="/src/main.ts"></script>
</body>
</html>

src/main.ts

import Phaser from "phaser";
import StartScene from "./scenes/Start";

const config: Phaser.Types.Core.GameConfig = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  backgroundColor: "#1d1d1d",
  parent: "game",
  scene: [StartScene],
  scale: {
    mode: Phaser.Scale.FIT,
    autoCenter: Phaser.Scale.CENTER_BOTH,
  },
};

new Phaser.Game(config);

src/scenes/Start.ts

import Phaser from "phaser";

export default class StartScene extends Phaser.Scene {
  private logo!: Phaser.GameObjects.Image;

  constructor() {
    super({ key: "StartScene" });
  }

  preload() {
    this.load.image("logo", "/assets/phaser.png");
  }

  create() {
    this.logo = this.add.image(400, 300, "logo");
    this.add.text(320, 500, "Hello Phaser", {
      fontSize: "24px",
      color: "#ffffff",
    });
  }

  update(time: number, delta: number) {
    this.logo.setY(300 + Math.sin(time * 0.001) * 20);
  }
}

実行

  • npm run dev : 実行
  • npm run build : ビルド (dist/以下にファイルが生成)
  • npm run preview : ビルドしたものを実行

テンプレート化

GitHubにテンプレートリポジトリとして登録しました。 このテンプレートを使って、新たにプロジェクトを作成してcloneします。

まとめ

初期設定から、Phaserが動くところまで進めました。