@ganziliang/desktop-pet 0.1.0

package/renderer/fx.js

@@ -0,0 +1,1057 @@
+'use strict';
+
+/**
+ * 特效引擎 —— 觉醒技能 / 战斗特效
+ *
+ * 为什么不用现有的 DOM 粒子（.p / .heart 那套）：
+ *   一个 DOM 粒子 = 一个元素 + 一条 CSS 动画。觉醒爆发一帧要几百个粒子，
+ *   DOM 会直接把合成层压垮；canvas 每个粒子只是一次 drawImage。
+ *
+ * 三条性能约定（都踩过）：
+ *   1. 所有形状预渲染成离屏贴图（texCache），每帧只 drawImage。
+ *      每帧 createRadialGradient 在几百个粒子上会把帧率打掉一半。
+ *   2. 粒子用扁平对象池 + 上限覆盖，不在爆发时 new 几千个对象触发 GC 掉帧。
+ *   3. 加色混合 'lighter'，光效自己叠加发亮，不用画多层。
+ *
+ * 坐标系：canvas 铺满窗口，内部按 CSS 像素绘制（用 dpr 变换），
+ * 所以调用方给的坐标就是 element.getBoundingClientRect() 的坐标，不用换算。
+ */
+
+const FX = (() => {
+  const TAU = Math.PI * 2;
+  const MAX_P = 1500;
+
+  let canvas = null;
+  let g = null;
+  let W = 0;
+  let H = 0;
+  let dpr = 1;
+  let raf = 0;
+  let last = 0;
+
+  /* ------------------------------------------------------------ 颜色 */
+
+  function rgbOf(c) {
+    if (Array.isArray(c)) return c;
+    const s = String(c ?? '').trim();
+    if (s[0] === '#') {
+      let h = s.slice(1);
+      if (h.length === 3) h = h[0] + h[0] + h[1] + h[1] + h[2] + h[2];
+      const n = parseInt(h, 16);
+      return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+    }
+    const m = s.match(/\d+(?:\.\d+)?/g);
+    return m && m.length >= 3 ? m.slice(0, 3).map(Number) : [255, 255, 255];
+  }
+
+  const rgba = (c, a) => {
+    const [r, gg, b] = rgbOf(c);
+    return `rgba(${r},${gg},${b},${a})`;
+  };
+
+  /* -------------------------------------------------------- 贴图工厂 */
+
+  const texCache = new Map();
+
+  function makeTex(key, w, h, draw) {
+    const hit = texCache.get(key);
+    if (hit) return hit;
+    const t = document.createElement('canvas');
+    t.width = w;
+    t.height = h;
+    draw(t.getContext('2d'), w, h);
+    texCache.set(key, t);
+    return t;
+  }
+
+  /** 圆形光斑：粒子、光柱、光晕的通用底 */
+  function glowTex(color, size = 96) {
+    return makeTex(`glow|${color}|${size}`, size, size, (c, w) => {
+      const r = w / 2;
+      const grd = c.createRadialGradient(r, r, 0, r, r, r);
+      grd.addColorStop(0, rgba(color, 1));
+      grd.addColorStop(0.26, rgba(color, 0.6));
+      grd.addColorStop(0.6, rgba(color, 0.15));
+      grd.addColorStop(1, rgba(color, 0));
+      c.fillStyle = grd;
+      c.fillRect(0, 0, w, w);
+    });
+  }
+
+  /** 四角星：觉醒爆发的主视觉粒子（白色核心 + 主题色光晕） */
+  function starTex(color, size = 96) {
+    return makeTex(`star|${color}|${size}`, size, size, (c, w) => {
+      const r = w / 2;
+      const wa = r * 0.13;
+      c.translate(r, r);
+      const grd = c.createRadialGradient(0, 0, 0, 0, 0, r);
+      grd.addColorStop(0, rgba(color, 0.85));
+      grd.addColorStop(0.34, rgba(color, 0.3));
+      grd.addColorStop(1, rgba(color, 0));
+      c.fillStyle = grd;
+      c.beginPath();
+      c.arc(0, 0, r, 0, TAU);
+      c.fill();
+      // 交叉两根尖角，拼出闪光
+      c.globalAlpha = 0.95;
+      c.fillStyle = '#ffffff';
+      for (let i = 0; i < 2; i++) {
+        c.save();
+        c.rotate((i * Math.PI) / 2);
+        c.beginPath();
+        c.moveTo(0, -r);
+        c.quadraticCurveTo(wa, -wa, r, 0);
+        c.quadraticCurveTo(wa, wa, 0, r);
+        c.quadraticCurveTo(-wa, wa, -r, 0);
+        c.quadraticCurveTo(-wa, -wa, 0, -r);
+        c.closePath();
+        c.fill();
+        c.restore();
+      }
+    });
+  }
+
+  /** 菱形碎片（水晶 / 玻璃 / 冰） */
+  function shardTex(color, size = 72) {
+    return makeTex(`shard|${color}|${size}`, Math.round(size * 0.4), size, (c, w, h) => {
+      c.translate(w / 2, h / 2);
+      const grd = c.createLinearGradient(-w / 2, -h / 2, w / 2, h / 2);
+      grd.addColorStop(0, rgba(color, 0.2));
+      grd.addColorStop(0.45, rgba(color, 1));
+      grd.addColorStop(0.56, '#ffffff');
+      grd.addColorStop(1, rgba(color, 0.3));
+      c.fillStyle = grd;
+      c.beginPath();
+      c.moveTo(0, -h / 2);
+      c.lineTo(w / 2, 0);
+      c.lineTo(0, h / 2);
+      c.lineTo(-w / 2, 0);
+      c.closePath();
+      c.fill();
+    });
+  }
+
+  /** 羽毛（圣光觉醒飘落） */
+  function featherTex(color, size = 72) {
+    return makeTex(`feather|${color}|${size}`, Math.round(size * 0.46), size, (c, w, h) => {
+      const cx = w / 2;
+      c.fillStyle = rgba(color, 0.92);
+      c.beginPath();
+      c.moveTo(cx, 2);
+      c.quadraticCurveTo(w - 1, h * 0.36, cx, h - 2);
+      c.quadraticCurveTo(1, h * 0.36, cx, 2);
+      c.closePath();
+      c.fill();
+      c.strokeStyle = 'rgba(255,255,255,0.8)';
+      c.lineWidth = 1.2;
+      c.beginPath();
+      c.moveTo(cx, 3);
+      c.lineTo(cx, h - 3);
+      c.stroke();
+    });
+  }
+
+  /**
+   * 魔法阵 / 符文阵。
+   * 伪符文是用笔画出来的，不依赖任何字体 —— 换机器不会变成方块。
+   */
+  function sigilTex(color, size = 512) {
+    return makeTex(`sigil|${color}|${size}`, size, size, (c, w) => {
+      const r = w / 2;
+      c.translate(r, r);
+      c.strokeStyle = rgba(color, 0.95);
+      c.shadowColor = rgba(color, 0.9);
+      c.shadowBlur = 10;
+      const circle = (rad, lw) => {
+        c.lineWidth = lw;
+        c.beginPath();
+        c.arc(0, 0, rad, 0, TAU);
+        c.stroke();
+      };
+      circle(r * 0.97, 2.6);
+      circle(r * 0.9, 1.4);
+      circle(r * 0.63, 1.6);
+      circle(r * 0.4, 2.2);
+
+      const poly = (n, rad, off) => {
+        c.beginPath();
+        for (let i = 0; i <= n; i++) {
+          const a = off + (i / n) * TAU;
+          const x = Math.cos(a) * rad;
+          const y = Math.sin(a) * rad;
+          i ? c.lineTo(x, y) : c.moveTo(x, y);
+        }
+        c.stroke();
+      };
+      c.lineWidth = 2;
+      poly(6, r * 0.9, 0);
+      poly(3, r * 0.63, Math.PI / 2);
+      poly(3, r * 0.63, -Math.PI / 2);
+
+      // 外圈刻度
+      c.lineWidth = 2.2;
+      for (let i = 0; i < 48; i++) {
+        const a = (i / 48) * TAU;
+        const r0 = r * (i % 4 === 0 ? 0.8 : 0.855);
+        c.beginPath();
+        c.moveTo(Math.cos(a) * r0, Math.sin(a) * r0);
+        c.lineTo(Math.cos(a) * r * 0.9, Math.sin(a) * r * 0.9);
+        c.stroke();
+      }
+
+      // 一圈伪符文
+      c.lineWidth = 1.5;
+      for (let i = 0; i < 24; i++) {
+        const a = (i / 24) * TAU;
+        const rad = r * 0.75;
+        c.save();
+        c.translate(Math.cos(a) * rad, Math.sin(a) * rad);
+        c.rotate(a);
+        c.beginPath();
+        c.moveTo(-3, -5);
+        c.lineTo(3, -5);
+        c.moveTo(i % 2 ? -2 : -3.5, 0);
+        c.lineTo(3, i % 3 ? 0 : 4);
+        c.moveTo(-2.5, 5);
+        c.lineTo(2.5, 5);
+        c.stroke();
+        c.restore();
+      }
+    });
+  }
+
+  /* ---------------------------------------------------------- 粒子池 */
+
+  const P = [];
+  for (let i = 0; i < MAX_P; i++) P.push({ on: false });
+  let pc = 0;
+
+  function take() {
+    for (let i = 0; i < MAX_P; i++) {
+      const p = P[(pc + i) % MAX_P];
+      if (!p.on) {
+        pc = (pc + i + 1) % MAX_P;
+        return p;
+      }
+    }
+    const p = P[pc]; // 池满：覆盖最旧的一个，宁可丢粒子也不要掉帧
+    pc = (pc + 1) % MAX_P;
+    return p;
+  }
+
+  function spawn(o) {
+    const p = take();
+    p.on = true;
+    p.x = o.x;
+    p.y = o.y;
+    p.vx = o.vx || 0;
+    p.vy = o.vy || 0;
+    p.ax = o.ax || 0;
+    p.ay = o.ay || 0;
+    p.drag = o.drag ?? 0.9; // 每秒保留比例：pow(drag, dt)
+    p.t = 0;
+    p.life = o.life ?? 1;
+    p.size = o.size ?? 32;
+    p.grow = o.grow ?? 0;
+    p.rot = o.rot ?? 0;
+    p.vrot = o.vrot ?? 0;
+    p.tex = o.tex;
+    p.alpha = o.alpha ?? 1;
+    p.fade = o.fade ?? 'out';
+    p.sx = o.sx ?? 1;
+    p.spin0 = o.spin0 ?? 0;
+    // norm = 用 source-over 画。加色混合画不出黑色（黑加什么都是原色），
+    // 所以蝠影、乌云、黑雾这类「暗的东西」必须走普通混合。
+    p.norm = !!o.norm;
+    return p;
+  }
+
+  function stepParticles(dt) {
+    for (let i = 0; i < MAX_P; i++) {
+      const p = P[i];
+      if (!p.on) continue;
+      p.t += dt;
+      if (p.t >= p.life) {
+        p.on = false;
+        continue;
+      }
+      const d = Math.pow(p.drag, dt);
+      p.vx = p.vx * d + p.ax * dt;
+      p.vy = p.vy * d + p.ay * dt;
+      p.x += p.vx * dt;
+      p.y += p.vy * dt;
+      p.rot += p.vrot * dt;
+      if (p.spin0) p.sx = Math.cos(p.spin0 + p.t * 5.5); // 羽毛翻面
+    }
+  }
+
+  function aliveParticles() {
+    let n = 0;
+    for (let i = 0; i < MAX_P; i++) if (P[i].on) n++;
+    return n;
+  }
+
+  function drawParticles() {
+    // 两趟：先画普通混合的暗色粒子（云/影/雾），再叠亮色光效
+    g.globalCompositeOperation = 'source-over';
+    passParticles(true);
+    g.globalCompositeOperation = 'lighter';
+    passParticles(false);
+    g.globalAlpha = 1;
+    g.globalCompositeOperation = 'source-over';
+  }
+
+  function passParticles(norm) {
+    for (let i = 0; i < MAX_P; i++) {
+      const p = P[i];
+      if (!p.on || p.norm !== norm) continue;
+      const k = p.t / p.life;
+      let a = p.alpha;
+      if (p.fade === 'out') a *= 1 - k;
+      else if (p.fade === 'inout') a *= Math.sin(Math.PI * k);
+      else if (p.fade === 'in') a *= Math.min(1, k / 0.15);
+      if (a <= 0.004) continue;
+
+      const s = Math.max(1, p.size * (1 + p.grow * k));
+      const tw = p.tex.width;
+      const th = p.tex.height;
+      const sc = s / Math.max(tw, th);
+      const dw = tw * sc;
+      const dh = th * sc;
+      g.globalAlpha = Math.min(1, a);
+      if (p.rot || p.sx !== 1) {
+        g.save();
+        g.translate(p.x, p.y);
+        g.rotate(p.rot);
+        g.scale(p.sx, 1);
+        g.drawImage(p.tex, -dw / 2, -dh / 2, dw, dh);
+        g.restore();
+      } else {
+        g.drawImage(p.tex, p.x - dw / 2, p.y - dh / 2, dw, dh);
+      }
+    }
+  }
+
+  /* -------------------------------------------------------- 矢量特效 */
+
+  const geo = [];
+
+  function push(e) {
+    e.t = 0;
+    e.life = e.life ?? 1;
+    geo.push(e);
+    return e;
+  }
+
+  function drawRing(e, k) {
+    const ease = 1 - Math.pow(1 - k, 3);
+    const rad = e.r0 + (e.r1 - e.r0) * ease;
+    const a = e.alpha * Math.pow(1 - k, 1.4);
+    if (a <= 0.004) return;
+    g.save();
+    g.globalAlpha = a;
+    g.translate(e.x, e.y);
+    g.scale(1, e.flat ?? 0.34);
+    g.strokeStyle = e.color;
+    g.shadowColor = e.color;
+    g.shadowBlur = 22;
+    g.lineWidth = Math.max(1, (e.width ?? 10) * (1 - k * 0.72));
+    g.beginPath();
+    g.arc(0, 0, rad, 0, TAU);
+    g.stroke();
+    if (e.inner) {
+      g.lineWidth = Math.max(1, (e.width ?? 10) * 0.4);
+      g.globalAlpha = a * 0.7;
+      g.beginPath();
+      g.arc(0, 0, rad * 0.82, 0, TAU);
+      g.stroke();
+    }
+    g.restore();
+  }
+
+  /**
+   * 光柱：不画矩���（硬边没法看），而是把一个圆形光斑竖向拉长 ——
+   * 拉伸径向渐变天然就是「中间亮、两侧和顶部柔和消失」的柱状光，零渐变开销。
+   */
+  function drawPillar(e, k) {
+    const open = k < 0.16 ? k / 0.16 : 1;
+    const rest = k < 0.16 ? 1 : Math.max(0, 1 - (k - 0.16) / 0.84);
+    const wid = e.w * open * (0.5 + 0.5 * rest) * (1 + 0.05 * Math.sin(e.t * 40));
+    const hgt = e.h * (0.3 + 0.7 * Math.min(1, k / 0.3));
+    const a = e.alpha * open * Math.pow(rest, 0.7);
+    if (a <= 0.004 || wid < 1) return;
+    const top = e.y - hgt;
+    g.save();
+    g.globalAlpha = a;
+    g.globalCompositeOperation = 'lighter';
+    g.drawImage(glowTex(e.color, 128), e.x - wid / 2, top, wid, hgt);
+    g.globalAlpha = a * 0.95;
+    g.drawImage(glowTex(e.core || '#ffffff', 128), e.x - wid * 0.16, top, wid * 0.32, hgt);
+    g.restore();
+  }
+
+  function drawSigil(e, k) {
+    const rise = Math.min(1, k / 0.24);
+    const a = e.alpha * (k > 0.72 ? (1 - k) / 0.28 : 1) * rise;
+    if (a <= 0.004) return;
+    const s = e.size * (0.55 + 0.45 * rise);
+    g.save();
+    g.translate(e.x, e.y);
+    g.scale(1, e.flat ?? 0.4);
+    g.rotate(e.rot ?? 0);
+    g.translate(0, 0);
+    g.rotate(e.spin ? e.spin * e.t : 0);
+    g.globalAlpha = a;
+    g.globalCompositeOperation = 'lighter';
+    g.drawImage(sigilTex(e.color, 512), -s / 2, -s / 2, s, s);
+    if (e.ccw) {
+      // 反向内环，两层反转有「机关在运转」的感觉
+      g.rotate((e.spin ? e.spin : 0) * -2.4 * e.t);
+      g.globalAlpha = a * 0.75;
+      const s2 = s * 0.66;
+      g.drawImage(sigilTex(e.color, 512), -s2 / 2, -s2 / 2, s2, s2);
+    }
+    g.restore();
+  }
+
+  function drawBolt(e, k) {
+    const a = e.alpha * Math.pow(1 - k, 0.6);
+    if (a <= 0.004) return;
+    // 每 ~60ms 重抖一次路径，才有电弧的「噼啪」感
+    if (!e.pts || e.t - (e.jitAt || -1) > 0.06) {
+      e.jitAt = e.t;
+      e.pts = [];
+      const seg = e.seg || 10;
+      for (let i = 0; i <= seg; i++) {
+        const f = i / seg;
+        const amp = (1 - Math.abs(f - 0.5) * 2) * (e.jit ?? 46);
+        e.pts.push([
+          e.x + (e.x2 - e.x) * f + (Math.random() - 0.5) * amp,
+          e.y + (e.y2 - e.y) * f + (Math.random() - 0.5) * amp,
+        ]);
+      }
+    }
+    g.save();
+    g.globalAlpha = a;
+    g.globalCompositeOperation = 'lighter';
+    g.lineJoin = 'round';
+    g.lineCap = 'round';
+    g.shadowColor = e.color;
+    g.shadowBlur = 26;
+    g.strokeStyle = e.color;
+    g.lineWidth = e.width ?? 6;
+    g.beginPath();
+    e.pts.forEach(([x, y], i) => (i ? g.lineTo(x, y) : g.moveTo(x, y)));
+    g.stroke();
+    g.shadowBlur = 12;
+    g.strokeStyle = '#ffffff';
+    g.lineWidth = (e.width ?? 6) * 0.34;
+    g.stroke();
+    g.restore();
+  }
+
+  function drawText(e, k) {
+    const pop = k < 0.24 ? k / 0.24 : 1;
+    const sc = 0.68 + 0.32 * pop + (k > 0.24 ? (k - 0.24) * 0.07 : 0);
+    const a = e.alpha * (k < 0.14 ? k / 0.14 : k > 0.8 ? (1 - k) / 0.2 : 1);
+    if (a <= 0.004) return;
+    g.save();
+    g.globalAlpha = a;
+    g.translate(e.x, e.y);
+    g.scale(sc, sc);
+    g.textAlign = 'center';
+    g.textBaseline = 'middle';
+    g.font = `900 ${e.size ?? 46}px "Microsoft YaHei", "PingFang SC", system-ui, sans-serif`;
+    g.shadowColor = e.color;
+    g.shadowBlur = 28;
+    g.lineWidth = Math.max(3, (e.size ?? 46) * 0.11);
+    g.strokeStyle = rgba(e.stroke ?? '#1a0a20', 0.6);
+    g.strokeText(e.text, 0, 0);
+    g.fillStyle = e.color;
+    g.fillText(e.text, 0, 0);
+    g.restore();
+  }
+
+  function drawBeam(e, k) {
+    const open = Math.min(1, k / 0.12);
+    const a = e.alpha * open * Math.pow(1 - k, 0.9);
+    if (a <= 0.004) return;
+    const len = Math.hypot(e.x2 - e.x, e.y2 - e.y);
+    const ang = Math.atan2(e.y2 - e.y, e.x2 - e.x);
+    g.save();
+    g.translate(e.x, e.y);
+    g.rotate(ang);
+    g.globalAlpha = a;
+    g.globalCompositeOperation = 'lighter';
+    const wid = (e.width ?? 60) * (0.5 + 0.9 * open) * (1 - k * 0.5);
+    g.drawImage(glowTex(e.color, 128), 0, -wid / 2, len, wid);
+    g.globalAlpha = a;
+    g.drawImage(glowTex(e.core || '#ffffff', 128), 0, -wid * 0.14, len, wid * 0.28);
+    g.restore();
+  }
+
+  function stepGeo(dt) {
+    g.globalCompositeOperation = 'lighter';
+    for (let i = geo.length - 1; i >= 0; i--) {
+      const e = geo[i];
+      e.t += dt;
+      if (e.t >= e.life) {
+        geo.splice(i, 1);
+        continue;
+      }
+      const k = e.t / e.life;
+      if (e.kind === 'ring') drawRing(e, k);
+      else if (e.kind === 'pillar') drawPillar(e, k);
+      else if (e.kind === 'sigil') drawSigil(e, k);
+      else if (e.kind === 'bolt') drawBolt(e, k);
+      else if (e.kind === 'beam') drawBeam(e, k);
+      else if (e.kind === 'text') drawText(e, k);
+    }
+    g.globalCompositeOperation = 'source-over';
+    g.globalAlpha = 1;
+  }
+
+  /* ---------------------------------------------------------- 发射器 */
+
+  // 按固定频率持续吐粒子（羽毛飘落、星尘、火花拖尾）
+  const emitters = [];
+
+  function emitter(o) {
+    emitters.push({ t: 0, acc: 0, dur: o.dur ?? 2, rate: o.rate ?? 12, spawn: o.spawn });
+    return emitters[emitters.length - 1];
+  }
+
+  function stepEmitters(dt) {
+    for (let i = emitters.length - 1; i >= 0; i--) {
+      const em = emitters[i];
+      em.t += dt;
+      if (em.t > em.dur) {
+        emitters.splice(i, 1);
+        continue;
+      }
+      em.acc += dt;
+      const step = 1 / em.rate;
+      let guard = 0;
+      while (em.acc >= step && guard++ < 40) {
+        em.acc -= step;
+        em.spawn(em.t);
+      }
+    }
+  }
+
+  /* ----------------------------------------------------------- 暗幕/闪白 */
+
+  // 暗幕是画在 canvas 里的、而不是单独一层 div：
+  // 特效 canvas 盖在角色之上，暗幕作为每帧的第一个绘制操作，
+  // 后面的粒子/文字自然就落在暗幕之上，不用去调 z-index 和 DOM 层序。
+  let dimNow = 0;
+  let dimTo = 0;
+  let dimRate = 0;
+  let dimColor = '#0a0410';
+  let dimSoft = false;
+
+  /**
+   * 暗幕 / 全屏闪白。alpha 0 = 全透明，1 = 全黑。
+   * 0→1 用来做「黑屏切入」，1→0 用来做「角色亮相」，alpha 1 + 白色 = 闪白。
+   *
+   * soft=true 是「暗域」：中心浓、边缘透明。加色混合的光效在亮色桌面上
+   * 本来就很难看清楚（白底上加白还是白），垫一层柔和的暗底，金光/雷光才能真的亮起来。
+   */
+  function dim(alpha, ms, color, soft) {
+    if (color) dimColor = color;
+    if (soft !== undefined) dimSoft = !!soft;
+    const target = Math.max(0, Math.min(1, alpha));
+    if (Math.abs(target - dimNow) < 0.001) {
+      dimNow = target;
+      dimTo = target;
+      return;
+    }
+    dimTo = target;
+    dimRate = Math.abs(dimTo - dimNow) / Math.max(0.001, (ms ?? 300) / 1000);
+    start();
+  }
+
+  function stepDim(dt) {
+    if (dimNow === dimTo) return;
+    const step = dimRate * dt;
+    if (Math.abs(dimTo - dimNow) <= step) dimNow = dimTo;
+    else dimNow += Math.sign(dimTo - dimNow) * step;
+  }
+
+  function drawDim() {
+    if (dimNow <= 0.001) return;
+    g.globalCompositeOperation = 'source-over';
+    g.globalAlpha = 1;
+    if (dimSoft) {
+      const grd = g.createRadialGradient(
+        W / 2, H * 0.52, Math.min(W, H) * 0.12,
+        W / 2, H * 0.52, Math.max(W, H) * 0.62,
+      );
+      grd.addColorStop(0, rgba(dimColor, dimNow));
+      grd.addColorStop(0.55, rgba(dimColor, dimNow * 0.72));
+      grd.addColorStop(1, rgba(dimColor, 0));
+      g.fillStyle = grd;
+    } else {
+      g.fillStyle = rgba(dimColor, dimNow);
+    }
+    g.fillRect(0, 0, W, H);
+  }
+
+  /* ----------------------------------------------------------- 时间轴 */
+
+  let script = null;
+  let scriptDone = null;
+
+  function play(events, duration, done) {
+    clearAll(true); // 保留暗幕，具体见 clearAll 的注释
+    script = {
+      t: 0,
+      dur: duration,
+      events: (events || []).map(([at, fn]) => ({ at, fn, done: false })),
+    };
+    scriptDone = done || null;
+    start();
+  }
+
+  function stepScript(dt) {
+    if (!script) return;
+    script.t += dt * 1000;
+    for (const e of script.events) {
+      if (!e.done && script.t >= e.at) {
+        e.done = true;
+        try {
+          e.fn();
+        } catch (err) {
+          /* 单个特效出错不该拖垮整场演出 */
+        }
+      }
+    }
+    if (script.t >= script.dur) {
+      const cb = scriptDone;
+      script = null;
+      scriptDone = null;
+      if (cb) cb();
+    }
+  }
+
+  /* ------------------------------------------------------------ 主循环 */
+
+  function frame(now) {
+    raf = requestAnimationFrame(frame);
+    const dt = Math.min(0.05, Math.max(0.001, (now - last) / 1000));
+    last = now;
+
+    stepScript(dt);
+    stepEmitters(dt);
+    stepParticles(dt);
+
+    g.setTransform(dpr, 0, 0, dpr, 0, 0);
+    g.clearRect(0, 0, W, H);
+    stepDim(dt);
+    drawDim();
+    stepGeo(dt);
+    drawParticles();
+
+    if (!script && !emitters.length && !geo.length && dimNow === dimTo && aliveParticles() === 0) {
+      stop();
+    }
+  }
+
+  function start() {
+    if (raf) return;
+    last = performance.now();
+    raf = requestAnimationFrame(frame);
+  }
+
+  function stop() {
+    if (raf) cancelAnimationFrame(raf);
+    raf = 0;
+    clearCanvas();
+  }
+
+  function clearCanvas() {
+    if (!g) return;
+    g.setTransform(dpr, 0, 0, dpr, 0, 0);
+    g.clearRect(0, 0, W, H);
+  }
+
+  function reset() {
+    clearAll(false);
+  }
+
+  /**
+   * keepDim=true 时保留暗幕：play() 用这个 —— 暗幕是「黑屏切入」的第一笔，
+   * 在 play() 之前就设好了，清掉的话角色会亮着出现在黑屏本来应该盖住的那几秒里。
+   */
+  function clearAll(keepDim) {
+    for (let i = 0; i < MAX_P; i++) P[i].on = false;
+    geo.length = 0;
+    emitters.length = 0;
+    script = null;
+    scriptDone = null;
+    if (!keepDim) {
+      dimNow = 0;
+      dimTo = 0;
+      dimSoft = false;
+    }
+    clearCanvas();
+  }
+
+  /* ------------------------------------------------------------ 公开 API */
+
+  function init(el) {
+    canvas = el;
+    g = canvas.getContext('2d');
+    resize();
+    window.addEventListener('resize', resize);
+  }
+
+  function resize() {
+    if (!canvas) return;
+    W = canvas.clientWidth || window.innerWidth;
+    H = canvas.clientHeight || window.innerHeight;
+    dpr = Math.min(2, window.devicePixelRatio || 1);
+    canvas.width = Math.max(1, Math.round(W * dpr));
+    canvas.height = Math.max(1, Math.round(H * dpr));
+  }
+
+  /** 放射爆发 */
+  function burst(x, y, o = {}) {
+    const n = o.count ?? 24;
+    const tex = o.tex || starTex(o.color ?? '#ffffff', 96);
+    const a0 = o.a0 ?? 0;
+    const a1 = o.a1 ?? TAU;
+    for (let i = 0; i < n; i++) {
+      const a = a0 + Math.random() * (a1 - a0);
+      const sp = (o.speed0 ?? 120) + Math.random() * ((o.speed1 ?? 420) - (o.speed0 ?? 120));
+      spawn({
+        x: x + (Math.random() - 0.5) * (o.spread ?? 0),
+        y: y + (Math.random() - 0.5) * (o.spread ?? 0),
+        vx: Math.cos(a) * sp,
+        vy: Math.sin(a) * sp * (o.flat ?? 1),
+        life: (o.life ?? 0.9) * (0.6 + Math.random() * 0.7),
+        size: (o.size ?? 44) * (0.5 + Math.random()),
+        grow: o.grow ?? 0.35,
+        tex,
+        alpha: o.alpha ?? 1,
+        drag: o.drag ?? 0.06,
+        ay: o.grav ?? 0,
+        rot: Math.random() * TAU,
+        vrot: (Math.random() - 0.5) * (o.vrot ?? 3),
+      });
+    }
+  }
+
+  /** 向心螺旋汇聚（蓄力） */
+  function vortex(x, y, o = {}) {
+    const n = o.count ?? 30;
+    const tex = o.tex || starTex(o.color ?? '#ffe9a8', 96);
+    const flat = o.flat ?? 0.55;
+    for (let i = 0; i < n; i++) {
+      const a = Math.random() * TAU;
+      const rad = (o.radius ?? 260) * (0.65 + Math.random() * 0.6);
+      const sp = (o.speed ?? 190) * (0.7 + Math.random() * 0.6);
+      const spin = o.spin ?? 0.7;
+      spawn({
+        x: x + Math.cos(a) * rad,
+        y: y + Math.sin(a) * rad * flat,
+        vx: -Math.cos(a) * sp - Math.sin(a) * sp * spin,
+        vy: (-Math.sin(a) * sp + Math.cos(a) * sp * spin) * flat,
+        life: (o.life ?? 1.1) * (0.65 + Math.random() * 0.6),
+        size: (o.size ?? 28) * (0.5 + Math.random()),
+        tex,
+        alpha: o.alpha ?? 1,
+        drag: 1,
+        fade: 'inout',
+        grow: o.grow ?? -0.3,
+      });
+    }
+  }
+
+  /** 螺旋上升气柱 */
+  function helix(x, y, o = {}) {
+    const n = o.count ?? 26;
+    const tex = o.tex || glowTex(o.color ?? '#ffffff', 96);
+    const flat = o.flat ?? 0.45;
+    for (let i = 0; i < n; i++) {
+      const a = Math.random() * TAU;
+      const rad = (o.radius ?? 90) * (0.4 + Math.random() * 0.8);
+      const sp = (o.speed ?? 150) * (0.6 + Math.random() * 0.8);
+      spawn({
+        x: x + Math.cos(a) * rad,
+        y: y + Math.sin(a) * rad * flat,
+        vx: -Math.sin(a) * rad * 2.2,
+        vy: -sp,
+        life: (o.life ?? 1.4) * (0.6 + Math.random() * 0.7),
+        size: (o.size ?? 26) * (0.5 + Math.random()),
+        tex,
+        drag: 0.9,
+        fade: 'inout',
+        grow: o.grow ?? 0.6,
+      });
+    }
+  }
+
+  /** 地上铺开的碎片（水晶炸裂、冰晶） */
+  function shatter(x, y, o = {}) {
+    const n = o.count ?? 20;
+    const tex = o.tex || shardTex(o.color ?? '#bfe6ff', 72);
+    for (let i = 0; i < n; i++) {
+      const a = -Math.PI / 2 + (Math.random() - 0.5) * (o.arc ?? 2.4);
+      const sp = (o.speed0 ?? 180) + Math.random() * ((o.speed1 ?? 520) - (o.speed0 ?? 180));
+      spawn({
+        x, y,
+        vx: Math.cos(a) * sp,
+        vy: Math.sin(a) * sp,
+        life: (o.life ?? 1.3) * (0.6 + Math.random() * 0.6),
+        size: (o.size ?? 40) * (0.5 + Math.random()),
+        tex,
+        alpha: o.alpha ?? 1,
+        drag: 0.25,
+        ay: o.grav ?? 900,
+        rot: Math.random() * TAU,
+        vrot: (Math.random() - 0.5) * 9,
+      });
+    }
+  }
+
+  /**
+   * 单个大气团 / 天体（血月、雷云、黑雾）：普通混合的一团柔光/暗影。
+   * 加色混合画不出暗色，所以月亮用亮色走 lighter，乌云必须 norm: true。
+   */
+  function orb(x, y, o = {}) {
+    return spawn({
+      x,
+      y,
+      vx: o.vx ?? 0,
+      vy: o.vy ?? 0,
+      life: o.life ?? 3,
+      size: o.size ?? 480,
+      tex: o.tex || glowTex(o.color ?? '#ffffff', 128),
+      drag: o.drag ?? 1,
+      grow: o.grow ?? 0,
+      alpha: o.alpha ?? 0.85,
+      fade: o.fade ?? 'inout',
+      norm: o.norm ?? false,
+    });
+  }
+
+  /** 一批暗色剪影（蝠影 / 残魂），沿弧线飞出 */
+  function flock(x, y, o = {}) {
+    const n = o.count ?? 8;
+    const tex = o.tex || shardTex(o.color ?? '#0b0510', 72);
+    for (let i = 0; i < n; i++) {
+      const dir = o.dir ?? (Math.random() < 0.5 ? -1 : 1);
+      spawn({
+        x: x + (Math.random() - 0.5) * (o.spread ?? 160),
+        y: y + (Math.random() - 0.5) * (o.spreadY ?? 120),
+        vx: dir * (o.speed0 ?? 160) * (0.6 + Math.random() * 0.8),
+        vy: (o.vy ?? -110) * (0.5 + Math.random()),
+        life: (o.life ?? 2.2) * (0.6 + Math.random() * 0.7),
+        size: (o.size ?? 34) * (0.5 + Math.random()),
+        tex,
+        drag: 0.9,
+        rot: Math.atan2(-dir, 0),
+        vrot: dir * (0.6 + Math.random()),
+        alpha: o.alpha ?? 0.9,
+        norm: true,
+        fade: 'inout',
+      });
+    }
+  }
+
+  /** 蝠影：普通混合的暗色剪影（加色混合画不出黑，见 spawn 的 norm 注释） */
+  function batTex(color, size = 96) {
+    const w = size;
+    const h = Math.round(size * 0.5);
+    return makeTex(`bat|${color}|${size}`, w, h, (c) => {
+      const cx = w / 2;
+      const cy = h / 2;
+      c.fillStyle = color;
+      c.beginPath();
+      c.ellipse(cx, cy, w * 0.062, h * 0.3, 0, 0, TAU);
+      c.fill();
+      for (const s of [-1, 1]) {
+        c.beginPath();
+        c.moveTo(cx, cy - h * 0.06);
+        c.quadraticCurveTo(cx + s * w * 0.22, cy - h * 0.46, cx + s * w * 0.46, cy - h * 0.16);
+        c.quadraticCurveTo(cx + s * w * 0.28, cy + h * 0.2, cx, cy + h * 0.34);
+        c.closePath();
+        c.fill();
+      }
+    });
+  }
+
+  /** 飘落（羽毛 / 花瓣 / 星屑） */
+  function fallStream(o) {
+    const tex = o.tex || featherTex(o.color ?? '#fff6d0', 72);
+    return emitter({
+      dur: o.dur ?? 2,
+      rate: o.rate ?? 10,
+      spawn: (t) => {
+        const x = o.x + (Math.random() - 0.5) * (o.spreadX ?? 420);
+        spawn({
+          x,
+          y: (o.y ?? 0) - (o.spreadY ?? 60) * Math.random(),
+          vx: (o.vx ?? 0) + (Math.random() - 0.5) * 60,
+          vy: (o.vy ?? 70) + Math.random() * 90,
+          life: (o.life ?? 3.2) * (0.6 + Math.random() * 0.6),
+          size: (o.size ?? 30) * (0.6 + Math.random() * 0.8),
+          tex,
+          drag: 0.55,
+          rot: Math.random() * TAU,
+          vrot: (Math.random() - 0.5) * 2.4,
+          spin0: Math.random() * TAU,
+          fade: 'inout',
+        });
+      },
+    });
+  }
+
+  /** 拖尾光带（跑动 / 冲刺） */
+  function trailStream(x, y, o = {}) {
+    const tex = o.tex || glowTex(o.color ?? '#ffffff', 96);
+    return emitter({
+      dur: o.dur ?? 1,
+      rate: o.rate ?? 40,
+      spawn: () => {
+        spawn({
+          x: x() + (Math.random() - 0.5) * 26,
+          y: y() + (Math.random() - 0.5) * 26,
+          vx: (o.vx ?? -40) + (Math.random() - 0.5) * 60,
+          vy: -(o.vy ?? 20) - Math.random() * 50,
+          life: (o.life ?? 0.7) * (0.6 + Math.random() * 0.6),
+          size: (o.size ?? 34) * (0.5 + Math.random()),
+          tex,
+          drag: 0.3,
+          fade: 'out',
+          grow: 0.3,
+        });
+      },
+    });
+  }
+
+  /** 闪电（两点之间反复抖动的电弧） */
+  function bolt(x, y, x2, y2, o = {}) {
+    return push({
+      kind: 'bolt',
+      x, y, x2, y2,
+      color: o.color ?? '#cfa8ff',
+      width: o.width ?? 7,
+      jit: o.jit ?? 46,
+      seg: o.seg ?? 11,
+      alpha: o.alpha ?? 1,
+      life: o.life ?? 0.3,
+    });
+  }
+
+  /** 冲击波圆环 */
+  function ring(x, y, o = {}) {
+    return push({
+      kind: 'ring',
+      x, y,
+      r0: o.r0 ?? 20,
+      r1: o.r1 ?? 320,
+      width: o.width ?? 10,
+      flat: o.flat ?? 0.34,
+      inner: o.inner ?? false,
+      color: o.color ?? '#ffffff',
+      alpha: o.alpha ?? 0.9,
+      life: o.life ?? 0.7,
+    });
+  }
+
+  /** 冲天光柱 */
+  function pillar(x, y, o = {}) {
+    return push({
+      kind: 'pillar',
+      x, y,
+      w: o.w ?? 130,
+      h: o.h ?? 620,
+      color: o.color ?? '#ffd75e',
+      core: o.core ?? '#ffffff',
+      alpha: o.alpha ?? 0.95,
+      life: o.life ?? 1.8,
+    });
+  }
+
+  /** 地面魔法阵 */
+  function sigil(x, y, o = {}) {
+    return push({
+      kind: 'sigil',
+      x, y,
+      size: o.size ?? 420,
+      flat: o.flat ?? 0.4,
+      spin: o.spin ?? 0.6,
+      ccw: o.ccw ?? true,
+      rot: o.rot ?? 0,
+      color: o.color ?? '#ffd75e',
+      alpha: o.alpha ?? 0.95,
+      life: o.life ?? 2.4,
+    });
+  }
+
+  /** 定向光束（斜劈 / 射线） */
+  function beam(x, y, x2, y2, o = {}) {
+    return push({
+      kind: 'beam',
+      x, y, x2, y2,
+      width: o.width ?? 60,
+      color: o.color ?? '#ffffff',
+      core: o.core ?? '#ffffff',
+      alpha: o.alpha ?? 0.9,
+      life: o.life ?? 0.4,
+    });
+  }
+
+  /** 技能名艺术字 */
+  function text(x, y, str, o = {}) {
+    return push({
+      kind: 'text',
+      x, y, text: str,
+      size: o.size ?? 46,
+      color: o.color ?? '#fff3c4',
+      stroke: o.stroke ?? '#2a1030',
+      alpha: o.alpha ?? 1,
+      life: o.life ?? 2.2,
+    });
+  }
+
+  return {
+    init,
+    resize,
+    play,
+    stop,
+    reset,
+    get busy() {
+      return (
+        !!script || emitters.length > 0 || geo.length > 0 || dimNow !== dimTo || aliveParticles() > 0
+      );
+    },
+    get dimAlpha() {
+      return dimNow;
+    },
+    get size() {
+      return { w: W, h: H };
+    },
+    // 贴图工厂（编排里复用，避免每套觉醒各画一遍）
+    tex: { glow: glowTex, star: starTex, shard: shardTex, feather: featherTex, sigil: sigilTex, bat: batTex },
+    // 原语
+    dim,
+    burst,
+    vortex,
+    helix,
+    shatter,
+    orb,
+    flock,
+    fallStream,
+    trailStream,
+    bolt,
+    ring,
+    pillar,
+    sigil,
+    beam,
+    text,
+    emitter,
+  };
+})();