@vgai/editor 0.2.0

package/src/ingest/games-2d/_fixtures/first-party-scene.scn2d.json

@@ -0,0 +1,124 @@
+{
+  "version": 1,
+  "surface": "world2d",
+  "gravity": [0, 1400],
+  "background": "#10101a",
+  "entities": [
+    {
+      "name": "floor",
+      "transform2d": { "position": [400, 560] },
+      "sprite": { "tint": "#3a3a5a", "width": 760, "height": 40 },
+      "physics2d": {
+        "bodyType": "fixed",
+        "collider": { "shape": "cuboid", "halfExtents": [380, 20] }
+      }
+    },
+    {
+      "name": "left-wall",
+      "transform2d": { "position": [30, 300] },
+      "sprite": { "tint": "#3a3a5a", "width": 40, "height": 560 },
+      "physics2d": {
+        "bodyType": "fixed",
+        "collider": { "shape": "cuboid", "halfExtents": [20, 280] }
+      }
+    },
+    {
+      "name": "right-wall",
+      "transform2d": { "position": [770, 300] },
+      "sprite": { "tint": "#3a3a5a", "width": 40, "height": 560 },
+      "physics2d": {
+        "bodyType": "fixed",
+        "collider": { "shape": "cuboid", "halfExtents": [20, 280] }
+      }
+    },
+    {
+      "name": "box-0",
+      "transform2d": { "position": [200, 80] },
+      "sprite": { "tint": "#ff6b6b", "width": 44, "height": 44 },
+      "physics2d": {
+        "bodyType": "dynamic",
+        "collider": { "shape": "cuboid", "halfExtents": [22, 22] },
+        "restitution": 0.4,
+        "friction": 0.6
+      }
+    },
+    {
+      "name": "box-1",
+      "transform2d": { "position": [270, 130] },
+      "sprite": { "tint": "#4ecdc4", "width": 44, "height": 44 },
+      "physics2d": {
+        "bodyType": "dynamic",
+        "collider": { "shape": "cuboid", "halfExtents": [22, 22] },
+        "restitution": 0.4,
+        "friction": 0.6
+      }
+    },
+    {
+      "name": "box-2",
+      "transform2d": { "position": [340, 180] },
+      "sprite": { "tint": "#ffd23f", "width": 44, "height": 44 },
+      "physics2d": {
+        "bodyType": "dynamic",
+        "collider": { "shape": "cuboid", "halfExtents": [22, 22] },
+        "restitution": 0.4,
+        "friction": 0.6
+      }
+    },
+    {
+      "name": "box-3",
+      "transform2d": { "position": [410, 80] },
+      "sprite": { "tint": "#a06bff", "width": 44, "height": 44 },
+      "physics2d": {
+        "bodyType": "dynamic",
+        "collider": { "shape": "cuboid", "halfExtents": [22, 22] },
+        "restitution": 0.4,
+        "friction": 0.6
+      }
+    },
+    {
+      "name": "box-4",
+      "transform2d": { "position": [480, 130] },
+      "sprite": { "tint": "#6bff95", "width": 44, "height": 44 },
+      "physics2d": {
+        "bodyType": "dynamic",
+        "collider": { "shape": "cuboid", "halfExtents": [22, 22] },
+        "restitution": 0.4,
+        "friction": 0.6
+      }
+    },
+    {
+      "name": "box-5",
+      "transform2d": { "position": [550, 180] },
+      "sprite": { "tint": "#ff9f6b", "width": 44, "height": 44 },
+      "physics2d": {
+        "bodyType": "dynamic",
+        "collider": { "shape": "cuboid", "halfExtents": [22, 22] },
+        "restitution": 0.4,
+        "friction": 0.6
+      }
+    },
+    {
+      "name": "player",
+      "transform2d": { "position": [120, 480] },
+      "sprite": { "tint": "#00d2ff", "width": 36, "height": 48 },
+      "physics2d": {
+        "bodyType": "dynamic",
+        "collider": { "shape": "cuboid", "halfExtents": [18, 24] },
+        "lockRotations": true,
+        "friction": 0.0
+      },
+      "components": { "PlayerController2D": { "speed": 260, "jump": 620 } }
+    },
+    {
+      "name": "coin",
+      "transform2d": { "position": [650, 500] },
+      "sprite": { "tint": "#ffd23f", "width": 26, "height": 26 },
+      "physics2d": {
+        "bodyType": "fixed",
+        "sensor": true,
+        "collider": { "shape": "ball", "radius": 16 }
+      },
+      "components": { "Coin2D": {} }
+    }
+  ]
+}

package/src/ingest/games-2d/bubbo-bubbo/vgai.game.json

@@ -0,0 +1,25 @@
+{
+  "manifestVersion": 1,
+  "name": "Bubbo Bubbo (real OSS game)",
+  "version": "0.1.0",
+  "engine": {
+    "version": "0.1.0"
+  },
+  "worlds": [
+    {
+      "id": "bubbo-bubbo",
+      "kind": "pixijs",
+      "description": "REAL unmodified OSS PixiJS game — pixijs/open-games Bubbo Bubbo, vendored byte-for-byte under vendor/pixi-games/bubbo-bubbo (MIT) and mounted via the iframe-reachable-multi route (Track P). Requires the gitignored externalized bundle: run vendor/pixi-games/_host/build-bubbo.sh first.",
+      "adapter": {
+        "ingest": {
+          "strategy": "iframe-reachable",
+          "bundleUrl": "/pixi-game-static/bubbo-bubbo/bubbo-bubbo.mjs",
+          "baseHref": "/pixi-game-static/bubbo-bubbo/",
+          "assetBaseUrl": "/pixi-game-static/bubbo-bubbo/assets",
+          "extraDeps": ["@pixi/sound", "@pixi/ui", "gsap"],
+          "captureTimeoutMs": 30000
+        }
+      }
+    }
+  ]
+}

package/src/ingest/games-2d/bunnymark/game.ts

@@ -0,0 +1,88 @@
+/**
+ * Bunnymark — the canonical PixiJS sprite-batching stress test, asset-light.
+ *
+ * UNMODIFIED-style PixiJS v8 program: owns its Application + ticker + canvas. The
+ * vgai world2d ingest trap captures its `stage` on the first rendered frame with
+ * ZERO edits to this file. Exercises: mass sprite rendering + automatic batching,
+ * ticker-driven animation.
+ *
+ * Moved from the retired world2d silo (`world2d-demo/games/bunnymark.ts`, T6.1
+ * slice 4, docs/MULTI-WORLD-DESIGN.md §1.H) to a per-folder ingest fixture
+ * (T3.3 discovery convention: this folder's `vgai.game.json` + this module,
+ * `entry: "game.ts"`). Runs TOP-LEVEL on import (not an exported `load()`) to
+ * match the in-tree three.js ingest fixtures' convention
+ * (`ingest/games/*\/game.js`) — `resolveIngest2DDescriptor`'s `load` thunk is a
+ * plain `() => import(modulePath)`, same as the three-side `resolveIngestDescriptor`.
+ */
+import { Application, Container, Graphics, Sprite } from 'pixi.js';
+
+function container(): HTMLElement {
+  return (
+    (globalThis as { __world2dGameContainer?: HTMLElement }).__world2dGameContainer ?? document.body
+  );
+}
+
+void load();
+
+async function load(): Promise<void> {
+  const app = new Application();
+  await app.init({ width: 800, height: 600, background: '#1a1a2e', antialias: false });
+  container().appendChild(app.canvas);
+
+  // Build a small bunny texture from a Graphics (no external asset needed).
+  const g = new Graphics()
+    .roundRect(0, 0, 26, 32, 6)
+    .fill('#ffd166')
+    .circle(8, 10, 3)
+    .fill('#222')
+    .circle(18, 10, 3)
+    .fill('#222');
+  const tex = app.renderer.generateTexture(g);
+
+  const bunnies: Array<{ s: Sprite; vx: number; vy: number }> = [];
+  const layer = new Container();
+  app.stage.addChild(layer);
+
+  const W = 800;
+  const H = 600;
+  const gravity = 0.5;
+  let seed = 12345;
+  const rand = () => {
+    seed = (seed * 1103515245 + 12345) & 0x7fffffff;
+    return seed / 0x7fffffff;
+  };
+
+  function addBunny(): void {
+    const s = new Sprite(tex);
+    s.anchor.set(0.5);
+    s.x = W / 2;
+    s.y = 0;
+    s.tint = (rand() * 0xffffff) | 0;
+    layer.addChild(s);
+    bunnies.push({ s, vx: (rand() - 0.5) * 12, vy: rand() * 6 });
+  }
+  for (let i = 0; i < 250; i++) addBunny();
+
+  // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: a self-contained game loop (this is an unmodified-style example game; the engine never edits it)
+  app.ticker.add(() => {
+    if (bunnies.length < 1500) for (let i = 0; i < 4; i++) addBunny();
+    for (const b of bunnies) {
+      b.s.x += b.vx;
+      b.s.y += b.vy;
+      b.vy += gravity;
+      if (b.s.x > W) {
+        b.s.x = W;
+        b.vx = -b.vx;
+      } else if (b.s.x < 0) {
+        b.s.x = 0;
+        b.vx = -b.vx;
+      }
+      if (b.s.y > H) {
+        b.s.y = H;
+        b.vy = -b.vy * 0.85;
+      }
+    }
+  });
+
+  (globalThis as { __bunnymark?: unknown }).__bunnymark = { app, count: () => bunnies.length };
+}

package/src/ingest/games-2d/bunnymark/vgai.game.json

@@ -0,0 +1,21 @@
+{
+  "manifestVersion": 1,
+  "name": "Bunnymark",
+  "version": "0.1.0",
+  "engine": {
+    "version": "0.1.0"
+  },
+  "worlds": [
+    {
+      "id": "bunnymark",
+      "kind": "pixijs",
+      "description": "Canonical PixiJS sprite-batching stress test — thousands of bouncing sprites.",
+      "adapter": {
+        "ingest": {
+          "strategy": "shared"
+        }
+      },
+      "entry": "game.ts"
+    }
+  ]
+}

package/src/ingest/games-2d/flappy/game.ts

@@ -0,0 +1,148 @@
+/**
+ * Flappy Bird — canonical PixiJS mini-game, asset-light.
+ *
+ * UNMODIFIED-style PixiJS v8 program: owns its Application + ticker + canvas, and
+ * its own gravity/physics + AABB collision + scrolling + score. The vgai world2d
+ * ingest trap captures its `stage` with ZERO edits. Exercises: animated sprite
+ * (wing flap), keyboard + pointer input, custom 2D physics, AABB collision,
+ * scrolling parallax, score HUD, lose state.
+ *
+ * Moved from the retired world2d silo (`world2d-demo/games/flappy.ts`, T6.1
+ * slice 4, docs/MULTI-WORLD-DESIGN.md §1.H) to a per-folder ingest fixture
+ * (T3.3 discovery convention). Runs top-level on import — see bunnymark's
+ * game.ts doc comment for why (matches the in-tree three.js ingest fixtures'
+ * convention).
+ */
+import { Application, Container, Graphics, Text } from 'pixi.js';
+
+function container(): HTMLElement {
+  return (
+    (globalThis as { __world2dGameContainer?: HTMLElement }).__world2dGameContainer ?? document.body
+  );
+}
+
+void load();
+
+// biome-ignore lint/complexity/noExcessiveCognitiveComplexity: a self-contained game (unmodified-style example game; the engine never edits it)
+async function load(): Promise<void> {
+  const app = new Application();
+  await app.init({ width: 480, height: 640, background: '#4ec0ca', antialias: true });
+  container().appendChild(app.canvas);
+
+  const W = 480;
+  const H = 640;
+  const world = new Container();
+  app.stage.addChild(world);
+
+  // Bird (a flapping body — a rounded rect + wing whose scale animates).
+  const bird = new Container();
+  const body = new Graphics()
+    .roundRect(-14, -12, 28, 24, 8)
+    .fill('#ffd23f')
+    .stroke({ width: 2, color: '#c98a00' });
+  const wing = new Graphics().ellipse(-2, 2, 9, 6).fill('#fff3b0');
+  bird.addChild(body, wing);
+  bird.x = W * 0.3;
+  bird.y = H * 0.5;
+  world.addChild(bird);
+
+  // Pipes.
+  const pipes: Array<{ top: Graphics; bot: Graphics; x: number; scored: boolean }> = [];
+  const GAP = 170;
+  const PIPE_W = 64;
+  let seed = 7;
+  const rand = () => {
+    seed = (seed * 1103515245 + 12345) & 0x7fffffff;
+    return seed / 0x7fffffff;
+  };
+  function spawnPipe(x: number): void {
+    const gapY = 120 + rand() * (H - 240 - GAP);
+    const top = new Graphics()
+      .rect(0, 0, PIPE_W, gapY)
+      .fill('#5dbb46')
+      .stroke({ width: 3, color: '#3f8a30' });
+    const bot = new Graphics()
+      .rect(0, 0, PIPE_W, H - gapY - GAP)
+      .fill('#5dbb46')
+      .stroke({ width: 3, color: '#3f8a30' });
+    top.x = x;
+    top.y = 0;
+    bot.x = x;
+    bot.y = gapY + GAP;
+    world.addChild(top, bot);
+    pipes.push({ top, bot, x, scored: false });
+  }
+  for (let i = 0; i < 4; i++) spawnPipe(W + i * 220);
+
+  const hud = new Text({
+    text: 'Score: 0',
+    style: { fontSize: 28, fill: '#fff', fontWeight: 'bold' },
+  });
+  hud.x = 16;
+  hud.y = 16;
+  app.stage.addChild(hud);
+
+  let vy = 0;
+  let score = 0;
+  let dead = false;
+  let t = 0;
+  const GRAV = 0.5;
+  const FLAP = -8.5;
+
+  function flap(): void {
+    if (dead) {
+      // reset
+      bird.y = H * 0.5;
+      vy = 0;
+      score = 0;
+      dead = false;
+      for (let i = 0; i < pipes.length; i++) pipes[i]!.x = W + i * 220;
+      return;
+    }
+    vy = FLAP;
+  }
+  window.addEventListener('keydown', (e) => {
+    if (e.code === 'Space' || e.code === 'ArrowUp') flap();
+  });
+  app.canvas.addEventListener('pointerdown', flap);
+
+  // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: a self-contained game loop (unmodified-style example game; the engine never edits it)
+  app.ticker.add((ticker) => {
+    const dt = ticker.deltaTime;
+    t += dt;
+    wing.scale.y = 0.6 + Math.abs(Math.sin(t * 0.3)) * 0.8; // flap animation
+    if (dead) return;
+
+    vy += GRAV * dt;
+    bird.y += vy * dt;
+    bird.rotation = Math.max(-0.5, Math.min(1.2, vy * 0.05));
+
+    for (const p of pipes) {
+      p.x -= 2.2 * dt;
+      p.top.x = p.x;
+      p.bot.x = p.x;
+      if (p.x + PIPE_W < 0) {
+        p.x += pipes.length * 220;
+        p.scored = false;
+      }
+      if (!p.scored && p.x + PIPE_W < bird.x) {
+        p.scored = true;
+        score++;
+        hud.text = `Score: ${score}`;
+      }
+      // AABB collision: bird box vs pipe rects.
+      const bx = bird.x - 14;
+      const by = bird.y - 12;
+      const overlapX = bx + 28 > p.x && bx < p.x + PIPE_W;
+      if (overlapX) {
+        const topH = p.top.height;
+        const botY = p.bot.y;
+        if (by < topH || by + 24 > botY) dead = true;
+      }
+    }
+    if (bird.y > H - 12 || bird.y < 0) dead = true;
+    if (dead) hud.text = `Score: ${score}  —  tap to retry`;
+  });
+
+  (globalThis as { __flappy?: unknown }).__flappy = { app, score: () => score };
+}

package/src/ingest/games-2d/flappy/vgai.game.json

@@ -0,0 +1,21 @@
+{
+  "manifestVersion": 1,
+  "name": "Flappy Bird",
+  "version": "0.1.0",
+  "engine": {
+    "version": "0.1.0"
+  },
+  "worlds": [
+    {
+      "id": "flappy",
+      "kind": "pixijs",
+      "description": "Gravity/physics, keyboard + pointer input, AABB collision, scrolling, score HUD.",
+      "adapter": {
+        "ingest": {
+          "strategy": "shared"
+        }
+      },
+      "entry": "game.ts"
+    }
+  ]
+}

package/src/ingest/games-2d/flappy-pixi/vgai.game.json

@@ -0,0 +1,25 @@
+{
+  "manifestVersion": 1,
+  "name": "Flappy Pixi (real OSS game, pixi v6)",
+  "version": "0.1.0",
+  "engine": {
+    "version": "0.1.0"
+  },
+  "worlds": [
+    {
+      "id": "flappy-pixi",
+      "kind": "pixijs",
+      "description": "REAL unmodified OSS PixiJS game — aliexme's Flappy Pixi, vendored byte-for-byte under vendor/pixi-games/flappy-pixi (MIT). Pixi v6 on the v8 host via version-skew (D-P2): pixiModuleUrl's PRESENCE swaps the trapped instance to a served standalone pixi@6.5.10 build. Assets are inlined in the bundle. Requires the gitignored bundles: run vendor/pixi-games/_host/build-flappy-pixi.sh first.",
+      "adapter": {
+        "ingest": {
+          "strategy": "iframe-reachable",
+          "bundleUrl": "/pixi-game-static/flappy-pixi/flappy-pixi.mjs",
+          "baseHref": "/pixi-game-static/flappy-pixi/",
+          "pixiModuleUrl": "/pixi-game-static/pixi6/pixi6.mjs",
+          "bodyHtml": "<style>html,body{margin:0;height:100%}#game-root{width:100%;height:100%}</style><div id=\"game-root\"></div>",
+          "captureTimeoutMs": 30000
+        }
+      }
+    }
+  ]
+}

package/src/ingest/games-2d/puzzling-potions/vgai.game.json

@@ -0,0 +1,25 @@
+{
+  "manifestVersion": 1,
+  "name": "Puzzling Potions (real OSS game)",
+  "version": "0.1.0",
+  "engine": {
+    "version": "0.1.0"
+  },
+  "worlds": [
+    {
+      "id": "puzzling-potions",
+      "kind": "pixijs",
+      "description": "REAL unmodified OSS PixiJS game — pixijs/open-games Puzzling Potions (match-3 with Spine animations; spine-pixi-v8 pinned exactly 4.2.95 — see host-namespace-registry.ts), vendored byte-for-byte under vendor/pixi-games/puzzling-potions (MIT), iframe-reachable-multi route (Track P). Requires the gitignored externalized bundle: run vendor/pixi-games/_host/build-puzzling-potions.sh first.",
+      "adapter": {
+        "ingest": {
+          "strategy": "iframe-reachable",
+          "bundleUrl": "/pixi-game-static/puzzling-potions/puzzling-potions.mjs",
+          "baseHref": "/pixi-game-static/puzzling-potions/",
+          "assetBaseUrl": "/pixi-game-static/puzzling-potions/assets",
+          "extraDeps": ["@pixi/sound", "@pixi/ui", "gsap", "@esotericsoftware/spine-pixi-v8"],
+          "captureTimeoutMs": 30000
+        }
+      }
+    }
+  ]
+}

package/src/ingest/games-2d/tilemap-camera/game.ts

@@ -0,0 +1,115 @@
+/**
+ * Tilemap + camera-follow — canonical PixiJS tilemap demo, asset-light.
+ *
+ * UNMODIFIED-style PixiJS v8 program using the REAL `@pixi/tilemap` CompositeTilemap
+ * to render a large tile grid, with a keyboard-driven player and a camera that
+ * follows by transforming the world Container (the spec's plain-Container 2D camera;
+ * pixi-viewport is the alternative). The vgai world2d ingest trap captures its stage
+ * with ZERO edits. Exercises: tilemap rendering (batched), spritesheet-style tileset,
+ * keyboard input, camera follow. Fills the tilemap + camera-follow feature-matrix cells.
+ *
+ * Moved from the retired world2d silo (`world2d-demo/games/tilemap-camera.ts`,
+ * T6.1 slice 4, docs/MULTI-WORLD-DESIGN.md §1.H) to a per-folder ingest fixture
+ * (T3.3 discovery convention). Runs top-level on import — see bunnymark's
+ * game.ts doc comment for why.
+ */
+
+import { CompositeTilemap } from '@pixi/tilemap';
+import { Application, Container, Graphics, Texture } from 'pixi.js';
+
+function gameContainer(): HTMLElement {
+  return (
+    (globalThis as { __world2dGameContainer?: HTMLElement }).__world2dGameContainer ?? document.body
+  );
+}
+
+/** Generate a TILE x TILE texture for a named tile kind (no external assets). */
+function tileTexture(color: string, accent: string, size: number): Texture {
+  const canvas = document.createElement('canvas');
+  canvas.width = size;
+  canvas.height = size;
+  const g = canvas.getContext('2d')!;
+  g.fillStyle = color;
+  g.fillRect(0, 0, size, size);
+  g.fillStyle = accent;
+  g.fillRect(2, 2, size - 4, 3);
+  g.fillRect(2, size - 5, size - 4, 3);
+  return Texture.from(canvas);
+}
+
+void load();
+
+async function load(): Promise<void> {
+  const app = new Application();
+  await app.init({ width: 640, height: 480, background: '#0c1a12', antialias: false });
+  gameContainer().appendChild(app.canvas);
+
+  const TILE = 32;
+  const COLS = 60;
+  const ROWS = 40;
+  const world = new Container();
+  app.stage.addChild(world);
+
+  const grass = tileTexture('#3a7d44', '#2f6638', TILE);
+  const stone = tileTexture('#6b6b7b', '#54545f', TILE);
+  const water = tileTexture('#2f6db0', '#255a93', TILE);
+
+  // Build the tilemap (CompositeTilemap batches the whole grid into few draw calls).
+  const tilemap = new CompositeTilemap();
+  world.addChild(tilemap);
+  let seed = 99;
+  const rand = () => {
+    seed = (seed * 1103515245 + 12345) & 0x7fffffff;
+    return seed / 0x7fffffff;
+  };
+  for (let y = 0; y < ROWS; y++) {
+    for (let x = 0; x < COLS; x++) {
+      const r = rand();
+      const tex = r < 0.12 ? water : r < 0.24 ? stone : grass;
+      tilemap.tile(tex, x * TILE, y * TILE);
+    }
+  }
+
+  // Player.
+  const player = new Container();
+  player.addChild(
+    new Graphics()
+      .roundRect(-12, -12, 24, 24, 5)
+      .fill('#ffd23f')
+      .stroke({ width: 2, color: '#c98a00' }),
+  );
+  player.x = (COLS * TILE) / 2;
+  player.y = (ROWS * TILE) / 2;
+  world.addChild(player);
+
+  const keys: Record<string, boolean> = {};
+  window.addEventListener('keydown', (e) => {
+    keys[e.code] = true;
+  });
+  window.addEventListener('keyup', (e) => {
+    keys[e.code] = false;
+  });
+
+  app.ticker.add((ticker) => {
+    const dt = ticker.deltaTime;
+    const sp = 5 * dt;
+    if (keys['ArrowLeft'] || keys['KeyA']) player.x -= sp;
+    if (keys['ArrowRight'] || keys['KeyD']) player.x += sp;
+    if (keys['ArrowUp'] || keys['KeyW']) player.y -= sp;
+    if (keys['ArrowDown'] || keys['KeyS']) player.y += sp;
+    player.x = Math.max(0, Math.min(COLS * TILE, player.x));
+    player.y = Math.max(0, Math.min(ROWS * TILE, player.y));
+    // Camera follow: pan the world Container so the player stays centered.
+    world.x = app.screen.width / 2 - player.x;
+    world.y = app.screen.height / 2 - player.y;
+  });
+
+  (globalThis as { __tilemapCamera?: unknown }).__tilemapCamera = {
+    app,
+    tiles: COLS * ROWS,
+    playerPos: () => ({ x: player.x, y: player.y }),
+    press: (code: string, down: boolean) => {
+      keys[code] = down;
+    },
+  };
+}

package/src/ingest/games-2d/tilemap-camera/vgai.game.json

@@ -0,0 +1,21 @@
+{
+  "manifestVersion": 1,
+  "name": "Tilemap + Camera",
+  "version": "0.1.0",
+  "engine": {
+    "version": "0.1.0"
+  },
+  "worlds": [
+    {
+      "id": "tilemap-camera",
+      "kind": "pixijs",
+      "description": "Real @pixi/tilemap CompositeTilemap (60x40 grid) + keyboard player + camera follow.",
+      "adapter": {
+        "ingest": {
+          "strategy": "shared"
+        }
+      },
+      "entry": "game.ts"
+    }
+  ]
+}