準備は少なく、創造はもっと。

最高の 2D Web ゲームを、もっと手軽に

最初の1時間は、アイデアのために ​

ゲームはいつも小さなひらめきから始まります。いじってみたくなる世界、手触りが「ちょうどいい」ジャンプ、自分にしか思いつかないネタ。ところがそこへ配管工事がやってきます。ゲームループ、くっきりしたドット、操作、サウンド、レベル、アセット、そして「なんで壊れたの？」の調査。遊べるところまで行く前に、ひらめきがしぼんでしまうこともあります。

配管工事は debuff が引き受けます。あなたはいじって、揺らして、わざと壊して、思わずニヤッとした部分だけを残していけばいいのです。

落書きから完成まで ​

1. はじめる$npm create debuff1分もかからずにゲームが動きます。スターターかプラットフォーマーから選べます。
2. つくるスプライト、Tiled や LDtk で作ったレベル、そして使うものだけを出力するアセットパイプライン。
3. 調整する手触りの値は開発パネルのライブスライダーになり、元に戻すこともできます。
4. 検証する$npm test決定的なシナリオが本物のブラウザでゲームを操作し、スクリーンショットを比較します。
5. リリースする$npm run build開発用コードが紛れ込むと失敗するサイズレポート付き。Web ならどこでも、Tauri でデスクトップにも。

小さなコード5つで、弾むゲームがひとつ ​

game.world.systems.physics.step() の奥深くまで潜る必要はありません。ゲームは update と render を持つシーンで、楽しい機能はどれも呼び出しひとつで使えます。

const game = new Game({ canvas, width: 320, height: 180 });
const input = new Input(game, {
  bindings: { pop: ["Space", "PadA", "Pointer"] },
});

game.add(play).go("play");
game.start();

// ふわふわしすぎ？ しっくりくるまで開発パネルのスライダーを動かしましょう。
const tuning = game.params.define("player", {
  speed: { type: "number", default: 140, min: 0, max: 600, units: "px/s" },
});

player.vx = approach(player.vx, dir * tuning.values.speed, accel * dt);

if (input.pressed("pop")) {
  // ぷにっ、キラッ、ブルッ、ポン
  squash(tweens, player, 0.35);
  particles.emit({ x: player.x, y: player.y, count: 16, gravity: 200 });
  game.camera.shake(0.3);
  audio.synth({ freq: 660, freqEnd: 220, decay: 0.15 });
}

import { expect, play, test } from "keiko";

test("never leaves the screen", async () => {
  const game = await play<State>();
  game.press("ArrowLeft");
  game.during("3s", (s) => s.player.x >= 8, "buff stays on screen");
});

{
  "steps": [
    { "press": "ArrowRight" },
    { "wait": 30 },
    { "release": "ArrowRight" },
    { "expect": { "state.player.x": { "gt": 200 } } },
    { "capture": "moved" }
  ]
}

最初のゲームをつくる · サンプルをすべて見る

退屈な部分は、おまかせ ​

まず遊んで、読むのはあとで ​

サンプルには、タイルマップのプラットフォーマー、見下ろし型アドベンチャーの mossfell、マッチ3 の squish、群れを生き延びるサバイバルゲーム Overbuffed があります。どれもブラウザですぐに遊べて、それぞれのソースと関連ドキュメントもそろっています。

よければ、コーディングエージェントも一緒に ​

エージェントは大歓迎ですが、必須ではありません。debuff MCP サーバーを使えば、Claude Code のようなエージェントが、あなたの開いているゲームを遊べます。状態や説明付きのエラーを読み、パラメータを調整し、変更をシナリオで検証したりもできます。エージェントの操作はすべて開発パネルに表示され、そこから元に戻せます。

新しいプロジェクトにはコマンドとルールをまとめた AGENTS.md が入っているので、エージェントは最初から正しい文脈で作業を始められます。創作上の判断はあなたのものです。ツールは、エージェントが提案し、人が決めるように作られています。

ものづくりをする人たちの手で ​

Vite、Vitest、happy-dom、TypeScript、Tiled、LDtk をはじめ、たくさんのオープンソースの成果の上に成り立っています。ありがとうございます。

GitHub でコントリビュート · Discord に参加