Cocos 粒子特效实战教程5 步做出篝火与烟花的完整调优指南【免费下载链接】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 Creator 里做出会呼吸的火焰、会炸开的烟花却总被一堆参数绕晕Cocos 引擎内置的粒子系统正是干这件事的核心工具2D 粒子靠参数驱动3D 粒子靠模块驱动配置对了氛围感立刻拉满。本文按完成一个篝火特效的完整任务展开跟着 5 个步骤走你既能做出火焰、火花也能在收尾的清单里学会性能调优。步骤1先给粒子组件安家2D 和 3D 版本怎么选粒子效果好不好一半看选没选对系统。Cocos 提供了两套组件入口在 cocos/particle-2d/ 和 cocos/particle/两者思维方式完全不同对比维度ParticleSystem2D2D 粒子ParticleSystem3D 粒子组织方式平铺参数angle、speed、startSize…模块化发射形状、速度、颜色、噪声各是一个 Module发射器形状只有点靠 angle 控制方向立方体/圆/圆锥/球/半球/网格等 6 种一次性爆发不支持 Burst支持 Burst 事件见步骤4运动模拟重力/径向/切向加速、旋转受力、限速、拖尾、噪声、贴图动画适合场景UI 魔法、2D 火焰、火星四溅篝火、烟雾、雨雪、爆炸光效import { ParticleSystem, ParticleSystem2D } from cc; // 3D 场景挂在篝火节点上 this.node.addComponent(ParticleSystem); // 2D 场景挂在魔法阵节点上 this.node.addComponent(ParticleSystem2D);这一步在做什么把正确的组件挂到场景节点上后面所有参数都是在它身上调。⚠️避坑点两套 API 不能混用——2D 系统没有shapeModule3D 系统没有emissionRate。选错组件会直接报属性不存在。选型技巧2D 项目里即使有相机透视也优先用 2D 粒子计算量小一个量级3D 场景中远处的火焰可用公告板式 3D 粒子贴到固定方向省掉逐粒子的完整 3D 变换。步骤2搭好发射器让火苗从圆锥里冒出来3D 粒子系统里从哪里喷、朝哪个方向喷由发射器shapeModule决定。Cocos 支持 6 种发射形状立方体、圆形、圆锥、球体、半球和模型网格枚举定义在 cocos/particle/enum.ts 的ParticleShapeType中。核心概念发射形状只决定粒子的出生地和出生方向决定不了后续轨迹——那是速度、受力模块的事。把出生点和运动规律分开调是做出自然火焰的关键。以篝火为例把发射器设为小半径圆锥粒子从底部一圈向上冒出import { ParticleSystem, ParticleShapeType } from cc; const ps this.node.getComponent(ParticleSystem)!; const shape ps.shapeModule!; // 发射器模块面板中可开关 shape.shapeType ParticleShapeType.Cone; // 圆锥发射火焰的最佳起点 shape.angle 25; // 锥角越小火焰越聚拢越大越散开 shape.radius 0.25; // 圆锥底面半径决定火苗底座宽窄这步在做什么给火焰定好灶口。真实火焰的粒子几乎都沿发射轴向运动所以圆锥比球体更接近火苗形态。手感对照角度 10° 像蜡烛25° 像篝火50° 以上就像篝火炸开的爆燃。调参时盯着预览窗口反复对比即可。步骤3定好生死节奏火焰就会自己烧起来发射器只负责生粒子怎么活、怎么死由一组随时间变化的参数控制。Cocos 用CurveRange曲线/区间表达这类参数既能填定值也能填最小~最大的随机区间让每个粒子都不一样。篝火的生命周期要模拟火苗升起、膨胀、消散三件事import { CurveRange } from cc; const ps this.node.getComponent(ParticleSystem)!; ps.duration 0.01; // 几乎不停顿地持续发射 ps.loop true; // 无限循环播放 // 粒子活 0.8~1.6 秒每颗火苗长短不一火焰才有呼吸感 ps.startLifetime.mode CurveRange.Mode.TwoConstants; ps.startLifetime.constantMin 0.8; ps.startLifetime.constantMax 1.6; // 沿 Y 轴对齐运动速度出生初速→末端由快变慢 ps.startSpeed.mode CurveRange.Mode.TwoConstants; ps.startSpeed.constantMin 1.5; // 底部窜得快 ps.startSpeed.constantMax 0.6; // 顶部拖着走这步在做什么用生命周期随机区间 速度区间两个参数把呆板的直线粒子变成长短错落、上蹿下跳的火苗。颜色与大小的时间渐变同样重要——真实火焰底部亮黄、顶部暗红// 大小出生 0.4 单位活到一半时最胖然后消散 const size ps.sizeOvertimeModule!; size.enabled true; size.sizeOverLifetime.constant 0.4; // 颜色GradientRange 支持关键帧从亮黄渐变为暗红 const color ps.colorOverLifetimeModule!; color.enabled true;调试技巧Cocos 编辑器在场景运行状态下支持直接在检查器里拨这些模块看到效果满意后再把数值记回脚本比闭着眼改代码效率高得多。步骤4给烟花加一颗心Burst 事件一次喷出 200 颗如果说持续发射是细水长流Burst 就是瞬间爆发——它让粒子系统在指定时刻一次性喷出指定数量的粒子烟花、爆炸、魔法释放全靠它。Burst 类定义在 cocos/particle/burst.ts核心字段就四个触发时间、重复次数、重复间隔、发射数量。烟花的完整配方低射速维持零星火星 定时 Burst 炸出主花import { ParticleSystem, Burst, ParticleShapeType } from cc; const ps this.node.getComponent(ParticleSystem)!; ps.duration 1.2; // 一轮 1.2 秒后循环 ps.loop true; const burst new Burst(); burst.time 0; // 每轮一开场就炸 burst.repeatCount 1; // 只触发一次 burst.count.constant 200; // 一次喷出 200 颗 ps.bursts.push(burst); // 注册爆发事件 // 烟花从中心向四面八方炸开球体发射 均匀初速 ps.shapeModule!.shapeType ParticleShapeType.Sphere; ps.startLifetime.constant 1.2; // 和循环周期一致落地即灭这步在做什么把持续发射和定时爆发两种节奏组合起来粒子数量不再单调视觉重音自然产生。⚠️避坑点burst.time会被duration循环取整——若 time 大于等于 durationBurst 会永远触发不到。让 duration ≥ 所有 burst 的 time是新手最常踩的坑。步骤5同一团火用 2D 怎么做附一套移动端性能调优清单如果项目是 2D 的同一团火用ParticleSystem2D也能做参数更直白但注意它没有 Burst爆发节奏要自己用脚本模拟import { ParticleSystem2D, Color, Vec2 } from cc; const fire this.node.getComponent(ParticleSystem2D)!; fire.emitterMode ParticleSystem2D.EmitterMode.GRAVITY; // 重力模式 fire.totalParticles 150; // 最大粒子数性能的第一道闸门 fire.emissionRate 60; // 每秒喷出 60 颗 fire.life 1; fire.lifeVar 0.5; // 寿命 0.75~1.25 秒 fire.angle 270; fire.angleVar 30; // 270° 朝上喷0° 朝右 fire.speed 180; fire.speedVar 60; fire.startSize 24; fire.endSize 4; // 出生大、熄灭前缩到 4 像素 fire.startColor new Color(255, 160, 40, 220); fire.endColor new Color(160, 20, 10, 0); // 烧到末段变暗红 fire.gravity new Vec2(0, 40); // 轻微下坠火苗不会笔直上窜这步在做什么用 2D 的平铺参数复刻火焰的上升-消散曲线验证你在 3D 版本里学到的节奏感。最后一步永远是让它跑得动。移动端上粒子是显存与 CPU 的双重消耗大户按下面这张清单逐项核对调优项建议值原理粒子容量capacity / totalParticles3D 移动端 ≤ 3002D ≤ 500容量直接决定顶点数与内存剔除模式cullingMode远景用 Pause关键镜头用 PauseAndCatchup看不见的粒子不模拟白省一半 CPU粒子纹理256×256 以内的单张柔边贴图软边光斑比硬边方块省叠加层数混合模式光效用 Additive烟用普通 AlphaAdditive 更透亮且不易过曝发灰系统数量同一火焰只建 1 个系统用模块堆细节每个系统一次 draw call批次合并靠同材质实测路径引擎自带粒子测试集容量、CPU/GPU 剔除、材质切换都有覆盖见 tests/particle/改参数前后跑一遍数字比直觉诚实。学习资源库粒子系统组件源码含中文注释的模块实现cocos/particle/2D 粒子系统与资产格式cocos/particle-2d/发射器形状与剔除模式枚举定义cocos/particle/enum.ts粒子单元测试容量/剔除/渲染切换tests/particle/贡献与模块文档docs/回头看这 5 步选对组件、搭好发射器、调准生死节奏、用 Burst 打重音、按清单收性能——篝火和烟花背后的逻辑完全一样。真正的差距在细节角度 1° 的差别、寿命 0.1 秒的差别就是特效和贴图动图的分界线。现在就打开 Cocos Creator新建一个粒子节点把火焰烧起来吧。【免费下载链接】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），仅供参考 Cocos 粒子特效实战教程：5 步做出篝火与烟花的完整调优指南
Cocos 粒子特效实战教程5 步做出篝火与烟花的完整调优指南【免费下载链接】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 Creator 里做出会呼吸的火焰、会炸开的烟花却总被一堆参数绕晕Cocos 引擎内置的粒子系统正是干这件事的核心工具2D 粒子靠参数驱动3D 粒子靠模块驱动配置对了氛围感立刻拉满。本文按完成一个篝火特效的完整任务展开跟着 5 个步骤走你既能做出火焰、火花也能在收尾的清单里学会性能调优。步骤1先给粒子组件安家2D 和 3D 版本怎么选粒子效果好不好一半看选没选对系统。Cocos 提供了两套组件入口在 cocos/particle-2d/ 和 cocos/particle/两者思维方式完全不同对比维度ParticleSystem2D2D 粒子ParticleSystem3D 粒子组织方式平铺参数angle、speed、startSize…模块化发射形状、速度、颜色、噪声各是一个 Module发射器形状只有点靠 angle 控制方向立方体/圆/圆锥/球/半球/网格等 6 种一次性爆发不支持 Burst支持 Burst 事件见步骤4运动模拟重力/径向/切向加速、旋转受力、限速、拖尾、噪声、贴图动画适合场景UI 魔法、2D 火焰、火星四溅篝火、烟雾、雨雪、爆炸光效import { ParticleSystem, ParticleSystem2D } from cc; // 3D 场景挂在篝火节点上 this.node.addComponent(ParticleSystem); // 2D 场景挂在魔法阵节点上 this.node.addComponent(ParticleSystem2D);这一步在做什么把正确的组件挂到场景节点上后面所有参数都是在它身上调。⚠️避坑点两套 API 不能混用——2D 系统没有shapeModule3D 系统没有emissionRate。选错组件会直接报属性不存在。选型技巧2D 项目里即使有相机透视也优先用 2D 粒子计算量小一个量级3D 场景中远处的火焰可用公告板式 3D 粒子贴到固定方向省掉逐粒子的完整 3D 变换。步骤2搭好发射器让火苗从圆锥里冒出来3D 粒子系统里从哪里喷、朝哪个方向喷由发射器shapeModule决定。Cocos 支持 6 种发射形状立方体、圆形、圆锥、球体、半球和模型网格枚举定义在 cocos/particle/enum.ts 的ParticleShapeType中。核心概念发射形状只决定粒子的出生地和出生方向决定不了后续轨迹——那是速度、受力模块的事。把出生点和运动规律分开调是做出自然火焰的关键。以篝火为例把发射器设为小半径圆锥粒子从底部一圈向上冒出import { ParticleSystem, ParticleShapeType } from cc; const ps this.node.getComponent(ParticleSystem)!; const shape ps.shapeModule!; // 发射器模块面板中可开关 shape.shapeType ParticleShapeType.Cone; // 圆锥发射火焰的最佳起点 shape.angle 25; // 锥角越小火焰越聚拢越大越散开 shape.radius 0.25; // 圆锥底面半径决定火苗底座宽窄这步在做什么给火焰定好灶口。真实火焰的粒子几乎都沿发射轴向运动所以圆锥比球体更接近火苗形态。手感对照角度 10° 像蜡烛25° 像篝火50° 以上就像篝火炸开的爆燃。调参时盯着预览窗口反复对比即可。步骤3定好生死节奏火焰就会自己烧起来发射器只负责生粒子怎么活、怎么死由一组随时间变化的参数控制。Cocos 用CurveRange曲线/区间表达这类参数既能填定值也能填最小~最大的随机区间让每个粒子都不一样。篝火的生命周期要模拟火苗升起、膨胀、消散三件事import { CurveRange } from cc; const ps this.node.getComponent(ParticleSystem)!; ps.duration 0.01; // 几乎不停顿地持续发射 ps.loop true; // 无限循环播放 // 粒子活 0.8~1.6 秒每颗火苗长短不一火焰才有呼吸感 ps.startLifetime.mode CurveRange.Mode.TwoConstants; ps.startLifetime.constantMin 0.8; ps.startLifetime.constantMax 1.6; // 沿 Y 轴对齐运动速度出生初速→末端由快变慢 ps.startSpeed.mode CurveRange.Mode.TwoConstants; ps.startSpeed.constantMin 1.5; // 底部窜得快 ps.startSpeed.constantMax 0.6; // 顶部拖着走这步在做什么用生命周期随机区间 速度区间两个参数把呆板的直线粒子变成长短错落、上蹿下跳的火苗。颜色与大小的时间渐变同样重要——真实火焰底部亮黄、顶部暗红// 大小出生 0.4 单位活到一半时最胖然后消散 const size ps.sizeOvertimeModule!; size.enabled true; size.sizeOverLifetime.constant 0.4; // 颜色GradientRange 支持关键帧从亮黄渐变为暗红 const color ps.colorOverLifetimeModule!; color.enabled true;调试技巧Cocos 编辑器在场景运行状态下支持直接在检查器里拨这些模块看到效果满意后再把数值记回脚本比闭着眼改代码效率高得多。步骤4给烟花加一颗心Burst 事件一次喷出 200 颗如果说持续发射是细水长流Burst 就是瞬间爆发——它让粒子系统在指定时刻一次性喷出指定数量的粒子烟花、爆炸、魔法释放全靠它。Burst 类定义在 cocos/particle/burst.ts核心字段就四个触发时间、重复次数、重复间隔、发射数量。烟花的完整配方低射速维持零星火星 定时 Burst 炸出主花import { ParticleSystem, Burst, ParticleShapeType } from cc; const ps this.node.getComponent(ParticleSystem)!; ps.duration 1.2; // 一轮 1.2 秒后循环 ps.loop true; const burst new Burst(); burst.time 0; // 每轮一开场就炸 burst.repeatCount 1; // 只触发一次 burst.count.constant 200; // 一次喷出 200 颗 ps.bursts.push(burst); // 注册爆发事件 // 烟花从中心向四面八方炸开球体发射 均匀初速 ps.shapeModule!.shapeType ParticleShapeType.Sphere; ps.startLifetime.constant 1.2; // 和循环周期一致落地即灭这步在做什么把持续发射和定时爆发两种节奏组合起来粒子数量不再单调视觉重音自然产生。⚠️避坑点burst.time会被duration循环取整——若 time 大于等于 durationBurst 会永远触发不到。让 duration ≥ 所有 burst 的 time是新手最常踩的坑。步骤5同一团火用 2D 怎么做附一套移动端性能调优清单如果项目是 2D 的同一团火用ParticleSystem2D也能做参数更直白但注意它没有 Burst爆发节奏要自己用脚本模拟import { ParticleSystem2D, Color, Vec2 } from cc; const fire this.node.getComponent(ParticleSystem2D)!; fire.emitterMode ParticleSystem2D.EmitterMode.GRAVITY; // 重力模式 fire.totalParticles 150; // 最大粒子数性能的第一道闸门 fire.emissionRate 60; // 每秒喷出 60 颗 fire.life 1; fire.lifeVar 0.5; // 寿命 0.75~1.25 秒 fire.angle 270; fire.angleVar 30; // 270° 朝上喷0° 朝右 fire.speed 180; fire.speedVar 60; fire.startSize 24; fire.endSize 4; // 出生大、熄灭前缩到 4 像素 fire.startColor new Color(255, 160, 40, 220); fire.endColor new Color(160, 20, 10, 0); // 烧到末段变暗红 fire.gravity new Vec2(0, 40); // 轻微下坠火苗不会笔直上窜这步在做什么用 2D 的平铺参数复刻火焰的上升-消散曲线验证你在 3D 版本里学到的节奏感。最后一步永远是让它跑得动。移动端上粒子是显存与 CPU 的双重消耗大户按下面这张清单逐项核对调优项建议值原理粒子容量capacity / totalParticles3D 移动端 ≤ 3002D ≤ 500容量直接决定顶点数与内存剔除模式cullingMode远景用 Pause关键镜头用 PauseAndCatchup看不见的粒子不模拟白省一半 CPU粒子纹理256×256 以内的单张柔边贴图软边光斑比硬边方块省叠加层数混合模式光效用 Additive烟用普通 AlphaAdditive 更透亮且不易过曝发灰系统数量同一火焰只建 1 个系统用模块堆细节每个系统一次 draw call批次合并靠同材质实测路径引擎自带粒子测试集容量、CPU/GPU 剔除、材质切换都有覆盖见 tests/particle/改参数前后跑一遍数字比直觉诚实。学习资源库粒子系统组件源码含中文注释的模块实现cocos/particle/2D 粒子系统与资产格式cocos/particle-2d/发射器形状与剔除模式枚举定义cocos/particle/enum.ts粒子单元测试容量/剔除/渲染切换tests/particle/贡献与模块文档docs/回头看这 5 步选对组件、搭好发射器、调准生死节奏、用 Burst 打重音、按清单收性能——篝火和烟花背后的逻辑完全一样。真正的差距在细节角度 1° 的差别、寿命 0.1 秒的差别就是特效和贴图动图的分界线。现在就打开 Cocos Creator新建一个粒子节点把火焰烧起来吧。【免费下载链接】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），仅供参考