Phaser框架毒气粒子效果匹配美术稿问题求助

我正在开发一款副业游戏，目前在Phaser粒子系统上遇到难题：游戏底部的毒气粒子效果无法还原美术稿中的呈现（美术稿：），尽管我使用了相同的笔刷和颜色（紫色、黑色两种粒子）。当前游戏效果有演示视频（含高清版）。

以下是管理毒气粒子的代码：

import {BlendModes} from "phaser";

export class ToxicGas {
    private scene: Phaser.Scene;
    private particles: Phaser.GameObjects.Container;

    constructor(scene: Phaser.Scene) {
        this.scene = scene;
        this.initToxicGas();
    }

    private initToxicGas() {
        const { width, height } = this.scene.scale;

        this.particles = this.scene.add.container();

        const lightParticles = this.scene.add.particles(0, 0, 'toxicGasLight',
            {
                x: { min: 0, max: width },
                y: height,
                lifespan: 2000,
                speedY: { min: 0, max: -100 },
                scale: { start: 0.5, end: 1 },
                alpha: { start: 1, end: 0 },
                blendMode: BlendModes.NORMAL,
                quantity: 10,
                frequency: 200,
            }
        );

        const darkParticles = this.scene.add.particles(0, 0, 'toxicGasDark',
            {
                x: { min: 0, max: width },
                y: height,
                lifespan: 2000,
                speedY: { min: 0, max: -100 },
                scale: { start: 0.5, end: 1 },
                alpha: { start: .5, end: 0 },
                blendMode: BlendModes.DARKEN,
                quantity: 5,
                frequency: 200,
            }
        );
        this.particles.add(lightParticles);
        this.particles.add(darkParticles);
        this.particles.setDepth(-100);
    }
}

作为非专业游戏开发者，我希望得到实现匹配美术稿效果的方案，同时也欢迎针对整体渲染的改进建议。感谢帮助！

一、粒子参数调整（核心匹配美术稿） #

• 运动轨迹优化：美术稿中毒气是不规则扩散的，当前粒子仅垂直运动，需添加水平漂移与偏角：

  speedX: { min: -30, max: 30 }, // 左右随机漂移
  angle: { min: 170, max: 190 }, // 轻微左右偏角模拟自然扩散
  gravityY: -20, // 减弱上升速度，让粒子更具厚重感
  

• 缩放与生命周期调整：美术稿中粒子从底部聚集后散开，建议反转缩放逻辑并随机生命周期：

  scale: { start: 1.2, end: 0.3 }, // 初始大体积，上升后收缩消失
  lifespan: { min: 1500, max: 3000 }, // 避免粒子同步消失，增强自然感
  

• 混合模式与透明度优化：
  • 紫色粒子（lightParticles）改用BlendModes.SCREEN或BlendModes.OVERLAY，增强通透发光感；
  • 黑色粒子（darkParticles）保持DARKEN，调整透明度曲线：alpha: { start: 0.7, end: 0.2 }，保留底部厚重感。
• 密度与发射频率调整：提升粒子数量、降低发射频率，同时控制总粒子数避免性能问题：

  // 紫色粒子
  quantity: 15,
  frequency: 100,
  maxParticles: 80,
  // 黑色粒子
  quantity: 8,
  frequency: 150,
  

二、纹理与渲染优化 #

• 纹理处理：确保粒子纹理是带透明边缘的软笔刷，导出PNG时保留柔和边缘，避免硬边缘导致粒子生硬；
• 深度调整：当前容器depth设为-100可能导致粒子被完全遮挡，建议改为this.particles.setDepth(0)，同时确保地面、障碍物等元素depth高于0，让毒气在底层但不被隐藏；
• 添加随机扰动：通过粒子更新回调添加位置扰动，模拟气体不规则流动：

  lightParticles.on('particleupdate', (particle) => {
      particle.x += Phaser.Math.FloatBetween(-0.5, 0.5);
      particle.y += Phaser.Math.FloatBetween(-0.2, 0.2);
  });
  

三、性能优化建议 #

• 确保粒子debug模式关闭（默认关闭），减少性能开销；
• 若场景启用光照系统，给粒子设置setPipeline('Light2D')，让粒子参与全局光照增强氛围感；
• 通过scene.scale.on('resize')动态调整粒子数量，低分辨率屏幕下减少粒子生成量。

内容的提问来源于stack exchange，提问作者Alexandre