@ludra/cli 0.5.0 → 0.8.0

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

@@ -1,20 +1,146 @@
 {
-  "name": "Level 1",
-  "world": { "width": 1920, "height": 540, "gravity": 1800, "background": "#1b2140" },
+  "name": "Night Meadow",
+  "world": {
+    "width": 1920,
+    "height": 540,
+    "gravity": 1800,
+    "background": "#1b2140",
+    "lives": 3
+  },
+  "fonts": {
+    "Fredoka": "google"
+  },
+  "postfx": {
+    "shader": "shaders/glow.frag",
+    "uniforms": {
+      "bloom": 1.3,
+      "warmth": 0.7,
+      "vignette": 1
+    }
+  },
   "effects": {
-    "jump": { "sound": "jump", "particles": { "count": 6, "color": "#cfd8ff", "speed": 60, "direction": 90, "spread": 150, "life": 0.25, "size": 3, "gravity": 0 } },
-    "land": { "sound": "thud", "particles": { "count": 5, "color": "#cfd8ff", "speed": 50, "direction": -90, "spread": 160, "life": 0.2, "size": 2, "gravity": 300 } },
-    "collect": { "sound": "coin", "particles": { "count": 14, "color": "#ffd166", "speed": 140, "life": 0.45, "size": 3, "gravity": 200 } },
-    "stomp": { "sound": "hit", "shake": 5, "particles": { "count": 18, "color": "#c77dff", "speed": 180, "life": 0.5, "size": 4 } },
-    "die": { "sound": "explosion", "shake": 10, "particles": { "count": 30, "color": "#ff5d73", "speed": 220, "life": 0.7, "size": 4 } },
-    "win": { "sound": "powerup", "shake": 3, "particles": { "count": 60, "color": "#4cc9f0", "speed": 260, "life": 1.2, "size": 4, "gravity": 150 } }
+    "jump": {
+      "sound": "jump",
+      "particles": {
+        "count": 6,
+        "color": "#cfd8ff",
+        "speed": 60,
+        "direction": 90,
+        "spread": 150,
+        "life": 0.25,
+        "size": 3,
+        "gravity": 0
+      }
+    },
+    "land": {
+      "sound": "thud",
+      "particles": {
+        "count": 5,
+        "color": "#cfd8ff",
+        "speed": 50,
+        "direction": -90,
+        "spread": 160,
+        "life": 0.2,
+        "size": 2,
+        "gravity": 300
+      }
+    },
+    "collect": {
+      "sound": "coin",
+      "particles": {
+        "count": 14,
+        "color": "#ffd166",
+        "speed": 140,
+        "life": 0.45,
+        "size": 3,
+        "gravity": 200
+      }
+    },
+    "stomp": {
+      "sound": "hit",
+      "shake": 5,
+      "particles": {
+        "count": 18,
+        "color": "#c77dff",
+        "speed": 180,
+        "life": 0.5,
+        "size": 4
+      }
+    },
+    "die": {
+      "sound": "explosion",
+      "shake": 10,
+      "particles": {
+        "count": 30,
+        "color": "#ff5d73",
+        "speed": 220,
+        "life": 0.7,
+        "size": 4
+      }
+    },
+    "win": {
+      "sound": "powerup",
+      "shake": 3,
+      "particles": {
+        "count": 60,
+        "color": "#4cc9f0",
+        "speed": 260,
+        "life": 1.2,
+        "size": 4,
+        "gravity": 150
+      }
+    },
+    "checkpoint": {
+      "sound": "powerup",
+      "particles": {
+        "count": 24,
+        "color": "#ffd166",
+        "speed": 120,
+        "life": 0.7,
+        "size": 3,
+        "gravity": -60
+      }
+    },
+    "gameover": {
+      "sound": "explosion",
+      "shake": 12
+    }
   },
   "entities": [
+    {
+      "id": "sky",
+      "components": {
+        "transform": {
+          "x": 0,
+          "y": 0
+        },
+        "script": {
+          "src": "scripts/backdrop.ts",
+          "params": {
+            "sky": [
+              "#0b1030",
+              "#2d3366"
+            ],
+            "hills": [
+              "#27306a",
+              "#1a2148"
+            ]
+          }
+        }
+      }
+    },
     {
       "id": "player",
       "components": {
-        "transform": { "x": 80, "y": 482 },
-        "body": { "type": "dynamic", "width": 28, "height": 36 },
+        "transform": {
+          "x": 80,
+          "y": 482
+        },
+        "body": {
+          "type": "dynamic",
+          "width": 28,
+          "height": 36
+        },
         "sprite": {
           "color": "#7cf29c",
           "image": "assets/player.svg",
@@ -27,127 +153,298 @@
           "fps": 10,
           "layer": 3
         },
-        "platformer": { "speed": 240, "jumpSpeed": 680 },
+        "platformer": {
+          "speed": 240,
+          "jumpSpeed": 680
+        },
         "camera": {}
       }
     },
     {
       "id": "ground-start",
       "components": {
-        "transform": { "x": 380, "y": 520 },
-        "body": { "type": "static", "width": 760, "height": 40 },
-        "sprite": { "color": "#3b4766", "image": "assets/ground.svg", "tile": true }
+        "transform": {
+          "x": 380,
+          "y": 520
+        },
+        "body": {
+          "type": "static",
+          "width": 760,
+          "height": 40
+        },
+        "sprite": {
+          "color": "#3b4766",
+          "image": "assets/ground.svg",
+          "tile": true
+        }
       }
     },
     {
       "id": "ground-end",
       "components": {
-        "transform": { "x": 1450, "y": 520 },
-        "body": { "type": "static", "width": 940, "height": 40 },
-        "sprite": { "color": "#3b4766", "image": "assets/ground.svg", "tile": true }
+        "transform": {
+          "x": 1450,
+          "y": 520
+        },
+        "body": {
+          "type": "static",
+          "width": 940,
+          "height": 40
+        },
+        "sprite": {
+          "color": "#3b4766",
+          "image": "assets/ground.svg",
+          "tile": true
+        }
       }
     },
     {
       "id": "wall-left",
       "components": {
-        "transform": { "x": -10, "y": 270 },
-        "body": { "type": "static", "width": 20, "height": 540 }
+        "transform": {
+          "x": -10,
+          "y": 270
+        },
+        "body": {
+          "type": "static",
+          "width": 20,
+          "height": 540
+        }
       }
     },
     {
       "id": "wall-right",
       "components": {
-        "transform": { "x": 1930, "y": 270 },
-        "body": { "type": "static", "width": 20, "height": 540 }
+        "transform": {
+          "x": 1930,
+          "y": 270
+        },
+        "body": {
+          "type": "static",
+          "width": 20,
+          "height": 540
+        }
       }
     },
     {
       "id": "ledge",
       "components": {
-        "transform": { "x": 300, "y": 410 },
-        "body": { "type": "static", "width": 160, "height": 20 },
-        "sprite": { "color": "#56658f", "image": "assets/platform.svg", "tile": true }
+        "transform": {
+          "x": 300,
+          "y": 410
+        },
+        "body": {
+          "type": "static",
+          "width": 160,
+          "height": 20
+        },
+        "sprite": {
+          "color": "#56658f",
+          "image": "assets/platform.svg",
+          "tile": true
+        }
       }
     },
     {
       "id": "coin-1",
+      "prefab": "coin",
       "components": {
-        "transform": { "x": 300, "y": 370 },
-        "body": { "type": "static", "width": 20, "height": 20, "sensor": true },
-        "sprite": { "shape": "circle", "color": "#ffd166", "image": "assets/coin.svg", "frameWidth": 20, "idle": "0-3", "layer": 1 },
-        "collectible": { "score": 1 }
+        "transform": {
+          "x": 300,
+          "y": 370
+        }
       }
     },
     {
       "id": "spikes",
       "components": {
-        "transform": { "x": 560, "y": 492 },
-        "body": { "type": "static", "width": 80, "height": 16, "sensor": true },
-        "sprite": { "color": "#ff5d73", "image": "assets/spikes.svg", "tile": true, "layer": 1 },
+        "transform": {
+          "x": 560,
+          "y": 492
+        },
+        "body": {
+          "type": "static",
+          "width": 80,
+          "height": 16,
+          "sensor": true
+        },
+        "sprite": {
+          "color": "#ff5d73",
+          "image": "assets/spikes.svg",
+          "tile": true,
+          "layer": 1
+        },
         "hazard": {}
       }
     },
     {
       "id": "lift",
       "components": {
-        "transform": { "x": 800, "y": 440 },
-        "body": { "type": "kinematic", "width": 120, "height": 20 },
-        "sprite": { "color": "#8fa3d9", "image": "assets/lift.svg", "tile": true },
-        "patrol": { "axis": "x", "distance": 140, "speed": 90 }
+        "transform": {
+          "x": 800,
+          "y": 440
+        },
+        "body": {
+          "type": "kinematic",
+          "width": 120,
+          "height": 20
+        },
+        "sprite": {
+          "color": "#8fa3d9",
+          "image": "assets/lift.svg",
+          "tile": true
+        },
+        "patrol": {
+          "axis": "x",
+          "distance": 140,
+          "speed": 90
+        }
       }
     },
     {
       "id": "coin-2",
+      "prefab": "coin",
       "components": {
-        "transform": { "x": 870, "y": 390 },
-        "body": { "type": "static", "width": 20, "height": 20, "sensor": true },
-        "sprite": { "shape": "circle", "color": "#ffd166", "image": "assets/coin.svg", "frameWidth": 20, "idle": "0-3", "layer": 1 },
-        "collectible": { "score": 1 }
+        "transform": {
+          "x": 870,
+          "y": 390
+        }
       }
     },
     {
       "id": "slime",
+      "prefab": "slime",
       "components": {
-        "transform": { "x": 1150, "y": 487 },
-        "body": { "type": "kinematic", "width": 32, "height": 26, "sensor": true },
-        "sprite": { "color": "#c77dff", "image": "assets/slime.svg", "frameWidth": 32, "idle": "0", "run": "0-1", "fps": 4, "layer": 2 },
-        "patrol": { "axis": "x", "distance": 200, "speed": 70 },
-        "hazard": { "stompable": true, "score": 1 }
+        "transform": {
+          "x": 1150,
+          "y": 487
+        }
       }
     },
     {
       "id": "step-1",
       "components": {
-        "transform": { "x": 1500, "y": 410 },
-        "body": { "type": "static", "width": 140, "height": 20 },
-        "sprite": { "color": "#56658f", "image": "assets/platform.svg", "tile": true }
+        "transform": {
+          "x": 1500,
+          "y": 410
+        },
+        "body": {
+          "type": "static",
+          "width": 140,
+          "height": 20
+        },
+        "sprite": {
+          "color": "#56658f",
+          "image": "assets/platform.svg",
+          "tile": true
+        }
       }
     },
     {
       "id": "step-2",
       "components": {
-        "transform": { "x": 1680, "y": 330 },
-        "body": { "type": "static", "width": 140, "height": 20 },
-        "sprite": { "color": "#56658f", "image": "assets/platform.svg", "tile": true }
+        "transform": {
+          "x": 1680,
+          "y": 330
+        },
+        "body": {
+          "type": "static",
+          "width": 140,
+          "height": 20
+        },
+        "sprite": {
+          "color": "#56658f",
+          "image": "assets/platform.svg",
+          "tile": true
+        }
       }
     },
     {
       "id": "coin-3",
+      "prefab": "coin",
       "components": {
-        "transform": { "x": 1680, "y": 290 },
-        "body": { "type": "static", "width": 20, "height": 20, "sensor": true },
-        "sprite": { "shape": "circle", "color": "#ffd166", "image": "assets/coin.svg", "frameWidth": 20, "idle": "0-3", "layer": 1 },
-        "collectible": { "score": 1 }
+        "transform": {
+          "x": 1680,
+          "y": 290
+        }
+      }
+    },
+    {
+      "id": "lantern",
+      "components": {
+        "transform": {
+          "x": 1060,
+          "y": 468
+        },
+        "body": {
+          "type": "static",
+          "width": 24,
+          "height": 64,
+          "sensor": true
+        },
+        "sprite": {
+          "color": "#6b4f3a",
+          "image": "assets/lantern.svg",
+          "layer": 1
+        },
+        "checkpoint": {},
+        "script": {
+          "src": "scripts/lantern.ts"
+        }
       }
     },
     {
       "id": "flag",
       "components": {
-        "transform": { "x": 1860, "y": 460 },
-        "body": { "type": "static", "width": 24, "height": 80, "sensor": true },
-        "sprite": { "color": "#4cc9f0", "image": "assets/flag.svg", "frameWidth": 24, "idle": "0-1", "fps": 3, "flip": false, "layer": 1 },
-        "emitter": { "rate": 6, "color": "#fff3b0", "speed": 30, "spread": 70, "life": 1.2, "size": 3, "gravity": -20 },
-        "goal": { "requireScore": 4 }
+        "transform": {
+          "x": 1860,
+          "y": 460
+        },
+        "body": {
+          "type": "static",
+          "width": 24,
+          "height": 80,
+          "sensor": true
+        },
+        "sprite": {
+          "color": "#4cc9f0",
+          "image": "assets/flag.svg",
+          "frameWidth": 24,
+          "idle": "0-1",
+          "fps": 3,
+          "flip": false,
+          "layer": 1
+        },
+        "emitter": {
+          "rate": 6,
+          "color": "#fff3b0",
+          "speed": 30,
+          "spread": 70,
+          "life": 1.2,
+          "size": 3,
+          "gravity": -20
+        },
+        "goal": {
+          "requireScore": 4,
+          "next": "scenes/level-2.scene.json"
+        }
+      }
+    },
+    {
+      "id": "hud",
+      "components": {
+        "transform": {
+          "x": 0,
+          "y": 0
+        },
+        "script": {
+          "src": "scripts/hud.ts",
+          "params": {
+            "title": "Night Meadow",
+            "level": 1,
+            "lives": 3
+          }
+        }
       }
     }
   ]

package/templates/platformer/scripts/backdrop.ts

@@ -0,0 +1,75 @@
+import type { Script } from "@ludra/core";
+
+/** A stable pseudo-random number per index, so stars and hills don't jitter. */
+function hash(n: number): number {
+  const x = Math.sin(n * 157.3 + 21.9) * 43758.5453;
+  return x - Math.floor(x);
+}
+
+/**
+ * A night sky that moves at its own pace behind the level: stars, a glowing
+ * moon and two rows of hills scrolling slower than the camera (parallax).
+ * params.sky and params.hills set the palette, so each level can have its own night.
+ */
+export default {
+  draw({ g, view, time, params }) {
+    const [top, bottom] = params.sky as [string, string];
+    const [far, near] = params.hills as [string, string];
+    // Draw in screen space: the sky stays put while the level scrolls.
+    g.translate(view.cameraX, view.cameraY);
+    const { width: w, height: h } = view;
+
+    const sky = g.createLinearGradient(0, 0, 0, h);
+    sky.addColorStop(0, top);
+    sky.addColorStop(1, bottom);
+    g.fillStyle = sky;
+    g.fillRect(0, 0, w, h);
+
+    for (let i = 0; i < 90; i++) {
+      // Stars drift a little with the camera, the slowest layer of all.
+      const x = (((hash(i) * w * 2 - view.cameraX * 0.05) % w) + w) % w;
+      g.globalAlpha = 0.3 + 0.6 * Math.abs(Math.sin(time * (0.5 + hash(i + 9)) + i));
+      g.fillStyle = "#e8eeff";
+      g.fillRect(x, hash(i + 40) * h * 0.6, i % 9 === 0 ? 2 : 1, i % 9 === 0 ? 2 : 1);
+    }
+    g.globalAlpha = 1;
+
+    const moonX = w * 0.78 - view.cameraX * 0.03;
+    const glow = g.createRadialGradient(moonX, 90, 10, moonX, 90, 140);
+    glow.addColorStop(0, "rgba(255, 244, 214, 0.35)");
+    glow.addColorStop(1, "rgba(255, 244, 214, 0)");
+    g.fillStyle = glow;
+    g.fillRect(moonX - 140, -50, 280, 280);
+    g.fillStyle = "#fff4d6";
+    g.shadowColor = "#fff4d6";
+    g.shadowBlur = 30;
+    g.beginPath();
+    g.arc(moonX, 90, 34, 0, Math.PI * 2);
+    g.fill();
+    g.shadowBlur = 0;
+    g.fillStyle = "rgba(200, 190, 170, 0.35)";
+    for (const [dx, dy, r] of [[-10, -8, 7], [12, 6, 5], [-2, 14, 4]] as const) {
+      g.beginPath();
+      g.arc(moonX + dx, 90 + dy, r, 0, Math.PI * 2);
+      g.fill();
+    }
+
+    // Two rows of rolling hills; the nearer row scrolls faster.
+    const hills = (color: string, speed: number, base: number, height: number, seed: number) => {
+      g.fillStyle = color;
+      g.beginPath();
+      g.moveTo(0, h);
+      const offset = view.cameraX * speed;
+      for (let x = 0; x <= w + 20; x += 20) {
+        const u = (x + offset) / 160;
+        const y = base - height * (0.55 + 0.45 * Math.sin(u + seed) * Math.cos(u * 0.37 + seed * 2));
+        g.lineTo(x, y);
+      }
+      g.lineTo(w, h);
+      g.closePath();
+      g.fill();
+    };
+    hills(far, 0.15, h * 0.72, 90, 1);
+    hills(near, 0.35, h * 0.86, 70, 4);
+  },
+} satisfies Script;