なぜ debuff なのか
2D の Web ゲームは、<canvas> と JavaScript だけでも作れます。debuff はあえて、その標準のすぐそばにとどまっています。どのゲームも結局作り直すことになる部分と、ゲームが実際に何をしているのかをあなた（とエージェント）に見せるツールを足しているだけです。
ひとことで言うと
| 素の canvas + JS | debuff | |
|---|---|---|
| 60 fps で描けるスプライト数 | 約 5,000（Canvas 2D） | 1 回ずつ呼んで 約 50,000〜100,000、まとめて描けば 約 800,000（spryte、WebGL2 と Canvas 2D フォールバック） |
| 小さなゲームの出荷サイズ | 書いた分だけ | スターターで起動時の JavaScript が 18.8 kB（brotli）。ランタイム、入力、オーディオ、ゲーム本体込み |
update でのクラッシュ | ループが黙って止まる | ゲームが止まり、誰のバグか を伝え、該当するソースの行にリンク |
| ジャンプの高さの調整 | 編集、保存、リロード、もう一度プレイ | 遊びながらスライダーをドラッグ、元に戻す、結果をコピー |
| 「なんでカクついたの？」 | プロファイラーを開いて推測 | 赤いバーをクリック：落ちたフレーム、原因、あなたのコードのせいかどうか |
| AI エージェントとの作業 | コードを読んで推測する | ゲームをプレイし、状態とエラーを読み、何をしたかがあなたにも見える |
本来なら自分で書くはずだったもの
canvas のゲームは、どれも同じ配管を育てることになります。debuff はそれを小さくツリーシェイキングできるパッケージとして提供するので、払うのは import した分だけです。
- ちゃんと動くループ。 補間付きの固定ステップシミュレーション、シード付き乱数、非表示時の一時停止、ヒットストップ、タイムスケール、動きを減らす設定への対応。
- くっきりしたスケーリング。 fit または整数倍のスケーリング、devicePixelRatio の変化、GPU コンテキストの喪失と復帰。
- 速い描画。 スプライト、テキスト、図形、クリッピング、ブレンドモードを 1 つのバッチ API で。1 バッチにつき最大 8 枚のテクスチャをバインドし、ホットパスではメモリを確保しません。
- タップを取りこぼさない入力。 キーボード、ポインター、タッチ、ゲームパッドに、ステップ単位の押した・離したの判定とアクションのバインディング。
- ちゃんと鳴るオーディオ。 Web Audio のバス、自動再生のロック解除、ゲームジャムの速さで効果音を作れる小さなパラメトリックシンセ。
- パイプラインを保守しなくていいアセット。 マニフェストは自動生成され、スプライトアトラスは自動でパッキングされ、参照したファイルだけが出荷されます。
- レベル。 Tiled と LDtk から読み込み、カリング付きの描画と、すり抜け床も含めたタイルの当たり判定。
- 手触り。 トゥイーン、パーティクル、スクワッシュ＆ストレッチ。
何がおかしいのか、すぐわかる
何かが例外を投げると、開発パネルが 誰の問題なのか を教えてくれます。
- あなたのコード： パネルがソースの行にリンクし（エディタで開きます）、修正案を出します。
- debuff が拒否した呼び出し： debuff が何を期待していたかをパネルが説明します。
- debuff 自体のバグ： 記入済みのバグレポートが用意されるので、途方に暮れることはありません。
同じエラーが繰り返されてもログを埋め尽くさずに回数でまとめ、ゲームが止まったときはそのエラーが原因として示されます。原因を直して再生を押せば、止まったところからゲームが再開します。
遊びながら調整する
型付きのパラメータ（runSpeed、gravity、coyote…）を宣言すると、それがライブのスライダーになります。変更した値は琥珀色になり、どの変更も元に戻せて、copy changes を押せば調整した分だけをコードにコピーできます。エージェントやテストシナリオも同じパラメータを使うので、手触りの調整を再現できます。
すべてのフレームの行き先がわかる
perf タブは余裕（ヘッドルーム）を表示し、各フレームを update と render の時間に分けて見せます。落ちたフレームがあなたのコードのせいなのか、外側（GC、ブラウザ、ほかのタブ）のせいなのかも教えてくれます。バーをクリックすると、そのフレームで止まります。一時停止、1 tick ずつのステップ実行、スローモーション再生もできます。state タブには、シーンのライブデータがゲームの隣に表示されます。
エージェントのために作り、主導するのはあなた
debuff は、エージェントに当て推量ではなく証拠を渡します。@debuffjp/mcp サーバーを使うと、Claude Code のようなエージェントが次のことをできます。
- 開いているゲームをプレイする。 キーを押し、時間を進め、状態を読みます。すべての操作があなたのパネルに表示され、元に戻すこともできます。
- あなたのメモを読む。「ここのジャンプがふわふわする」と書けば、エージェントはそのメモを、その瞬間のゲームの状態と一緒に受け取ります。
- 説明付きのエラーとフレームの内訳を読む。 パネルであなたが見ているのと同じデータです。
- 決定的なシナリオで検証する。 シナリオはスクリーンショットのベースライン付きの JSON スクリプトなので、修正を「直りました」と言うだけでなく、実際に確かめられます。
クリエイティブな判断はあなたのものです。ツールは、エージェントが提案し、あなたが決めるように作られています。
小さく出荷し、正直でいる
debuff build はすべてのファイルについて raw、gzip、brotli のサイズを報告し、プレイヤーがダウンロードするものに dev ツールが漏れていたら失敗します。スターターゲームの起動時の JavaScript は brotli で約 19 kB です。本番ビルドは短い「made with debuff」のカードで始まります。どのキーでもスキップでき、splash: false で消せます（スプラッシュ画面を認めていない Poki ではそうしてください。公開を参照）。
debuff が向いていないとき
debuff は、小さくて磨き込まれた 2D の Web ゲームのためのものです。ゲームジャム、すぐ遊べるポータル、プロトタイプなどです。3D、ビジュアルエディタ、本格的な物理エンジンが必要なら、もっと大きなエンジンのほうが合っています。debuff はそうしたエンジンとも仲よくやれます（canvas の上の ES モジュールにすぎません）が、それらのふりをするつもりはありません。