【Vite】【Phaser3】Phaser3の開発をビルドシステムで高速化したい

# はじめに

こんばんは、　@n2-freevasです。

https://qiita.com/advent-calendar/2022/access

ACCESSアドベントカレンダーに協賛いただいている記事にも関わらず、会社の事業内容と まっっっったく関係ない内容 を展開します。
タイトルの通りのナレッジを残しまして、最後に余談として、フロントエンド界隈をざわざわさせたTurbopackについての紹介をしときます。

# 対象

* Phaser3の開発を高速化したい方向け
* 以下の有名なテンプレートからPhaser3ゲーム開発を始めた方は特に対象

https://github.com/photonstorm/phaser3-typescript-project-template

# イントロ

Phaser3は、JavaScriptでゲームが書けるライブラリです。
やろうと思えば、ビルドシステムを利用して、TypeScriptで開発することも可能です。

自身の経験的主観になりますが、webpackを用いたPhaser3のビルドは、遅いです。
早くて5〜8秒、長いときは十数秒です。ソースコードの量も顕著に影響します。

そして、<b>我々Web開発者は、勤めてせっかちです。</b>

Web開発において、`npm run dev`とかでブラウザにプロダクトを開きっぱにして、ソースコードを変更するとすぐブラウザ側に変更が反映される<b>「あれ」</b>に慣れすぎたせいで、動作確認のためにビルドで十数秒待つという、アプリやゲーム業界では当たり前にやっていることが出来ないカラダになってしまっています。

[Phaser3の開発者コミュニティでは、webpack+TypeScriptでプロジェクトのテンプレートを公開してます](https://github.com/photonstorm/phaser3-typescript-project-template)。しかし、ここまでに述べた問題点は、このテンプレートで実際に起こっている と言えば問題提起として十分でしょう。

以上の経緯から、ここに、Phaser3開発のパラタイムシフトを宣言します。
プロジェクトのビルドシステムを、Webpackから別のビルドシステムに乗り換えましょう。

# テンプレートのビルドシステムを書き換える

https://github.com/photonstorm/phaser3-typescript-project-template

👆このテンプレートで開発していると想定します。

## 第一段階：インストール系を済ませる

先ず、以下の6つのファイルを全て削除します。

```terminal:いらないファイルを削除
rm .gitignore
rm package-lock.json
rm package.json
rm tsconfig.json
rm rollup.config.dev.js
rm rollup.config.dev.js

(正味、/src以外全て削除してもいいです。)
```

---

次に以下のコマンド、これにより、rollupやwebpackより遥かにビルドの早い、Viteへの移行が始まります。

```terminal:vite導入開始
npm init vite@latest
```

```terminal:vite質疑応答
✔ Project name: … {something}
✔ Select a framework: › Vanilla
✔ Select a variant: › TypeScript
```

---
ちょっと面倒なのですが、{something}プロジェクトが、以下のようにネストしちゃうので

![スクリーンショット 2022-12-01 11.34.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1401757/1fcff486-20d0-81e3-e664-5dfd4c809019.png)

ネスとした方のsrcを削除し、

```terminal:{something}/srcを削除
rm -rf {something}/src
```

中身を全部親のフォルダに吐き出し、空になった{something}は削除します。

![スクリーンショット 2022-12-01 11.37.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1401757/25b0a5cc-7a8c-dc4a-ba35-a0557254775f.png)

---

`/dist/assets`にあるpngファイルやglslファイルを、新しく生成された`/public`の方に移し替えます。

![スクリーンショット 2022-12-01 11.53.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1401757/1f197bf7-dffb-d7e5-7914-75fb72072081.png)

---
そうしたら、最後に、インストール！

```terminal:インストール
npm install
npm i phaser

終わったら、

npm run dev
```

この状態で、以下のような謎画面になっていれば、ひとまず第一段階は成功です！

![スクリーンショット 2022-12-01 11.40.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1401757/3c279e1b-7083-8eb3-bc9e-8dd471b8af1c.png)

このような謎画面になった理由は、アセット(画像など)の配置をViteに定義していないためです。

## 第二段階：配置をカスタマイズする

課題感として、今の状態だと、相互ファイルをimportするときに以下図ように相対パス(`../Object/enemy` など)で定義することになり、これはイヤです。

![スクリーンショット 2022-12-01 11.49.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1401757/3faa0996-c214-5e6a-7ed8-2f84ecd6ed41.png)

また、アセットは`/public`フォルダに配置することになるのですが、その配置関係も定義していません。

これらを解決します！

---

`vite.config.js`をプロジェクトのルートディレクトリに作り、以下の内容をカキコします。

```js:vite.config.js
import { defineConfig } from "vite"

export default defineConfig({
  	resolve: {
    	alias: {
            // src以下のフォルダへアクセスしやすくする
			'@/': `${__dirname}/src/`,
            // publicフォルダへのアクセスを短い文章で済ませたい
			"~/public": `${__dirname}/public/`
  		}
	}
})
```

tsconfig.jsonに以下の`paths`情報を、書き加えます。

```json:tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "~/*": ["public/*"]
    }
}
```

こうすることで、以下の2つのメリットを享受できます。

1:
`/src`以下のファイルは全て、<b>@から始まる擬似絶対パス</b>で参照できます。
![スクリーンショット 2022-12-01 12.10.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1401757/085c92ba-2514-1fe8-eb9a-2a9e04aca1e2.png)

2:
Phaser3での画像のロード`this.load.image()`でパスを指定する部分がより簡略化されました。
試しに、`/src/game.ts`の当該箇所を変えてみましょう。
![スクリーンショット 2022-12-01 12.14.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1401757/8076d52d-2185-2a12-61ca-399d31535ac7.png)

ここまでの変更で、もう一度`npm run dev`しましょう。
(以下のゴキゲンな画面はテンプレートの最初の状態のものです。)

![スクリーンショット 2022-12-01 12.20.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1401757/20dbe256-8430-b9f0-e992-08f9199701fc.png)

以上で、ビルドシステムの移行完了です！

# (余談)イカツすぎ、Turbopack

:::note warn
この説は、あくまで紹介程度です。
2022年12月時点で、TurbopackはNext.js以外のプロジェクトをサポートしていません。
:::

どの技術レベルのエンジニアであっても、フロントエンドエンジニアとして活躍された皆様は、必ずどこかで<b>Webpack</b>か<b>Vite</b>といったビルドシステムの恩恵を賜っています。
あなたがどこかのテンプレートを用いていて、 `npm run dev or build`とコマンドを打ったことがあれば、尚更です。

現行で、名が馳せているビルドシステムは3つあって、

* <b>Turbopack (今回のニューフェース)</b>
* Vite (割とニューフェース・これまで最も早かった)
* Webpack (老舗・みんなの英雄)

それらをビルド速度で比較した時の関係式は以下のようになってます。

Turbopack(700倍) > Vite(100倍) >> Webpack(1倍)

となっています。

Turbopack概要 ： https://turbo.build/pack
Webpackの700倍、Viteの7倍早いって、とんでもないことだと思います。

ちなみに皆さんは、7倍や700倍がどれくらいでかい倍率なのか考えたことがあるでしょうか。
考えたことがない方向けに、世界で最も分かりやすい図を用意しました。
歩行時速をWebpackのビルド速度に転換して、新幹線などのモビリティと比較した図です👇

![スクリーンショット 2022-11-01 13.36.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1401757/6f1eb003-5966-999e-536c-9e20fcaad408.png)

このことから察せられますは、<b>Turbopackはマッハの速度で移動する「戦闘機」並みということです。</b>

:::note info
<b>POINT：Turbopackは、戦闘機並みに早い</b>
:::

Turbopackロードマップ ： https://turbo.build/pack/docs/roadmap
TurbopackはまだReact(Next.js 13)のビルドにしか対応しておりません。ロードマップとして、[超Webが書きやすくてイケてるSvelteKit](https://qiita.com/n2-freevas/items/58b3e1d6bad0c6e79507)への対応など専門的なことから始まり、最終的には汎用的ビルドシステムに昇華されるようです。その際は、Phaser3もTurbopackでビルドしてみることとしましょう。


# おわり

終わりです、良いPhaser3開発を。

他の社員の記事も見てやってください！👇
https://qiita.com/advent-calendar/2022/access