@ludra/cli 0.4.0 → 0.7.0

package/templates/topdown/assets/portal.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="80" height="40" viewBox="0 0 80 40">
+  <!-- Spritesheet: 2 frames of 40x40, a swirling exit portal set in stone. -->
+  <g>
+    <circle cx="20" cy="20" r="18" fill="#56658f"/>
+    <circle cx="20" cy="20" r="14" fill="#7b2cbf"/>
+    <path d="M20 8 a12 12 0 0 1 0 24 a6 6 0 0 1 0 -12 a3 3 0 0 0 0 -6" fill="#c77dff"/>
+    <circle cx="20" cy="20" r="3" fill="#f3d9ff"/>
+  </g>
+  <g transform="translate(40 0)">
+    <circle cx="20" cy="20" r="18" fill="#56658f"/>
+    <circle cx="20" cy="20" r="14" fill="#7b2cbf"/>
+    <path d="M32 20 a12 12 0 0 1 -24 0 a6 6 0 0 1 12 0 a3 3 0 0 0 6 0" fill="#c77dff"/>
+    <circle cx="20" cy="20" r="4" fill="#f3d9ff"/>
+  </g>
+</svg>

package/templates/topdown/assets/slime.svg

@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="26" viewBox="0 0 64 26">
+  <!-- Spritesheet: 2 frames of 32x26, a bouncing slime facing right. -->
+  <g>
+    <path d="M2 25 C 2 10, 8 3, 16 3 C 24 3, 30 10, 30 25 Z" fill="#c77dff"/>
+    <path d="M5 25 C 5 18, 9 14, 13 14 C 9 17, 8 21, 8 25 Z" fill="#e0b0ff" opacity="0.7"/>
+    <path d="M14 11 l 6 2" stroke="#2a1440" stroke-width="2" stroke-linecap="round"/>
+    <path d="M27 11 l -4 2" stroke="#2a1440" stroke-width="2" stroke-linecap="round"/>
+    <circle cx="18" cy="15" r="2" fill="#2a1440"/>
+    <circle cx="24" cy="15" r="2" fill="#2a1440"/>
+    <path d="M17 20 q 4 2 8 0" stroke="#2a1440" stroke-width="1.5" fill="none" stroke-linecap="round"/>
+  </g>
+  <g transform="translate(32 0)">
+    <path d="M0 25 C 0 14, 7 8, 16 8 C 25 8, 32 14, 32 25 Z" fill="#c77dff"/>
+    <path d="M3 25 C 3 20, 7 17, 11 17 C 7 19, 6 22, 6 25 Z" fill="#e0b0ff" opacity="0.7"/>
+    <path d="M14 15 l 6 2" stroke="#2a1440" stroke-width="2" stroke-linecap="round"/>
+    <path d="M28 15 l -4 2" stroke="#2a1440" stroke-width="2" stroke-linecap="round"/>
+    <circle cx="18" cy="18.5" r="2" fill="#2a1440"/>
+    <circle cx="24.5" cy="18.5" r="2" fill="#2a1440"/>
+    <path d="M17 22.5 q 4 1.5 8 0" stroke="#2a1440" stroke-width="1.5" fill="none" stroke-linecap="round"/>
+  </g>
+</svg>

package/templates/topdown/assets/thorns.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+  <!-- Tile: a patch of thorns, seen from above. Deadly. -->
+  <rect width="20" height="20" fill="#4a2a35"/>
+  <path d="M5 5 l-3 -3 M5 5 l3 -3 M5 5 l0 4" stroke="#ff5d73" stroke-width="1.6" stroke-linecap="round"/>
+  <path d="M15 12 l-3 -3 M15 12 l3 -3 M15 12 l0 4" stroke="#ff5d73" stroke-width="1.6" stroke-linecap="round"/>
+  <path d="M6 16 l-2 -2 M6 16 l2 -2" stroke="#ff8fa0" stroke-width="1.4" stroke-linecap="round"/>
+</svg>

package/templates/topdown/ludra.json

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

package/templates/topdown/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"
+  }
+}

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;