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

記事内に広告が含まれています

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

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

作ったものはこちら。

以下、作った手順。

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

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

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

モジュールバンドラーを入れたほうが、作ったゲームをアップロードするときや日々の開発で色々便利だろうと思って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より楽だなと思った。

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