@moood/render 0.1.2 → 0.1.3

package/engine/engine.js

@@ -352,8 +352,9 @@ const Moood = (() => {
   const STATE = { values: {}, ver: 0, was: key => STATE.values[key], sample: null };
   // what the shown scene's code shares (kit.js): the world's modules it lists and the scene's lib
   let SHARED = { kit: {}, lib: {} };
-  // Where an element is now, as its painting code says (e.at): fractions of the stage as seen
-  // from the start — speech bubbles and widgets follow it (stage.screenOf).
+  // Where an element is now, as its painting code says (e.at): the point it marks, in metres from
+  // its anchor as painted — speech bubbles and widgets follow it (stage.screenOf) wherever the
+  // element is put (its `place`)
   const FOCUS = new Map();
   // A platformer's hero as it moves now (camera.mode platform): its painting code reads e.hero —
   // { vx, vy (m/s), ground } — to move its legs; the engine moves and turns the painting itself.
@@ -376,22 +377,19 @@ const Moood = (() => {
       compiled.set(code, fn);
     }
     if (!fn) return;
-    // sky and ground elements are painted in stage heights from the stage's top-left corner, as
-    // seen from the start (x 0…W/H, y 0…1, with margins); others in metres from their anchor
-    const flat = o.sky || o.ground;
-    const ppm = flat ? H : o.size * H / (o.height || 2), x = flat ? 0 : o.x * W, y = flat ? 0 : o.y * H;
+    const [x, y, ppm] = anchorOf(o, W, H);
     ctx.save();
     ctx.translate(x, y);
     ctx.scale(ppm, ppm);
     ctx.fillStyle = ctx.strokeStyle = o.color || '#000000';
     ctx.lineCap = ctx.lineJoin = 'round';
     const period = o.period || 2;
-    // a point the code names, as painted — through whatever it did to the canvas since (translate,
-    // scale, rotate): [x, y, how much it is scaled]
+    // a point the code names, in its units from the anchor as painted — through whatever it did to
+    // the canvas since (translate, scale, rotate): [x, y, how much it is scaled]
     const base = ctx.getTransform(), unbase = base.inverse();
     const painted = (lx, ly) => {
       const now = ctx.getTransform(), q = unbase.transformPoint(now.transformPoint({ x: lx, y: ly }));
-      return [x + q.x * ppm, y + q.y * ppm, Math.hypot(now.a, now.b) / Math.hypot(base.a, base.b)];
+      return [q.x, q.y, Math.hypot(now.a, now.b) / Math.hypot(base.a, base.b)];
     };
     const read = { time: false, state: false };
     READS.set(o, read);
@@ -404,11 +402,11 @@ const Moood = (() => {
       light(lx, ly, r, color = '#ffd08a', strength = 0.6) {
         try {
           const [px, py, k] = painted(lx, ly);
-          lightsOut.push({ x: px, y: py, r: r * k * ppm, col: rgb(color), a: strength, flicker: o.flicker ?? 0.3 });
+          lightsOut.push({ x: x + px * ppm, y: y + py * ppm, r: r * k * ppm, col: rgb(color), a: strength, flicker: o.flicker ?? 0.3 });
         } catch (err) { reportError(o, err); }
       },
       // where this element is now (its head, say): what speaks or hovers over it follows this point
-      at(lx, ly) { if (o.id) { const [px, py] = painted(lx, ly); FOCUS.set(o.id, { x: px / W, y: py / H }); } },
+      at(lx, ly) { if (o.id) { const [px, py] = painted(lx, ly); FOCUS.set(o.id, { x: px, y: py }); } },
       anim: MooodKit.anim, kit: SHARED.kit, lib: SHARED.lib,
       was: (key, ago = 0) => { read.state = true; return STATE.was(key, ago); },
       speed: key => { read.state = true; const a = STATE.was(key, 0), b = STATE.was(key, 0.05); return typeof a === 'number' && typeof b === 'number' ? (a - b) / 0.05 : 0; },
@@ -417,6 +415,12 @@ const Moood = (() => {
     try { fn(ctx, e); } catch (err) { reportError(o, err); }
     ctx.restore();
   }
+  // Where a custom element's painting has its origin on the W × H stage, and its scale: [x, y, px a
+  // unit]. Sky and ground elements are painted in stage heights from the stage's top-left corner, as
+  // seen from the start (x 0…W/H, y 0…1, with margins); others in metres from their anchor.
+  function anchorOf(o, W, H) {
+    return o.sky || o.ground ? [0, 0, H] : [o.x * W, o.y * H, o.size * H / (o.height || 2)];
+  }
   // The box an object's painting fits in (pixels of the W × H stage): built-in kinds a fixed frame
   // around the base, custom ones their `box` in metres (default: a little wider than tall).
   function objectBox(o, W, H) {
@@ -545,6 +549,15 @@ const Moood = (() => {
     const land = (spec.layers || []).filter(L => LAND.has(L.kind));
     return land.length ? Math.min(...land.map(L => L.y)) : 0.6;
   }
+  // An element that moves through the world has `place`: its across, distance, elevation or x are the
+  // names of numbers in the state (metres) — it is where they say now, the rest as the spec has it.
+  const PLACE = ['across', 'distance', 'elevation', 'x'];
+  function placed(o) {
+    if (!o.place) return o;
+    const n = { ...o };
+    for (const f of PLACE) { const k = o.place[f]; if (typeof k === 'string' && typeof STATE.values[k] === 'number') n[f] = STATE.values[k]; }
+    return n;
+  }
   function depths(spec) {
     const layers = spec.layers || [];
     // An object stands where its base is — unless it is attached to a bigger one (a window on
@@ -589,21 +602,27 @@ const Moood = (() => {
     const paintZ = o => (o.plane ? planeZ(o) : custom(o) ? sightZ(o) : own(host(o) || o));
     const objectX = o => (bearing(o) ? 0.5 : typeof o.across === 'number' && !o.sky ? 0.5 + o.across / EYE / STAGE / paintZ(o) : o.x ?? 0.5);
     const objectY = o => (o.sky || o.ground ? 0 : custom(o) ? yh + (1 - (o.elevation || 0) / EYE) / sightZ(o) : o.kind === 'bird' ? o.y : o.y + shift(o));
+    const objectSize = o => (o.sky || o.ground ? 1 : custom(o) ? (o.height || 2) / EYE / sightZ(o) : o.size);
+    // where it stands in the world (eye heights: X to the right, Z ahead, Y its anchor's height) and
+    // the distance Zp it is painted for
+    const objectAt = o => {
+      const Zp = paintZ(o), Y = 1 - (objectY(o) - yh) * Zp;
+      if (!bearing(o)) return { X: (objectX(o) - 0.5) * STAGE * Zp, Y, Z: Zp, Zp };
+      const b = o.bearing * Math.PI / 180, d = o.distance / EYE;
+      return { X: d * Math.sin(b), Y, Z: d * Math.cos(b), Zp };
+    };
+    // ground planes are drawn right after the sky, under everything standing on them
+    // a horizontal plane (gl.js) is ordered by its far edge, before what stands on it
+    const objectZ = o => (o.sky ? Infinity : o.ground ? Z_FAR * 4 : o.plane ? clamp(planeZ(o) + (o.depth || 4) / 2 / EYE, Z_NEAR, Z_FAR) : custom(o) ? customZ(o) : o.kind === 'bird' ? 30 : own(host(o) || o));
     return {
-      yh, Z, objectX,
-      // where it stands in the world (eye heights: X to the right, Z ahead, Y its anchor's
-      // height) and the distance Zp it is painted for
-      objectAt: o => {
-        const Zp = paintZ(o), Y = 1 - (objectY(o) - yh) * Zp;
-        if (!bearing(o)) return { X: (objectX(o) - 0.5) * STAGE * Zp, Y, Z: Zp, Zp };
-        const b = o.bearing * Math.PI / 180, d = o.distance / EYE;
-        return { X: d * Math.sin(b), Y, Z: d * Math.cos(b), Zp };
+      yh, Z, objectX, objectAt, objectZ,
+      // an element where it is now (its `place`), the one truth the renderers, the picking and
+      // whatever follows it go by: { o: as painted on the stage (x, y, size: fractions of it),
+      // Z: the depth it is drawn at, at: where it stands in the world }
+      now: o => {
+        const n = placed(o);
+        return { o: { ...o, x: objectX(n), y: objectY(n), size: objectSize(n), _yh: yh }, Z: objectZ(n), at: objectAt(n) };
       },
-      // ground planes are drawn right after the sky, under everything standing on them
-      // a horizontal plane (gl.js) is ordered by its far edge, before what stands on it
-      objectZ: o => (o.sky ? Infinity : o.ground ? Z_FAR * 4 : o.plane ? clamp(planeZ(o) + (o.depth || 4) / 2 / EYE, Z_NEAR, Z_FAR) : custom(o) ? customZ(o) : o.kind === 'bird' ? 30 : own(host(o) || o)),
-      objectY,
-      objectSize: o => (o.sky || o.ground ? 1 : custom(o) ? (o.height || 2) / EYE / sightZ(o) : o.size),
     };
   }
   // Screen transform [a b c d e f] for a plane at distance Z (Infinity = the sky): maps the
@@ -635,10 +654,11 @@ const Moood = (() => {
     return { m: [s, 0, 0, s, q[0] - s * ax, q[1] - s * ay], D: q[2] };
   }
   // Where an element's painting (as depths() places it on the SW-wide stage) goes on the frame from
-  // camera cam: { m: the transform, D: its distance along the gaze }, or null behind the eye
+  // camera cam, where it is now: { m: the transform, D: its distance along the gaze }, or null behind the eye
   function placeOf(o, cam, W, H, dz, round) {
-    if (!round) { const Z = dz.objectZ(o); return { m: view(cam, Z, W, H, dz.yh), D: Z - cam.z }; }
-    return billboard(cam, dz.objectAt(o), dz.objectX(o) * STAGE * H, dz.objectY(o) * H, W, H, dz.yh);
+    const n = dz.now(o);
+    if (!round) return { m: view(cam, n.Z, W, H, dz.yh), D: n.Z - cam.z };
+    return billboard(cam, n.at, n.o.x * STAGE * H, n.o.y * H, W, H, dz.yh);
   }
   // The hero of a platformer h = { dx, dy (metres from where it is painted), flip } as a transform
   // of its painting: its anchor painted at x = ax, `ppm` painted px per metre
@@ -779,9 +799,12 @@ const Moood = (() => {
       if (L.kind === 'water') return { L, Z };
       return { L, Z, ...staticLayer(L, SW, H, seed + i * 101) };
     }).sort((a, b) => b.Z - a.Z);
-    // looking around, each also stands somewhere in the world (p, depths().objectAt)
-    const round = camSetup(spec).round;
-    const objects = (spec.objects || []).map(o => ({ o: { ...o, x: dz.objectX(o), y: dz.objectY(o), size: dz.objectSize(o), _yh: dz.yh }, Z: dz.objectZ(o), p: round && !o.sky && !o.ground ? dz.objectAt(o) : null })).sort((a, b) => (b.Z - a.Z) || 0);
+    // looking around, each also stands somewhere in the world (p, depths().objectAt); what moves
+    // through the world (`place`) is put where the state has it as each frame starts (move)
+    const round = camSetup(spec).round, farFirst = (a, b) => (b.Z - a.Z) || 0;
+    const at = o => { const n = dz.now(o); return { o: n.o, Z: n.Z, p: round && !o.sky && !o.ground ? n.at : null }; };
+    const objects = (spec.objects || []).map(o => ({ from: o, ...at(o) })).sort(farFirst), moving = objects.filter(ob => ob.from.place);
+    const move = () => { if (!moving.length) return; for (const ob of moving) Object.assign(ob, at(ob.from)); objects.sort(farFirst); };
     const sky = !spec.sky ? '#000000' : (() => {
       const c = document.createElement('canvas').getContext('2d');
       const g = c.createLinearGradient(0, 0, 0, H);
@@ -795,7 +818,7 @@ const Moood = (() => {
     v.addColorStop(0, 'rgba(0,0,0,0)');
     v.addColorStop(1, `rgba(0,0,0,${0.75 * clamp(spec.light?.vignette ?? 0.5, 0, 1)})`);
     vg.fillStyle = v; vg.fillRect(0, 0, W, H);
-    return { W, H, SW, u, x0, span, yh: dz.yh, round, lim: limits(spec, W, H), sky, stars, layers, particles, objects, vignette, scratch: layer(W, H) };
+    return { W, H, SW, u, x0, span, yh: dz.yh, round, lim: limits(spec, W, H), sky, stars, layers, particles, objects, move, vignette, scratch: layer(W, H) };
   }
 
   // Looking around, with Canvas 2D (the fallback): the sky turned as a flat band (not bent into a
@@ -852,6 +875,7 @@ const Moood = (() => {
   // S.out: where the frame lies in the canvas (pixels); the scene goes on around it as painted
   function frame(ctx, S, spec, cam, t, dt) {
     const { W, H, SW, u } = S, out = S.out;
+    S.move();
     ctx.setTransform(1, 0, 0, 1, 0, 0);
     ctx.fillStyle = '#000000';
     ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
@@ -1048,7 +1072,7 @@ const Moood = (() => {
     const pick = (clientX, clientY) => {
       const [cx, cy] = local(clientX, clientY), Hc = box.h, Wc = box.w, yh = S?.yh ?? 0.6, dz = spec ? depths(spec) : null;
       const at = D => ({ Z: target.z + D, x: target.x + (cx - Wc / 2) / Hc * D });
-      const near = (spec?.objects || []).filter(o => o.kind !== 'bird' && !o.sky && !o.ground && !o.plane).map(o => ({ o: { ...o, x: dz.objectX(o), y: dz.objectY(o), size: dz.objectSize(o), _yh: yh }, Z: dz.objectZ(o) }))
+      const near = (spec?.objects || []).filter(o => o.kind !== 'bird' && !o.sky && !o.ground && !o.plane).map(o => dz.now(o))
         .filter(({ Z }) => fadeNear(Z, target) > 0).sort((a, b) => a.Z - b.Z);
       for (const { o, Z } of near) {
         const m = view(target, Z, Wc, Hc, yh), b = objectBox(o, STAGE * Hc, Hc);
@@ -1114,32 +1138,31 @@ const Moood = (() => {
       glide.vy += ((target.y - y0) / dt - glide.vy) * k;
       lastMove = now;
     };
-    // where in the canvas (CSS px) an element is from camera c — the point its code marks (e.at),
-    // else its anchor (its top, with over) — lifted by `lift` metres: [x, y, its distance]; null
-    // when out of sight
+    // where in the canvas (CSS px) an element is from camera c — where its `place` has it now: the
+    // point its code marks (e.at), else its anchor (its top, with over) — lifted by `lift` metres:
+    // [x, y, its distance]; null when out of sight
     function seenFrom(c, id, lift = 0, over = false) {
       const o = (spec?.objects || []).find(o => o.id === id);
       if (!o || o.sky) return null;
       const W = box.w, H = box.h, dz = depths(spec), yh = dz.yh;
-      if (round()) {
-        // looking around: its anchor (or the point its code marks) seen from where you stand
-        const p = dz.objectAt(o);
-        if (o.plane || !FOCUS.has(id)) {
-          const q = project(c, p.X, p.Y + (lift + (over && !o.plane ? o.height ?? EYE : 0)) / EYE, p.Z, W, H, yh);
+      if (o.plane) {
+        const p = dz.objectAt(o), Z = p.Zp, up = lift / EYE;
+        if (round()) {
+          const q = project(c, p.X, p.Y + up, p.Z, W, H, yh);
           return q && q[2] > 0.3 ? [box.x + q[0], box.y + q[1], q[2]] : null;
         }
-        const b = billboard(c, p, dz.objectX(o) * STAGE * H, dz.objectY(o) * H, W, H, yh), f = FOCUS.get(id);
-        if (!b || b.D < 0.3) return null;
-        return [box.x + b.m[0] * f.x * STAGE * H + b.m[4], box.y + b.m[3] * (f.y * H - (lift / EYE) * H / p.Zp) + b.m[5], b.D];
+        if (fadeNear(Z, c) < 0.3) return null;
+        const m = view(c, Z, W, H, yh), px = dz.objectX(o) * STAGE * H, py = (yh + (1 - (o.elevation || 0) / EYE) / Z - up / Z) * H;
+        return [box.x + m[0] * px + m[4], box.y + m[3] * py + m[5], Z - c.z];
       }
-      const Z = o.plane ? (o.distance > 0 ? o.distance : 10) / EYE : dz.objectZ(o);
-      if (Z - c.z < 0.3 || fadeNear(Z, c) < 0.3) return null;
-      const f = FOCUS.get(id) || { x: dz.objectX(o), y: o.plane ? yh + (1 - (o.elevation || 0) / EYE) / Z : dz.objectY(o) };
+      const at = placeOf(o, c, W, H, dz, round());
+      // behind the eye, or faded out as it is passed (fadeNear)
+      if (!at || at.D < 0.48) return null;
+      const n = dz.now(o), [ax, ay, ppm] = anchorOf(n.o, STAGE * H, H), f = FOCUS.get(id) || { x: 0, y: 0 };
       if (over && !FOCUS.has(id)) lift += o.height ?? EYE;
-      const m = view(c, Z, W, H, yh);
-      let px = f.x * STAGE * H, py = f.y * H - (lift / EYE) * H / Z;
-      if (c.hero && id === c.hero.id) { const hm = heroMatrix(c.hero, dz.objectX(o) * STAGE * H, dz.objectSize(o) * H / (o.height || 2)); px = hm[0] * px + hm[4]; py += hm[5]; }
-      return [box.x + m[0] * px + m[4], box.y + m[3] * py + m[5], Z - c.z];
+      let px = ax + f.x * ppm, py = ay + f.y * ppm - lift / EYE * H / n.at.Zp;
+      if (c.hero && id === c.hero.id) { const hm = heroMatrix(c.hero, ax, ppm); px = hm[0] * px + hm[4]; py += hm[5]; }
+      return [box.x + at.m[0] * px + at.m[4], box.y + at.m[3] * py + at.m[5], at.D];
     }
     // the camera keeps the elements it follows in the visible part of the screen: together when
     // they fit, else the first of them

package/engine/engine.json

@@ -1 +1 @@
-{"engine":"717ecc3e74f1"}
+{"engine":"8bdd9745d005"}

package/engine/gl.js

@@ -453,7 +453,7 @@ const MooodGL = (() => {
       const objects = (spec.objects || []).map(o0 => {
         if (o0.plane) return planeOf(o0, dz, tex);
         // looking around, the sky is the full circle, 2π stage heights wide (engine.js)
-        const o = { ...o0, x: dz.objectX(o0), y: dz.objectY(o0), size: dz.objectSize(o0), _yh: dz.yh, _sw: ROUND && o0.sky ? I.TAU * H : SW }, Z = dz.objectZ(o0);
+        const n = dz.now(o0), o = { ...n.o, _sw: ROUND && o0.sky ? I.TAU * H : SW }, Z = n.Z;
         const x = o.x * SW, y = o.y * H, s = Math.max(2, o.size * H);
         if (o.kind === 'bird') {
           const canvas = paint(s * 1.2 * SS, s * 0.6 * SS, (g) => {
@@ -472,7 +472,7 @@ const MooodGL = (() => {
         const live = (o.kind === 'custom' || !o.kind) ? liveOf(o, o.frames, tex) : null;
         return {
           o, Z, x, y, s, bx, by, bw, bh, tex: frames[0], frames, period: o.period || 2, detail: null,
-          p: ROUND && !o.sky ? dz.objectAt(o0) : null,
+          p: ROUND && !o.sky ? n.at : null,
           live, ground: !!o.ground, from: o0.place ? o0 : null,
           reflect: o.reflect ?? (o.kind === 'boat' || o.kind === 'bridge'),
           lights: lights.map(l => ({ x: l.x, y: l.y, r: l.r, c: col(l.col), a: l.a, dot: l.dot, fire: o.kind === 'campfire', flicker: l.flicker })),
@@ -873,22 +873,18 @@ const MooodGL = (() => {
       }
     }
 
-    // An element that moves through the world (its `place`: {across, distance, elevation, x} — the
-    // names of numbers in the state, metres): put where the state says now — its size, its depth,
-    // its haze and what it is drawn in front of or behind follow.
+    // An element that moves through the world (its `place`): put where the state has it now
+    // (depths().now) — its size, its depth, its haze and what it is drawn in front of or behind follow.
     function placeMoving(S) {
-      const v = I.STATE.values;
       let moved = false;
       for (const ob of S.objects) {
         if (!ob.from) continue;
-        const o1 = { ...ob.from };
-        for (const [f, k] of Object.entries(ob.from.place)) if (typeof k === 'string' && typeof v[k] === 'number') o1[f] = v[k];
-        const key = `${o1.x}|${o1.across}|${o1.distance}|${o1.elevation}`;
+        const n = S.dz.now(ob.from), key = `${n.o.x}|${n.o.y}|${n.o.size}`;
         if (key === ob.placed) continue;
         ob.placed = key; moved = true;
-        const o = { ...ob.o, x: S.dz.objectX(o1), y: S.dz.objectY(o1), size: S.dz.objectSize(o1) };
-        Object.assign(ob, { o, Z: S.dz.objectZ(o1), x: o.x * SW, y: o.y * H, s: Math.max(2, o.size * H) }, I.objectBox(o, SW, H));
-        if (ROUND && !o.sky) ob.p = S.dz.objectAt(o1);
+        const o = { ...n.o, _sw: ob.o._sw };
+        Object.assign(ob, { o, Z: n.Z, x: o.x * SW, y: o.y * H, s: Math.max(2, o.size * H) }, I.objectBox(o, SW, H));
+        if (ROUND && !o.sky) ob.p = n.at;
       }
       if (!moved) return;
       for (const item of S.order) if (item.ob) item.Z = item.ob.Z;

package/engine/scenestate.js

@@ -7,10 +7,11 @@
 //   widgets — MooodState is global: get / set / on.
 // The painting code reads the current values as e.state and is repainted when they change. A
 // number may be set to move there over some seconds, along an easing curve (kit.js: smooth by
-// default — it starts and stops gently; linear, in, out, back, spring, anticipate…). What a value
-// was a moment ago stays known for a while (was): what lags behind — a coat's tail, hair, a
-// head that follows — reads it. A script may tell that something happened (scene.tell): the
-// game decides what it means.
+// default — it starts and stops gently; linear, in, out, back, spring, anticipate…). A value set
+// is heard once, where it is set to (on('change')); a value moving there is heard each frame as it
+// moves (on('move')). What a value was a moment ago stays known for a while (was): what lags
+// behind — a coat's tail, hair, a head that follows — reads it. A script may tell that something
+// happened (scene.tell): the game decides what it means.
 const MooodState = (() => {
   let stage = null, tell = null, save = null, t0 = performance.now();
   let values = {}, cur = {}, tweens = new Map(), listeners = [], timers = [], raf = 0, pending = {}, flushTimer = 0;
@@ -44,12 +45,14 @@ const MooodState = (() => {
   }
 
   function publish() { cur = { ...values }; for (const [k, tw] of tweens) cur[k] = along(tw, performance.now()); stage?.setState(cur, was, sample); }
-  // the moving values, where they are now (the stage asks as it paints a frame)
+  // the moving values, where they are now (the stage asks as it paints a frame): each heard moving
+  // from where it was last seen
   function sample() {
     if (!tweens.size) return;
-    const now = performance.now();
+    const now = performance.now(), before = cur, moving = [...tweens.keys()];
     for (const [k, tw] of tweens) if (now >= tw.end) tweens.delete(k);
     publish();
+    for (const k of moving) if (cur[k] !== before[k]) emit('move', k, cur[k], before[k], k);
   }
   function tick() {
     raf = 0;
@@ -167,7 +170,9 @@ const MooodState = (() => {
         }
         return end;
       },
-      // on('change', fn(value, old, key)) · on('change', key, fn) · on('load', fn(state))
+      // on('change', fn(value, old, key)) · on('change', key, fn) — a value set (with `over`: where it
+      // goes, once); on('move', [key,] fn(value, last, key)) — a value moving, each frame (set with
+      // `over`, path), till it stops; on('load', fn(state))
       on(ev, a, b) {
         const fn = typeof a === 'function' ? a : b, key = typeof a === 'function' ? null : String(a);
         listeners.push({ ev, key, fn, who });

package/engine/select.js

@@ -51,12 +51,12 @@ const MooodSelect = (() => {
     // so a plane's view() maps painted coordinates straight to where they are in the frame;
     // the frame lies at (x, y) in the canvas.
     const size = () => { const f = stage.frame(); return { W: f.w, H: f.h, SW: I.STAGE * f.h, x: f.x, y: f.y }; };
-    // objects stand where the engine puts them (it may move them to their real distance)
-    const placed = (dz, o) => ({ ...o, x: dz.objectX(o), y: dz.objectY(o), size: dz.objectSize(o), _yh: dz.yh });
+    // objects stand where the engine puts them now (its depths().now: their real distance, their `place`)
+    const placed = (dz, o) => dz.now(o).o;
     // a platformer's hero is drawn moved and turned (engine.js heroMatrix): so is its outline
     function heroed(m, o, cam, SW, H) {
       if (!o || !cam.hero || o.id !== cam.hero.id) return m;
-      const dz = I.depths(spec), h = I.heroMatrix(cam.hero, dz.objectX(o) * SW, dz.objectSize(o) * H / (o.height || 2));
+      const p = placed(I.depths(spec), o), h = I.heroMatrix(cam.hero, p.x * SW, p.size * H / (o.height || 2));
       return [m[0] * h[0], 0, 0, m[3], m[0] * h[4] + m[4], m[3] * h[5] + m[5]];
     }
     const layerSeed = i => I.hash(JSON.stringify(spec.layers || []) + (spec.title || '')) + i * 101;
@@ -125,7 +125,7 @@ const MooodSelect = (() => {
         const c = I.layer(b.bw * k, b.bh * k), g = c.getContext('2d');
         g.setTransform(k, 0, 0, k, -b.bx * k, -b.by * k);
         I.drawObject(g, o, SW, H, 0, []);
-        return { c, x: b.bx, y: b.by, k, Z: dz.objectZ(it), obj: it };
+        return { c, x: b.bx, y: b.by, k, Z: dz.now(it).Z, obj: it };
       }
       if (sel.startsWith('layers') && LAND.has(it.kind)) {
         if (it.kind === 'water') {
@@ -239,7 +239,7 @@ const MooodSelect = (() => {
       if (!coverage.has(path)) {
         const { W, H, SW } = size(), dz = I.depths(spec), it = item(spec, path), n = 64, c = I.layer(n, n * H / W), g = c.getContext('2d');
         // from the start — looking around, turned toward it
-        const round = I.camSetup(spec).round, p = round && !it.sky ? dz.objectAt(it) : null;
+        const round = I.camSetup(spec).round, p = round && !it.sky ? dz.now(it).at : null;
         const at = I.placeOf(it, { x: 0, y: 0, z: 0, h: 1, yaw: p ? Math.atan2(p.X, p.Z) : 0 }, W, H, dz, round && !it.sky), k = n / W;
         const m = at ? at.m : [0, 0, 0, 0, 0, 0];
         g.setTransform(m[0] * k, 0, 0, m[3] * k, m[4] * k, m[5] * k);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moood/render",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "A moood scene rendered locally — the site's own engine, in a browser already installed — at a moment, with a state: a PNG and the errors its code threw.",
   "license": "UNLICENSED",
   "type": "module",