debuff vs PixiJS vs Phaser:2D Web ゲームエンジンはどれを選ぶ?
ブラウザ向けに 2D ゲームを作るなら、たぶん3種類のツールから選ぶことになります。レンダラー(PixiJS)、多機能なフレームワーク(Phaser)、そしてゲームループ、テスト、リリースまでを内蔵した小さなツールキット(debuff)です。どれも良いツールです。解決する問題が違うので、正解はあなたの問題次第です。
ざっくり比較
| PixiJS | Phaser | debuff | |
|---|---|---|---|
| 何なのか | 高速な 2D レンダラー | 多機能なゲームフレームワーク | 2D ブラウザゲーム向けの小さなツールキット |
| ゲームループ、シーン、入力 | 自分で用意 | 内蔵 | 内蔵(固定ステップのクロック、シード付き乱数) |
| 物理 | 自分で用意 | 内蔵(Arcade、Matter) | タイルとの当たり判定。物理は自分で用意 |
| 成熟度とコミュニティ | 大規模、長い歴史 | 大規模、長い歴史、チュートリアル多数 | 新しい(0.2、開発初期) |
| テスト | 自分で用意 | 自分で用意 | 決定的なシナリオ、スクリーンショットのベースライン、ファジング |
| AI コーディングエージェント | コードを読む | コードを読む | MCP サーバー:開いているゲームをエージェントが遊び、調べ、テストする |
| スターターの出荷サイズ | コード次第 | 大きめ、フルフレームワーク | brotli で約 19 kB |
PixiJS:レンダラーが欲しいならこれ
PixiJS は物を速く描くためのもので、それが抜群に得意です。ゲームエンジンになろうとはしていないので、ループ、入力、オーディオ、シーン管理、ツールは自分で足すか、ライブラリを選ぶことになります。すべてを自分で制御したいときや、インタラクティブなグラフィックス、データビジュアライゼーション、広告、UI 中心のアプリなど、ゲームとは少し違うものを作るときには理想的です。
私たちのベンチマークでは、debuff のレンダラーである spryte は、同条件のワークロードで PixiJS より2〜3.8倍速くなりました。PixiJS の ParticleContainer は 60 fps で約200,000スプライトを保ち、spryte の一括描画 draw.sprites は800,000でした。通常の PixiJS の Sprite は約50,000、素の Canvas 2D は約5,000です。ベンチマークを見る。
Phaser:全部入りと大きなコミュニティが欲しいならこれ
Phaser は何年も前からあります。物理エンジン、豊富な機能、たくさんのサンプル、そしてネット上の大量の回答済みの質問があります。深いエコシステムを持つ定番のフレームワークが欲しくて、バンドルサイズやエージェント向けツールが一番の関心事でないなら、Phaser は安全でとても妥当な選択です。
debuff:手触り、テスト、エージェントを大事にするならこれ
debuff はより新しく、意図して小さく作られています。小さなゲームで難しいのはスプライトを描くことではなく、そのまわりのすべてだ、というのが debuff の賭けです。
- 手触りの調整。 速度やタイミングが開発パネルのライブスライダーになり、元に戻すこともでき、値はコードにコピーして戻せます。
- 自分で説明してくれるバグ。
updateの中でクラッシュしても、ループが黙って止まるだけでは終わりません。停止して、誰のバグかを伝え、ソースの行へリンクします。 - ゲームのためのテスト。 固定ステップのクロックとシード付き乱数で実行が決定的になるので、スクリーンショットのベースライン付きのシナリオが成り立ち、ファジングはクラッシュのたびにリプレイを渡してくれます。
- 見えるエージェント。 MCP サーバーを使えば、Claude Code などのエージェントがあなたの開いているゲームにアタッチできます。状態の読み取り、フレームのキャプチャ、入力の送信ができます。エージェントのやっていることは開発パネルで見守れます。
- 小さなビルド。 スターターは brotli で約 19 kB で出荷され、開発専用のコードが本番に紛れ込むとビルドが失敗します。
正直なトレードオフとして、debuff はまだ 0.2 です。API は変わりますし、剛体物理は内蔵しておらず、コミュニティもこれからです。今すぐ安定性が必要なら、Phaser のほうが安全です。
1分で debuff を試す
npm create debuff@latest my-game
cd my-game
npm install
npm run devそれぞれのエンジンをもっと詳しく知りたい方は debuff vs Phaser と debuff vs PixiJS、あるいはコーディングエージェントから見た比較をどうぞ。なぜ debuff なのかにも詳しく書いています。