Phaserでブロック崩しゲームを作る

ブラウザでゲームを作るとき今どんなゲームエンジンがあるのか調べたところ、Phaserが良さそうだったので調べてブロック崩しゲームを作った。

なぜブロック崩しゲームなのかは、1画面で完結して画像リソースもシンプルなので作りやすい。お試しに最適と思ったから。

作ったものはこちら。

• github https://github.com/m-szk/block_scrabble
• ブロック崩しゲーム https://mszkmoto.com/block_scrabble

以下、作った手順。

まずはPhaserのチュートリアルをやる

Phaserの公式サイト https://phaser.io

英語だけどブラウザで翻訳して、とりあえずチュートリアルをやればなんとなく分かる。

モジュールバンドラーを使う（Vite）

モジュールバンドラーを入れたほうが、作ったゲームをアップロードするときや日々の開発で色々便利だろうと思ってViteを使う。

Viteの公式サイト https://ja.vitejs.dev

ここに書いてあるとおり

npm create vite@latest

これだけで Vite Project ができる。今回はフレームワークを使わない。TypeScriptで作るので、VanillaとTypeScriptを選択。 Project nameは好きに名前をつける。

✔ Project name: … vite-project
✔ Select a framework: › Vanilla
✔ Select a variant: › TypeScript

こんな感じ。あとはプロジェクトのディレクトリに移動して npm run dev なりするとWebサーバーが立ち上がってブラウザで画面が確認できる。この時点でwebpackより楽だなと思った。

Phaserの準備

ここに書いてあるとおり

npm install phaser

これで準備終わり。

ブロック崩しゲームを作る

作り方はChatGPTに聞くと教えてくれる。提案されたコードそのまま使うとTypeScriptの型まわりでエラーが出たりするので、そこは人間の手で直す。いやー、AIすごい。

補足

• index.d.tsはpngをimportするために用意している。
• vite.config.tsで assetsInlineLimit: 0 にしているが、サイズの小さいpngを3つしか使ってないので無くても良い。
  • https://v2–vitejs-docs-ja.netlify.app/guide/assets.html#importing-asset-as-url
• buildしたものをWebサーバーに配置するとき、配置場所によってはbaseオプションの指定が必要。
  • https://v2–vitejs-docs-ja.netlify.app/guide/build.html#public-base-path
• Node.js v22.8.0

まとめ

ChatGPTすごい。