Phaser + TypeScript + Viteの環境構築

# Phaser3ってなに？
簡単に言うと、WEBゲームが作れるフレームワークです。

https://phaser.io/phaser3

# 環境

- Node.js (https://nodejs.org/ja/)
- Vite (https://ja.vitejs.dev/)
- Phaser3 (https://phaser.io/)
- TypesScript (https://www.typescriptlang.org/)

# Viteのプロジェクト作成

```console:npm
$ npm init vite@latest
```
```console:yarn
$ yarn create vite
``` 
実行すると質問されるので、以下のように回答。

`Project name`は自分の好きな名前で入力します。
`Select a framework`は自分の環境に合わせて選択してください。今回は**Vanilla**を選択しています。
`Select a variant`は**TypeScript**を選択します。

```shell-session:実行結果
$ ✔ Project name: … my-project
$ ✔ Select a framework: › Vanilla
$ ✔ Select a variant: › TypeScript
```
カレントディレクトリを作ったプロジェクトに移動して、起動確認をします。

```console:npm
$ cd my-project
$ npm install
$ npm run dev
```
```console:yarn
$ cd my-project
$ yarn
$ yarn dev
```


起動ができたらこのような画面になっていると思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266165/5b6a5722-270f-2889-18b3-a35b1bc77220.png)


## TypeScriptとPhaserのインストール

最初にTypeScriptをインストールします。
```console:npm
$ npm install typescript --save-dev
```
```console:yarn
$ yarn add typescript -dev
```
次にPhaserをインストールします。
```console:npm
$ npm install phaser --save
```
```console:yarn
$ yarn add phaser
```

## viteの設定
configファイルは自動で生成されないので、自分で作成する必要があります。
ので、プロジェクトルート内に`vite.config.ts`ファイルを作成します。

生成後のプロジェクトディレクトリ

```diff
my-project/
    ├─ node_modules/
    ├─ public/
    ├─ src/
    ├─ .gitignore
    ├─ index.html
    ├─ package.json
    ├─ tsconfig.json
+   └─ vite.config.ts
```

作成した`vite.config.ts`を編集します。
```typescript:vite.config.ts
import { defineConfig } from 'vite';

export default defineConfig({
    build: {
        assetsInlineLimit: 0,
    },
});
```

`assetsInlineLimit`を0にすることで、スプライトなどのアセットをロードしたときにBase64 URLへのインライン化を無効にします。
(https://ja.vitejs.dev/config/build-options.html#build-assetsinlinelimit)

## 実行
実行する前にphaserが動くようにするのと、不要なファイルを削除します。

不要なファイル削除
```diff
my-project/
    ├─ node_modules/
    ├─ public/
-   │    └─ vite.svg
    ├─ src/
-   │    ├─counter.ts
    │    ├─main.ts
-   │    ├─style.css
-   │    ├─typescript.svg
-   │    └─vite-env.d.ts
    ├─ .gitignore
    ├─ index.html
    ├─ package.json
    ├─ tsconfig.json
    └─ vite.config.ts
```

最初に`index.html`を編集します。

```html:index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + TS + Phaser</title>
    <style>
      body {
        margin: 0;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>
```
主な変更として`style`タグを追加しています。

次に`src/main.ts`を編集します。
もともと記述されていたコードはすべて消してしまって大丈夫です。
```typescript:src/main.ts
import Phaser from 'phaser';

class TestScene extends Phaser.Scene {
	constructor() {
		super('testScene');
	}
	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);
	}
}

const config: Phaser.Types.Core.GameConfig = {
	type: Phaser.AUTO,
	width: 800,
	height: 600,
	parent: 'app',
	physics: {
		default: 'arcade',
		arcade: {
			gravity: { y: 200 },
		},
	},
	scene: TestScene,
};

new Phaser.Game(config);
```

Phaser公式から公開されているHello World!を使用しました。
(https://phaser.io/tutorials/getting-started-phaser3/part5)

実行画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266165/3d700483-c669-ead7-cda9-2e99e0d7719b.png)

## ビルド

ビルドすることで、静的サイトで使用することができます。
```console:npm
$ npm run build
```
```console:yarn
$ yarn build
```
完了すると、プロジェクトルート内に`dist`フォルダが生成されます。

ビルドしたものを実行することもできます。
```console:npm
$ npm run preview
```
```console:yarn
$ yarn preview
```

# GitHub Pagesにアップロードする

ここではGitHub Pagesにアップロードするための設定や便利なものを紹介します。
レポジトリの作り方や、GitHub Pagesの設定方法などは個々で調べてください。

## vite.config.tsの追加項目
```diff_typescript:vite.config.ts
import { defineConfig } from 'vite';

export default defineConfig({
	build: {
		assetsInlineLimit: 0,
	},
+	base: '/<REPO>/',
});

```
ただしこちらは、`https://github.com/<USERNAME>/<REPO>`が対象のリポジトリである場合です。詳しくは公式ページをご覧ください。(https://ja.vitejs.dev/guide/static-deploy.html#github-pages)

## gh-pagesパッケージを使う
gh-pagesというパッケージを使うことで、distフォルダ内をgh-pagesブランチにアップロードすることができます。

### インストール
```console:npm
$ npm install gh-pages --save-dev
```

### package.jsonへの追加
```json:package.json
{
    "scripts": {
        "deploy": "gh-pages -d dist"
    }
}
```
### 最後に
```console:npm
$ npm run deploy
```

```console:yarn
$ yarn deploy
```
上記を実行することで、gh-pagesブランチにアップロードすることができます。
リポジトリの設定から表示するブランチをgh-pagesのルートに設定することで閲覧できるようになります。
ここまでお疲れさまでした。

# 参考
これらを構築するにあたって参考にしたサイトがいくつかあるので紹介させていただきます。こちらも参考にしていただければと思います。

https://ja.vitejs.dev/guide/static-deploy.html#github-pages

https://qiita.com/M01tyan/items/063b2c88dfe402ddbd6a

https://dev.classmethod.jp/articles/phaser-js-typescript-vite/