发射器形状新增

2026-09-05 17:31:32 +08:00
1 parent 0bde824c88
commit 026ee74d48
@@ -188,6 +188,8 @@
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import { Application, Container, Graphics, Sprite, Text, Texture } from 'pixi.js'
 import { ParticleEmitter, ensureEmitterConfig, type ParticleState } from '../core/particleEmitter'
+import { normalizedRadialRange, normalizedRectRange } from '../core/emitterShape'
+import { sampleScenePath } from '../core/scenePathSampler'
 import { bakeLoopFrames } from '../core/loopFrameBaker'
 import { loopPlaybackRange } from '../core/loopSegmentTiming'
 import { useParticleStore, type CollisionBody, type ParticleSystem, type ScenePath } from '../store/particleStore'
@@ -985,7 +987,7 @@ function drawBoneFollowTargets() {
  }
 }

-// 绘制当前选中系统的发射器形状范围(点/轨道不绘制),随参数实时响应
+// 绘制当前选中系统的发射器形状范围（点/路径不额外绘制），随参数实时响应。
 function drawShapeRange() {
  if (!shapeGfx) return
  const g = shapeGfx
@@ -999,7 +1001,7 @@ function drawShapeRange() {
  const cx = preview?.x ?? c.centerX ?? 0
  const cy = -(preview?.y ?? c.centerY ?? 0)
  const shape = c.shape
-  if (shape === 'point' || shape === 'orbit') return // 点不绘制,轨道保留空位
+  if (shape === 'point' || shape === 'path') return
  // 相对 root 中心的局部点(lx,ly,数学坐标)先加偏移(发射源 = root 中心 + offset),再应用 root 缩放+旋转,加 root 中心 → 世界坐标
  const sxr = c.rootScaleX ?? 1, syr = c.rootScaleY ?? 1
  const rot = -(preview?.rotation ?? c.rootRotation ?? 0) * Math.PI / 180 // 数学上正 → 屏幕:逆时针为正
@@ -1012,36 +1014,48 @@ function drawShapeRange() {
    return [cx + x * cs - y * sn, cy + (x * sn + y * cs)]
  }
  if (shape === 'circle') {
+    const range = normalizedRadialRange(c.innerRadius, c.outerRadius)
    g.lineStyle(2, 0x3ce86a, 0.7)
-    // 圆:以 root 变换后的椭圆近似(逐点)
+    // 圆环:以 root 变换后的椭圆近似(逐点)
    const steps = 48
-    for (let i = 0; i <= steps; i++) {
-      const a = i / steps * Math.PI * 2
-      const [px, py] = pt(Math.cos(a) * c.radius, Math.sin(a) * c.radius)
-      if (i === 0) g.moveTo(px, py); else g.lineTo(px, py)
+    for (const radius of [range.outer, range.inner]) {
+      if (radius <= 0) continue
+      for (let i = 0; i <= steps; i++) {
+        const a = i / steps * Math.PI * 2
+        const [px, py] = pt(Math.cos(a) * radius, Math.sin(a) * radius)
+        if (i === 0) g.moveTo(px, py); else g.lineTo(px, py)
+      }
    }
  } else if (shape === 'rect') {
-    const hw = c.rectW / 2, hh = c.rectH / 2
-    const p1 = pt(-hw, -hh), p2 = pt(hw, -hh), p3 = pt(hw, hh), p4 = pt(-hw, hh)
+    const range = normalizedRectRange(c)
    g.lineStyle(2, 0x4a8cff, 0.7)
-    g.moveTo(p1[0], p1[1]); g.lineTo(p2[0], p2[1]); g.lineTo(p3[0], p3[1]); g.lineTo(p4[0], p4[1]); g.lineTo(p1[0], p1[1])
+    for (const [width, height] of [[range.outerW, range.outerH], [range.innerW, range.innerH]]) {
+      if (width <= 0 || height <= 0) continue
+      const hw = width / 2, hh = height / 2
+      const p1 = pt(-hw, -hh), p2 = pt(hw, -hh), p3 = pt(hw, hh), p4 = pt(-hw, hh)
+      g.moveTo(p1[0], p1[1]); g.lineTo(p2[0], p2[1]); g.lineTo(p3[0], p3[1]); g.lineTo(p4[0], p4[1]); g.lineTo(p1[0], p1[1])
+    }
  } else if (shape === 'cone') {
-    const r = c.radius
+    const range = normalizedRadialRange(c.innerRadius, c.outerRadius)
    const half = (c.coneAngle / 2) * Math.PI / 180
-    const base = c.direction * Math.PI / 180
-    // 锥形两条边 + 弧
-    const edge1 = pt(Math.cos(base - half) * r, Math.sin(base - half) * r)
-    const edge2 = pt(Math.cos(base + half) * r, Math.sin(base + half) * r)
+    const base = c.coneDirection * Math.PI / 180
+    // 锥形环带的两条边、内弧和外弧。
+    const innerEdge1 = pt(Math.cos(base - half) * range.inner, Math.sin(base - half) * range.inner)
+    const innerEdge2 = pt(Math.cos(base + half) * range.inner, Math.sin(base + half) * range.inner)
+    const outerEdge1 = pt(Math.cos(base - half) * range.outer, Math.sin(base - half) * range.outer)
+    const outerEdge2 = pt(Math.cos(base + half) * range.outer, Math.sin(base + half) * range.outer)
    g.lineStyle(2, 0x3ce86a, 0.7)
-    g.moveTo(cx, cy); g.lineTo(edge1[0], edge1[1])
-    g.moveTo(cx, cy); g.lineTo(edge2[0], edge2[1])
-    // 弧
+    g.moveTo(innerEdge1[0], innerEdge1[1]); g.lineTo(outerEdge1[0], outerEdge1[1])
+    g.moveTo(innerEdge2[0], innerEdge2[1]); g.lineTo(outerEdge2[0], outerEdge2[1])
    g.lineStyle(1, 0x3ce86a, 0.5)
    const steps = 24
-    for (let i = 0; i <= steps; i++) {
-      const a = base - half + (2 * half * i / steps)
-      const [px, py] = pt(Math.cos(a) * r, Math.sin(a) * r)
-      if (i === 0) g.moveTo(px, py); else g.lineTo(px, py)
+    for (const radius of [range.outer, range.inner]) {
+      if (radius <= 0) continue
+      for (let i = 0; i <= steps; i++) {
+        const a = base - half + (2 * half * i / steps)
+        const [px, py] = pt(Math.cos(a) * radius, Math.sin(a) * radius)
+        if (i === 0) g.moveTo(px, py); else g.lineTo(px, py)
+      }
    }
  }
 }
@@ -1343,42 +1357,6 @@ function cubicPoint(a: number, b: number, c: number, d: number, t: number) {
  return u * u * u * a + 3 * u * u * t * b + 3 * u * t * t * c + t * t * t * d
 }

-function sampleScenePath(path: ScenePath, progress: number) {
-  if (!path.points.length) return null
-  if (path.points.length === 1) {
-    const point = pathLocalToWorld(path, path.points[0].x, path.points[0].y)
-    return { ...point, angle: path.rotation }
-  }
-  const segmentCount = path.closed ? path.points.length : path.points.length - 1
-  const samples: Array<{ x: number; y: number; distance: number }> = []
-  let totalDistance = 0
-  for (let segment = 0; segment < segmentCount; segment++) {
-    const a = path.points[segment]
-    const b = path.points[(segment + 1) % path.points.length]
-    for (let step = 0; step <= 20; step++) {
-      if (segment > 0 && step === 0) continue
-      const t = step / 20
-      const localX = cubicPoint(a.x, a.x + a.outX, b.x + b.inX, b.x, t)
-      const localY = cubicPoint(a.y, a.y + a.outY, b.y + b.inY, b.y, t)
-      const worldPoint = pathLocalToWorld(path, localX, localY)
-      const previous = samples[samples.length - 1]
-      if (previous) totalDistance += Math.hypot(worldPoint.x - previous.x, worldPoint.y - previous.y)
-      samples.push({ ...worldPoint, distance: totalDistance })
-    }
-  }
-  const target = Math.min(1, Math.max(0, progress)) * totalDistance
-  let index = samples.findIndex((sample) => sample.distance >= target)
-  if (index < 0) index = samples.length - 1
-  const current = samples[index]
-  const previous = samples[Math.max(0, index - 1)]
-  const next = samples[Math.min(samples.length - 1, index + 1)]
-  const beforeDistance = previous.distance
-  const amount = index > 0 ? (target - beforeDistance) / Math.max(0.0001, current.distance - beforeDistance) : 0
-  const x = previous.x + (current.x - previous.x) * Math.min(1, Math.max(0, amount))
-  const y = previous.y + (current.y - previous.y) * Math.min(1, Math.max(0, amount))
-  return { x, y, angle: Math.atan2(next.y - previous.y, next.x - previous.x) * 180 / Math.PI }
-}
-
 function buildPreviewColliders(timeSeconds: number) {
  previewColliders = store.colliders.map((collider) => {
    if (!collider.followPath || !collider.followPathId) return collider
@@ -1417,6 +1395,20 @@ function worldPointToEmitterLocal(
  return { x: (cos * screenX + sin * screenY) / scaleX, y: (-sin * screenX + cos * screenY) / scaleY }
 }

+function sampleSpawnPathForEmitter(
+  config: { centerX: number; centerY: number; rootRotation: number; rootScaleX: number; rootScaleY: number },
+  path: ScenePath,
+  progress: number,
+) {
+  const sample = sampleScenePath(path, progress)
+  if (!sample) return null
+  const local = worldPointToEmitterLocal(config, sample.x, sample.y)
+  const radians = sample.angle * Math.PI / 180
+  const tangentWorld = worldPointToEmitterLocal(config, sample.x + Math.cos(radians), sample.y + Math.sin(radians))
+  const angle = Math.atan2(tangentWorld.y - local.y, tangentWorld.x - local.x) * 180 / Math.PI
+  return { ...local, angle }
+}
+
 function loop() {
  raf = requestAnimationFrame(loop)
  const now = performance.now() / 1000
@@ -1517,6 +1509,13 @@ function loop() {
        em.rotation = -c.rootRotation * Math.PI / 180
        em.setSimulationTransform(c.centerX, c.centerY, c.rootRotation)
      }
+      const spawnPath = c.shape === 'path' && c.spawnPathId > 0
+        ? store.paths.find((path) => path.id === c.spawnPathId && path.enabled && path.points.length > 0) || null
+        : null
+      em.setSpawnPathSampler(
+        spawnPath ? (progress) => sampleSpawnPathForEmitter(c, spawnPath, progress) : null,
+        spawnPath?.closed === true,
+      )
      emitterPreviewTransform.set(sys.id, preview)
    }
    let total = 0