@ludra/cli 0.5.0 → 0.8.0

package/templates/topdown/scenes/main.scene.json

@@ -0,0 +1,499 @@
+{
+  "name": "Crystal Grove",
+  "world": {
+    "width": 960,
+    "height": 540,
+    "gravity": 0,
+    "background": "#1f3a29"
+  },
+  "fonts": {
+    "Cinzel": "google"
+  },
+  "postfx": {
+    "shader": "shaders/dream.frag",
+    "uniforms": {
+      "bloom": 2.2,
+      "warmth": 0.8,
+      "vignette": 1.1
+    }
+  },
+  "effects": {
+    "collect": {
+      "sound": "coin",
+      "particles": {
+        "count": 14,
+        "color": "#7fe0ff",
+        "speed": 120,
+        "life": 0.5,
+        "size": 3,
+        "gravity": 0
+      }
+    },
+    "die": {
+      "sound": "explosion",
+      "shake": 8,
+      "particles": {
+        "count": 26,
+        "color": "#ff5d73",
+        "speed": 200,
+        "life": 0.6,
+        "size": 4,
+        "gravity": 0
+      }
+    },
+    "win": {
+      "sound": "powerup",
+      "shake": 3,
+      "particles": {
+        "count": 60,
+        "color": "#c77dff",
+        "speed": 240,
+        "life": 1.2,
+        "size": 4,
+        "gravity": 0
+      }
+    }
+  },
+  "entities": [
+    {
+      "id": "floor",
+      "components": {
+        "transform": {
+          "x": 480,
+          "y": 270
+        },
+        "sprite": {
+          "color": "#2f5a3a",
+          "image": "assets/grass.svg",
+          "tile": true,
+          "width": 960,
+          "height": 540,
+          "layer": -1
+        }
+      }
+    },
+    {
+      "id": "hero",
+      "components": {
+        "transform": {
+          "x": 80,
+          "y": 270
+        },
+        "body": {
+          "type": "dynamic",
+          "width": 22,
+          "height": 22
+        },
+        "sprite": {
+          "color": "#ff9f68",
+          "image": "assets/hero.svg",
+          "frameWidth": 24,
+          "width": 24,
+          "height": 24,
+          "idle": "0",
+          "run": "0-1",
+          "fps": 8,
+          "layer": 3
+        },
+        "topdown": {
+          "speed": 180
+        }
+      }
+    },
+    {
+      "id": "wall-top",
+      "components": {
+        "transform": {
+          "x": 480,
+          "y": 10
+        },
+        "body": {
+          "type": "static",
+          "width": 960,
+          "height": 20
+        },
+        "sprite": {
+          "color": "#2d6a3e",
+          "image": "assets/hedge.svg",
+          "tile": true
+        }
+      }
+    },
+    {
+      "id": "wall-bottom",
+      "components": {
+        "transform": {
+          "x": 480,
+          "y": 530
+        },
+        "body": {
+          "type": "static",
+          "width": 960,
+          "height": 20
+        },
+        "sprite": {
+          "color": "#2d6a3e",
+          "image": "assets/hedge.svg",
+          "tile": true
+        }
+      }
+    },
+    {
+      "id": "wall-left",
+      "components": {
+        "transform": {
+          "x": 10,
+          "y": 270
+        },
+        "body": {
+          "type": "static",
+          "width": 20,
+          "height": 540
+        },
+        "sprite": {
+          "color": "#2d6a3e",
+          "image": "assets/hedge.svg",
+          "tile": true
+        }
+      }
+    },
+    {
+      "id": "wall-right",
+      "components": {
+        "transform": {
+          "x": 950,
+          "y": 270
+        },
+        "body": {
+          "type": "static",
+          "width": 20,
+          "height": 540
+        },
+        "sprite": {
+          "color": "#2d6a3e",
+          "image": "assets/hedge.svg",
+          "tile": true
+        }
+      }
+    },
+    {
+      "id": "hedge-west",
+      "components": {
+        "transform": {
+          "x": 300,
+          "y": 190
+        },
+        "body": {
+          "type": "static",
+          "width": 40,
+          "height": 340
+        },
+        "sprite": {
+          "color": "#2d6a3e",
+          "image": "assets/hedge.svg",
+          "tile": true
+        }
+      }
+    },
+    {
+      "id": "hedge-east",
+      "components": {
+        "transform": {
+          "x": 640,
+          "y": 350
+        },
+        "body": {
+          "type": "static",
+          "width": 40,
+          "height": 340
+        },
+        "sprite": {
+          "color": "#2d6a3e",
+          "image": "assets/hedge.svg",
+          "tile": true
+        }
+      }
+    },
+    {
+      "id": "gem-1",
+      "components": {
+        "transform": {
+          "x": 150,
+          "y": 90
+        },
+        "body": {
+          "type": "static",
+          "width": 20,
+          "height": 20,
+          "sensor": true
+        },
+        "sprite": {
+          "color": "#4cc9f0",
+          "image": "assets/gem.svg",
+          "frameWidth": 20,
+          "idle": "0-1",
+          "fps": 3,
+          "layer": 1
+        },
+        "collectible": {
+          "score": 1
+        }
+      }
+    },
+    {
+      "id": "gem-2",
+      "components": {
+        "transform": {
+          "x": 180,
+          "y": 460
+        },
+        "body": {
+          "type": "static",
+          "width": 20,
+          "height": 20,
+          "sensor": true
+        },
+        "sprite": {
+          "color": "#4cc9f0",
+          "image": "assets/gem.svg",
+          "frameWidth": 20,
+          "idle": "0-1",
+          "fps": 3,
+          "layer": 1
+        },
+        "collectible": {
+          "score": 1
+        }
+      }
+    },
+    {
+      "id": "gem-3",
+      "components": {
+        "transform": {
+          "x": 470,
+          "y": 100
+        },
+        "body": {
+          "type": "static",
+          "width": 20,
+          "height": 20,
+          "sensor": true
+        },
+        "sprite": {
+          "color": "#4cc9f0",
+          "image": "assets/gem.svg",
+          "frameWidth": 20,
+          "idle": "0-1",
+          "fps": 3,
+          "layer": 1
+        },
+        "collectible": {
+          "score": 1
+        }
+      }
+    },
+    {
+      "id": "gem-4",
+      "components": {
+        "transform": {
+          "x": 470,
+          "y": 450
+        },
+        "body": {
+          "type": "static",
+          "width": 20,
+          "height": 20,
+          "sensor": true
+        },
+        "sprite": {
+          "color": "#4cc9f0",
+          "image": "assets/gem.svg",
+          "frameWidth": 20,
+          "idle": "0-1",
+          "fps": 3,
+          "layer": 1
+        },
+        "collectible": {
+          "score": 1
+        }
+      }
+    },
+    {
+      "id": "gem-5",
+      "components": {
+        "transform": {
+          "x": 820,
+          "y": 110
+        },
+        "body": {
+          "type": "static",
+          "width": 20,
+          "height": 20,
+          "sensor": true
+        },
+        "sprite": {
+          "color": "#4cc9f0",
+          "image": "assets/gem.svg",
+          "frameWidth": 20,
+          "idle": "0-1",
+          "fps": 3,
+          "layer": 1
+        },
+        "collectible": {
+          "score": 1
+        }
+      }
+    },
+    {
+      "id": "slime-middle",
+      "components": {
+        "transform": {
+          "x": 345,
+          "y": 280
+        },
+        "body": {
+          "type": "kinematic",
+          "width": 30,
+          "height": 24,
+          "sensor": true
+        },
+        "sprite": {
+          "color": "#c77dff",
+          "image": "assets/slime.svg",
+          "frameWidth": 32,
+          "idle": "0",
+          "run": "0-1",
+          "fps": 4,
+          "layer": 2
+        },
+        "patrol": {
+          "axis": "x",
+          "distance": 250,
+          "speed": 80
+        },
+        "hazard": {}
+      }
+    },
+    {
+      "id": "slime-east",
+      "components": {
+        "transform": {
+          "x": 690,
+          "y": 300
+        },
+        "body": {
+          "type": "kinematic",
+          "width": 30,
+          "height": 24,
+          "sensor": true
+        },
+        "sprite": {
+          "color": "#c77dff",
+          "image": "assets/slime.svg",
+          "frameWidth": 32,
+          "idle": "0",
+          "run": "0-1",
+          "fps": 4,
+          "layer": 2
+        },
+        "patrol": {
+          "axis": "x",
+          "distance": 230,
+          "speed": 90
+        },
+        "hazard": {}
+      }
+    },
+    {
+      "id": "thorns",
+      "components": {
+        "transform": {
+          "x": 770,
+          "y": 470
+        },
+        "body": {
+          "type": "static",
+          "width": 40,
+          "height": 80,
+          "sensor": true
+        },
+        "sprite": {
+          "color": "#ff5d73",
+          "image": "assets/thorns.svg",
+          "tile": true,
+          "layer": 0
+        },
+        "hazard": {}
+      }
+    },
+    {
+      "id": "portal",
+      "components": {
+        "transform": {
+          "x": 880,
+          "y": 470
+        },
+        "body": {
+          "type": "static",
+          "width": 40,
+          "height": 40,
+          "sensor": true
+        },
+        "sprite": {
+          "color": "#7b2cbf",
+          "image": "assets/portal.svg",
+          "frameWidth": 40,
+          "idle": "0-1",
+          "fps": 4,
+          "flip": false,
+          "layer": 1
+        },
+        "emitter": {
+          "rate": 8,
+          "color": "#e0b0ff",
+          "speed": 40,
+          "spread": 360,
+          "life": 0.9,
+          "size": 3,
+          "gravity": 0
+        },
+        "goal": {
+          "requireScore": 5
+        },
+        "script": {
+          "src": "scripts/portal.ts",
+          "params": {
+            "need": 5
+          }
+        }
+      }
+    },
+    {
+      "id": "night",
+      "components": {
+        "transform": {
+          "x": 0,
+          "y": 0
+        },
+        "script": {
+          "src": "scripts/night.ts"
+        }
+      }
+    },
+    {
+      "id": "hud",
+      "components": {
+        "transform": {
+          "x": 0,
+          "y": 0
+        },
+        "script": {
+          "src": "scripts/hud.ts",
+          "params": {
+            "crystals": 5
+          }
+        }
+      }
+    }
+  ]
+}

package/templates/topdown/scripts/hud.ts

@@ -0,0 +1,94 @@
+import type { DrawContext, Script } from "@ludra/core";
+
+const TITLE = "Cinzel, Georgia, serif";
+
+/** Centered text with a soft colored glow behind it. */
+function glowText(g: DrawContext["g"], text: string, x: number, y: number, size: number, color: string, weight = 700): void {
+  g.font = `${weight} ${size}px ${TITLE}`;
+  g.textAlign = "center";
+  g.shadowColor = color;
+  g.shadowBlur = size * 0.5;
+  g.fillStyle = "#fff7e6";
+  g.fillText(text, x, y);
+  g.shadowBlur = 0;
+}
+
+/**
+ * The grove's interface: a title card, crystal slots that fill as they are
+ * found (params.crystals), a message when the portal wakes, a flash on death
+ * and the victory screen.
+ */
+export default {
+  drawUI({ g, world, view, time, recent, image, params }) {
+    const total = params.crystals as number;
+
+    // Crystal slots, top left, on a dark leaf-shaped plate.
+    g.fillStyle = "rgba(8, 14, 30, 0.55)";
+    g.beginPath();
+    g.roundRect(24, 18, 40 + total * 30, 44, 22);
+    g.fill();
+    const gem = image("assets/gem.svg");
+    for (let i = 0; i < total; i++) {
+      const x = 44 + i * 30;
+      const found = i < world.score;
+      const justFound = found && recent("collect", 0.5).length > 0 && i === world.score - 1;
+      const pop = justFound ? 1 + 0.5 * (1 - (time - recent("collect", 0.5).at(-1)!.time) / 0.5) : 1;
+      g.globalAlpha = found ? 1 : 0.25;
+      g.shadowColor = "#2fb8ff";
+      g.shadowBlur = found ? 14 : 0;
+      if (gem) g.drawImage(gem, 0, 0, 20, 20, x - 10 * pop, 40 - 10 * pop, 20 * pop, 20 * pop);
+    }
+    g.globalAlpha = 1;
+    g.shadowBlur = 0;
+
+    // Title card that fades out as the hero sets off.
+    if (time < 3 && !world.won) {
+      g.globalAlpha = Math.min(1, (3 - time) / 1.2);
+      glowText(g, "CRYSTAL GROVE", view.width / 2, view.height / 2 - 20, 54, "#7fd6ff");
+      g.font = `400 16px ${TITLE}`;
+      g.fillStyle = "rgba(255, 247, 230, 0.85)";
+      g.fillText(`Gather the ${total} crystals and wake the portal`, view.width / 2, view.height / 2 + 18);
+      g.globalAlpha = 1;
+    }
+
+    // The last crystal wakes the portal.
+    const last = recent("collect", 2.5).find(() => world.score === total);
+    if (last && !world.won) {
+      g.globalAlpha = Math.min(1, (2.5 - (time - last.time)) / 0.8);
+      glowText(g, "The portal awakens", view.width / 2, 90, 26, "#c77dff");
+      g.globalAlpha = 1;
+    }
+
+    // Thorns and slimes hurt: a red pulse from the edges.
+    const hurt = recent("die", 0.6).at(-1);
+    if (hurt) {
+      const edge = g.createRadialGradient(view.width / 2, view.height / 2, view.height * 0.25, view.width / 2, view.height / 2, view.width * 0.7);
+      edge.addColorStop(0, "rgba(160, 0, 30, 0)");
+      edge.addColorStop(1, `rgba(160, 0, 30, ${0.65 * (1 - (time - hurt.time) / 0.6)})`);
+      g.fillStyle = edge;
+      g.fillRect(0, 0, view.width, view.height);
+    }
+
+    g.font = `400 11px ${TITLE}`;
+    g.textAlign = "right";
+    g.fillStyle = "rgba(255, 247, 230, 0.4)";
+    g.fillText("M sound  ·  R restart", view.width - 24, view.height - 16);
+
+    if (world.won) {
+      const win = recent("win", 1e9).at(-1);
+      const since = win ? time - win.time : 0;
+      g.fillStyle = `rgba(4, 6, 20, ${Math.min(0.65, since)})`;
+      g.fillRect(0, 0, view.width, view.height);
+      g.globalAlpha = Math.min(1, since * 1.5);
+      glowText(g, "THE GROVE IS AT PEACE", view.width / 2, view.height / 2 - 8, 44, "#b25cff");
+      g.font = `400 18px ${TITLE}`;
+      g.fillStyle = "rgba(255, 247, 230, 0.9)";
+      const falls = world.deaths === 0 ? "without a scratch" : `after ${world.deaths} fall${world.deaths === 1 ? "" : "s"}`;
+      g.fillText(`${total} crystals in ${(win?.time ?? time).toFixed(1)}s, ${falls}`, view.width / 2, view.height / 2 + 32);
+      g.font = `400 13px ${TITLE}`;
+      g.fillStyle = "rgba(255, 247, 230, 0.55)";
+      g.fillText("Press R to wander again", view.width / 2, view.height / 2 + 66);
+      g.globalAlpha = 1;
+    }
+  },
+} satisfies Script;

package/templates/topdown/scripts/night.ts

@@ -0,0 +1,67 @@
+import type { Script } from "@ludra/core";
+
+/** A stable pseudo-random number per index, so fireflies keep their paths. */
+function hash(n: number): number {
+  const x = Math.sin(n * 91.7 + 47.3) * 43758.5453;
+  return x - Math.floor(x);
+}
+
+/**
+ * Moonlit night over the grove: darkness everywhere except the hero's lantern,
+ * then colored light from glowing things (params.lights maps an id prefix to a
+ * color), and fireflies. Presentation only: the darkness never hides a hazard
+ * completely (params.darkness stays well below 1).
+ */
+export default {
+  drawUI({ g, world, view, time }) {
+    const toScreen = (x: number, y: number) => [(x - view.cameraX) * view.zoom, (y - view.cameraY) * view.zoom] as const;
+    const hero = world.player();
+    const darkness = 0.62;
+
+    // Darkness with a soft hole where the lantern shines.
+    const [hx, hy] = hero ? toScreen(hero.x, hero.y) : [view.width / 2, view.height / 2];
+    const flicker = 1 + Math.sin(time * 11) * 0.015 + Math.sin(time * 7.3) * 0.02;
+    const night = g.createRadialGradient(hx, hy, 30 * flicker, hx, hy, 210 * flicker);
+    night.addColorStop(0, "rgba(6, 10, 30, 0)");
+    night.addColorStop(1, `rgba(6, 10, 30, ${darkness})`);
+    g.fillStyle = night;
+    g.fillRect(0, 0, view.width, view.height);
+
+    // Light from glowing things, added on top of the darkness.
+    g.globalCompositeOperation = "lighter";
+    const lights: Record<string, string> = { "gem-": "#2fb8ff", portal: "#b25cff", "slime-": "#8a3cff", thorns: "#ff3355" };
+    for (const e of world.all()) {
+      const prefix = Object.keys(lights).find((p) => e.id.startsWith(p));
+      if (!prefix) continue;
+      const [x, y] = toScreen(e.x, e.y);
+      const radius = (prefix === "portal" ? 110 : 60) * (0.85 + 0.15 * Math.sin(time * 2.4 + e.x));
+      const light = g.createRadialGradient(x, y, 0, x, y, radius);
+      light.addColorStop(0, `${lights[prefix]}66`);
+      light.addColorStop(1, `${lights[prefix]}00`);
+      g.fillStyle = light;
+      g.fillRect(x - radius, y - radius, radius * 2, radius * 2);
+    }
+    if (hero) {
+      const lantern = g.createRadialGradient(hx, hy, 0, hx, hy, 120 * flicker);
+      lantern.addColorStop(0, "rgba(255, 190, 110, 0.32)");
+      lantern.addColorStop(1, "rgba(255, 190, 110, 0)");
+      g.fillStyle = lantern;
+      g.fillRect(hx - 130, hy - 130, 260, 260);
+    }
+
+    // Fireflies drifting on their own little loops.
+    for (let i = 0; i < 36; i++) {
+      const [x, y] = toScreen(
+        hash(i) * world.width + Math.sin(time * (0.3 + hash(i + 50) * 0.5) + i) * 40,
+        hash(i + 100) * world.height + Math.cos(time * (0.25 + hash(i + 80) * 0.4) + i * 2) * 30,
+      );
+      const blink = Math.max(0, Math.sin(time * (1.5 + hash(i + 7) * 2) + i * 3));
+      g.fillStyle = `rgba(220, 255, 140, ${0.75 * blink})`;
+      g.shadowColor = "#d4ff6b";
+      g.shadowBlur = 10;
+      g.beginPath();
+      g.arc(x, y, 1.6, 0, Math.PI * 2);
+      g.fill();
+    }
+  },
+} satisfies Script;

package/templates/topdown/scripts/portal.ts

@@ -0,0 +1,34 @@
+import type { Script } from "@ludra/core";
+
+/**
+ * A vortex of light over the portal sprite. It spins slowly while the portal
+ * is asleep and wakes up (faster, brighter) once params.need crystals are found.
+ */
+export default {
+  draw({ g, self, world, params, time }) {
+    const awake = world.score >= (params.need as number);
+    const spin = time * (awake ? 3.2 : 0.9);
+    g.globalCompositeOperation = "lighter";
+    g.lineCap = "round";
+    for (let i = 0; i < 5; i++) {
+      const radius = 8 + i * 4.5;
+      const start = spin * (i % 2 === 0 ? 1 : -1.3) + i;
+      g.strokeStyle = i % 2 === 0 ? "#d8a6ff" : "#6be4ff";
+      g.globalAlpha = awake ? 0.9 : 0.35;
+      g.lineWidth = awake ? 2.5 : 1.5;
+      g.shadowColor = g.strokeStyle;
+      g.shadowBlur = awake ? 14 : 6;
+      g.beginPath();
+      g.arc(self.x, self.y, radius, start, start + Math.PI * 1.1);
+      g.stroke();
+    }
+    if (awake) {
+      const core = g.createRadialGradient(self.x, self.y, 0, self.x, self.y, 26);
+      core.addColorStop(0, "rgba(255, 255, 255, 0.9)");
+      core.addColorStop(1, "rgba(178, 92, 255, 0)");
+      g.globalAlpha = 0.7 + 0.3 * Math.sin(time * 6);
+      g.fillStyle = core;
+      g.fillRect(self.x - 26, self.y - 26, 52, 52);
+    }
+  },
+} satisfies Script;