颜色显示修正

src/core/particleEmitter.ts

@@ -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
   }
 

src/views/ParticlePanel.vue

@@ -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; }