【初心者向け】Phaser 3でHTML5ゲーム開発環境を構築する方法

threejs-phaser
2025.07.29

Phaserは、HTML5で2Dゲームを作るための人気のJavaScriptフレームワークです。
この記事では、Webpack + Babel を使って Phaser 3 の開発環境を構築する方法を解説します。
環境構築の手順からフォルダ構成、必要な設定ファイルまで完全カバーします。

Phaserとは

PhaserはJavaScriptで動作するゲームフレームワークで、
ブラウザ上で動作する2Dゲームを簡単に作成できます。
特にPhaser 3は高性能なレンダリングと豊富なAPIが魅力です。

開発環境の準備

  • Node.js（推奨: 最新のLTS版）
  • npm（Node.jsに同梱）
  • コードエディタ（VS Code推奨）

フォルダ構成の準備

今回の最終フォルダ構成は以下の通りです。

PhaserGame/
├─ public/                           # 開発サーバが直接配信する静的ファイル置き場
│  └─ index.html                     # ゲームのHTMLエントリ（bundle.js を読み込む）
│
├─ assets/                           # ゲームで使うすべての素材ファイル
│  ├─ images/                        # 背景やUIなど単体画像
│  ├─ atlases/                       # スプライトアトラス画像とJSON
│  ├─ sprites/                       # 小物スプライト（単独ファイル）
│  ├─ tilemaps/                      # マップ関連素材
│  │  ├─ tiled/                      # Tiledエディタで作成したマップデータ
│  │  └─ tilesets/                   # タイルセット画像
│  ├─ audio/                         # 音声素材
│  │  ├─ music/                      # BGM
│  │  └─ sfx/                        # 効果音
│  ├─ fonts/                         # フォント素材
│  │  ├─ bitmap/                     # ビットマップフォント
│  │  └─ web/                        # Webフォント
│  ├─ shaders/                       # GLSLシェーダー
│  ├─ videos/                        # 動画素材
│  ├─ particles/                     # パーティクル設定ファイル
│  ├─ anims/                         # アニメーション定義JSON
│  ├─ prefabs/                       # 事前配置オブジェクト定義
│  ├─ packs/                         # アセットパック（シーン単位でロード）
│  │  ├─ boot.json
│  │  ├─ mainmenu.json
│  │  ├─ overworld.json
│  │  └─ battle.json
│  └─ _licenses/                     # 素材のライセンス情報
│
├─ data/                             # ゲームの外部データ類
│  ├─ configs/                       # 難易度・パラメータ設定
│  ├─ balance/                       # ダメージ式・成長テーブル
│  ├─ dialogue/                      # セリフ・会話データ
│  ├─ localization/                   # 多言語対応データ
│  └─ save_schemas/                   # セーブデータ構造定義
│
├─ src/                              # ゲームのソースコード
│  ├─ app/                           # エントリーポイント・初期化処理
│  │  └─ main.js
│  ├─ core/                          # ゲーム全体の基盤機能
│  │  ├─ BootScene.js                # 起動時のローダーシーン
│  │  ├─ events/                     # グローバルイベント管理
│  │  └─ audio/                      # 音声再生・管理関連
│  │     └─ sePlayer.js
│  ├─ scenes/                        # 各ゲーム画面のシーン群
│  │  ├─ MainMenu/                   # タイトル・メニュー関連
│  │  │  ├─ NewGameScene.js
│  │  │  └─ OpeningScene.js
│  │  ├─ Overworld/                  # フィールド・マップ画面
│  │  │  └─ MainScene.js
│  │  └─ Battle/                     # 戦闘画面
│  │     └─ BattleScene.js
│  ├─ entities/                      # プレイヤー・敵などのキャラクターやオブジェクト
│  │  ├─ player/                     # プレイヤー関連
│  │  │  ├─ Player.js
│  │  │  └─ PlayerStatus.js
│  │  └─ enemies/                    # 敵キャラクター関連
│  │     ├─ EnemyLibrary.js
│  │     └─ EnemyStatus.js
│  ├─ ui/                            # ユーザーインターフェイス関連
│  │  └─ components/                 # UI部品
│  │     ├─ EncounterChecker.js
│  │     ├─ GridHelper.js
│  │     ├─ StatusMenu.js
│  │     └─ VolumeDisplay.js
│  ├─ state/                         # ゲームの状態管理
│  │  └─ continueGame.js
│  ├─ config/                        # 定数・設定ファイル
│  │  └─ config.js
│  ├─ utils/                         # 汎用ユーティリティ
│  ├─ services/                      # 永続化・ネットワーク・分析
│  │  ├─ storage/
│  │  ├─ net/
│  │  └─ analytics/
│  ├─ systems/                       # AI・戦闘・移動などの処理システム
│  │  ├─ ai/
│  │  ├─ combat/
│  │  ├─ movement/
│  │  ├─ interaction/
│  │  └─ effects/
│  ├─ types/                         # 型定義
│  └─ tests/                         # テストコード
│
├─ tools/                            # 開発用スクリプトやツール
│  ├─ texturepack/                   # アトラス生成スクリプト
│  ├─ audio/                         # 音声変換スクリプト
│  └─ build_docs/                    # ドキュメント自動生成
│
├─ package.json                      # npm依存関係とスクリプト
├─ webpack.config.js                 # Webpack設定（開発サーバ・バンドル設定）
└─ .babelrc                          # Babelの設定ファイル
Bash

一括作成する

ゲーム開発をスムーズに始めるためには、最初に必要なフォルダ構成を一気に作成してしまうのが効率的です。
以下のコマンドを実行すれば、アセット用・シーン用・設定用などのフォルダが一括で作成されます。

REM ===== フォルダ作成 =====
md PhaserGame\public
md PhaserGame\assets\images PhaserGame\assets\atlases PhaserGame\assets\sprites PhaserGame\assets\tilemaps\tiled PhaserGame\assets\tilemaps\tilesets PhaserGame\assets\audio\music PhaserGame\assets\audio\sfx PhaserGame\assets\fonts\bitmap PhaserGame\assets\fonts\web PhaserGame\assets\shaders PhaserGame\assets\videos PhaserGame\assets\particles PhaserGame\assets\anims PhaserGame\assets\prefabs PhaserGame\assets\packs PhaserGame\assets\_licenses PhaserGame\data\configs PhaserGame\data\balance PhaserGame\data\dialogue PhaserGame\data\localization PhaserGame\data\save_schemas PhaserGame\src\app PhaserGame\src\core\events PhaserGame\src\core\audio PhaserGame\src\scenes\MainMenu PhaserGame\src\scenes\Overworld PhaserGame\src\scenes\Battle PhaserGame\src\entities\player PhaserGame\src\entities\enemies PhaserGame\src\ui\components PhaserGame\src\state PhaserGame\src\config PhaserGame\src\utils PhaserGame\src\services\storage PhaserGame\src\services\net PhaserGame\src\services\analytics PhaserGame\src\systems\ai PhaserGame\src\systems\combat PhaserGame\src\systems\movement PhaserGame\src\systems\interaction PhaserGame\src\systems\effects PhaserGame\src\types PhaserGame\src\tests PhaserGame\tools\texturepack PhaserGame\tools\audio PhaserGame\tools\build_docs

REM ===== 空ファイル作成 =====
type nul > PhaserGame\public\index.html
type nul > PhaserGame\webpack.config.js
type nul > PhaserGame\src\app\main.js
type nul > PhaserGame\src\core\BootScene.js
type nul > PhaserGame\src\core\audio\sePlayer.js
type nul > PhaserGame\src\scenes\MainMenu\NewGameScene.js
type nul > PhaserGame\src\scenes\MainMenu\OpeningScene.js
type nul > PhaserGame\src\scenes\Overworld\MainScene.js
type nul > PhaserGame\src\scenes\Battle\BattleScene.js
type nul > PhaserGame\src\entities\player\Player.js
type nul > PhaserGame\src\entities\player\PlayerStatus.js
type nul > PhaserGame\src\entities\enemies\EnemyLibrary.js
type nul > PhaserGame\src\entities\enemies\EnemyStatus.js
type nul > PhaserGame\src\ui\components\EncounterChecker.js
type nul > PhaserGame\src\ui\components\GridHelper.js
type nul > PhaserGame\src\ui\components\StatusMenu.js
type nul > PhaserGame\src\ui\components\VolumeDisplay.js
type nul > PhaserGame\src\state\continueGame.js
type nul > PhaserGame\src\config\config.js
Bash

プロジェクトの初期化

Node.jsベースで Phaser プロジェクトの土台を作成する。

手順

  1. ターミナル（コマンドプロンプト or PowerShell）を開く
  2. 以下のコマンドを順に実行：
cd D:\PhaserGame
npm init -y
Bash

👉 package.json が作成されます。今後このファイルで依存関係（Phaser など）を管理します。

Phaser のインストール

npm install phaser
Bash

これにより node_modules/phaser/ が生成され、package.json の dependencies にも記録されます。

📝 この記事では Phaser 3 系を前提に解説を進めます。
将来的に Phaser 4 や 5 が登場していたとしても、3 系とは構文や設計方針が大きく異なる可能性がありますのでご注意ください。

npm install phaser@3.87.0
Bash

利用可能なバージョンをしらべてみると参考になるかと思います。

npm view phaser versions
Bash

開発用パッケージ（devDependencies）をインストール

ゲーム開発環境を整えるために、Babel・Webpack 関連の開発用パッケージをインストールします。
これらは本番環境に不要なため -D（–save-dev） オプションを付けてインストールします。

npm install -D @babel/core @babel/preset-env babel-loader webpack webpack-cli webpack-dev-server
Bash
  • @babel/core / @babel/preset-env
    最新のJavaScript構文を古いブラウザでも動く形に変換（トランスパイル）するためのツール。
  • babel-loader
    Webpack と Babel を連携させるためのローダー。
  • webpack / webpack-cli
    複数のJavaScriptやCSS、画像などをまとめるビルドツール。
  • webpack-dev-server
    ローカル開発用のサーバーを立ち上げ、変更を即時反映（ホットリロード）できる仕組み。

Webpack設定

この設定ファイル（PhaserGame/webpack.config）は、開発用のビルド設定を記述します。
ここではエントリーポイント、出力先、ローカルサーバー設定を定義しています。

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/app/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  },
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
    },
    compress: true,
    port: 8080,
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
};
JavaScript
  • public フォルダに index.html や画像などを置くと、直接アクセス可能です。
  • bundle.js は自動生成されるため、自分で編集しないこと。
  • mode: ‘development’ を ‘production’ に切り替えると、本番用に最適化されます。

HTMLファイル作成

public/index.html はゲーム画面を表示するための土台となるHTMLです。
PhaserのゲームはJavaScriptで動くため、ここでは最低限のレイアウトと bundle.js の読み込みだけを行います。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Phaser Game</title>
  <style>
    body{margin:0;padding:0;background:#979797;display:flex;justify-content:center;align-items:center;height:100vh}
    canvas{display:block}
  </style>
</head>
<body>
  <script src="/bundle.js"></script>
</body>
</html>
HTML

ローカルサーバーで動作確認

以下のコマンドでローカルサーバーを起動します。

npx webpack serve
Bash

ブラウザで http://localhost:8080 にアクセスし、エラーがなければOKです。

まとめ

この記事では、Phaser 3 を Webpack + Babel 環境で動かすための手順を解説しました。
この環境をベースに、ゲームロジックやアセットを追加していくことで本格的な2Dゲームを制作できます。

タイトルとURLをコピーしました