企业官网建设流程全解析

Cocos Engine 粒子系统完整教程：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 Engine 粒子系统，你 5 分钟就能做出火焰、烟雾、雨雪和技能火花。这篇粒子特效教程基于 Cocos Creator 编辑器讲解，零渲染基础可读，文末两份配方可直接照抄。

粒子能帮你解决哪些画面问题 🎯

三类画面，Cocos Engine 粒子系统单独就能完成，不需要后处理：

• 技能火花：剑击命中，沿打击方向喷出一小撮亮粒，生命周期压到 0.3~0.5 秒，快速消散才有"命中感"。
• 天气雨雪：发射器铺满整个画面，开prewarm开局就满屏，之后雨持续落下。
• 爆炸冲击：一个 Burst 事件一次性喷出几十上百个粒子，再靠外力和尺寸曲线快速衰减，实现代码见 burst.ts。

做 2D 游戏（UI 火花、背景雨雪）用ParticleSystem2D，实现位于 particle-system-2d.ts；3D 场景用ParticleSystem。

5 分钟调出第一个特效 ⏱️

四步走，每步只改最少参数：

1. 加发射器选中空节点，添加ParticleSystem组件 →capacity=100、duration=5s、loop打开 → 你会看到一簇白色粒子从节点位置喷出。
2. 变密集rateOverTime改200、startLifetime改1.2s、capacity改300→ 粒子流从稀疏变连续，不再是一个个"点"。
3. 换外观startSize改0.1、startColor改纯白 → 粒子变小亮点，接近火花质感。
4. 动起来startSpeed改5，发射形状选Cone、角度20°→ 粒子沿锥形方向从一个点喷出去。

组件完整定义见 particle-system.ts，可选发射形状（Box、Circle、Cone、Sphere 等）在 shape-module.ts。

把效果调出层次感的 4 个维度 🎨

Cocos Engine 粒子系统里上百个粒子效果参数，按维度归类后只有 4 组，按顺序调。

1. 颜色与透明

startColor定起点颜色，colorOverLifetime定随时间的曲线。透明度控制淡出：起点 alpha 1、终点 alpha 0，粒子就渐变消失而不是突然消失。典型值：t=0 橙色，t=1 同色但 alpha=0。

2. 大小与旋转

startSize定初始尺寸，sizeOverLifetime收尾到 0（典型 0.3→0），画面就是"基部宽、尖端收"。startRotation定初始角度，rotationOverLifetime给 ±90°/s，烟雾会边飘边转。

3. 运动与外力

startSpeed管初速度，forceOverLifetime管持续外力。方向决定画面：正值向下是雨，gravityModifier=-0.5向上就是烟。实现见 force-overtime.ts。

4. 随机扰动

打开noiseModule，强度0.5、频率1→ 轨迹开始弯曲，摆脱直线的机械感。源码在 noise-module.ts。

性能与常见翻车点 ⚙️

本节是粒子性能优化清单，每条都带数字。Cocos Engine 粒子系统的开销集中在活粒子和 overdraw 两处。

移动端粒子上限

• 单屏活粒子总数 ≤1000；单系统capacity≤500，rateOverTime≤300。
• capacity≥rateOverTime×startLifetime（200×1.2=240，至少设 300）。不满足时新粒子被静默丢弃，这是"调了发射数但画面没变密"的头号原因。

何时选 GPU 渲染

粒子多（≥1000）且运动简单用 GPU 路径，见 particle-system-renderer-gpu.ts；需要碰撞、拖尾、逐粒子逻辑才选 CPU。

剔除开关与 overdraw

• 打开renderCulling=true启用视锥剔除，系统离开相机视口直接停渲染，逻辑见 particle-culler.ts。
• overdraw 是隐形杀手：500 个以上大半透明粒子叠放，移动端帧率明显下滑，降startSize或密度。

const ps = node.getComponent(ParticleSystem); ps.capacity = 500; // 单系统上限 ps.renderCulling = true; // 出视口即停渲染

两份可直接照抄的特效配方 🔥

下面两份 Cocos Engine 粒子系统配方在编辑器里直接改参数即可，无需写代码。

火焰特效参数表

魔法拖尾参数表

拖尾依赖 trail.ts，打开trailModule后把 duration 压到 0.5s 以内，拖尾长度才可控。

• 源码：粒子全部实现位于 cocos/particle/
• 官方文档：docs/
• 示例代码：tests/particle/

这份 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