Cocos 粒子系统快速上手指南：从第一个雨滴效果到移动端调优

Cocos 粒子系统快速上手指南：从第一个雨滴效果到移动端调优

【免费下载链接】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

Cocos 粒子系统是 Cocos Creator 引擎中做视觉特效的核心组件：2D 雨雾、火焰、技能打击、3D 场景里的能量流，都靠它实现。本文先带你在 5 分钟内做出一个能跑的效果，再拆开讲清楚发射器、行为模块、渲染器三块各管什么，最后按场景给出调参模板和一份移动端优化清单。

5 分钟做出第一个粒子效果

不需要写代码，编辑器里 5 步就能出结果：

1. 在层级面板选中节点，右侧检查器点"添加组件"，搜索 Particle。做 2D 游戏或 UI 特效选粒子系统 2D（源码在 cocos/particle-2d/），做 3D 场景选粒子系统（源码在 cocos/particle/）。
2. 给组件指定一张纹理，粒子就是这张图在屏幕上的实例，选小而干净的圆点图最通用。
3. 把容量（capacity）设为 200，生命周期设为 2 秒，勾选循环播放。
4. 打开形状模块，选球体或圆锥作为发射区域，初始速度给 5~8。
5. 点预览播放。第一次看到的效果通常偏"散"，正常，下一步再收敛。

如果习惯用代码挂载，最核心的调用只有这几行：

import { ParticleSystem } from 'cc'; const ps = this.node.addComponent(ParticleSystem); ps.capacity = 500; // 最大粒子数 ps.loop = true; // 循环播放 ps.startLifetime.constant = 2; // 生命周期 2 秒 ps.startSpeed.constant = 8; // 初始速度 ps.playOnAwake = true; // 节点激活即播放

其余属性（颜色渐变、大小随时间变化、旋转）都可以在检查器里展开对应模块逐项配置。

拆开看：发射器、行为模块与渲染器

一个粒子组件由三部分协同工作：

• 发射器：决定粒子从哪来。3D 组件里的形状模块支持 Box、Cone、Sphere、Hemisphere 四种发射体，还能控制从表面还是从体积内发射；2D 组件则用发射区域和角度范围表达同样的概念。
• 行为模块：粒子出生后的所有变化都在这里改。生命周期、初始速度是基础项，其余按"随时间变化"组织：颜色、大小、旋转、速度、受力各自独立开关，另有噪声模块制造无规则抖动、拖尾模块画运动轨迹、纹理动画模块做帧序列。
• 渲染器：把算好的粒子画出来。3D 粒子支持 CPU 与 GPU 两种更新模式，并可选公告牌（永远朝向相机）与不同混合模式；2D 粒子由 2D 渲染管线按 UI 批次绘制。

2D 与 3D 两套组件的能力边界差别明显，选型时可以直接对照：

原则：纯 2D 游戏不要图省事挂 3D 粒子，公告牌粒子在 3D 场景里做远景特效比全精度 3D 粒子省得多。

分场景调参：天气、打击、氛围

三类最常见的特效，关键参数可以对照使用：

天气类：下雨

目标是雨滴密集但均匀，落地前有淡出。把发射区域设成一个横条（覆盖屏幕宽度）、发射方向朝下、重力模块给一个向下的加速度。坑：雨滴生命周期不要设太长，否则粒子堆在底部变成"水帘"；屏幕边缘用 culling 裁掉不可见粒子，能省掉约一半的无效绘制。

打击类：受击火花

目标是 0.5 秒内爆发又干净消失。用 Burst 一次性发射 30~50 个粒子，初始速度拉高，大小随时间快速归零，颜色用高亮色再快速变暗。坑：Burst 数量别和持续发射叠满容量，一次爆发就吃光容量会让后续效果断档；打击特效的生命周期超过 1 秒基本都算拖沓。

氛围类：环境烟雾

目标是慢、柔、无明显边界。初始速度给个位数，打开噪声模块加轻微抖动，大小曲线先升后降，透明度上限压到 0.1 左右。坑：烟雾最容易做成"脏"，通常是透明度太高或纹理边缘太硬，先换柔和纹理再谈参数。

移动端粒子数量优化参数

按"现象 → 原因 → 修法"排查，比盲目降参数有效：

• 现象：同屏多个半透明粒子时帧率明显下滑。原因：透明粒子互相叠加产生 overdraw，填充率瓶颈。修法：总粒子数压到移动端阈值（2D 500 / 3D 300）以内，透明度叠加层数尽量控制在 3~4 层。
• 现象：粒子纹理一多内存就涨。原因：纹理未压缩、尺寸过大。修法：粒子纹理用 256x256 以内、2 的幂次方尺寸并走平台压缩格式。
• 现象：粒子一多就掉帧，改参数无效。原因：CPU 模式每个粒子都在主线程积分。修法：3D 粒子切到 GPU 渲染模式；2D 场景则合并同材质粒子、删掉低频可见的组件。
• 现象：技能触发瞬间卡顿一帧。原因：Burst 与持续发射同时把容量打满。修法：给打击类特效单独建组件，容量按"持续量 + 一次爆发量"预留，别和常驻特效共用。
• 现象：远处小特效也在持续消耗。原因：组件没有停用逻辑。修法：超出视距或 LOD 距离时直接禁用组件，比降粒子数更彻底。

写在最后

粒子效果没有标准答案，先跑出一个可用的再调，比对着参数表空想快得多。想深入看实现细节，建议从 3D 粒子组件源码 和 2D 粒子模拟器 入手，tests/particle/ 目录里还有现成的测试用例可以直接跑。

【免费下载链接】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