Cocos 粒子系统实战烟雾飘散与雨雪天气两个粒子特效案例从 0 到上线【免费下载链接】cocos-engineCocos simplifies game creation and distribution with Cocos Creator, a free, open-source, cross-platform game engine. Empowering millions of developers to create high-performance, engaging 2D/3D games and instant web entertainment.项目地址: https://gitcode.com/GitHub_Trending/co/cocos-engine你给角色加了个施法特效效果在自己电脑上很好看换到一台老安卓机帧率直接掉 20——八成不是渲染管线的问题而是粒子数量和渲染模式没管好。Cocos Engine 的粒子系统分 2D/3D 两套ParticleSystem2D负责 2D 特效ParticleSystem负责 3D 场景。这篇文章用「烟雾飘散」和「雨雪天气」两个完整案例把参数怎么调、坑在哪讲清楚。 粒子系统 30 秒速览粒子的四段生命周期不看 2D/3D 怎么分先按一个粒子从出生到消亡经历的四个阶段来记模块后面两个案例就是照着这个顺序配的。生命周期阶段核心类 / 模块一句话职责源码位置发射ParticleSystemcapacity / duration / loop / rateOverTime / bursts、ShapeModule决定多久生、生多少、从什么形状里生出来cocos/particle/particle-system.ts、cocos/particle/emitter/shape-module.ts运动与受力forceOvertimeModule、velocityOvertimeModule、gravityModifier、noiseModule出生之后往哪走、加减速、带不带自然抖动cocos/particle/animator/noise-module.ts外观与渐变colorOverLifetimeModule、sizeOvertimeModule、rotationOvertimeModule、textureAnimationModule颜色/大小/旋转随生命曲线变化贴图还能逐帧播放cocos/particle/animator/texture-animation.ts交互与渲染trailModule、rendererCPU / GPU 两种实现、renderCulling拖尾、CPU/GPU 双渲染路径、包围盒剔除cocos/particle/renderer/particle-system-renderer-gpu.ts2D 那边对应的是 cocos/particle-2d/particle-system-2d.ts它不走模块体系而是一整套扁平参数emissionRate、life、angle、gravity……配起来反而更直接。️ 案例 A烟雾 / 灰烬飘散的参数怎么调2D目标效果一处废墟上不断升起灰色烟雾缓慢扩散、逐渐透明。用 2D 的ParticleSystem2D最合适——纯氛围特效没必要上 3D 粒子的成本。1. 新建节点编辑器菜单节点 效果 ParticleSystem2D建一个节点挂在废墟上方贴图选仓库自带的默认粒子贴图editor/assets/Default-Particle.png边缘羽化的圆斑做烟雾正合适。2. 关键参数表属性推荐值为什么这么调duration-1烟雾是常驻氛围无限时长持续发射totalParticles300存活粒子上限移动端单系统别超过这个数emissionRate40烟雾靠量感不靠个数太高只会烧预算life3烟雾要慢慢散生命周期短了会断片lifeVar1±1 秒随机前后两批烟错开画面不整团整团的angle90垂直向上发射startSize40出生小一点给上升膨胀留空间endSize90边升边变大模拟空气扩散speed60慢速上飘超过 100 视觉上就变成火苗了tangentialAccel20轻微自转让烟有卷的动感gravity(0, 20)烟比空气轻给一点向上的加速度3. 颜色与透明度渐变烟雾的灵魂在 alpha出生时半透明浅灰消亡前完全透明中间颜色略深一点点才脏得像烟。const ps this.node.getComponent(ParticleSystem2D); ps.startColor new Color(180, 180, 180, 90); // 浅灰出生时半透明 ps.startColorVar new Color(30, 30, 30, 40); // 加一点随机烟不是一种纯灰 ps.endColor new Color(90, 90, 90, 0); // 消散前 alpha 归零注意混合模式保持标准 alpha 混合。调过参数的人都知道这一步多折磨加了 Additive 的烟在浅色背景上直接糊成一团白光。4. 最终调参对比先跑起来再对着下面这张表微调比自己瞎试快得多参数调低了调高了手感emissionRate15烟很稀看得出断档80画面发灰、帧率掉35~45 最自然life2烟到半空就咔地消失5堆成雾墙糊住场景3 左右endSize50没有扩散感120糊成一团光斑80~100❄️ 案例 B雨雪天气粒子的模块化配置3D天气效果和角色特效的区别在于它属于场景不跟任何节点走。所以 3D 粒子第一个要动的就是坐标系然后才轮到各模块。下面以雪为主线雪比雨慢、容错高先拿它把流程跑通。①发射配置shape → 发射率 → 重力simulationSpace设为World让雪花在世界空间下落镜头移动时雪不动才像真的天气。ShapeModule选Circle圆形区域放在头顶当降雪区radius拉大到 6 左右配合radiusThickness控制这片区域的厚度。发射率给 250 上下——雪要密。②寿命与受力lifetime → force → noisestartLifetime给 4 秒雪花飘落慢掉到地面前别死掉。gravityModifier设 0.6让粒子持续加速。想要雪花左右飘移开noiseModule——但先记住一句源码注释噪声模块只支持 CPU 粒子GPU 渲染模式下它静默失效这是后面要专门说的坑。③外观color → sizestartColor用纯白偏冷230, 235, 255colorOverLifetimeModule末端把 alpha 压到 0雪花接近镜头底部时淡出避免啪地消失。sizeOvertimeModule从头到尾保持恒定即可雪不需要膨胀。④渲染器renderer → prewarmrenderer面板选 CPU因为要噪声prewarm打开——它会先模拟一整个循环再开始播放场景出现时已经是雪下了一半的状态而不是从零开始攒雪。注意 prewarm 只在loop true时生效。关键配置浓缩如下其余参数在面板上对着调const ps this.node.getComponent(ParticleSystem); ps.simulationSpace ParticleSpace.World; // 雪落在世界空间不跟镜头/角色走 ps.shapeModule.shapeType ParticleShapeType.Circle; // 头顶圆形区域降雪 ps.shapeModule.radius 6; ps.startLifetime.constant 4; ps.rateOverTime.constant 250; ps.gravityModifier.constant 0.6; ps.loop true; ps.prewarm true; // 开场即已经下起来了要改成雨形状换Box更贴合理gravityModifier拉回 1.0 让雨滴加速粒子尺寸压到雪的 1/3startLifetime砍半——雨是线雪是点这是两者最本质的区别。⚡ 调参避坑与进阶组合踩坑比案例更值得记下面这五条是社区里重复率最高的。高频踩坑 Top 5噪声/限速模块在 GPU 渲染下静默失效noiseModule和limitVelocityOvertimeModule源码里都标注只支持 CPU 粒子切到 GPU 后不报错、不生效效果就是莫名其妙变直线了。解法需要这两类模块就固定用 CPU 渲染纯外观动画再上 GPU。prewarm 不生效只勾了 prewarm 但loop是 false预热直接跳过开场前几秒画面空空的。解法循环氛围效果永远loop trueprewarm true。Local 空间做天气simulationSpace留在默认 Local结果镜头/节点一移动雨雪跟着角色一起平移廉价感拉满。解法天气类效果一律World。存活粒子数超预算稳态存活量 ≈rateOverTime × startLifetime250 × 4 就是 1000 个粒子在飞中低端机直接卡。解法按这个公式反推发射率移动端单系统控制在 300 以内。混合模式用反烟雾、灰烬这类遮挡物用了 Additive在浅色天空下过曝成白块发光物用了 alpha 混合又显得发灰。解法遮挡感用标准 alpha光感才用 Additive。纹理动画 × Burst组合出爆炸 / 落地烟尘单模块解决不了的瞬间爆发感靠两个模块叠bursts负责在指定时刻一次性喷出 N 个粒子textureAnimationModule负责让这批粒子逐帧播放爆炸/烟尘贴图序列。const ps this.node.getComponent(ParticleSystem); ps.bursts.push(new Burst(0, 60)); // t0 时一次性喷出 60 个粒子 ps.rateOverTime.constant 0; // 关掉持续发射只保留爆发 const tex ps.textureAnimationModule; tex.animation Animation.WholeSheet; // 按整张精灵表顺序播放 tex.numTilesX 3; // 3 列 4 行 12 帧 tex.numTilesY 4; tex.frameOverTime.constant 12; // 一个生命周期内播完 12 帧爆炸就是快生命周期 大 endSize 前 6 帧亮色落地烟尘反过来用慢生命周期 灰色渐变 后 6 帧。同一套模块参数方向一换就是两个效果。✅ 发布前性能 Checklist 与延伸阅读天气粒子配好了上线前把这份清单过一遍省得玩家替你验收稳态存活粒子数 rateOverTime × startLifetime移动端单系统 ≤ 300大面积常驻效果打开renderCulling镜头外的发射器直接剔除纯颜色/缩放动画的效果用 GPU 渲染确认没用上 noise / 限速模块场景内同类粒子共享同一份材质压 draw call触发式特效设playOnAwake false玩家靠近再手动 start真机 Profiler 确认粒子 update 耗时而不是只看帧率延伸资源都在仓库里可以配合源码读3D 粒子系统完整实现cocos/particle/2D 粒子系统实现cocos/particle-2d/内置粒子贴图与默认材质editor/assets/default_materials/参数没有标准答案表里的值都只是起点真正的调参发生在目标设备上。祝你的烟永远轻、雨永远密。【免费下载链接】cocos-engineCocos simplifies game creation and distribution with Cocos Creator, a free, open-source, cross-platform game engine. Empowering millions of developers to create high-performance, engaging 2D/3D games and instant web entertainment.项目地址: https://gitcode.com/GitHub_Trending/co/cocos-engine创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考