做 3D 游戏只要是偏写实一点的项目特效基本绕不开一个词火焰。火把、篝火、技能爆发、爆炸残留、熔岩场景全都要用到。而提到火焰实现很多初学者第一反应就是去商店找特效资源或者找美术要序列帧灯一关开始烧钱。其实在 Cocos Creator 3.x 里用自带的 3D 粒子系统就能做出一束非常能打的火焰资产基本为零核心只是几个参数和一张贴图的事。这一篇我把我最开始踩过的坑、调过的参数、最后稳定可用的方案完整整理出来。不管你是刚接触 Cocos Creator 的新手还是从 2D 转 3D 的老手跟着走一遍你也能在十分钟内免费搓出一束可循环、可缩放、可直接挂到角色手里的火焰。为了让你不迷路我会尽量说人话把每一个参数背后的原理也解释清楚。1. 为什么用 Cocos Creator 3D 粒子系统做火焰1.1 2D 粒子与 3D 粒子的区别先说个最常见的误解很多人觉得 Cocos Creator 里的粒子组件只有一个其实 3.x 分了 2D 粒子系统和 3D 粒子系统两套。2D 粒子系统我不用多讲它的定位是 Canvas 平面内的效果适用于 UI 特效、2D 游戏技能光效。可一旦把摄像机转起来角色动起来2D 粒子贴片就“糊”在屏幕上完全没有空间感。3D 粒子系统ParticleSystem 组件则是挂在 3D 节点上的每个粒子都是世界空间里的一个面片会跟着场景透视走。做火焰这种体积感强的效果粒子有近大远小、有朝向、有纵深整体观感完全不一样。我是在做了一个第三人称 RPG 原型时发现原来在角色手部节点直接挂 2D 粒子角色一转身火焰还直挺挺立在屏幕正中央那一瞬间真的非常出戏。Cocos Creator 3.6 之后3D 粒子系统的模块化程度挺高发射器、渲染器、生命周期模块都能单独调性能和功能上已经不输传统大引擎的粒子编辑器。做火焰这个需求已经是杀鸡用牛刀了。1.2 火焰特效的常见方案对比做火焰效果行业内大概有四种思路序列帧动画美术出一套帧图程序按帧播放。效果最可控但是资源量大一束火焰动辄几十张图而且只能做 2D 层面的翻转3D 视角下看会有一种“纸片感”。Shader 程序化火焰用 noise 函数扭曲顶点和颜色纯代码生成。效果能做得非常棒但需要一定的着色器功底而且调试时间不可控。GPU 粒子大量粒子配合噪声/扭曲实现适合爆炸、星云这些大规模效果。但是移动端性能压力大新手调起来容易翻车。常规粒子系统组合这是本篇文章的方案。用少量粒子加透明渐变再配合序列帧或径向贴图通过加色混合做出火焰发光感。我强烈建议普通项目直接用第四种方案原因很简单快、稳、便宜。不需要美术资源配合不依赖高端 GPU逻辑简单不说后续要调整颜色和大小也都是在编辑器里直接拖参数项目其他成员都能上手。1.3 初战思路能用编辑器搞定的就别急着写代码很多人看教程喜欢看代码实现问“怎么用代码创建粒子系统”“怎么用脚本控制火焰”。我的真实建议是第一次做全程用编辑器。Cocos Creator 3D 粒子组件在编辑器里已经把模块都拆开了你只需要创建节点、挂组件、填参数。这么走一遍你对粒子系统的每个模块到底管什么就全清楚了。第一步不是写代码而是先在场景里搭一个空节点把粒子系统组件挂上去用编辑器默认参数随便找一个自带材质先让粒子喷出来。看到白色方块粒子的那一刻你就算入门了。2. 火焰粒子系统的核心参数拆解2.1 发射器形状、数量与寿命粒子系统组件挂上以后最先要调的永远是发射器模块ShapeModule。火焰发射器我建议用“圆锥”形状方向朝上角度小一点。为什么不用球体或者盒子火焰的焰心区域很小燃烧是从底部一个点向上扩散的圆锥最贴近这个形态。角度设到 5 到 15 度左右开口越小火柱越聚拢稍微给一点随机性会让外焰看起来更蓬松。粒子数量也很关键。火焰追求的是“密而不乱”单个粒子的发光和叠加决定了火焰的实心程度。我这里的理想值是 50 到 120 个粒子同时存活。数量太少火焰稀疏一看就是几个贴片在飘数量太多移动端帧率马上给你脸色看。在编辑器里你可以打开粒子系统的 Cap 属性把上限卡住。粒子寿命也就是每个粒子从出生到消失的总时长火焰粒子我一般设置在 0.5 到 1.5 秒之间。寿命太短火焰会像喷泉一样一磕一磕地抖寿命太长粒子会堆积在上方散不开画面会脏。上下浮动一点反而更自然。2.2 渲染与材质加色混合是火焰的灵魂如果你开了默认粒子和默认材质会看到一堆方方正正的白块没有任何火焰感。这个阶段很多人就开始怀疑“是不是我贴图不对”其实不是问题的核心是混合模式。火焰这种自发光的东西绝对不能闭眼用普通透明混合。火焰本质是“发光体”它叠在背景上应该让背景变亮而不是把背景盖住。做法是把材质的混合模式改成加色混合Additive。加色混合的意思是粒子的颜色直接加到背景像素上画面里火焰重叠的区域会越来越亮。真正火焰叠加处就是亮白色的这和现实燃烧的物理规律是吻合的。那具体怎么操作Cocos Creator 3.x 中你可以在资源面板新建一个材质效果选择 builtin-particle然后在属性面板里把混合方式从 SRC_ALPHA, ONE_MINUS_SRC_ALPHA 改成 SRC_ALPHA, ONE。如果编辑器里提供了 Blend Mode 选择直接选 Additive。2.3 颜色与透明度随生命变化这一环节是火焰“看起来像真的”的核心。火焰的颜色不是一成不变的焰心偏蓝白、中间偏黄、外层偏红橙最后飘散的部分渐隐成烟。所以你要打开颜色随生命变化模块ColorOverLifetimeModule在渐变编辑器里把关键帧拉出来。通常我按这几个关键位置来调0% 时刻接近白色或淡蓝色作为焰心明度高透明度 0.8 到 1。25% 时刻亮黄色这里是火焰亮度最强的位置。60% 时刻橙红色可以加一点红到暖棕的过渡。100% 时刻暗红色偏透明透明度归 0模拟火焰消散。这里有个容易踩的坑透明度函数不能是一条平滑直线到 0。因为火焰边缘会剧烈抖动直接线性消失会像“贴纸烧完”很生硬。我的习惯是先让透明度在粒子前半段保持在较高水平后半段快速衰减到 0。把曲线调成带拐点的形状视觉上会柔和非常多。2.4 尺寸、旋转与速度模块粒子尺寸方面火焰整体呈现“底部大、顶部小”的形态现实中的火苗则是根部细、上面膨胀变宽再消散。具体要看你想做什么样的火焰。如果是火把、篝火这类稳定的火源我建议用 SizeOverLifetime 让粒子从小到大再回小曲线呈一个抛物线。起始尺寸不要设成固定值给一个随机区间会更好比如最小 0.15、最大 0.45否则所有粒子一样大火焰会像鱼鳞一样整齐地重复特别假。速度模块里向上的初速度是驱动力。火焰燃烧时热空气往上走粒子如果没有向上的速度就会原地膨胀像一团紫色毒雾而不是火焰。我习惯把速度方向设置成0, 2.5, 0附近并开启随机性上下波动 30%。速度太高火焰会拉成长条速度太低又会堆在发射点附近。旋转模块别忘了。粒子发射时给一个随机起始旋转再在生命周期里缓慢旋转能让火焰的贴片朝向不那么整齐划一。你想象一下一排粒子全部正面对着你和它们各自歪着角度完全两种感觉。旋转值不用太大0 到 360 随机角速度也随机效果立刻自然很多。2.5 噪声与扭曲让火焰“活”起来到了这一步火焰已经有点像样了但细看会发现一个问题所有粒子的运动路径太“线性”像一束整齐的烟花在向上飘缺少火焰那种凌乱的跳动感。解决这个有两个路子。一个是用噪声模块NoiseModule。Cocos Creator 3D 粒子系统从 3.6 开始提供了 Noise 模块作用就是给粒子位置加噪声扰动。我通常把 Noise Strength 开到 0.2 到 0.5频率设到 1 左右让粒子路径有轻微的抖动而不是正弦波那种规律摆动。另一个办法是给粒子自身做一个“呼吸”效果就是让粒子在生命周期里的透明度曲线再加一些随机跳动或者用两张不同的火焰贴图混合。如果你手上只有一个序列帧那也可以直接开 TextureSheetAnimationModule用序列帧动画代替单张贴图的缩放这样火焰的动态就来自贴图本身的变化。序列帧方案做出来的火最“肉”Animation 模块里把帧率设置到 20 到 30 fps看着就比较顺。不过噪声模块也有代价粒子数量越多CPU 负荷越大。我一般只在移动端粒子数量少的项目里用噪声PC 端或者特效量大的场景我会把噪声去掉单纯靠发射器位置随机和速度随机来伪装抖动。3. 从零手搓一束火焰具体实操流程3.1 准备资源免费的序列帧与径向渐变贴图这一节干最实在的事情一束能直接用、可变大小、带 Alpha 通道的火焰到底怎么搭建。先说资源这是“不要钱”的关键你完全不需要去商店买火焰贴图包。最常见的做法是两种一张径向渐变发光圆点贴图。就是一个白色圆点从中心到边缘 alpha 从 1 衰减到 0。几张网格型的火焰序列帧 PNG。网上搜“fire sprite sheet free”能找到一堆 CC0 授权的资源注意看下授权范围个人练习和商业项目基本都是没问题的。如果你没有现成的网格图我建议第一次练习先只用径向渐变圆点因为火焰形状主要靠粒子叠加和颜色渐变拉出来单张贴图完全够用。制作径向渐变图也非常简单PS 里新建一个 128x128 的文档白底高斯模糊保存为 PNG完事。贴图放进工程后还要设置面板里把 Texture Type 调成 sprite并勾选 alpha 自动裁剪或者预乘。这里我踩过一个大坑如果贴图格式使用默认的 JPG 或未裁剪 alpha粒子边缘会出现一层黑边或者灰蒙蒙的块后面我会在问题清单里详细说。3.2 创建粒子节点与初始化参数在层级管理器里新建一个空节点命名为 Fire然后在属性检查器里点击“添加组件”搜索 ParticleSystem把 3D ParticleSystem 挂上。Cocos Creator 3.x 默认给 3D 粒子用的节点会同时生成一个 Renderer 子节点也有可能是组件自带 Renderer 属性取决于你用的版本。我的经验是 3.6 以后ParticleSystem 组件自带渲染器属性直接在组件面板就能改。挂上后选择粒子系统组件先把发射时长设置成循环模式。火焰是要一直烧的发射方式必须是 Loop并且 Start Lifetime 给一个随机区间Start Speed 也设成随机区间比如 min1.5max3。发射器形状选 ConeRadius 设成 0.05 到 0.1粒子从一个类似拳头大的底部生发。Cone Angle 我开头会设成 5 度后面可视你的火焰大小调整。设完这些粒子就已经“喷”出来了只是还是白块。3.3 调整渲染与材质从白块到火焰这一步是观感的分水岭。给粒子换材质。在资源管理器里右键新建 Material命名为 FireMat效果选择 builtin-particle。然后在属性面板里把贴图赋上混合模式选择 Additive。有些版本里 builtin-particle 材质默认的 shader 已经支持 mainTexture、tintColor、tilingOffset 这些属性。你只需要把主贴图替换成径向渐变图就可以了。如果你想让火焰更亮一点把材质里的 tintColor 调成偏黄色或者直接交给粒子系统的颜色模块控制。然后回到粒子系统组件找到 Renderer 模块里对应的材质槽。如果你用的是新版 CreatorRenderer 模块会有一个 Materials 数组把 FireMat 拖进去。材质替换完“方块”会瞬间变成“光斑”已经有一点火焰雏形了。这时候你还会发现一个问题粒子贴片是平行于 xy 平面还是朝向摄像机3D 粒子默认的渲染模式是面片朝向摄像机Billboard火焰就应该朝向摄像机。这个设置要确认一下否则粒子会以世界坐标轴方向显示看起来像一堵贴满亮点的墙。3.4 让火焰循环播放火焰一定会用循环播放而不是播一次就没了。在 ParticleSystem 组件上Duration 数值决定了播放总时长如果设为 0系统会理解成一直循环。我通常把 Duration 设为 -1 或者 0视版本而定。还有一个容易忽略的点是 Play On Awake。如果你把这个关掉了场景启动后粒子不会自动发射。如果循环播了但火焰“突突突”像机关枪一样一顿一顿的那多半是 Start Lifetime 的随机值太小粒子生命周期太短新一簇粒子还没生成上一簇已经全灭。把 Start Lifetime 的随机范围拉到 0.6 到 1.2 秒左右整体节奏会自然很多。另一个循环播放的坑是 Prewarm。如果你的火焰是场景一开始就有建议把 Prewarm 开上。否则火焰会有半秒钟从 0 个粒子发育起来的“生长”过程在一些需要无缝切入的游戏里看起来很掉价。Prewarm 会让粒子系统从假想的“已经运行了一段时间”开始。3.5 补充细节用第二个粒子系统做内部高亮单套粒子系统做出来的火焰通常会感觉中心不够亮。想进一步提升质感同时不增加贴图复杂度我建议给火焰节点下再挂一个子粒子系统专门做焰心高亮。第二套粒子系统的参数和主火焰类似但是颜色更白透明度更高粒子数量只有 1/3粒子尺寸更小。这样叠加在主火焰上焰心位置会有一个比较亮的团块模拟高温燃烧区域。两套粒子系统的叠加让火焰的层次感明显提升。如果你想要更浓一点的烟雾效果甚至可以再挂第三套粒子系统但这套粒子的颜色要偏灰黑混合模式改成普通透明粒子在模拟热气流上升时逐渐放大并淡化。注意烟雾粒子的 Start Speed 要比火焰粒子低一些偏向轻缓否则会盖住火焰的主体。4. 性能优化与常见问题速查4.1 移动端性能粒子数量与贴图尺寸怎么权衡做游戏不是“效果越炫越好”尤其是移动端。粒子系统的开销大头是 fill rate也就是每个粒子要覆盖多少屏幕像素这个和贴图尺寸无关和粒子在屏幕上的投影大小有关。同样 100 个粒子把它们拉大十倍帧率掉得不是线性关系而是平方关系。我的体感是移动端同时存在且可见的粒子数量普通中端机控制在 100 以内比较安全低端机留 50 左右。如果要做大范围爆炸单独创建一套临时粒子系统播完直接销毁不要让它常驻。常驻火焰这种连续效果粒子贴图用 64 或 128 像素足矣大尺寸贴图带来的细节在粒子缩放后肉眼根本看不出来只会增加内存和带宽压力。还有人会问粒子数量和帧率到底能不能画等号不能。还要看有没有开噪声、有没有用序列帧动画、粒子贴片在屏幕上的覆盖面积大不大。我的排查习惯是先看游戏视口里粒子的整体覆盖率如果特效几乎铺满全屏那不管粒子数是 30 还是 60都会卡。4.2 常见问题排查黑边、锯齿、贴图边缘生硬我在初调火焰时最常遇到的情况就是粒子边上有一圈黑边。这个问题 90% 是贴图的 alpha 通道没处理好。粒子纹理的素材里经常带黑色或者灰色背景你用普通透明混合时本来应该透明的区域因为 alpha 值不为零被一起渲染出来了。解决方法是检查贴图导入设置把 Type 设为 sprite同时把 Alpha 相关选项设置为裁掉透明区域或者直接在图片压缩格式里选带 alpha 的 PNG。如果素材本身就是白底或黑底那需要在 PS 里先抠成透明背景而不是指望粒子系统帮你抠图。另一个常见问题火焰边缘看着有一圈灰蓝色“光晕”很像脏脏的描边。这通常是贴图的 RGB 通道里带了暗色加上加色混合后那部分暗色没有叠加权重于是它自己就变成灰的了。解决方式是贴图用 RGB 通道全白、只靠 alpha 表达形状也就是灰度图。灰度图混出来的效果非常干净因为颜色都是粒子系统给的信息源单一不易出幺蛾子。4.3 粒子层级遮挡与渲染顺序火焰会穿墙吗会。粒子既然叫“面片”它的渲染层级在 3D 场景里是靠深度缓冲z-buffer决定的。正常情况下火焰粒子应该被墙挡住一部分而不是整片贴在墙前面。如果你的火焰总是穿透遮挡物首先确认粒子系统所在的节点坐标是不是真的在世界空间里以及确认场景的遮挡剔除有没有异常粒子系统没有开启“忽略深度”这类属性。还有一个顺序问题是 3D 粒子会和大透明物体比如半透明玻璃、角色护盾互相穿模。这类问题很难完全避免我的做法是给火焰的节点层设置自定义排序让特效在半透明物体渲染列表的前面或者后面保证视觉优先级。4.4 避坑清单第一次做火焰容易踩的坑我总结了一个速查表你可以直接截图存着现象原因解决粒子是白块材质没赋贴图/用了默认材质新建 builtin-particle 材质并赋贴图火焰像喷泉一截一截的生命周期太短/循环不衔接加大 Start Lifetime开启 Loop粒子叠在一起成白团混合模式用了普通透明改成 Additive 加色混合火焰有明显黑边贴图不是透明 PNG抠图成透明背景检查导入 alpha粒子朝向不对渲染模式不是 BillboardRenderer 模块选择面片朝向相机火焰边缘生硬贴图 alpha 衰减太突然贴图加径向渐变或用序列帧动画场景刚开始火没出现Play On Awake / Prewarm开启自动播放和预填充粒子卡到穿模深度排序异常检查渲染层级与材质深度写入4.5 序列帧动画和单张贴图怎么选单张径向渐变贴图胜在性能开销小实现简单但缺点是火焰的纹理图案高度一致放大后很像一团发光的棉花。如果你的游戏人物要拿火炬近距离镜头很多我建议用序列帧动画Cocos Creator 的 TextureSheetAnimationModule 会把一张大贴图按行列拆成若干帧按指定帧率逐帧播放。序列帧网格图在资源制作时要注意所有帧都必须在同一张图里且行数和列数在组件里必须如实填写。举个例子如果你是 4x4 的网格但组件里默认填了 1x1那火焰就会显示成大图里的某一小格画面又脏又乱。序列帧动画的优点是“烟火分离”火焰的晃动和飘散都写在贴图里了粒子本身的运动可以更简单。缺点就是资源量大而且每帧贴图的 RGB 通道信息可能会变化容易导致混色不统一。所以当我想快速开发一个火焰特效原型时第一选择永远是单贴图方案序列帧一般留到特效定稿阶段再做资产替换。5. 从一个火焰到整套特效体系5.1 把火焰模板固化下来调好一束火焰之后别急着关工程。先从资源管理器里把 Fire 节点保存成预制体这样以后任何场景要用火焰直接拖一个预制体进去就能用。预制体的好处是不光保留了参数还保留了子节点结构。我后面项目中所有的火焰全都是从这一个预制体改出来的。如果你需要在不同尺寸的场景里用建议给火焰预制体提供一个公开控制脚本。脚本不用太长核心就是读取 ParticleSystem 组件暴露三个属性颜色、缩放比例、发射速率。每次在场景里要放火焰或者代码动态生成时直接 new 一个预制体然后赋值这几个属性就完事了。5.2 动态生成火焰的方法再进一步火焰不一定非得摆死在场景里。比如角色手部要拿火炬那火炬尖端就是一个挂点人物骨骼动画带着这个挂点走火焰预制体在启动时实例化并挂到挂点下。用代码实例化预制体需要注意挂点本身可能被骨骼缩放影响粒子系统如果挂在一个缩放不均匀的节点下粒子会变形。我的经验是统一在根节点层实例化火焰每个火焰用一个空节点作载体每帧把空节点的位置同步到角色的火炬尖端。这样做的好处是即使骨骼动画做了大幅度旋转火焰的方向仍然固定朝上不会跟着手指头翻转成倒立的火苗。5.3 后续扩展方向火焰做完之后你可以顺着这套思路扩展出很多同类型效果爆炸、烟雾、电光、飞尘。爆炸和火焰的核心区别主要是速度和收缩方向。爆炸粒子的初速度要向外扩散并且颜色从白黄渐变到红黑透明度衰减快时长极短烟雾则要降低透明度、弱化加色混合、增加尺寸放大倍数。等这一套粒子系统的操作熟悉了你完全可以不依赖美术自己在编辑器里快速迭代出各种技能特效。这在大工程前期的玩法原型阶段特别有用——老板要看跳跃攻击的特效你当场拖一个粒子系统调几下效果就出来了工作时间大幅度缩短。一些实际操作的真实体会第一次用 Cocos Creator 3D 粒子系统做火焰时我最大的感受是这东西并不难难的是理解每个参数在视觉上到底管什么。编辑器面板里几十个参数排在那里没有美术同学在旁边解释纯靠自己一个一个试确实很劝退。但只要老老实实把发射器、颜色、尺寸、混合模式这四个模块吃透火焰的基本盘就稳了。另外想多说一句网络上传言某些特效资源要收费、要买插件其实真没必要。Cocos Creator 自带的 3D 粒子系统配合一张免费贴图、一个材质节点就能做出效果相当不错的火焰。把预制体存好参数调顺后续项目里不管是火把、篝火、熔岩还是技能爆发都能在它的基础上快速改出来。最后分享一个小技巧调粒子的时候尽量把场景的相机拉近到粒子旁边用第一视角观察粒子运动而不是一直用远视角看整体。很多粒子层次感的问题都是要贴到跟前才能发现的。等近看没问题了再拉远看整体氛围。两遍检查下来你做的火焰就不光是“能看”了而是真的能拿得出手。
做 3D 游戏只要是偏写实一点的项目特效基本绕不开一个词火焰。火把、篝火、技能爆发、爆炸残留、熔岩场景全都要用到。而提到火焰实现很多初学者第一反应就是去商店找特效资源或者找美术要序列帧灯一关开始烧钱。其实在 Cocos Creator 3.x 里用自带的 3D 粒子系统就能做出一束非常能打的火焰资产基本为零核心只是几个参数和一张贴图的事。这一篇我把我最开始踩过的坑、调过的参数、最后稳定可用的方案完整整理出来。不管你是刚接触 Cocos Creator 的新手还是从 2D 转 3D 的老手跟着走一遍你也能在十分钟内免费搓出一束可循环、可缩放、可直接挂到角色手里的火焰。为了让你不迷路我会尽量说人话把每一个参数背后的原理也解释清楚。1. 为什么用 Cocos Creator 3D 粒子系统做火焰1.1 2D 粒子与 3D 粒子的区别先说个最常见的误解很多人觉得 Cocos Creator 里的粒子组件只有一个其实 3.x 分了 2D 粒子系统和 3D 粒子系统两套。2D 粒子系统我不用多讲它的定位是 Canvas 平面内的效果适用于 UI 特效、2D 游戏技能光效。可一旦把摄像机转起来角色动起来2D 粒子贴片就“糊”在屏幕上完全没有空间感。3D 粒子系统ParticleSystem 组件则是挂在 3D 节点上的每个粒子都是世界空间里的一个面片会跟着场景透视走。做火焰这种体积感强的效果粒子有近大远小、有朝向、有纵深整体观感完全不一样。我是在做了一个第三人称 RPG 原型时发现原来在角色手部节点直接挂 2D 粒子角色一转身火焰还直挺挺立在屏幕正中央那一瞬间真的非常出戏。Cocos Creator 3.6 之后3D 粒子系统的模块化程度挺高发射器、渲染器、生命周期模块都能单独调性能和功能上已经不输传统大引擎的粒子编辑器。做火焰这个需求已经是杀鸡用牛刀了。1.2 火焰特效的常见方案对比做火焰效果行业内大概有四种思路序列帧动画美术出一套帧图程序按帧播放。效果最可控但是资源量大一束火焰动辄几十张图而且只能做 2D 层面的翻转3D 视角下看会有一种“纸片感”。Shader 程序化火焰用 noise 函数扭曲顶点和颜色纯代码生成。效果能做得非常棒但需要一定的着色器功底而且调试时间不可控。GPU 粒子大量粒子配合噪声/扭曲实现适合爆炸、星云这些大规模效果。但是移动端性能压力大新手调起来容易翻车。常规粒子系统组合这是本篇文章的方案。用少量粒子加透明渐变再配合序列帧或径向贴图通过加色混合做出火焰发光感。我强烈建议普通项目直接用第四种方案原因很简单快、稳、便宜。不需要美术资源配合不依赖高端 GPU逻辑简单不说后续要调整颜色和大小也都是在编辑器里直接拖参数项目其他成员都能上手。1.3 初战思路能用编辑器搞定的就别急着写代码很多人看教程喜欢看代码实现问“怎么用代码创建粒子系统”“怎么用脚本控制火焰”。我的真实建议是第一次做全程用编辑器。Cocos Creator 3D 粒子组件在编辑器里已经把模块都拆开了你只需要创建节点、挂组件、填参数。这么走一遍你对粒子系统的每个模块到底管什么就全清楚了。第一步不是写代码而是先在场景里搭一个空节点把粒子系统组件挂上去用编辑器默认参数随便找一个自带材质先让粒子喷出来。看到白色方块粒子的那一刻你就算入门了。2. 火焰粒子系统的核心参数拆解2.1 发射器形状、数量与寿命粒子系统组件挂上以后最先要调的永远是发射器模块ShapeModule。火焰发射器我建议用“圆锥”形状方向朝上角度小一点。为什么不用球体或者盒子火焰的焰心区域很小燃烧是从底部一个点向上扩散的圆锥最贴近这个形态。角度设到 5 到 15 度左右开口越小火柱越聚拢稍微给一点随机性会让外焰看起来更蓬松。粒子数量也很关键。火焰追求的是“密而不乱”单个粒子的发光和叠加决定了火焰的实心程度。我这里的理想值是 50 到 120 个粒子同时存活。数量太少火焰稀疏一看就是几个贴片在飘数量太多移动端帧率马上给你脸色看。在编辑器里你可以打开粒子系统的 Cap 属性把上限卡住。粒子寿命也就是每个粒子从出生到消失的总时长火焰粒子我一般设置在 0.5 到 1.5 秒之间。寿命太短火焰会像喷泉一样一磕一磕地抖寿命太长粒子会堆积在上方散不开画面会脏。上下浮动一点反而更自然。2.2 渲染与材质加色混合是火焰的灵魂如果你开了默认粒子和默认材质会看到一堆方方正正的白块没有任何火焰感。这个阶段很多人就开始怀疑“是不是我贴图不对”其实不是问题的核心是混合模式。火焰这种自发光的东西绝对不能闭眼用普通透明混合。火焰本质是“发光体”它叠在背景上应该让背景变亮而不是把背景盖住。做法是把材质的混合模式改成加色混合Additive。加色混合的意思是粒子的颜色直接加到背景像素上画面里火焰重叠的区域会越来越亮。真正火焰叠加处就是亮白色的这和现实燃烧的物理规律是吻合的。那具体怎么操作Cocos Creator 3.x 中你可以在资源面板新建一个材质效果选择 builtin-particle然后在属性面板里把混合方式从 SRC_ALPHA, ONE_MINUS_SRC_ALPHA 改成 SRC_ALPHA, ONE。如果编辑器里提供了 Blend Mode 选择直接选 Additive。2.3 颜色与透明度随生命变化这一环节是火焰“看起来像真的”的核心。火焰的颜色不是一成不变的焰心偏蓝白、中间偏黄、外层偏红橙最后飘散的部分渐隐成烟。所以你要打开颜色随生命变化模块ColorOverLifetimeModule在渐变编辑器里把关键帧拉出来。通常我按这几个关键位置来调0% 时刻接近白色或淡蓝色作为焰心明度高透明度 0.8 到 1。25% 时刻亮黄色这里是火焰亮度最强的位置。60% 时刻橙红色可以加一点红到暖棕的过渡。100% 时刻暗红色偏透明透明度归 0模拟火焰消散。这里有个容易踩的坑透明度函数不能是一条平滑直线到 0。因为火焰边缘会剧烈抖动直接线性消失会像“贴纸烧完”很生硬。我的习惯是先让透明度在粒子前半段保持在较高水平后半段快速衰减到 0。把曲线调成带拐点的形状视觉上会柔和非常多。2.4 尺寸、旋转与速度模块粒子尺寸方面火焰整体呈现“底部大、顶部小”的形态现实中的火苗则是根部细、上面膨胀变宽再消散。具体要看你想做什么样的火焰。如果是火把、篝火这类稳定的火源我建议用 SizeOverLifetime 让粒子从小到大再回小曲线呈一个抛物线。起始尺寸不要设成固定值给一个随机区间会更好比如最小 0.15、最大 0.45否则所有粒子一样大火焰会像鱼鳞一样整齐地重复特别假。速度模块里向上的初速度是驱动力。火焰燃烧时热空气往上走粒子如果没有向上的速度就会原地膨胀像一团紫色毒雾而不是火焰。我习惯把速度方向设置成0, 2.5, 0附近并开启随机性上下波动 30%。速度太高火焰会拉成长条速度太低又会堆在发射点附近。旋转模块别忘了。粒子发射时给一个随机起始旋转再在生命周期里缓慢旋转能让火焰的贴片朝向不那么整齐划一。你想象一下一排粒子全部正面对着你和它们各自歪着角度完全两种感觉。旋转值不用太大0 到 360 随机角速度也随机效果立刻自然很多。2.5 噪声与扭曲让火焰“活”起来到了这一步火焰已经有点像样了但细看会发现一个问题所有粒子的运动路径太“线性”像一束整齐的烟花在向上飘缺少火焰那种凌乱的跳动感。解决这个有两个路子。一个是用噪声模块NoiseModule。Cocos Creator 3D 粒子系统从 3.6 开始提供了 Noise 模块作用就是给粒子位置加噪声扰动。我通常把 Noise Strength 开到 0.2 到 0.5频率设到 1 左右让粒子路径有轻微的抖动而不是正弦波那种规律摆动。另一个办法是给粒子自身做一个“呼吸”效果就是让粒子在生命周期里的透明度曲线再加一些随机跳动或者用两张不同的火焰贴图混合。如果你手上只有一个序列帧那也可以直接开 TextureSheetAnimationModule用序列帧动画代替单张贴图的缩放这样火焰的动态就来自贴图本身的变化。序列帧方案做出来的火最“肉”Animation 模块里把帧率设置到 20 到 30 fps看着就比较顺。不过噪声模块也有代价粒子数量越多CPU 负荷越大。我一般只在移动端粒子数量少的项目里用噪声PC 端或者特效量大的场景我会把噪声去掉单纯靠发射器位置随机和速度随机来伪装抖动。3. 从零手搓一束火焰具体实操流程3.1 准备资源免费的序列帧与径向渐变贴图这一节干最实在的事情一束能直接用、可变大小、带 Alpha 通道的火焰到底怎么搭建。先说资源这是“不要钱”的关键你完全不需要去商店买火焰贴图包。最常见的做法是两种一张径向渐变发光圆点贴图。就是一个白色圆点从中心到边缘 alpha 从 1 衰减到 0。几张网格型的火焰序列帧 PNG。网上搜“fire sprite sheet free”能找到一堆 CC0 授权的资源注意看下授权范围个人练习和商业项目基本都是没问题的。如果你没有现成的网格图我建议第一次练习先只用径向渐变圆点因为火焰形状主要靠粒子叠加和颜色渐变拉出来单张贴图完全够用。制作径向渐变图也非常简单PS 里新建一个 128x128 的文档白底高斯模糊保存为 PNG完事。贴图放进工程后还要设置面板里把 Texture Type 调成 sprite并勾选 alpha 自动裁剪或者预乘。这里我踩过一个大坑如果贴图格式使用默认的 JPG 或未裁剪 alpha粒子边缘会出现一层黑边或者灰蒙蒙的块后面我会在问题清单里详细说。3.2 创建粒子节点与初始化参数在层级管理器里新建一个空节点命名为 Fire然后在属性检查器里点击“添加组件”搜索 ParticleSystem把 3D ParticleSystem 挂上。Cocos Creator 3.x 默认给 3D 粒子用的节点会同时生成一个 Renderer 子节点也有可能是组件自带 Renderer 属性取决于你用的版本。我的经验是 3.6 以后ParticleSystem 组件自带渲染器属性直接在组件面板就能改。挂上后选择粒子系统组件先把发射时长设置成循环模式。火焰是要一直烧的发射方式必须是 Loop并且 Start Lifetime 给一个随机区间Start Speed 也设成随机区间比如 min1.5max3。发射器形状选 ConeRadius 设成 0.05 到 0.1粒子从一个类似拳头大的底部生发。Cone Angle 我开头会设成 5 度后面可视你的火焰大小调整。设完这些粒子就已经“喷”出来了只是还是白块。3.3 调整渲染与材质从白块到火焰这一步是观感的分水岭。给粒子换材质。在资源管理器里右键新建 Material命名为 FireMat效果选择 builtin-particle。然后在属性面板里把贴图赋上混合模式选择 Additive。有些版本里 builtin-particle 材质默认的 shader 已经支持 mainTexture、tintColor、tilingOffset 这些属性。你只需要把主贴图替换成径向渐变图就可以了。如果你想让火焰更亮一点把材质里的 tintColor 调成偏黄色或者直接交给粒子系统的颜色模块控制。然后回到粒子系统组件找到 Renderer 模块里对应的材质槽。如果你用的是新版 CreatorRenderer 模块会有一个 Materials 数组把 FireMat 拖进去。材质替换完“方块”会瞬间变成“光斑”已经有一点火焰雏形了。这时候你还会发现一个问题粒子贴片是平行于 xy 平面还是朝向摄像机3D 粒子默认的渲染模式是面片朝向摄像机Billboard火焰就应该朝向摄像机。这个设置要确认一下否则粒子会以世界坐标轴方向显示看起来像一堵贴满亮点的墙。3.4 让火焰循环播放火焰一定会用循环播放而不是播一次就没了。在 ParticleSystem 组件上Duration 数值决定了播放总时长如果设为 0系统会理解成一直循环。我通常把 Duration 设为 -1 或者 0视版本而定。还有一个容易忽略的点是 Play On Awake。如果你把这个关掉了场景启动后粒子不会自动发射。如果循环播了但火焰“突突突”像机关枪一样一顿一顿的那多半是 Start Lifetime 的随机值太小粒子生命周期太短新一簇粒子还没生成上一簇已经全灭。把 Start Lifetime 的随机范围拉到 0.6 到 1.2 秒左右整体节奏会自然很多。另一个循环播放的坑是 Prewarm。如果你的火焰是场景一开始就有建议把 Prewarm 开上。否则火焰会有半秒钟从 0 个粒子发育起来的“生长”过程在一些需要无缝切入的游戏里看起来很掉价。Prewarm 会让粒子系统从假想的“已经运行了一段时间”开始。3.5 补充细节用第二个粒子系统做内部高亮单套粒子系统做出来的火焰通常会感觉中心不够亮。想进一步提升质感同时不增加贴图复杂度我建议给火焰节点下再挂一个子粒子系统专门做焰心高亮。第二套粒子系统的参数和主火焰类似但是颜色更白透明度更高粒子数量只有 1/3粒子尺寸更小。这样叠加在主火焰上焰心位置会有一个比较亮的团块模拟高温燃烧区域。两套粒子系统的叠加让火焰的层次感明显提升。如果你想要更浓一点的烟雾效果甚至可以再挂第三套粒子系统但这套粒子的颜色要偏灰黑混合模式改成普通透明粒子在模拟热气流上升时逐渐放大并淡化。注意烟雾粒子的 Start Speed 要比火焰粒子低一些偏向轻缓否则会盖住火焰的主体。4. 性能优化与常见问题速查4.1 移动端性能粒子数量与贴图尺寸怎么权衡做游戏不是“效果越炫越好”尤其是移动端。粒子系统的开销大头是 fill rate也就是每个粒子要覆盖多少屏幕像素这个和贴图尺寸无关和粒子在屏幕上的投影大小有关。同样 100 个粒子把它们拉大十倍帧率掉得不是线性关系而是平方关系。我的体感是移动端同时存在且可见的粒子数量普通中端机控制在 100 以内比较安全低端机留 50 左右。如果要做大范围爆炸单独创建一套临时粒子系统播完直接销毁不要让它常驻。常驻火焰这种连续效果粒子贴图用 64 或 128 像素足矣大尺寸贴图带来的细节在粒子缩放后肉眼根本看不出来只会增加内存和带宽压力。还有人会问粒子数量和帧率到底能不能画等号不能。还要看有没有开噪声、有没有用序列帧动画、粒子贴片在屏幕上的覆盖面积大不大。我的排查习惯是先看游戏视口里粒子的整体覆盖率如果特效几乎铺满全屏那不管粒子数是 30 还是 60都会卡。4.2 常见问题排查黑边、锯齿、贴图边缘生硬我在初调火焰时最常遇到的情况就是粒子边上有一圈黑边。这个问题 90% 是贴图的 alpha 通道没处理好。粒子纹理的素材里经常带黑色或者灰色背景你用普通透明混合时本来应该透明的区域因为 alpha 值不为零被一起渲染出来了。解决方法是检查贴图导入设置把 Type 设为 sprite同时把 Alpha 相关选项设置为裁掉透明区域或者直接在图片压缩格式里选带 alpha 的 PNG。如果素材本身就是白底或黑底那需要在 PS 里先抠成透明背景而不是指望粒子系统帮你抠图。另一个常见问题火焰边缘看着有一圈灰蓝色“光晕”很像脏脏的描边。这通常是贴图的 RGB 通道里带了暗色加上加色混合后那部分暗色没有叠加权重于是它自己就变成灰的了。解决方式是贴图用 RGB 通道全白、只靠 alpha 表达形状也就是灰度图。灰度图混出来的效果非常干净因为颜色都是粒子系统给的信息源单一不易出幺蛾子。4.3 粒子层级遮挡与渲染顺序火焰会穿墙吗会。粒子既然叫“面片”它的渲染层级在 3D 场景里是靠深度缓冲z-buffer决定的。正常情况下火焰粒子应该被墙挡住一部分而不是整片贴在墙前面。如果你的火焰总是穿透遮挡物首先确认粒子系统所在的节点坐标是不是真的在世界空间里以及确认场景的遮挡剔除有没有异常粒子系统没有开启“忽略深度”这类属性。还有一个顺序问题是 3D 粒子会和大透明物体比如半透明玻璃、角色护盾互相穿模。这类问题很难完全避免我的做法是给火焰的节点层设置自定义排序让特效在半透明物体渲染列表的前面或者后面保证视觉优先级。4.4 避坑清单第一次做火焰容易踩的坑我总结了一个速查表你可以直接截图存着现象原因解决粒子是白块材质没赋贴图/用了默认材质新建 builtin-particle 材质并赋贴图火焰像喷泉一截一截的生命周期太短/循环不衔接加大 Start Lifetime开启 Loop粒子叠在一起成白团混合模式用了普通透明改成 Additive 加色混合火焰有明显黑边贴图不是透明 PNG抠图成透明背景检查导入 alpha粒子朝向不对渲染模式不是 BillboardRenderer 模块选择面片朝向相机火焰边缘生硬贴图 alpha 衰减太突然贴图加径向渐变或用序列帧动画场景刚开始火没出现Play On Awake / Prewarm开启自动播放和预填充粒子卡到穿模深度排序异常检查渲染层级与材质深度写入4.5 序列帧动画和单张贴图怎么选单张径向渐变贴图胜在性能开销小实现简单但缺点是火焰的纹理图案高度一致放大后很像一团发光的棉花。如果你的游戏人物要拿火炬近距离镜头很多我建议用序列帧动画Cocos Creator 的 TextureSheetAnimationModule 会把一张大贴图按行列拆成若干帧按指定帧率逐帧播放。序列帧网格图在资源制作时要注意所有帧都必须在同一张图里且行数和列数在组件里必须如实填写。举个例子如果你是 4x4 的网格但组件里默认填了 1x1那火焰就会显示成大图里的某一小格画面又脏又乱。序列帧动画的优点是“烟火分离”火焰的晃动和飘散都写在贴图里了粒子本身的运动可以更简单。缺点就是资源量大而且每帧贴图的 RGB 通道信息可能会变化容易导致混色不统一。所以当我想快速开发一个火焰特效原型时第一选择永远是单贴图方案序列帧一般留到特效定稿阶段再做资产替换。5. 从一个火焰到整套特效体系5.1 把火焰模板固化下来调好一束火焰之后别急着关工程。先从资源管理器里把 Fire 节点保存成预制体这样以后任何场景要用火焰直接拖一个预制体进去就能用。预制体的好处是不光保留了参数还保留了子节点结构。我后面项目中所有的火焰全都是从这一个预制体改出来的。如果你需要在不同尺寸的场景里用建议给火焰预制体提供一个公开控制脚本。脚本不用太长核心就是读取 ParticleSystem 组件暴露三个属性颜色、缩放比例、发射速率。每次在场景里要放火焰或者代码动态生成时直接 new 一个预制体然后赋值这几个属性就完事了。5.2 动态生成火焰的方法再进一步火焰不一定非得摆死在场景里。比如角色手部要拿火炬那火炬尖端就是一个挂点人物骨骼动画带着这个挂点走火焰预制体在启动时实例化并挂到挂点下。用代码实例化预制体需要注意挂点本身可能被骨骼缩放影响粒子系统如果挂在一个缩放不均匀的节点下粒子会变形。我的经验是统一在根节点层实例化火焰每个火焰用一个空节点作载体每帧把空节点的位置同步到角色的火炬尖端。这样做的好处是即使骨骼动画做了大幅度旋转火焰的方向仍然固定朝上不会跟着手指头翻转成倒立的火苗。5.3 后续扩展方向火焰做完之后你可以顺着这套思路扩展出很多同类型效果爆炸、烟雾、电光、飞尘。爆炸和火焰的核心区别主要是速度和收缩方向。爆炸粒子的初速度要向外扩散并且颜色从白黄渐变到红黑透明度衰减快时长极短烟雾则要降低透明度、弱化加色混合、增加尺寸放大倍数。等这一套粒子系统的操作熟悉了你完全可以不依赖美术自己在编辑器里快速迭代出各种技能特效。这在大工程前期的玩法原型阶段特别有用——老板要看跳跃攻击的特效你当场拖一个粒子系统调几下效果就出来了工作时间大幅度缩短。一些实际操作的真实体会第一次用 Cocos Creator 3D 粒子系统做火焰时我最大的感受是这东西并不难难的是理解每个参数在视觉上到底管什么。编辑器面板里几十个参数排在那里没有美术同学在旁边解释纯靠自己一个一个试确实很劝退。但只要老老实实把发射器、颜色、尺寸、混合模式这四个模块吃透火焰的基本盘就稳了。另外想多说一句网络上传言某些特效资源要收费、要买插件其实真没必要。Cocos Creator 自带的 3D 粒子系统配合一张免费贴图、一个材质节点就能做出效果相当不错的火焰。把预制体存好参数调顺后续项目里不管是火把、篝火、熔岩还是技能爆发都能在它的基础上快速改出来。最后分享一个小技巧调粒子的时候尽量把场景的相机拉近到粒子旁边用第一视角观察粒子运动而不是一直用远视角看整体。很多粒子层次感的问题都是要贴到跟前才能发现的。等近看没问题了再拉远看整体氛围。两遍检查下来你做的火焰就不光是“能看”了而是真的能拿得出手。
