Phaser 4がついに正式リリース

2026年4月10日、オープンソースの2Dゲーム開発フレームワーク 「Phaser 4」 が正式リリースされました。

"After years of development, Phaser 4 is here. This is the biggest release in Phaser's history."
（数年の開発を経て、Phaser 4が完成しました。Phaserの歴史上、最大のリリースです。）

Phaser 4はWebGLレンダラーをゼロから完全に再設計しつつ、v3で親しまれたAPIはそのまま維持するという、野心的なメジャーアップデートです。ライセンスは引き続き無料・オープンソースです。

Phaser 4の主要な新機能

1. 新レンダーノードアーキテクチャ

v3の「パイプラインシステム」に代わり、ノードベースのレンダラーが導入されました。

• 各レンダーノードが単一のタスクを担当するクリーンな設計
• WebGLステートを完全に管理 — 状態の競合やリークがなくなる
• コンテキスト復元が組み込み — タブ切り替え時などにWebGLコンテキストが失われても自動復帰
• 全体的に高速・安定・拡張しやすいレンダリングエンジンに

v3ではWebGLの状態管理が複雑で、カスタムレンダリングを追加する際に問題が起きやすかったのですが、ノードベース設計によりこれが根本的に解決されています。

2. SpriteGPULayer — 100万スプライトを1ドローコール

Phaser 4の目玉機能がこの SpriteGPULayer です。

• 100万個以上のスプライトを1回のドローコールで描画
• 通常のスプライト描画と比較して最大100倍高速
• オブジェクト定義をGPU上にパックし、カスタム頂点シェーダーで描画
• CPU計算とGPUアップロードをスキップする設計
• 1スプライトあたりの実行時コストは通常スプライトの約1%
• メモリコストは1スプライトあたりCPU/GPU各168バイト
• GPU駆動のアニメーション（位置、回転、スケール、アルファ、ティント、フレーム）に対応

通常のPhaser描画でも数万スプライトは快適に動作しますが、SpriteGPULayerなら100万スプライト以上を処理できます。パーティクルシステム、大量の弾幕、広大なマップのオブジェクト配置など、これまでWeb技術では厳しかった表現が可能になります。

3. TilemapGPULayer — 巨大タイルマップの一括描画

TilemapGPULayerは、タイルマップレイヤー全体を単一のクアッド（四角形）として描画します。

• 最大4096 × 4096タイルをパフォーマンスペナルティなしでレンダリング
• 巨大なオープンワールドスタイルの2Dマップに最適

4096 × 4096 = 約1,678万タイルをパフォーマンス低下なく描画できるのは驚異的です。

4. 統合フィルタシステム

v3では別々だったFX（エフェクト）とマスクが、1つのフィルタシステムに統合されました。

任意のゲームオブジェクトやカメラにフィルタを適用でき、制限がありません。

標準搭載のフィルタは以下の通りです。

| フィルタ | 効果 | |---|---| | Blur | ぼかし | | Glow | 発光 | | Shadow | ドロップシャドウ | | Pixelate | ピクセル化 | | ColorMatrix | 色行列変換 | | Bloom | ブルーム（光のにじみ） | | Vignette | ビネット（周辺減光） | | Wipe | ワイプトランジション | | ImageLight | 画像ベースライティング | | GradientMap | グラデーションマップ | | Quantize | 色の量子化 | | Blend | ブレンド |

5. ティントシステムの刷新

ティント（色付け）に6つのモードが追加されました。

• MULTIPLY — 乗算
• FILL — 塗りつぶし
• ADD — 加算
• SCREEN — スクリーン
• OVERLAY — オーバーレイ
• HARD_LIGHT — ハードライト

Photoshopのレイヤーブレンドモードのように、スプライトへの色の乗せ方を細かく制御できます。

6. 改善されたライティング

ライティングのAPIが大幅にシンプルになりました。

sprite.setLighting(true);

たった1行でライティングが有効になります。セルフシャドウや明示的なライトの高さ設定もサポートされ、ほとんどのゲームオブジェクトで利用可能です。

7. 新しいゲームオブジェクト

| オブジェクト | 用途 | |---|---| | Gradient | グラデーション描画 | | Noise（Cell 2D/3D/4D） | セルラーノイズ | | Noise（Simplex 2D/3D） | シンプレックスノイズ | | CaptureFrame | フレームキャプチャ | | Stamp | スタンプ描画 |

ノイズ系のゲームオブジェクトは、プロシージャル生成（地形、テクスチャ、パターンの自動生成）に活用できます。

8. シェーダーの改善

シェーダーAPIが設定ベースに刷新され、pragma GLSLディレクティブがサポートされました。TileSpriteではアトラスフレームや回転もサポートされています。

9. AIエージェント対応

興味深い特徴として、リポジトリに28のスキルファイルが同梱されています。Phaserの各サブシステムをカバーしており、AIコーディングエージェントがPhaser 4のコードを生成する際に参照できる設計です。

さらに、v3からv4への移行スキルも含まれており、AIアシスタントを使った移行作業がスムーズに行えます。

v3からの移行

Phaser 4はAPIの互換性を維持する方針で設計されています。レンダリングアーキテクチャは完全に変わりましたが、ゲームロジック側のAPIは大きく変わっていません。

公式リポジトリにはマイグレーションガイドが用意されています。

• APIドキュメント: docs.phaser.io
• GitHub: phaserjs/phaser
• Discordコミュニティでのサポートあり

Phaser 4のインストール

npm install phaser

または公式ダウンロードページからCDN経由でも利用可能です。

まとめ

Phaser 4は「2Dゲームフレームワーク」の枠を超えた進化を遂げました。

| 特徴 | 内容 | |---|---| | レンダラー | ノードベースに完全再設計 | | スプライト性能 | 100万スプライト / 1ドローコール | | タイルマップ | 4096×4096タイルをペナルティなし描画 | | エフェクト | 12種類以上の統合フィルタ | | ライティング | 1行で有効化、セルフシャドウ対応 | | ライセンス | 無料・オープンソース | | AI対応 | 28スキルファイル同梱 |

ブラウザベースの2Dゲーム開発において、Phaserは長年のデファクトスタンダードです。v4のリリースにより、パフォーマンスの制約でネイティブエンジンを選んでいた領域にもWebが手を伸ばせるようになります。

個人的には、SpriteGPULayerで100万スプライトが動くデモを見て「これ本当にブラウザで動いてるのか」と驚きました。2Dゲーム開発に興味がある方は、ぜひ触ってみてください。