企业官网建设流程全解析

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。怎么选，看这张表：

一条经验法则：效果贴在 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 步：填火焰参数

第 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 给不了你的东西——粒子会在球面上微微游走，光晕立刻"活"了。

火焰与光晕调参手册

效果不对别瞎拧，先查这张表：

让粒子不卡顿的 3 个开关

问题 → 对策，一条一行：

• 掉帧了 → 单系统粒子压到 300 以内，移动端 500 以上就要小心
• 纹理带宽吃紧 → 粒子纹理控制在 256×256 以内，64×64 软点足够
• CPU 更新贵 → 3D 粒子多时开renderer.useGPU，更新交给 GPU
• 同屏特效节点多 → 远处的停发射，或整节点enabled = false
• 内存涨 → 多个系统共享同一份粒子和材质资源

新手避坑清单

1. 发射率 × 生命周期 > 粒子上限：50/秒 × 1.5 秒 ≈ 75 个，留足余量；一旦超了，新粒子提前挤占旧粒子，火焰直接变"点状闪烁"。
2. 3D 场景里挂 2D 粒子：ParticleSystem2D走 UI 渲染层，放到 3D 场景里永远贴着镜头平面，和角色对不上，光晕必须用ParticleSystem。
3. 渲染模式选错：3D 粒子上千个还在用 CPU 更新，帧时间直接翻倍，先切 GPU 再谈其他。
4. 纹理太大：只占屏幕 32 像素的粒子贴 1024×1024 的图，带宽全浪费，64~128 就够。
5. 把 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