ピン留め · 2026年10月17日
コーディングエージェントとブラウザゲームエンジン：debuff はどう違うのか
debuff でコーディングエージェントが実際にできること（MCP、ライブアタッチ、メモ、リプレイ、シナリオ、ファズ）と、Phaser、PixiJS、KAPLAY、Excalibur、Godot が現在エージェント向けに提供しているもの。
ブログ
コーディングエージェント
- Claude Code と debuff でゲームを作る
実践ウォークスルー：Claude Code で debuff のゲームをセットアップし、気になった瞬間をフラグして game_replay でエージェントに再現させ、パラメータを調整し、シナリオとファズで検証します。
- コーディングエージェントとブラウザゲームエンジン：debuff はどう違うのか
debuff でコーディングエージェントが実際にできること（MCP、ライブアタッチ、メモ、リプレイ、シナリオ、ファズ）と、Phaser、PixiJS、KAPLAY、Excalibur、Godot が現在エージェント向けに提供しているもの。
- AI コーディングエージェントでブラウザゲームを作る方法
Claude Code などのコーディングエージェントで 2D ブラウザゲームを作りましょう。エージェントはゲームを遊び、状態を読み、自分の変更を自分で確かめられます。クリエイティブな判断はあなたの手に残ります。
spryte
- ブラウザで動くスプライトが遅いのはなぜか
Web ページが何千もの動く画像を描くとき、時間はどこに消えているのか。定番のやり方がオブジェクトごとにコストを払う理由と、オープンソースの 2D レンダラー spryte がその処理を JavaScript の外に追い出す方法を、わかりやすく解説します。誰でも実行できるオープンなベンチマーク付きです。
- spryte 登場：debuff の 2D レンダラーが単体ライブラリになりました
spryte は debuff の中で動いていた WebGL2 レンダラーを、小さな MIT ライブラリとして切り出したものです。イミディエイトモードのスプライト、大量のパーティクル、レンダーターゲット、シェーダーに対応し、Canvas 2D へのフォールバックも備えています。ベンチマークでは PixiJS より 2〜3.8 倍速く、サイズは約 9 分の 1 です。
- draw.sprites でパーティクルと弾を描く：何千ものスプライトを 1 回の呼び出しで
spryte の一括描画 API でパーティクル、弾、群れを描く方法。Float32Array に入れた位置、コピーごとのスケール・回転・色の指定、そのコスト、そして draw.sprite を使うべき場面を解説します。
- spryte でポストプロセス：レンダーターゲットとカスタムシェーダー
シーンをオフスクリーンのレンダーターゲットに描き、それを自作のフラグメントシェーダーに通して描画しましょう。spryte でのグロー、CRT、ディゾルブ、パレットエフェクト、そしてターゲットに引き継がれるもの・引き継がれないものを解説します。
- spryte を単体で使う：どんな canvas にも使える 2D レンダラー
ゲームフレームワークなしで spryte をセットアップしましょう。レンダラーの作成、高 DPI 画面に合わせた canvas のサイズ設定、フレームループ、画像の読み込み、コンテキストロストへの対応、後片付けまで。
Keiko
- Keiko のご紹介：Web ゲームのための速くて決定的なテスト
Keiko は本物の Web ゲームをブラウザなしで Node 上で、仮想クロックで動かします。タイミング、動き、ルールを数ミリ秒でテストできます。Phaser、PixiJS、KAPLAY、Excalibur、three.js、debuff で動きます。
- ブラウザなしで Phaser のゲームをテストする方法
Keiko を使って、Phaser 4 のゲームに速くて決定的なテストを書きましょう。本物のゲームを Node で動かし、キーを押し続け、クリックし、移動やタイミングを確かめます。ブラウザは不要です。
- ゲームの手触りをテストする：フレームではなくルールを検証しよう
調整しても壊れないゲームテストの書き方。until で条件を満たすまでの時間を測り、during で不変条件を確かめ、動きを時系列でトレースし、パラメータを総当たりします。Keiko を使って解説します。
- 決定的なリプレイとファジングでゲームをテストする
ゲームはテストしにくいものですが、決定的なゲームなら話は別です。固定ステップのクロックとシード付き乱数が、2D Web ゲームのシナリオテスト、正確なリプレイ、ファジングによるテストプレイをどう可能にするのかを解説します。
Myaku
- Myaku のご紹介：Web ゲームがカクつく理由を教えてくれるフレームプロファイラー
Myaku は Web ゲームが描くすべてのフレームを見守り、プレイヤーが感じるヒッチを見つけ、ひとつずつ平易な言葉で説明します。あなたのスクリプトとその場所、ガベージコレクション、GPU へのアップロード、シェーダーのコンパイル、ブラウザのスロットリング。import 1行で、どのエンジンでも。
- three.js のフレーム落ち：シェーダーコンパイルのカクつきとテクスチャのアップロードを Myaku で捕まえる
three.js のシーンが、何かが初めて現れたときにカクつくのはなぜでしょう？ シェーダーのコンパイル、テクスチャのアップロード、ガベージコレクション。Web ゲーム向けの無料フレームプロファイラー Myaku が、フレームごとに見つけて説明します。
- Phaser のゲームがカクつくのはなぜ？ Myaku でフレーム落ちの原因を探す
Phaser 3 や Phaser 4 のゲームがフレームを落とす理由を突き止めましょう。どのシーンの update が遅いのか、テクスチャのアップロード、シェーダーのコンパイル、ガベージコレクション、それともブラウザなのか。Web ゲーム向けの無料フレームプロファイラー Myaku なら import 1 行で済みます。
- PixiJS のゲームがカクつくのはなぜ？ Myaku でフレーム落ちの原因を探す
PixiJS 8 のゲームがフレームを落とす理由を突き止めましょう。ticker の更新か描画か、テクスチャのアップロード、ガベージコレクション、それともブラウザなのか。Myaku は import 1 行で自動的に Pixi にフックします。
比較：Webライブラリ
- debuff vs Babylon.js：2D ツールキットと本格 3D エンジン
ブラウザゲーム向けに debuff と Babylon.js を比較：2D と 3D、Playground や Inspector といった組み込みツール、物理、ダウンロードサイズ、テスト、コーディングエージェント対応。
- debuff vs Excalibur：Web 向け TypeScript ゲームエンジン 2 つを比較
2D ブラウザゲーム向けに debuff と Excalibur.js を比較：組み込み機能、サイズ、テストツール、コーディングエージェント対応、そして Excalibur が先を行く点。
- debuff vs KAPLAY：2D ブラウザゲーム向けの小さなツールキット 2 つ
debuff と KAPLAY（Kaboom.js の後継）を比較：API のスタイル、サイズ、プレイグラウンド、テスト、コーディングエージェント対応、それぞれが合う場面。
- debuff vs LittleJS：ブラウザゲーム向けの小さなエンジン 2 つ
debuff と LittleJS を比較：機能、サイズ、ゲームジャムへの向き、プロシージャルサウンド、レベル編集、テスト、コーディングエージェント対応。
- debuff vs melonJS：オープンソースの HTML5 ゲームエンジン2つを比べる
2D ブラウザゲーム向けに debuff と melonJS を比較。レンダラー、Tiled 対応、物理、サイズ、テスト、コーディングエージェント対応を見ていきます。
- debuff vs Phaser：2D ブラウザゲームにはどちらを使うべき？
2D Web ゲーム向けに debuff と Phaser を比較。機能、成熟度、エディタ、バンドルサイズ、テスト、コーディングエージェント対応、そして Phaser のほうが向いている場面も紹介します。
- debuff vs PixiJS vs Phaser：2D Web ゲームエンジンはどれを選ぶ？
2D ブラウザゲーム向けに debuff、PixiJS、Phaser を正直に比較。それぞれの正体、バンドルサイズ、描画速度、ツール、AI エージェント対応について。
- debuff vs PixiJS：レンダラーか、ゲームツールキットか
2D ブラウザゲーム向けに debuff と PixiJS を比較。それぞれに含まれるもの、実測したスプライトのスループット、バンドルサイズ、テスト、コーディングエージェント対応について。
- debuff vs three.js：3D ライブラリが 2D ゲームには向かないとき
ブラウザゲーム向けに debuff と three.js を比較。3D 描画ライブラリと 2D ゲームツールキットの違い、サイズ、ゲーム向け機能、テスト、コーディングエージェント対応について。
比較：エンジンとエディター
- Web ゲーム向けに debuff と Cocos Creator を比較
debuff と Cocos Creator を比較：TypeScript のツールキットと、エディタ付きの TypeScript エンジン。Web とモバイルのビルド、テスト、コーディングエージェント対応。
- debuff vs Construct 3：コードファーストのツールキットか、ブラウザで動くエディタか
2D ブラウザゲーム向けに debuff と Construct 3 を比較：イベントシートと TypeScript、料金と無料版の制限、HTML5 エクスポート、テスト、コーディングエージェント対応。
- 2D Web ゲーム向けに debuff と Defold を比較
2D ブラウザゲーム向けに debuff と Defold を比較：Lua とエディタか TypeScript か、HTML5 エクスポート、ライセンス、テスト、コーディングエージェント対応。
- 2D ブラウザゲーム向けに debuff と GameMaker を比較
Web 向け 2D ゲームで debuff と GameMaker を比較：GML と IDE か TypeScript か、HTML5 と GX.games へのエクスポート、料金、テスト、AI ツール。
- debuff vs GDevelop：ブラウザゲームを作るオープンソースの 2 つの道
debuff と GDevelop を比較：コードとノーコードのイベント、組み込みの AI エージェントと手持ちのコーディングエージェント、公開、テスト、料金。
- ブラウザゲーム向けに debuff と Godot を比較
2D ブラウザゲーム向けに debuff と Godot の Web エクスポートを比較：エディタ、機能、Web エクスポートの制約、テスト、コーディングエージェント対応、それぞれの使いどころ。
- debuff vs PICO-8 と TIC-80：ファンタジーコンソールとウェブのツールキット
ファンタジーコンソールの PICO-8 と TIC-80 を、小さなブラウザゲーム向けに debuff と比較。創造的な制約、内蔵エディタ、共有、ウェブ書き出し、テストについて。
- ブラウザゲームで比べる debuff vs Unity
2D ブラウザゲーム向けに debuff と Unity の Web プラットフォームを比較。エディタとエコシステム、ウェブビルドの制約、WebGPU の状況、価格、テスト、AI エージェント対応について。
ガイド
- ブラウザでピクセルアートのプラットフォーマーを作る方法
どのブラウザでも動く 2D ピクセルアートのプラットフォーマーを作りましょう。Tiled や LDtk のタイルマップ、くっきりしたピクセル、そしてコヨーテタイムと先行入力で気持ちよく跳べるジャンプ。
歴史
- canvas から WebGPU へ：ブラウザがゲームプラットフォームになるまで
ブラウザゲームを支えるウェブ API の短い歴史。canvas、requestAnimationFrame、WebGL、Web Audio、asm.js、WebAssembly、WebGPU と、それぞれが可能にしたこと。
- ゲームジャムと小さなゲーム：Ludum Dare から js13kGames まで
Ludum Dare、Global Game Jam、js13kGames、GMTK Game Jam といったゲームジャムが、ブラウザゲームや itch.io とともにどう育ってきたか。そしてジャムの応募作から生まれた商業ゲームについて。
- Flash ゲームとポータルの時代：ブラウザゲームが受け継いだもの
Flash と、Newgrounds、Miniclip、Kongregate、Armor Games といったポータルがブラウザゲームをどう形づくったか。Flash がどう終わり、そのゲームがどう保存され、HTML5 ゲームが何を受け継いでいるのかを振り返ります。