Webブラウザゲーム開発

フレームワークの選択とブラウザ固有の原則。

---

1. フレームワークの選択

デシジョンツリー

What type of game?
│
├── 2D Game
│   ├── Full game engine features? → Phaser
│   └── Raw rendering power? → PixiJS
│
├── 3D Game
│   ├── Full engine (physics, XR)? → Babylon.js
│   └── Rendering focused? → Three.js
│
└── Hybrid / Canvas
    └── Custom → Raw Canvas/WebGL

比較表（2025年）

フレームワーク	タイプ	最適な用途
Phaser 4	2D	フル機能のゲーム
PixiJS 8	2D	レンダリング、UI
Three.js	3D	ビジュアライゼーション、軽量
Babylon.js 7	3D	フルエンジン、XR

---

2. WebGPUの採用

ブラウザ対応状況（2025年）

ブラウザ	対応状況
Chrome	✅ v113以降
Edge	✅ v113以降
Firefox	✅ v131以降
Safari	✅ 18.0以降
合計	全体の約73%

判断基準

• 新規プロジェクト: WebGPUをWebGLフォールバック付きで使用
• レガシー対応: WebGLから開始
• 機能検出: navigator.gpuをチェック

---

3. パフォーマンス原則

ブラウザの制約

制約	戦略
ローカルファイルアクセス不可	アセットバンドリング、CDN
タブスロットリング	非表示時に一時停止
モバイルデータ制限	アセットの圧縮
オーディオ自動再生	ユーザーインタラクション必須

最適化の優先順位

1. アセット圧縮 - KTX2、Draco、WebP
2. 遅延読み込み - オンデマンド読み込み
3. オブジェクトプーリング - ガベージコレクション回避
4. ドローコールバッチング - 状態変更の削減
5. Web Workers - 重い計算の処理分離

---

4. アセット戦略

圧縮フォーマット

タイプ	フォーマット
テクスチャ	KTX2 + Basis Universal
オーディオ	WebM/Opus（フォールバック: MP3）
3Dモデル	glTF + Draco/Meshopt

読み込み戦略

フェーズ	読み込み対象
起動時	コアアセット、2MB未満
ゲームプレイ中	オンデマンドストリーミング
バックグラウンド	次のレベルのプリフェッチ

---

5. ゲーム向けPWA

メリット

• オフラインプレイ
• ホーム画面へのインストール
• フルスクリーンモード
• プッシュ通知

必要条件

• キャッシング用のService Worker
• Webアプリマニフェスト
• HTTPS

---

6. オーディオ処理

ブラウザの要件

• AudioContextはユーザーインタラクションが必須
• 最初のクリック/タップでAudioContextを作成
• コンテキストが一時停止状態の場合は再開

ベストプラクティス

• Web Audio APIを使用
• オーディオソースをプール化
• 一般的な音声をプリロード
• WebM/Opusで圧縮

---

7. アンチパターン

❌ してはいけないこと	✅ すべきこと
すべてのアセットを事前読み込み	段階的な読み込み
タブの可視性を無視	非表示時に一時停止
オーディオ読み込みをブロック	オーディオの遅延読み込み
圧縮をスキップ	すべて圧縮
高速接続を想定	低速ネットワークに対応

---

覚えておくこと: ブラウザは最もアクセスしやすいプラットフォームです。その制約を尊重してください。

使用時期

このスキルは、概要に記載されたワークフローまたはアクションを実行する場合に適用可能です。

制限事項

• このスキルは、タスクが上記のスコープと明確に一致する場合のみ使用してください。
• 出力を環境固有の検証、テスト、または専門家によるレビューの代替物として扱わないでください。
• 必要な入力、権限、安全性の境界、または成功基準が不足している場合は、説明を求めてください。