Cocos Engine 粒子特效速成火焰与魔法光晕两个实战案例一下午跑通【免费下载链接】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 Engine 粒子系统先分清 2D 还是 3D再 3 步做出会动的火焰然后做 3D 魔法光晕最后给你一张调参手册和一份避坑清单。读完就能动手两个效果都能跑起来。2D 还是 3D一张表选对粒子类型先别急着写代码选对类型能省一半时间。Cocos Engine 粒子系统分两条线2D 粒子是挂在 UI 渲染层上的ParticleSystem2D组件3D 粒子是场景里的ParticleSystem。怎么选看这张表2D 粒子3D 粒子组件ParticleSystem2DParticleSystem典型用途火焰、烟雾、烟花、UI 反馈爆炸、光晕、场景氛围、3D 特效运动方式XY 平面重力/半径两种模式XYZ 三维发射形状 模块驱动调参方式直接改属性startSize、speed 等模块制Shape / Noise / Color性能轻移动端友好相对重注意容量上限一条经验法则效果贴在 UI 层、只要看起来是 2D的用 2D效果要围着 3D 模型转、要随相机透视变化的用 3D。3 步做出会动的火焰2D 粒子实战流程就三件事加组件 → 填数字 → 定颜色。第 1 步加组件打开手动模式import { ParticleSystem2D, Color } from cc; const ps this.node.addComponent(ParticleSystem2D); ps.custom true; // 不加载 .pac 文件手动调参 ps.totalParticles 200; // 同时存活粒子上限 ps.emissionRate 50; // 每秒发射 50 个custom是关键开关为 true 时参数全归你管为 false 则整套读粒子文件。第 2 步填火焰参数参数值效果 → 原因 → 怎么调duration-1持续发射不停 → 想要一次烧完就改成秒数life / lifeVar1.5 / 0.5存活 1.5 秒 ±0.5 → 越短火焰越紧实startSize / endSize30 / 60越大越像火苗拉长 → 想要火星感就反过来speed150初速越大窜得越高 → 配合 life 调gravity(0, 100)Y 正向上火焰才会升 → 负值就掉下去了radialAccel-30轻微内收 → 正值 0 则直冲散开第 3 步定颜色ps.startColor new Color(255, 200, 50, 255); // 出生亮黄 ps.endColor new Color(200, 50, 0, 0); // 死亡转红且淡出 ps.emitterMode ParticleSystem2D.EmitterMode.GRAVITY;剩下交给编辑器右侧 Inspector 给节点挂上组件后把内置软点纹理editor/assets/Default-Particle.png赋给 spriteFrame材质里开叠加混合additive火焰就会发亮。跑一下场景——火升起来了。魔法光晕3D 粒子与 2D 的差异点 ✨3D 粒子的思路完全不同2D 问的是多快、往哪飞3D 拆成模块——ShapeModule 管从哪发各 OverLifetime 模块管出生后怎么变。光晕核心就这几行import { ParticleSystem, ParticleShapeType } from cc; const ps this.node.addComponent(ParticleSystem); ps.capacity 300; ps.loop true; ps.startLifetime.constant 3; // 生命周期 3 秒 const shape ps.shapeModule; // 球形发射围着角色转 shape.enable true; shape.shapeType ParticleShapeType.Sphere; shape.radius 1.5; // 球半径 1.5 米和 2D 的差异在三点发射形状没有速度 重力那套改由 Sphere / Box / Cone 决定粒子从哪冒出来大小用 CurveRange 曲线描述startSizeX.constant 0.2得到 0.2 米均一粒子开startSize3D可三轴分别调颜色colorOverLifetimeModule.color是内置渐变直接在 Inspector 里排紫 → 青 → 黄的关键帧ps.colorOverLifetimeModule.enable true; ps.noiseModule.enable true; // 加随机扰动光晕有风感 ps.renderer.useGPU true; // 交给 GPU 算粒子多更快noise 模块就是 2D 给不了你的东西——粒子会在球面上微微游走光晕立刻活了。火焰与光晕调参手册效果不对别瞎拧先查这张表参数火焰2D魔法光晕3D一句话效果粒子上限totalParticles 200capacity 300打满后停止新生效果稀发射emissionRate 50/秒loop true决定密度先调它生命周期life 1.5 ± 0.5 秒startLifetime 3 秒越长同屏粒子越多大小30 → 60 像素startSizeX 0.2 米成长/收缩感颜色黄 → 红淡出colorOverLifetime 渐变沿生命周期变色运动gravity (0, 100)noiseModule上升 vs 环绕发射源单点 speedSpherer 1.5粒子从哪来让粒子不卡顿的 3 个开关问题 → 对策一条一行掉帧了 → 单系统粒子压到 300 以内移动端 500 以上就要小心纹理带宽吃紧 → 粒子纹理控制在 256×256 以内64×64 软点足够CPU 更新贵 → 3D 粒子多时开renderer.useGPU更新交给 GPU同屏特效节点多 → 远处的停发射或整节点enabled false内存涨 → 多个系统共享同一份粒子和材质资源新手避坑清单发射率 × 生命周期 粒子上限50/秒 × 1.5 秒 ≈ 75 个留足余量一旦超了新粒子提前挤占旧粒子火焰直接变点状闪烁。3D 场景里挂 2D 粒子ParticleSystem2D走 UI 渲染层放到 3D 场景里永远贴着镜头平面和角色对不上光晕必须用ParticleSystem。渲染模式选错3D 粒子上千个还在用 CPU 更新帧时间直接翻倍先切 GPU 再谈其他。纹理太大只占屏幕 32 像素的粒子贴 1024×1024 的图带宽全浪费64~128 就够。把 totalParticles 调很大留余量上限只增加内存和更新成本不会让效果更好看。现在就去写一个打开编辑器先做那团火焰——参数手感这东西跑一次顶看十篇。2D 粒子源码cocos/particle-2d/3D 粒子源码cocos/particle/官方文档docs/【免费下载链接】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 Engine 粒子特效速成：火焰与魔法光晕，两个实战案例一下午跑通
Cocos Engine 粒子特效速成火焰与魔法光晕两个实战案例一下午跑通【免费下载链接】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 Engine 粒子系统先分清 2D 还是 3D再 3 步做出会动的火焰然后做 3D 魔法光晕最后给你一张调参手册和一份避坑清单。读完就能动手两个效果都能跑起来。2D 还是 3D一张表选对粒子类型先别急着写代码选对类型能省一半时间。Cocos Engine 粒子系统分两条线2D 粒子是挂在 UI 渲染层上的ParticleSystem2D组件3D 粒子是场景里的ParticleSystem。怎么选看这张表2D 粒子3D 粒子组件ParticleSystem2DParticleSystem典型用途火焰、烟雾、烟花、UI 反馈爆炸、光晕、场景氛围、3D 特效运动方式XY 平面重力/半径两种模式XYZ 三维发射形状 模块驱动调参方式直接改属性startSize、speed 等模块制Shape / Noise / Color性能轻移动端友好相对重注意容量上限一条经验法则效果贴在 UI 层、只要看起来是 2D的用 2D效果要围着 3D 模型转、要随相机透视变化的用 3D。3 步做出会动的火焰2D 粒子实战流程就三件事加组件 → 填数字 → 定颜色。第 1 步加组件打开手动模式import { ParticleSystem2D, Color } from cc; const ps this.node.addComponent(ParticleSystem2D); ps.custom true; // 不加载 .pac 文件手动调参 ps.totalParticles 200; // 同时存活粒子上限 ps.emissionRate 50; // 每秒发射 50 个custom是关键开关为 true 时参数全归你管为 false 则整套读粒子文件。第 2 步填火焰参数参数值效果 → 原因 → 怎么调duration-1持续发射不停 → 想要一次烧完就改成秒数life / lifeVar1.5 / 0.5存活 1.5 秒 ±0.5 → 越短火焰越紧实startSize / endSize30 / 60越大越像火苗拉长 → 想要火星感就反过来speed150初速越大窜得越高 → 配合 life 调gravity(0, 100)Y 正向上火焰才会升 → 负值就掉下去了radialAccel-30轻微内收 → 正值 0 则直冲散开第 3 步定颜色ps.startColor new Color(255, 200, 50, 255); // 出生亮黄 ps.endColor new Color(200, 50, 0, 0); // 死亡转红且淡出 ps.emitterMode ParticleSystem2D.EmitterMode.GRAVITY;剩下交给编辑器右侧 Inspector 给节点挂上组件后把内置软点纹理editor/assets/Default-Particle.png赋给 spriteFrame材质里开叠加混合additive火焰就会发亮。跑一下场景——火升起来了。魔法光晕3D 粒子与 2D 的差异点 ✨3D 粒子的思路完全不同2D 问的是多快、往哪飞3D 拆成模块——ShapeModule 管从哪发各 OverLifetime 模块管出生后怎么变。光晕核心就这几行import { ParticleSystem, ParticleShapeType } from cc; const ps this.node.addComponent(ParticleSystem); ps.capacity 300; ps.loop true; ps.startLifetime.constant 3; // 生命周期 3 秒 const shape ps.shapeModule; // 球形发射围着角色转 shape.enable true; shape.shapeType ParticleShapeType.Sphere; shape.radius 1.5; // 球半径 1.5 米和 2D 的差异在三点发射形状没有速度 重力那套改由 Sphere / Box / Cone 决定粒子从哪冒出来大小用 CurveRange 曲线描述startSizeX.constant 0.2得到 0.2 米均一粒子开startSize3D可三轴分别调颜色colorOverLifetimeModule.color是内置渐变直接在 Inspector 里排紫 → 青 → 黄的关键帧ps.colorOverLifetimeModule.enable true; ps.noiseModule.enable true; // 加随机扰动光晕有风感 ps.renderer.useGPU true; // 交给 GPU 算粒子多更快noise 模块就是 2D 给不了你的东西——粒子会在球面上微微游走光晕立刻活了。火焰与光晕调参手册效果不对别瞎拧先查这张表参数火焰2D魔法光晕3D一句话效果粒子上限totalParticles 200capacity 300打满后停止新生效果稀发射emissionRate 50/秒loop true决定密度先调它生命周期life 1.5 ± 0.5 秒startLifetime 3 秒越长同屏粒子越多大小30 → 60 像素startSizeX 0.2 米成长/收缩感颜色黄 → 红淡出colorOverLifetime 渐变沿生命周期变色运动gravity (0, 100)noiseModule上升 vs 环绕发射源单点 speedSpherer 1.5粒子从哪来让粒子不卡顿的 3 个开关问题 → 对策一条一行掉帧了 → 单系统粒子压到 300 以内移动端 500 以上就要小心纹理带宽吃紧 → 粒子纹理控制在 256×256 以内64×64 软点足够CPU 更新贵 → 3D 粒子多时开renderer.useGPU更新交给 GPU同屏特效节点多 → 远处的停发射或整节点enabled false内存涨 → 多个系统共享同一份粒子和材质资源新手避坑清单发射率 × 生命周期 粒子上限50/秒 × 1.5 秒 ≈ 75 个留足余量一旦超了新粒子提前挤占旧粒子火焰直接变点状闪烁。3D 场景里挂 2D 粒子ParticleSystem2D走 UI 渲染层放到 3D 场景里永远贴着镜头平面和角色对不上光晕必须用ParticleSystem。渲染模式选错3D 粒子上千个还在用 CPU 更新帧时间直接翻倍先切 GPU 再谈其他。纹理太大只占屏幕 32 像素的粒子贴 1024×1024 的图带宽全浪费64~128 就够。把 totalParticles 调很大留余量上限只增加内存和更新成本不会让效果更好看。现在就去写一个打开编辑器先做那团火焰——参数手感这东西跑一次顶看十篇。2D 粒子源码cocos/particle-2d/3D 粒子源码cocos/particle/官方文档docs/【免费下载链接】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），仅供参考