颜色显示修正

2026-09-02 23:19:58 +08:00
parent 9c2421110c
commit 535f8d7558
9 changed files with 2197 additions and 48 deletions
@@ -8,8 +8,8 @@
      html, body { margin: 0; padding: 0; background: #111; color: #eee; font-family: system-ui, -apple-system, sans-serif; }
      #app { display: flex; flex-direction: column; height: 100vh; }
    </style>
-    <script type="module" crossorigin src="/assets/index-F1tWOWFT.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-qxv07JSp.css">
+    <script type="module" crossorigin src="/assets/index-CPFl-YCv.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-n3FHecj5.css">
  </head>
  <body>
    <div id="app"></div>
@@ -6,5 +6,9 @@
  {
    "name": "粒子-序列帧-拖尾-碰撞-路径-spine",
    "file": "粒子-序列帧-拖尾-碰撞-路径-spine.json"
+  },
+  {
+    "name": "烟花金币spine",
+    "file": "烟花金币spine.json"
  }
 ]
@@ -57,7 +57,7 @@ export interface ParticleImageResource {
  anchorX: number
  anchorY: number
  /** 每张贴图独立的颜色、混合与透明度设置 */
-  colorMode: 'fixed' | 'lifetime'
+  colorMode: 'fixed' | 'random' | 'lifetime'
  colorStart: string
  colorEnd: string
  colorGradient: ColorGradientStop[]
@@ -661,7 +661,7 @@ export function ensureEmitterConfig(config: EmitterConfig): EmitterConfig {
    if (!Number.isFinite(resource.scale)) resource.scale = 1
    if (!Number.isFinite(resource.anchorX)) resource.anchorX = 0.5
    if (!Number.isFinite(resource.anchorY)) resource.anchorY = 0.5
-    if (resource.colorMode !== 'fixed' && resource.colorMode !== 'lifetime') {
+    if (resource.colorMode !== 'fixed' && resource.colorMode !== 'random' && resource.colorMode !== 'lifetime') {
      resource.colorMode = config.colorOverLife ? 'lifetime' : 'fixed'
    }
    if (!resource.colorStart) resource.colorStart = config.colorStart || '#ffffff'
@@ -837,6 +837,8 @@ interface Particle {
  trailSampledLength: number
  trailSampledWidth: number
  resourceId: number
+  /** 随机颜色模式下，粒子出生时从卡片色带采样并在生命周期内保持的颜色。 */
+  colorSample: number
  imageFrameIndex: number
  collisionPaused: boolean
 }
@@ -926,6 +928,7 @@ export class ParticleEmitter extends Container {
        trailSampledLength: 100,
        trailSampledWidth: 100,
        resourceId: 1,
+        colorSample: 0xffffff,
        imageFrameIndex: 0,
        collisionPaused: false,
      })
@@ -1191,6 +1194,8 @@ export class ParticleEmitter extends Container {
      const colorStart = resource?.colorStart || '#ffffff'
      const rgb = resource?.colorMode === 'lifetime'
        ? gradientColorAt(resource.colorGradient, t)
+        : resource?.colorMode === 'random'
+          ? p.colorSample
        : hexToNumber(colorStart)
      s.tint = rgb
      s.blendMode = BLEND_MAP[resource?.blend || 'normal'] as any
@@ -1590,12 +1595,15 @@ export class ParticleEmitter extends Container {
      ? lerp(cfg.scaleYOverLifeMin, cfg.scaleYOverLifeMax, this.rng())
      : cfg.scaleYOverLifeMin
    p.resourceId = resource.id
+    p.colorSample = resource.colorMode === 'random'
+      ? gradientColorAt(resource.colorGradient, seededUnit(cfg.seed, spawnSerial, 0x9e3779b9))
+      : hexToNumber(resource.colorStart)
    const initialFrame = this.imageFrameState(resource, 0)
    p.imageFrameIndex = initialFrame.index
    p.sprite.texture = this.imageFrameTexture(resource, initialFrame.index)
    p.sprite.anchor.set(resource.anchorX, resource.anchorY)
    p.sprite.blendMode = BLEND_MAP[resource.blend] as any
-    p.sprite.tint = hexToNumber(resource.colorStart)
+    p.sprite.tint = p.colorSample
    p.sprite.visible = true
  }

@@ -511,6 +511,7 @@
            <label class="row resource-color-row"><span>颜色</span>
              <select v-model="resource.colorMode" class="inp">
                <option value="fixed">固定色</option>
+                <option value="random">随机颜色</option>
                <option value="lifetime">生命周期</option>
              </select>
              <select v-model="resource.blend" class="inp blend-select">
@@ -525,6 +526,7 @@
            </template>
            <template v-else>
              <ColorGradientEditor v-model="resource.colorGradient" />
+              <div v-if="resource.colorMode === 'random'" class="random-color-hint">每个粒子出生时从色带随机取色，生命周期内保持不变</div>
            </template>

            <div class="resource-alpha-head">
@@ -1989,6 +1991,7 @@ function toggleResourceLock(resourceId: number) {
 .resource-divider { height: 1px; margin: 9px 0 7px; background: #2a3549; }
 .resource-color-row .blend-select { max-width: 88px; }
 .resource-color-picker .hex { margin-left: 0; }
+.random-color-hint { margin: -5px 0 9px 68px; color: #66758e; font-size: 9px; line-height: 1.45; }
 .hex-input { width: 72px; padding: 4px 6px; border: 1px solid #344158; border-radius: 5px; outline: none; background: #101725; color: #aeb8cb; font-size: 11px; font-family: monospace; }
 .hex-input:focus { border-color: #7774ff; color: #fff; }
 .resource-alpha-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; color: #8a93bb; font-size: 12px; }