超长干货!Cocos Creator 粒子系统详解,零代码实现逼真自然效果

373fd46c01e10d2617a01a328d69483f.gif

在上一篇《Cocos Creator 渲染实战:地编篇》中我们主要介绍了 3D 户外场景的搭建,本文中我们将了解粒子系统的使用方法和一些典型自然效果的实现,制作一个粒子效果的通常流程是:

  • 使用贴图或模型决定每个单独粒子的形态,创建相应的粒子材质;

  • 创建粒子系统,决定粒子的发射频率、密度和飞行速度;

  • 使用动力学模块添加动态变化,模拟物理效果;

  • 将粒子系统移动到场景中合理的位置。

接下来让我们从基础说起。

PS. 本文将分为基础-烟雾(普通粒子)-性能优化-星光(动画粒子)-降雨(3D 粒子)-火焰(复合粒子)-喷火和烛火(粒子的变体)几个部分,篇幅较长,建议先马后看。

基础

首先我们需要在场景中创建一个新的空节点:在层级管理器中点击左上角的加号按钮,或在层级管理器中任意空白的部分右击选择 Create -> Empty Node。选择新建的空节点,在属性检查器末尾点击 Add Component,选择 Effects -> ParticleSystem,为空节点增加粒子模块。

3dfdafe8b412786489ca9eae9fd3eadb.png

粒子是一种从一个固定的发射点不断向外发射可渲染图形的渲染系统。它大致由发射器、粒子和渲染器三个主要功能模块组合而成。其中,我们可以通过发射器的参数控制粒子在场景中射出的位置,粒子生成的频率和随机性、每个粒子射出后的生命时长等等。通过粒子相关的功能模块我们可以控制每个粒子射出后的位置、大小、颜色等属性的变化。通过渲染器我们可以为每个粒子赋予贴图,决定粒子系统与整个场景的混合模式,粒子与摄象机的坐标关系等等。

在默认情况下,粒子系统只要在场景中被激活就会开始生产粒子,我们不需要任何手动的方式启动它。当我们选中了一个带有粒子系统的节点之后,在场景编辑器的右下角会出现粒子效果的预览控制选项,这包括开始、暂停、重置、停止和播放速度等。我们完全可以把粒子系统看作一个会自己产生动画的渲染系统,而这些预览控制项与我们熟悉的动画控制系统也没有本质区别,我们可以通过它们控制粒子系统在场景编辑器中的预览效果。

c086cf7f5bac7a1a81e690aece2a9892.gif

可以看到,默认的粒子系统会以其父节点的位置为发射点,不断朝一个方向发射白色的半透明正方形图形。因为发射的频率较高,发射出来的粒子也没有丝毫的位移和动能的变化,所以发出的粒子连成了一条白色的直线。这与我们想象中的粒子效果相去甚远,我们首先要做的是弄清楚粒子是如何发射的。

现在的发射频率无疑是太高了,我们首先需要降低粒子产生的数量。选中粒子系统,在属性检查器中将 RateOverTime 参数从 10 改为 1。在场景编辑器中,按下左下角播放控制的重置按钮,使粒子系统从头开始重新渲染。

e94933c439b3767ddbd0f26961d51b21.gif

修改后,粒子发射的频率小多了,目测观察,大概是每秒发射一个粒子的频率。另外,粒子能够飞行的最大距离并没有变化,换句话说:粒子连在一起形成的“直线”的长度并没有变化。

目前单个粒子飞行的速度还是有些太快了,我们可以试着把 StartSpeed 参数从 5 改为 2.5。

dd59af9c76da087e9fd2ee70631c0d3a.gif

粒子的飞行速度减小了一半,与此同时,粒子能够飞行的最长距离也减少了一半,因为粒子发射的频率并没有变化,所以在同样的时间段内发射的粒子的数量并没有减少,相应地前后两个粒子之间的距离缩小了。

虽然粒子飞行的速度降低了,但我们仍然希望得到与之前一样的最大飞行距离:我们可以将 StartLifetime 参数,从 5 改为 10。

6200d270fb1c9dc1b3c156035ed00d74.gif

粒子的最大飞行距离恢复到了之前的程度,同时每个粒子飞行的速度和粒子之间的距离也维持了我们上次修改的水平。但相应地同时存在的粒子数目增加了:从我们之前观察到的大约 5 个,增长到了大约 10 个。

那么,如果把 StartSpeed 从 2.5 改回默认的 5,又会怎样呢?

cc18ae854b96772ef4bc3ddc13929c44.gif

我们可以看到,因为 RateOverTimeStartLifetime 都没有变化,所以我们仍然保持了粒子总数为 10 个的状态,但由于 StartSpeed 增加了一倍,因此在相同的时间里,粒子能够飞行的距离增长了一倍。换句话说:粒子之间连线的长度增加了一倍。

总结起来,我们似乎能够在 RateOverTimeStartSpeedStartLifetime 这三个参数之间,观察到一定的规律:

  • RateOverTime 控制每秒发射粒子的个数;

  • StartSpeed 控制粒子被发射出后飞行的速度;

  • StartLifetime 控制粒子的生命周期,即粒子被发射出后能够存在的时长。当生命周期结束之后,粒子会自动从场景中消失。

不仅如此,从上面的实验当中,我们还能推导出当前同时存在的粒子个数、粒子能够飞行的最长距离和两个相邻粒子之间的距离的取值逻辑:

  • 当前同时存在的粒子个数,大概等于每秒发射粒子的个数与粒子生命周期的乘积,即 RateOverTime * StartLifetime

  • 粒子能够飞行的最大距离,大概等于粒子飞行的速度与粒子生命周期的乘积,即 StartSpeed * StartLifetime

  • 降低相邻两个粒子之间的距离,或增加粒子的密度,可以在粒子能够飞行的最大距离( StartSpeed * StartLifetime )不变的情况下,增加每秒发射粒子的个数(RateOverTime),反之同理。

掌握了这些,我们就可以利用粒子飞行的最大距离和粒子的密度,对粒子系统的整体造型进行一定的把控了。除此之外,我们已经能够推算出当前粒子系统中的粒子数量,这将帮助我们最大程度优化粒子系统的执行性能。

对粒子的发射原理有了一定的了解,我们还需要给粒子特定的造型。这个白色的正方形显然已经不适用了,我们需要为粒子赋予一个具体的材质。

资源管理器中点击左上方的加号按钮,或在资源管理器的任意空白区域右击,选择 Create -> Material,新建一个空的材质文件。粒子系统需要为其专门准备的 Shader,所以在新建的材质参数中,我们需要将 Effect 参数选择为 builtin-particle

粒子材质的使用非常简单,只需要将相应的贴图赋予 MainTexture,然后依据需要使用 TintColor 参数对颜色和 Alpha 进行微调即可。保存对材质的修改,回到粒子的属性检查器中,将粒子材质拖拽到 Renderer 标签下的 ParticleMaterial 参数上。

056eeee4f89415cc802ef3f45a0aba58.png

在默认情况下,粒子系统的渲染方式与我们前文提到的 Billboard 的渲染方式是相同的,都是将 2D 的像素以永远正对摄像机的方式渲染到 3D 场景中。这项设置我们可以在粒子系统 Renderer 标签下的 RenderMode 参数进行选择。我们在前文中提到过使用 Billboard 配合一张渐变贴图制作体积光的假象,同样的方法我们可以使用在粒子系统上:粒子系统经常用作模拟的烟雾、火焰、光斑效果,实际上都是使用一张平面的贴图,来模拟现实中有一定体积的效果。因此,Billboard 也是粒子最常见的渲染方式。

那么,自然界中的各种效果又是怎样使用粒子系统实现的呢?我们先从烟/雾说起。

烟雾(普通粒子)

烟雾最终效果

既然我们的目标是制作烟雾,那么我们首先需要的一张烟雾的贴图素材。

d2fedd50f55e9051f33b05b04bddce14.png

素材的明度、颜色等都无关紧要,因为我们只需要素材的一部分。首先使用 Photoshop 等 DCC 去除素材的颜色,仅保留明度的信息。之后调整色阶,确保背景为纯黑色。将素材另存为贴图导入到引擎中,赋予到我们刚创建的粒子材质上。

9929a1c37a3f64c6b6fa574ebaa00b11.png

使用了烟雾的素材之后,原本半透明的正方形,变成了半透明的贴图面片,通过粒子材质的 TintColor 参数为贴图赋予一定颜色,因为 Billboard 渲染的缘故,面片始终保持正对摄像机,乍一看确实有些许带有体积的团状物的意思。

3eeb3aace8be53b9ee122bef6a8cba0e.gif

不仅如此,你大概已经发现了:贴图的黑色背景并没有被渲染出来,而且贴图面片之间也产生了叠加的关系。这是因为粒子的材质默认使用 Add(相加)的 Alpha 混合模式。引擎会依据渲染出来的粒子像素的明度作为不透明度,将粒子的像素直接以线性相加的方式叠加到 Frame Buffer 上。这种效果与我们在 Photoshop 中将图层的混合模式选为“线性减淡(添加)”是一样的。粒子材质的 Alpha 混合模式由 Technique 参数控制,在默认的 Add 模式下,使用的粒子贴图不需要考虑其透明程度,只需要确保我们希望是透明的部分在贴图中是纯黑色就行。即便是肉眼看不出区别的明度极低的深灰色,也会在 Add 模式下留下贴图边缘的痕迹,导致“抠图抠不干净”的问题出现。同理,我们不用在不透明的部分包含任何颜色信息,因为我们可以直接通过材质的 TintColor 参数调节颜色,如果贴图本身已经包含了颜色信息,粒子材质就会产出两种颜色的混合,让精确控制粒子颜色变得很困难。

49341e7a1bd27b70a1457f99189038a6.png

Add 模式看上去很好用,但会产生一个问题:如果我们要制作黑色的烟雾呢?如果把 TintColor 参数调为黑色,你会发现粒子完全消失了,这是因为贴图所有的像素都被设为了黑色,因此被 Add 模式视为完全透明了。

为了解决这个问题,我们首先要对贴图进行一些修改。回到 Photoshop,将之前已经做好的黑白贴图全选复制,将其粘贴为一个新的 Alpha 通道,建立一个新的纯白图层,从新建的 Alpha 通道中选择像素并生成遮罩,另存为一张带 Alpha 通道的格式(如 .png )。

bce85eb540fa0403f7734403ded1b928.png

将新贴图导入引擎赋予给粒子材质,同时,将 Technique 参数选为 1-alpha-blend。这种模式与 Add 模式相反:只有半透明的像素会被叠加到 Frame Buffer 上,而不透明的像素则会保留自身的颜色。所以在使用这种混合模式时,我们需要一张有明确 Alpha 通道的贴图,同时,因为不透明的像素颜色得到了保留,我们可以在 TintColor 参数中使用黑色,这不会导致粒子的消失。

1a50c291c89d7ac73655ee2c453cc1e5.gif

现在,我们的粒子已经“长”的比较像烟雾了,下面我们需要做的是使用粒子系统的动力学模块,让粒子动起来更像烟雾。

目前,粒子系统以完美的匀速生成出一摸一样的粒子࿰

  • 11
    点赞
  • 26
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值