多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
## **壹、开始制作火焰的基础吧【利用SubstanceDesigner制作基础纹理】** ### 一点一、Output节点的创建 * * * * * **H子**:软件已经买好了。那么我们开始吧。 **AOI**:好。首先打开软件吧。我们先来分析一下,到底需要做些什么。 **H子**:嗯,首先是确定火焰的形态吧。但是总不可能是画出火焰的外形吧,那么只要确定一个大体的轮廓就可以了?还有就是能量中心的位置,因为并非写实化的火焰,那么简化一下,火焰中心就是近似圆形的一个区域吧。火焰摇曳的话......这个想不到了。 **AOI**:分析大体来说是没问题的。因为火焰是动态的,所以实际上也不可以使用准确的造型来定义火焰区域,能量中心也是同样。只要利用素材纹理,然后再进行混合得到想要的造型就好了。至于火焰的摇曳,其实分析一下火焰就会发现,像是蜡烛在无风环境下,燃烧是非常稳定的,造型在燃烧过程也基本稳定,近似一个椭圆形。而会产生摇曳和不均匀效果的燃烧,主要都是发生在燃料相对复杂,气流也不稳定等的地方产生。也就是说,可以认为,燃料,气流变化,以及不均匀的温度是产生火焰变得摇曳以及造型产生破碎的原因。而程序化产生不均匀的随机纹理效果的话,第一时间会想到的是...... **H子**:噪声纹理?柏林噪声? **AOI**:好吧,这是你的第一时间想到的东西。别人会怎么想,那就随它去吧。 既然你说出了柏林噪声,那么我们就用程序化柏林噪声模拟火焰的形状破碎和摇曳效果吧。 首先创建一个新的**SubstanceDesigner**空项目,命名为S_Fire ![new SF](https://box.kancloud.cn/84003256ac3d5a1683f6eaa9f8116aca_794x495.png) 纹理尺寸根据需要设置就是了。默认使用512像素也没有问题。 创建好之后,先给他添加一个输出节点。 在主界面按空格键,搜索output ![output](https://box.kancloud.cn/b8f838bd9a4e28719dbef07cc37be615_185x258.png) 即可找到Output节点,选择并创建。 创建后,选择节点,点击节点参数面板的Add Item,为节点添加RGBA通道的baseColor用作输出用的纹理,并设置好各项参数。 ![](https://box.kancloud.cn/9736e1ec241e16eba58e6cf2b07bf0ca_474x561.png) 到此便完成了输出节点的创建。 ### 一点二、定义火焰形态 * * * * * **H子**:说到火焰形态的话,如果以火球,蜡烛,篝火等偏小型的火焰来说,就是接近下大上小的椭圆形了吧。那么就是说,可以用圆形的为基础进行修改? **AOI**:说的没错,所以首先创建圆形的节点,并且以此为根据进行修改。 首先在Library面板中找到Generator - Patterns目录,在目录下找到Shape,把Shape节点拖到画布上 ![Shape001](https://box.kancloud.cn/eab9f1ca67ab3b47170a27b99ba6c8e4_320x455.png) 然后在参数面板修改参数Pattern为Cone,基本的圆形节点就创建好了。 ![Shape](https://box.kancloud.cn/98e274898f1a51c944cb726b945502f8_802x545.png) 然后再按空格键,搜索并创建Transformation2D节点 ![tran2d](https://box.kancloud.cn/d87ab9ea3a940e875a653a553b016d40_213x279.png) 然后把Shape节点的输出链接到Transformation2D节点的入口上,并修改Transformation2D节点,根据需要,修改出中心偏下的椭圆形形状。 ![](https://box.kancloud.cn/36918f18f4a17d4dd9a73c8f1ef74542_326x167.png) ![](https://box.kancloud.cn/28d3b976791ea70b2850f48649dfaa30_319x379.png) **H子**,但是这样的话,看起来不就下半段直接贴在了纹理的地步了吗,火焰总不会是平底的燃烧吧......啊,我懂了,只要混合一下其他的纹理就好了吗?**AOI**老师? **AOI**:对的,可以根据需要,自己混合其他的形状产生出需要的结果。混合的节点是Blend。里面包含的混合算法,跟各类绘图软件上主要的几个图层混合功能是一致的。至于其他的形状,在Generator - Patterns目录中都可以找到,而且这个目录里面的形状都是基于程序化生成,也就是说,只要暴露参数出来,就可以在游戏引擎内进行快速修改了。 **H子**:我试试看,果然首先还是要把顶部和底部遮掉呢。 那么就用Gradient Linear节点自己相加一下,控制一下上下的范围,然后跟火焰形态相乘好了。 ![](https://box.kancloud.cn/9e268c4ae50754c89b43863633a489b2_567x358.png) **H子**:这就是下大上小的基本火焰形态了对吧。那么,定义火焰中心也是一样的做法吗。 **AOI**:没错,使用同样的方法就可以制作能量中心的形状了,而且相对也更简单。 **H子**:做好了! ![](https://box.kancloud.cn/98675983e3f5262aa9144b7d3391312a_301x173.png) ### 一点三、火焰的摇曳 **H子**:解决了基础形状之后,就是火焰摇曳的效果了吧。那么直接就上PerlinNoise? **AOI**:其实在Generator-Noise目录下面,有相当多种类的程序化噪声纹理可以选择,根据实际需求,选择不同的噪声,会有不同的混合效果。所以其实并不需要拘泥于PerlinNoise。当然这次就先用PerlinNoise制作,往后再根据需求和喜好等等的条件进行选择使用。 **H子**:好了,那就用PerlinNoise3好了,这个还能调整Distance。 ![](https://box.kancloud.cn/cb65c3818fd393ba53e0a7cdb6aa5e6b_125x143.png) **AOI**:恩,这个可以根据实际需要调整Distance,得到想要的大小。而且SubstanceDesigner产生的噪声纹理都是无缝衔接的。所以也很方便做纹理偏移。而且你也可以在这里,把Distance暴露成参数,然后直接在Unity的材质编辑器属性面板上面就可以编辑参数,并且得到新的纹理了。 在PerlinNoise3节点参数面板上,点击Expose,并创建一个名为Distance的参数,即可将此参数暴露到面板上,便于在游戏引擎对纹理进行操作了。 ![Expose](https://box.kancloud.cn/f18f804c960f13532d715a2433080aea_479x281.png) ### 一点四、范围的进一步限制 **AOI**:咦,**H子**,你增加了这个Gradient Line 2节点是打算干什么用呢? ![](https://box.kancloud.cn/9ada1fbd20c0d0a16943b2c828991772_147x164.png) ![](https://box.kancloud.cn/15c747abdbbf714a9cca59f0085c3db5_479x146.png) **H子**:这个啊,我感觉可能两边会太宽了,火焰的燃烧估计总是向上吧,但是通过之前的那些节点的混合,总觉得会在底部接近能量中心的两边也有火焰摇曳的感觉。所以打算多加一个纹理用于抑制两边的摇曳效果,让火苗集中向上。 **AOI**:对于这个效果,这也是你自己的见解了。那么就保留这个节点,最后合成的时候看看效果吧。 **H子**:那么**AOI**老师,到了这一步,感觉已经准备好需要的素材了,那么我需要怎么样才能导出到Unity呢。分别导出4张纹理吗。但是只有一个节点呢。 **AOI**:因为这四个都是灰度图,只需要一个通道就可以完成记录。那么我们就把四种数据合并到一张纹理上面就好了。分别占据RGBA四个通道。然后之后在Unity里面创建Shader的时候,只需要分开读取就可以了。 首先在Library里面招待Filters - Channal目录下面的RGBA Merga节点,并拖到画布上。 然后把之前创建好的四组节点的输出,分别连接到RGB Merga节点上。再把RGBA Merga的出口链接到Output节点。就大功告成了。 通道的对应要制定好规范,在这个项目里面 * R:能量中心 * G:火焰形态 * B:摇曳和扰乱 * A:范围限制 ![Fin](https://box.kancloud.cn/f82cd914881fa2887f2a36b7e0df7119_1316x745.png) ### 一点五、导出 **AOI**:完成了节点的编辑之后,只要导出就可以。提醒一句,以防万一,编辑的过程中记得保存。 在项目名称上,点击右键,在弹出的右键菜单选择Export .sbsar file,在弹出的对话框中设置保存的位置和文件名即可。 ![](https://box.kancloud.cn/89aa0a6042921590e0e751c4de3cde24_327x442.png) 至此,火焰形态需要的素材便制作完成。