Cocos 粒子特效实战2D/3D 选型、火焰与魔法光晕、移动端性能避坑【免费下载链接】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 内置了2D和3D两套粒子组件前者轻快、适合 UI 和平面特效后者带发射器形状、三维大小和噪声模块适合空间感强的场景。这篇直接给结论怎么选、关键参数怎么填、移动端为什么会卡。你照着跑一遍再回头调参数。先定方向2D 还是 3D 粒子两套组件在同一个仓库里分得很开2D 在 cocos/particle-2d/3D 在 cocos/particle/。别被名字唬住核心差异就四点看完这张表你基本能拍板对比维度2D 粒子ParticleSystem2D3D 粒子ParticleSystem控制维度平面angle/speed/重力 切向、径向加速度三维空间startSizeX/Y/Z、startSpeed、发射器形状发射器只有GRAVITY/RADIUS两种模式shapeModule提供 Box/Circle/Cone/Sphere/Hemisphere渲染走 UI 批次渲染天然省支持 CPU 模拟或 GPU顶点着色器模拟高级模块无噪声、无轨迹噪声、轨迹、限制速度、随寿命变色等性能开销极低可大量铺较高GPU 模式能压下来适用场景火焰、烟雾、雨雪、UI 光效环绕光晕、爆炸、空间流体感经验一句话平面特效选 2D要包围感和空间运动再上 3D。下面两个案例各演示一套。案例一用 2D 粒子做一簇上升火焰思路火焰的灵魂是往上冲、边冲边卷、颜色从亮橙烫到暗红最后淡没。2D 的重力模式正好能表达冲 卷——初速决定冲多快切向力决定卷多狠。先看发射节奏这几个数直接决定火焰旺不旺import { Node, ParticleSystem2D, Vec2, Color } from cc; const ps this.node.addComponent(ParticleSystem2D); ps.custom true; // 走自定义参数而不是读 ParticleAsset 配置 ps.totalParticles 200; // 上限防超发 ps.emissionRate 60; // 每秒放 60 个 ps.duration -1; // -1 一直发射 ps.life 1.5; // 单粒子活 1.5 秒 ps.lifeVar 0.5; // ±0.5 秒抖动避免齐步走duration -1是持续发射的约定值lifeVar让每个粒子寿命略有差异火焰才不会一抽一抽。关键参数切向力是火焰卷起来的来源径向力控制扩散收拢。把重力先关掉只靠初速往上走ps.emitterMode ParticleSystem2D.EmitterMode.GRAVITY; // 重力模式 ps.gravity new Vec2(0, 0); // 先不上重力纯靠速度向上 ps.speed 180; // 初速冲多快 ps.angle 90; // 朝正上方 ps.tangentialAccel 80; // 切向力做出翻滚感 ps.radialAccel 0; // 径向力暂时不收拢颜色是火焰的命。从亮橙起步endColor的透明度打到 0粒子飞着飞着就烧没了ps.startColor new Color(255, 180, 40, 255); // 亮橙 ps.startColorVar new Color(40, 40, 0, 0); // 起点色随机抖动 ps.endColor new Color(200, 40, 0, 0); // 暗红且 alpha0 → 淡出这里有个坑endSize默认是0不写就等于越飞越小。火焰通常出生小、长大再收尾记得显式给ps.startSize 24; ps.endSize 60; // 不写这行粒子会越升越小 ps.positionType ParticleSystem2D.PositionType.FREE; // 自由模式留在原地升腾纹理直接用引擎自带的Default-Particle.pngeditor/assets/Default-Particle.png就能出效果。 想让火焰越叠越亮混合模式不是组件上的下拉框而是由它绑定的材质决定的——在粒子材质的 Blend 里选加法混合重叠的粒子会互相提亮这才像火。案例二用 3D 粒子做环绕魔法光晕思路光晕要包围角色所以发射器得是个球粒子从球体表面一圈一圈往外发再叠加一点噪声让它自然飘。3D 组件默认参数已经给了合理起点容量 100、生命周期 5 秒、初速 5你要做的是覆盖。基础量先定下来import { ParticleSystem, ParticleSpace, ParticleShapeType, ParticleEmitLocation } from cc; const ps this.node.addComponent(ParticleSystem); ps.capacity 300; // 最大粒子数 ps.duration 5; ps.loop true; // 循环播放 ps.simulationSpace ParticleSpace.Local; // 跟随角色不钉死在世界 ps.startLifetime.constant 2; // 每个粒子活 2 秒simulationSpace选Local很关键——光晕要跟着角色走不能角色一动光晕留在原地。发射器用球体注意 3D 里 shape 模块的开关字段名是enable不是enabledconst shape ps.shapeModule; shape.enable true; // 打开发射器模块 shape.shapeType ParticleShapeType.Sphere; // 球体发射 shape.emitFrom ParticleEmitLocation.Volume; // 从球体内部发 shape.radius 1.5; // 球半径三维大小要先打开startSize3DX/Y/Z才会分别生效否则只有startSizeX起作用ps.startSize3D true; ps.startSizeX.constant 0.5; ps.startSizeY.constant 0.5; ps.startSizeZ.constant 0.5;颜色随寿命渐变走的是colorOverLifetimeModule内部用一条色带描述从出生到死亡颜色怎么变。编辑器里把色带从紫拉到青再拉到黄就能出彩虹光晕比硬编码几个颜色点省事。加噪声让它活起来3D 的噪声模块靠strengthX/Y/Z三个分量控制扰动幅度注意它只在 CPU 模拟下生效别开在 GPU 模式上const noise ps.noiseModule; noise.strengthX 0.5; noise.strengthY 0.5; noise.strengthZ 0.5;渲染交给 GPU把模拟挪到顶点着色器CPU 几乎不占。配合面向摄像机的广告牌模式最通用也最省ps.renderer.useGPU true; // GPU 粒子 ps.renderer.renderMode ParticleRenderMode.Billboard; // 始终面向镜头⚠️ 切到 GPU 之前先看一眼设备能力引擎会在设备不支持顶点纹理或浮点纹理时回退到 CPU日志里会提示移动端务必真机验证。调参速查表两套系统高频参数的作用 怎么取值调的时候对照着改2D 粒子ParticleSystem2D参数作用取值建议totalParticles粒子数量上限移动端 ≤300emissionRate每秒发射数配合life控活跃量duration发射器存活时间-1持续发射life/lifeVar生命周期及抖动主值 1~2 秒抖动取 1/3startColor/endColor起止颜色末色 alpha 设 0 做淡出startSize/endSize起止大小endSize默认 0注意别漏tangentialAccel/radialAccel切向 / 径向加速度仅重力模式正负号控制卷与收拢positionType粒子跟随方式火焰用FREE跟角色用GROUPED3D 粒子ParticleSystem参数作用取值建议capacity最大粒子数移动端 ≤300loop/duration是否循环 / 时长循环特效looptruesimulationSpace模拟坐标系跟角色用LocalstartLifetime.constant单粒子寿命光晕约 2 秒shapeModule.enable/shapeType发射器开关 / 形状环绕用SphereVolumestartSize3DstartSizeX/Y/Z三维大小打开startSize3D才分轴noiseModule.strengthX/Y/Z噪声扰动仅 CPU0.3~0.6 起步renderer.useGPU是否 GPU 模拟量大优先开验证能力移动端性能避坑清单三条最常见的坑按问题 → 原因 → 解法拆开卡顿粒子太多叠加 GPU 过绘制 → 透明粒子互相覆盖填充率爆表 → 单系统控制在 300 内纹理别超过 256×256能关的噪声/轨迹先关。帧率骤降且 CPU 高大数量粒子却用了 CPU 模拟 → 每个粒子都在 JS 里逐帧算 → 开renderer.useGPU true把模拟甩给顶点着色器前提设备支持顶点/浮点纹理。内存涨、节点残留播放完的节点没销毁或被父节点引用住 → 2D 开autoRemoveOnFinish3D 用完手动destroy同类特效共享同一份材质和资源别每帧new。切到 GPU 后效果消失/回退设备不支持顶点纹理或浮点纹理 → 引擎静默回退 CPU 并打日志 → 真机验证别只在桌面端看。进阶玩法与收尾两个能力点到为止需要时再深入轨迹Trail3D 的trailModule能给粒子拖一条尾迹做流光、拖尾很合适——但它只在 CPU 模拟下可用和 GPU 二选一。纹理动画TextureAnimationtextureAnimationModule让粒子在生命周期里翻帧做爆炸、魔法爆开这种逐帧变化的效果比单张静态图生动得多。限制速度 / 力场limitVelocityOvertimeModule、forceOvertimeModule能控制粒子收拢、加速都是 CPU 侧能力。2D 轻、3D 强、GPU 省——三件事记住就够用了。建议你把上面的火焰和光晕各跑一遍先在真机上量一次帧率再回头对着速查表调参数手感很快就有了。【免费下载链接】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），仅供参考
