@ludra/cli 0.5.0 → 0.7.0

package/blocks/turret/block.json

@@ -0,0 +1,59 @@
+{
+  "name": "turret",
+  "description": "A turret that fires deadly bullets at a steady rhythm. Bullets fly through walls and vanish after params.range px.",
+  "tags": [
+    "platformer",
+    "enemy",
+    "script"
+  ],
+  "usage": "--at x,y sets it on the surface whose top is y. params.direction is -1 (fire left) or 1 (right); params.interval is seconds between shots. Bullets fly at the turret's height, so a normal jump clears them.",
+  "entities": [
+    {
+      "id": "{id}",
+      "components": {
+        "transform": {
+          "dx": 0,
+          "dy": -12
+        },
+        "body": {
+          "type": "static",
+          "width": 32,
+          "height": 24
+        },
+        "sprite": {
+          "color": "#8fa3d9",
+          "image": "assets/turret.svg",
+          "layer": 2
+        },
+        "script": {
+          "src": "scripts/turret.ts",
+          "params": {
+            "interval": 1.5,
+            "speed": 240,
+            "direction": -1,
+            "range": 420
+          }
+        }
+      }
+    }
+  ],
+  "files": [
+    "scripts/turret.ts",
+    "scripts/bullet.ts",
+    "assets/turret.svg",
+    "assets/bullet.svg"
+  ],
+  "effects": {
+    "turret-shot": {
+      "sound": "blip",
+      "particles": {
+        "count": 6,
+        "color": "#ffd166",
+        "speed": 90,
+        "life": 0.2,
+        "size": 2,
+        "gravity": 0
+      }
+    }
+  }
+}

package/blocks/turret/demo.json

@@ -0,0 +1,35 @@
+{
+  "at": [
+    700,
+    500
+  ],
+  "tests": [
+    {
+      "name": "fires on a steady rhythm",
+      "duration": "4s",
+      "assert": [
+        "turret.state.shots >= 2",
+        "events.turret-shot >= 2"
+      ]
+    },
+    {
+      "name": "its bullets kill a player in their path",
+      "playerAt": [
+        400,
+        482
+      ],
+      "duration": "3s",
+      "assert": [
+        "deaths >= 1"
+      ]
+    },
+    {
+      "name": "bullets vanish after their range, so a far-away player is safe",
+      "duration": "4s",
+      "assert": [
+        "deaths == 0",
+        "turret-1.exists == false"
+      ]
+    }
+  ]
+}

package/blocks/turret/scripts/bullet.ts

@@ -0,0 +1,11 @@
+import type { Script } from "@ludra/core";
+
+/** Flies until it has gone params.range px, then disappears. */
+export default {
+  start({ self }) {
+    self.state.startX = self.x;
+  },
+  update({ self, world, params }) {
+    if (Math.abs(self.x - (self.state.startX as number)) > (params.range as number)) world.destroy(self);
+  },
+} satisfies Script;

package/blocks/turret/scripts/turret.ts

@@ -0,0 +1,36 @@
+import type { Script } from "@ludra/core";
+
+interface Params {
+  /** Seconds between shots. */
+  interval: number;
+  /** Bullet speed in px/s. */
+  speed: number;
+  /** -1 fires left, 1 fires right. */
+  direction: number;
+  /** Bullets vanish after flying this many px. */
+  range: number;
+}
+
+/** Fires a deadly bullet every params.interval seconds. */
+export default {
+  start({ self, params }) {
+    self.state.shots = 0;
+    self.state.next = (params.interval as number) / 2;
+  },
+  update({ self, world, params }) {
+    const { interval, speed, direction, range } = params as unknown as Params;
+    if (world.time < (self.state.next as number)) return;
+    world.spawn({
+      components: {
+        transform: { x: self.x + direction * (self.width / 2 + 8), y: self.y - 2 },
+        body: { type: "kinematic", width: 12, height: 6, sensor: true, vx: direction * speed },
+        sprite: { color: "#ff5d73", image: "assets/bullet.svg", layer: 2 },
+        hazard: {},
+        script: { src: "scripts/bullet.ts", params: { range } },
+      },
+    });
+    self.state.shots = (self.state.shots as number) + 1;
+    self.state.next = world.time + interval;
+    world.emit("turret-shot");
+  },
+} satisfies Script;

package/dist/blocks.d.ts

@@ -0,0 +1,65 @@
+import type { EffectDef, EntityDef, SceneDef } from "@ludra/core";
+/** Same relative location from `src/` and `dist/`. */
+export declare const BLOCKS_DIR: string;
+/**
+ * A reusable piece of gameplay: entities, the scripts and art they use, and
+ * effects. Entity transforms are offsets (`dx`, `dy`) from the anchor given
+ * to `ludra add --at`. Every string may use `{id}`, replaced by the id prefix.
+ */
+export interface BlockManifest {
+    name: string;
+    description: string;
+    tags: string[];
+    /** What `--at` means for this block and how to tune it. */
+    usage: string;
+    /** False for blocks that are not placed in the world (a time limit). */
+    positioned?: boolean;
+    entities: {
+        id: string;
+        components: Record<string, Record<string, unknown>>;
+    }[];
+    /** Files copied into the project at the same relative path. */
+    files: string[];
+    effects?: Record<string, EffectDef>;
+}
+export interface Block extends BlockManifest {
+    dir: string;
+}
+export declare function listBlocks(): Block[];
+export declare function loadBlock(name: string): Block;
+export interface Placement {
+    entities: EntityDef[];
+    effects: Record<string, EffectDef>;
+    prefix: string;
+}
+/** Turns a block into concrete entities at `at`, with ids that don't clash with `scene`. */
+export declare function placeBlock(block: Block, scene: SceneDef, at: {
+    x: number;
+    y: number;
+}, idBase?: string): Placement;
+export interface AddResult {
+    block: string;
+    prefix: string;
+    entities: {
+        id: string;
+        x: number;
+        y: number;
+    }[];
+    files: {
+        path: string;
+        status: "added" | "unchanged" | "kept yours" | "replaced";
+    }[];
+    effects: string[];
+}
+/**
+ * Adds a block to a project: copies its files (never overwriting a file the
+ * user changed unless `force`), appends its entities to the scene and merges
+ * effects the scene doesn't define yet.
+ */
+export declare function addBlock(projectDir: string, scenePath: string, block: Block, at: {
+    x: number;
+    y: number;
+}, options?: {
+    id?: string;
+    force?: boolean;
+}): AddResult;

package/dist/blocks.js

@@ -0,0 +1,95 @@
+import { existsSync, mkdirSync, readdirSync, readFileSync, writeFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { CliError } from "./project.js";
+/** Same relative location from `src/` and `dist/`. */
+export const BLOCKS_DIR = fileURLToPath(new URL("../blocks/", import.meta.url));
+export function listBlocks() {
+    if (!existsSync(BLOCKS_DIR))
+        return [];
+    return readdirSync(BLOCKS_DIR, { withFileTypes: true })
+        .filter((entry) => entry.isDirectory() && existsSync(join(BLOCKS_DIR, entry.name, "block.json")))
+        .map((entry) => loadBlock(entry.name))
+        .sort((a, b) => a.name.localeCompare(b.name));
+}
+export function loadBlock(name) {
+    const dir = join(BLOCKS_DIR, name);
+    const file = join(dir, "block.json");
+    if (!existsSync(file)) {
+        const names = existsSync(BLOCKS_DIR) ? readdirSync(BLOCKS_DIR).join(", ") : "none";
+        throw new CliError(`Unknown block "${name}". Blocks: ${names}. Run \`ludra blocks\` to see what each one does.`);
+    }
+    return { ...JSON.parse(readFileSync(file, "utf8")), dir };
+}
+/** Replaces `{id}` in every string, recursively. */
+function substitute(value, id) {
+    if (typeof value === "string")
+        return value.replaceAll("{id}", id);
+    if (Array.isArray(value))
+        return value.map((v) => substitute(v, id));
+    if (value && typeof value === "object") {
+        return Object.fromEntries(Object.entries(value).map(([k, v]) => [k, substitute(v, id)]));
+    }
+    return value;
+}
+/** Picks `base`, or `base-2`, `base-3`… so none of the block's entity ids clash with the scene. */
+function uniquePrefix(block, base, taken) {
+    for (let n = 1;; n++) {
+        const prefix = n === 1 ? base : `${base}-${n}`;
+        const ids = block.entities.map((e) => e.id.replaceAll("{id}", prefix));
+        if (ids.every((id) => !taken.has(id)))
+            return prefix;
+    }
+}
+/** Turns a block into concrete entities at `at`, with ids that don't clash with `scene`. */
+export function placeBlock(block, scene, at, idBase) {
+    const taken = new Set(scene.entities.map((e) => e.id));
+    const prefix = uniquePrefix(block, idBase ?? block.name, taken);
+    const entities = block.entities.map((template) => {
+        const def = substitute(structuredClone(template), prefix);
+        const offset = def.components.transform ?? {};
+        def.components.transform = { x: at.x + (offset.dx ?? 0), y: at.y + (offset.dy ?? 0) };
+        return def;
+    });
+    return { entities, effects: substitute(block.effects ?? {}, prefix), prefix };
+}
+/**
+ * Adds a block to a project: copies its files (never overwriting a file the
+ * user changed unless `force`), appends its entities to the scene and merges
+ * effects the scene doesn't define yet.
+ */
+export function addBlock(projectDir, scenePath, block, at, options = {}) {
+    const scene = JSON.parse(readFileSync(scenePath, "utf8"));
+    const placement = placeBlock(block, scene, at, options.id);
+    const files = block.files.map((path) => {
+        const source = readFileSync(join(block.dir, path));
+        const target = join(projectDir, path);
+        if (existsSync(target)) {
+            if (readFileSync(target).equals(source))
+                return { path, status: "unchanged" };
+            if (!options.force)
+                return { path, status: "kept yours" };
+        }
+        const existed = existsSync(target);
+        mkdirSync(dirname(target), { recursive: true });
+        writeFileSync(target, source);
+        return { path, status: existed ? "replaced" : "added" };
+    });
+    scene.entities.push(...placement.entities);
+    const effects = [];
+    for (const [event, effect] of Object.entries(placement.effects)) {
+        scene.effects ??= {};
+        if (scene.effects[event])
+            continue;
+        scene.effects[event] = effect;
+        effects.push(event);
+    }
+    writeFileSync(scenePath, `${JSON.stringify(scene, null, 2)}\n`);
+    return {
+        block: block.name,
+        prefix: placement.prefix,
+        entities: placement.entities.map((e) => ({ id: e.id, x: e.components.transform.x, y: e.components.transform.y })),
+        files,
+        effects,
+    };
+}

package/dist/commands/blocks.d.ts

@@ -0,0 +1,12 @@
+/** `ludra blocks`: the catalog. */
+export declare function blocks(options: {
+    json?: boolean;
+}): number;
+export interface AddOptions {
+    at?: string;
+    id?: string;
+    force?: boolean;
+    json?: boolean;
+}
+/** `ludra add <block> [folder] --at x,y`. */
+export declare function add(name: string | undefined, dir: string, options: AddOptions): number;

package/dist/commands/blocks.js

@@ -0,0 +1,49 @@
+import { relative } from "node:path";
+import { addBlock, listBlocks, loadBlock } from "../blocks.js";
+import { pad, paint } from "../format.js";
+import { CliError, loadProject } from "../project.js";
+/** `ludra blocks`: the catalog. */
+export function blocks(options) {
+    const all = listBlocks();
+    if (options.json) {
+        console.log(JSON.stringify(all.map(({ name, description, tags, usage, positioned }) => ({ name, description, tags, usage, positioned: positioned ?? true })), null, 2));
+        return 0;
+    }
+    const width = Math.max(...all.map((b) => b.name.length)) + 2;
+    for (const block of all) {
+        console.log(`${paint("bold", pad(block.name, width))}${block.description} ${paint("dim", `[${block.tags.join(", ")}]`)}`);
+    }
+    console.log(paint("dim", `\nAdd one with: ludra add <block> --at x,y   (y = top of the surface it sits on; 500 in the templates)`));
+    return 0;
+}
+/** `ludra add <block> [folder] --at x,y`. */
+export function add(name, dir, options) {
+    if (!name)
+        throw new CliError("Usage: ludra add <block> [folder] --at x,y [--id name]. Run `ludra blocks` for the catalog.");
+    const block = loadBlock(name);
+    const project = loadProject(dir);
+    let at = { x: 0, y: 0 };
+    if (block.positioned !== false) {
+        const match = /^\s*(-?\d+(?:\.\d+)?)\s*,\s*(-?\d+(?:\.\d+)?)\s*$/.exec(options.at ?? "");
+        if (!match)
+            throw new CliError(`ludra add ${name} needs --at x,y. ${block.usage}`);
+        at = { x: Number(match[1]), y: Number(match[2]) };
+    }
+    const result = addBlock(project.dir, project.entryPath, block, at, { id: options.id, force: options.force });
+    if (options.json) {
+        console.log(JSON.stringify(result, null, 2));
+        return 0;
+    }
+    console.log(paint("green", `✓ Added "${block.name}" to ${project.entryLabel}`));
+    for (const e of result.entities)
+        console.log(`  entity  ${pad(e.id, 22)} at (${e.x}, ${e.y})`);
+    for (const f of result.files) {
+        const note = f.status === "kept yours" ? paint("yellow", "kept yours (differs from the block; use --force to replace)") : paint("dim", f.status);
+        console.log(`  file    ${pad(f.path, 22)} ${note}`);
+    }
+    if (result.effects.length > 0)
+        console.log(`  effects ${result.effects.join(", ")}`);
+    console.log(`\n${paint("dim", block.usage)}`);
+    console.log(paint("dim", `Next: ludra check ${relative(process.cwd(), project.dir) || "."}, then play and test it.`));
+    return 0;
+}

package/dist/commands/check.js

@@ -1,9 +1,13 @@
+import { checkDrawHooks } from "@ludra/core";
 import { formatDiagnostics, paint } from "../format.js";
 import { loadGame, loadProject } from "../project.js";
 export async function check(dir, options) {
     const project = loadProject(dir);
     const { game, diagnostics } = await loadGame(project);
     const scene = game?.scene;
+    // Draw hooks only run in the browser, so paint once here to catch their errors early.
+    if (game)
+        diagnostics.push(...checkDrawHooks(game.scene, game.scripts));
     const errors = diagnostics.filter((d) => d.severity === "error").length;
     const warnings = diagnostics.length - errors;
     if (options.json) {

package/dist/commands/new.js

@@ -7,7 +7,7 @@ import { CliError } from "../project.js";
 const TEMPLATES_DIR = fileURLToPath(new URL("../../templates/", import.meta.url));
 export function create(dir, options) {
     if (!dir)
-        throw new CliError("Usage: ludra new <folder> [--template platformer]");
+        throw new CliError("Usage: ludra new <folder> [--template platformer|topdown|breakout]");
     const template = options.template ?? "platformer";
     const source = join(TEMPLATES_DIR, template);
     if (!existsSync(source)) {

package/dist/commands/play.js

@@ -14,7 +14,7 @@ export async function play(dir, options) {
     const world = scriptErrors(() => new World(scene, { scripts }));
     const watch = options.watch
         ? options.watch.split(",").map((id) => id.trim()).filter(Boolean)
-        : world.entities.filter((e) => e.platformer).map((e) => e.id);
+        : world.entities.filter((e) => e.platformer || e.topdown).map((e) => e.id);
     for (const id of watch) {
         if (!world.get(id)) {
             throw new CliError(`--watch: no entity "${id}". Entities: ${world.entities.map((e) => e.id).join(", ")}.`);
@@ -112,6 +112,8 @@ function describeEvent(event) {
             return `${event.entity} ${event.cause === "fall" ? "fell out of the world" : `hit ${event.cause}`}, respawned`;
         case "win":
             return event.entity === event.goal ? `${event.entity} (script) completed the level` : `${event.entity} reached ${event.goal}`;
+        case "bounce":
+            return `${event.entity} bounced off ${event.other}`;
         case "custom":
             return `from ${event.entity}'s script${event.data === undefined ? "" : ` ${JSON.stringify(event.data)}`}`;
         default:

package/dist/headless.js

@@ -59,6 +59,9 @@ export async function captureScreenshots(project, request) {
             "--no-default-browser-check",
             "--mute-audio",
             "--hide-scrollbars",
+            // Software WebGL, so postfx shaders render without a GPU.
+            "--use-angle=swiftshader",
+            "--enable-unsafe-swiftshader",
             `--window-size=${width},${height}`,
             "about:blank",
         ], { stdio: ["ignore", "ignore", "pipe"] });

package/dist/index.js

@@ -1,5 +1,6 @@
 #!/usr/bin/env node
 import { parseArgs } from "node:util";
+import { add, blocks } from "./commands/blocks.js";
 import { check } from "./commands/check.js";
 import { components } from "./commands/components.js";
 import { dev } from "./commands/dev.js";
@@ -19,12 +20,12 @@ process.emitWarning = ((warning, ...rest) => {
 const HELP = `ludra: the game engine built for AI agents
 
 Usage
-  ludra new <folder> [--template platformer]   Create a game project
+  ludra new <folder> [--template <name>]       Create a game project (templates: platformer, topdown, breakout)
   ludra check [folder] [--json]                Validate the scene; every problem comes with a fix
   ludra play [folder] [options]                Simulate the game headlessly
       --inputs "right:1s, jump:0.4s"           Scripted input. Actions: left right up down jump action wait
       --duration 3s                            Run length (default: inputs + 1s)
-      --watch player,enemy                     Entities in the timeline (default: platformer entities)
+      --watch player,enemy                     Entities in the timeline (default: the players)
       --every 0.25s                            Timeline sampling interval
       --ascii                                  Print the final frame as a text map
       --columns 120                            Width of the text map (default: 80)
@@ -33,6 +34,10 @@ Usage
       --json                                   Machine-readable output
   ludra test [folder] [--json]                 Run tests/*.test.json
   ludra components [name] [--json]             Reference for every component and field
+  ludra blocks [--json]                        Catalog of ready-made gameplay blocks
+  ludra add <block> [folder] --at x,y          Add a block: entities, scripts, art and effects
+      --id name                                Id prefix for its entities (default: the block name)
+      --force                                  Replace files you changed that the block also ships
   ludra dev [folder] [--port 5173]             Play the game in the browser with live reload
 
 Folder defaults to the current directory.`;
@@ -52,10 +57,13 @@ async function main(argv) {
             json: { type: "boolean" },
             template: { type: "string" },
             port: { type: "string" },
+            at: { type: "string" },
+            id: { type: "string" },
+            force: { type: "boolean" },
             help: { type: "boolean", short: "h" },
         },
     });
-    const [command, target] = positionals;
+    const [command, target, extra] = positionals;
     if (values.help || !command || command === "help") {
         console.log(HELP);
         return 0;
@@ -73,6 +81,10 @@ async function main(argv) {
             return components(target, values);
         case "dev":
             return dev(target ?? ".", values);
+        case "blocks":
+            return blocks(values);
+        case "add":
+            return add(target, extra ?? ".", values);
         default:
             throw new CliError(`Unknown command "${command}".\n\n${HELP}`);
     }

package/dist/project.js

@@ -65,12 +65,13 @@ export function readScene(project) {
     const missing = missingAssets(project, scene);
     return { scene: missing.length === 0 ? scene : undefined, diagnostics: [...diagnostics, ...missing] };
 }
-/** Image and audio files the scene references that are not in the project. */
+const EXAMPLE_FILE = { image: "player.svg", audio: "jump.wav", script: "enemy.ts", font: "pixel.woff2", shader: "crt.frag" };
+/** Files the scene references that are not in the project. */
 function missingAssets(project, scene) {
     return collectAssetPaths(scene)
         .filter((ref) => !isInside(project.dir, resolve(project.dir, ref.path)) || !existsSync(resolve(project.dir, ref.path)))
         .map((ref) => {
-        const folder = ref.kind === "script" ? "scripts" : "assets";
+        const folder = ref.kind === "script" ? "scripts" : ref.kind === "shader" ? "shaders" : "assets";
         const available = listFiles(project.dir, folder);
         return {
             severity: "error",
@@ -79,7 +80,7 @@ function missingAssets(project, scene) {
             message: `The ${ref.kind} "${ref.path}" does not exist in the project.`,
             fix: available.length > 0
                 ? `Create it, or use one of: ${available.join(", ")}.`
-                : `Create it (paths are relative to the folder with ludra.json, e.g. "${folder}/${ref.kind === "script" ? "enemy.ts" : "player.svg"}").`,
+                : `Create it (paths are relative to the folder with ludra.json, e.g. "${folder}/${EXAMPLE_FILE[ref.kind]}").`,
         };
     });
 }

package/dist/server.js

@@ -19,6 +19,12 @@ const MEDIA_TYPES = {
     ".wav": "audio/wav",
     ".mp3": "audio/mpeg",
     ".ogg": "audio/ogg",
+    ".woff2": "font/woff2",
+    ".woff": "font/woff",
+    ".ttf": "font/ttf",
+    ".otf": "font/otf",
+    ".frag": "text/plain; charset=utf-8",
+    ".glsl": "text/plain; charset=utf-8",
 };
 /**
  * Serves a project to a browser: the engine's browser runtime, the validated

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ludra/cli",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "The game engine built for AI agents. The ludra command: create, check, play, test and run Ludra games.",
   "license": "MIT",
   "repository": {
@@ -31,10 +31,11 @@
   },
   "files": [
     "dist",
-    "templates"
+    "templates",
+    "blocks"
   ],
   "dependencies": {
-    "@ludra/core": "0.5.0"
+    "@ludra/core": "0.7.0"
   },
   "keywords": [
     "game-engine",

package/templates/breakout/CLAUDE.md

@@ -0,0 +1,42 @@
+# {{name}}
+
+A breakout game built with Ludra, a game engine designed for AI agents.
+
+## Layout
+
+- `ludra.json`: project config (name, entry scene, window size)
+- `scenes/main.scene.json`: the level. Entities are made of components; `effects` adds particles, sound and shake to game events.
+- `shaders/neon.frag`: the post-processing shader (bloom, chromatic aberration, scanlines, CRT curve).
+- `scripts/`: the game rules in TypeScript. Run `npx @ludra/cli components script` for the API.
+  - `ball.ts` rests on the paddle, launches, keeps a constant speed and costs a life when it falls out.
+  - `paddle.ts` aims the ball by where it hits the paddle.
+  - `brick.ts` breaks on contact and adds `points` to the score.
+  - `rules.ts` wins the level when no entity whose id starts with `prefix` is left, and draws the brick-break feedback and the whole interface (`drawUI`).
+  - `backdrop.ts` and `wall.ts` only draw: the synthwave sky and the neon walls.
+- `tests/*.test.json`: gameplay tests, run headlessly
+
+## Loop
+
+1. Edit `scenes/main.scene.json` or a script. Run `npx @ludra/cli components` for every component and field.
+2. Run `npx @ludra/cli check` after every edit. Each problem names the JSON path and a fix.
+3. Run `npx @ludra/cli play --watch ball,paddle --ascii` to see what actually happens. Add `--screenshot 1s,end` to save real rendered frames to `screenshots/` and look at them.
+4. Write the behavior you want into `tests/*.test.json` and run `npx @ludra/cli test`.
+5. Run `npx @ludra/cli dev` so a human can play it in the browser.
+
+Never call a change done until `ludra check` and `ludra test` both pass.
+
+## Rules of thumb
+
+- Coordinates are entity centers in pixels; +y is down. The world has no gravity (`"gravity": 0`).
+- The paddle is a `kinematic` body with `topdown` `"directions": "x"`: left/right only, and it stops at walls.
+- The ball is a `dynamic` body with `"bounce": 1` and `"gravityScale": 0`. Bounce does the reflecting; `ball.ts` keeps the speed constant and never lets it fly almost flat.
+- Bricks are `static` bodies with `brick.ts`. Give each brick an id starting with `brick-` so `rules.ts` counts it.
+- The bottom of the world is open on purpose: that is where the ball is lost.
+- A level is done when a test proves `won == true` with `deaths == 0`. Long routes are easiest to find by writing a small autopilot that steers the paddle under the ball, then pasting its input (frame counts like `"left:24f"`) into the test.
+- Art and effects never change gameplay. Make it playable first, then dress it.
+
+## Looks
+
+Everything is drawn in code, no image files: each script has a `draw` hook next to its game logic. The scene loads the Orbitron font and runs `shaders/neon.frag` over every frame (tune it with `postfx.uniforms`).
+
+There are no limits on looks. A script's `draw(ctx)` paints with the real Canvas 2D context (`ctx.g`), `drawUI(ctx)` replaces the HUD, `"fonts"` loads Google Fonts, and `"postfx"` runs a GLSL shader over every frame. Run `npx @ludra/cli components script` for the API. Draw hooks only paint: they can't change the game, so tests stay valid. After every visual change, look at real frames with `play --screenshot`.

package/templates/breakout/_gitignore

@@ -0,0 +1,2 @@
+node_modules/
+screenshots/

package/templates/breakout/ludra.json

@@ -0,0 +1,5 @@
+{
+  "name": "{{name}}",
+  "entry": "scenes/main.scene.json",
+  "window": { "width": 960, "height": 540 }
+}

package/templates/breakout/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "{{name}}",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "ludra dev",
+    "check": "ludra check",
+    "test": "ludra test"
+  },
+  "devDependencies": {
+    "@ludra/cli": "^0.7.0"
+  }
+}