Cocos Creator 粒子特效快速上手指南：10分钟做出雨和能量护盾-平芜编程栈

Cocos Creator 粒子特效快速上手指南：10分钟做出雨和能量护盾

【免费下载链接】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 组件 ParticleSystem2D 面向屏幕空间，3D 组件 ParticleSystem 面向体积空间，参数都开放给你调。按下面步骤做完，你手里会有一个能调、够快、可以直接进项目的雨滴特效，外加一套 3D 粒子的起步配置。

先跑起来：最小可用的雨滴效果

先做"能看见东西飞"，再谈好看。给任意节点挂上 2D 粒子组件，配 5 个关键参数：

import { ParticleSystem2D, Vec2 } from 'cc'; const ps = this.node.addComponent(ParticleSystem2D); ps.custom = true; // 不用 plist 配置，代码里直接给参数 ps.spriteFrame = this.rainTex; // 每颗粒子就是这张雨滴贴图 ps.totalParticles = 300; // 同时存活粒子的上限 ps.emissionRate = 150; // 每秒发射 150 个 ps.life = 1.5; ps.lifeVar = 0.5; // 每个粒子寿命随机 ±0.5 秒 ps.speed = 600; // 初速度 ps.gravity = new Vec2(0, -400); // 只往下加速

这几行做的事：spriteFrame决定"粒子长什么样"，emissionRate决定"多久滴一个"，life决定"落下多久消失"，speed加gravity决定"怎么落"。发射器可以想象成头顶的花洒——它只负责把粒子甩出去，之后轨迹交给速度和重力接管。

组件的全部可调项定义在 cocos/particle-2d/particle-system-2d.ts，编辑器面板上的每个格子都对应一个属性，你改代码或改面板是等价的。

调出感觉：让雨滴像雨的三类参数

外观：贴图、颜色与大小衰减

外观三件事：贴图选小而圆的雨滴纹理；用startColor/endColor做颜色过渡，雨滴一般从亮蓝渐隐到透明；用startSize到endSize做尺寸衰减，下落过程中变小，才有"越跑越远"的纵深感。startColor这类属性是Color类型，endColor支持把 alpha 调到 0 实现淡出。

运动：初速度、角度与重力

雨滴的抛物线来自"先向上再被重力拉回"，只靠一个参数调不出来：

ps.emitterMode = ParticleSystem2D.EmitterMode.GRAVITY; ps.angle = 90; // 先朝"上方"喷出 ps.speed = 200; // 喷出初速度 ps.gravity = new Vec2(0, -500); // 重力向下，拉出抛物线

emitterMode有三种，重力模式是最常用的；posVar控制发射位置的随机范围，把它拉满屏幕宽，雨才不会都从同一点漏下来。

手感：用随机量打散僵硬感

引擎里每个参数旁边都带一个Var版本（speedVar、lifeVar、startSizeVar），含义是"在主值基础上随机偏移的量"。没有随机量的粒子像用喷枪一排排喷出来的，有随机量才像自然降雨。

参数	作用	推荐值	常见误区
`emissionRate`	每秒发射数	100–300	直接拉满求"满"，先掉帧
`life`/`lifeVar`	粒子寿命及随机范围	1–2s / 寿命的一半	`lifeVar`设 0，所有粒子同步消失，画面一顿一顿
`speed`/`speedVar`	初速度及随机范围	150–600	只设`speed`不设 Var，所有雨滴一条直线
`startSize`/`endSize`	初始/结束尺寸	12 / 6	结束尺寸比开始大，雨滴像气球
`gravity`	Y 向加速度	(0, -300~-500)	设成正值，雨往天上飘
`posVar`	发射位置随机偏移	约半屏宽	设 0，全部粒子同点发出

💡 调参口诀：先把主值调到"平均看起来对"，再把对应的Var开到主值的一半，最后回来微调主值。

跑得更快：降低帧开销与常见坑

选对渲染路径：2D 走 CPU，3D 走 GPU

2D 粒子在 CPU 上逐粒子模拟（particle-simulator-2d.ts），3D 粒子把计算放到 GPU 侧（cocos/particle/）。所以规则简单：2D 项目优先用 ParticleSystem2D；3D 场景里的远景粒子，用挂在公告板上的 2D 粒子代替 3D 粒子，模拟开销几乎可以忽略。

压容量与透明度叠加

优化方向	做法	预期收益
粒子容量	移动端 2D ≤500、3D ≤300，远处效果减半	模拟与绘制开销降 30–50%
贴图	用 2 的幂尺寸且 ≤256×256	显存与带宽降 15–25%
透明度叠加	同一屏幕半透明粒子控制在 4 层内	显著降低 GPU 填充率开销
批次合并	多个粒子系统复用同一材质	合并批次，draw call 降 25–35%

⚠️custom设为false却没挂file：组件不会报错也不会显示，只在控制台警告。雨"不见了"先查这一项。 ⚠️ 3D 的ParticleSystem.duration默认是 5 秒，播 5 秒就停；循环播放记得设loop = true。 ⚠️ 调试期别忘playOnLoad：它为false时场景里不会自动开始发射，容易误判成"没生效"。

延伸与资源

3D 粒子：从雨滴到能量护盾

护盾、火焰这类体积效果用 3D 组件起步配置如下：

import { ParticleSystem } from 'cc'; const ps = this.node.addComponent(ParticleSystem); ps.capacity = 200; // 粒子容量上限 ps.loop = true; // 循环播放 ps.startLifetime.constant = 2.5; // 寿命 2.5 秒 ps.startSpeed.constant = 3; // 初始速度

之后按需打开模块即可：速度随寿命变化、受力、噪声（noise.ts）、拖尾等都在 cocos/particle/ 目录里，每个模块对应面板上的一组开关。