## **贰、一起来创建火焰Shader吧【利用Shader插件愉快的创建自己的Shader吧】**
### 二点一、导入资源到Unity
**H子**:**AOI**老师,接下来就要开始做Unity部分的开发了吧。你告诉我,要为火焰特效专门创建一个Shader,但是我并不会写Shader代码啊,于是要怎么做呢。
**AOI**:我就知道你不会Shader,所以你去买个叫Shader Forge的插件吧,在AssetStore就有了。这个插件可以让你通过节点编辑器,去可视化编程的创建自己的Shader。而且要教你写代码太麻烦了,代码你就自己去学吧,有这个插件,你只要理解原理就能愉快的做出想要的Shader了,非常方便。
**H子**:买好了。对了,刚才做的sbsar文件直接拖进Unity就可以了吗。
**AOI**:对,Unity和UE都是直接支持了sbsar格式,拖进项目就直接可以使用了。展开拖进来的sbsar文件,就可以看到下面有Substance系列的图标的材质球,以及这个材质里面所包含的纹理。
![](https://box.kancloud.cn/237acb0eada288d2c54281a8cabb8b91_212x52.png)
因为我们现在只创建了一个Substance Graph,所以导入Unity之后默认也就只有一个材质球。而在我们创建的这个Graph中,只创建了一个Output节点,所以,也就只有一张纹理了。
![在导入的sbsar文件的Inspector](https://box.kancloud.cn/b3da76de304137b3f2133152deaa5889_441x193.png)
在导入的sbsar文件的Inspector面板上,可以见到创建新材质的按钮,如果有多组Substance Graph,只要点击这个按钮就可以选择Graph并创建新的材质球,同时就会创建对应的纹理。而暴露的纹理参数,也会在这个面板上见到。
**H子**:也就是一组纹理对应一组材质球了。如果我要根据需要,创建多组不同的纹理,只要创建材质球就好了。
**AOI**:没错。而且包含在sbsar文件内的纹理,是可以直接当作普通纹理使用的,而不是仅仅限于sbsar内创建的材质球。所以可以利用这个特性,通过sbsar文件,利用Substance Designer创建程序化纹理。
### 二点二、形态与能量中心的混合
**AOI**:好了,从Window - Shader Forge打开插件,并且创建一个空白的Shader吧。注意是空白的。因为模板对于这个项目来说并没有任何用。对,就是Unlit那个。
![](https://box.kancloud.cn/601f74725f7ad29621209c05ea4ce412_143x156.png)
可以见到,场景上只有一个Color节点,连到了Emission的出口上。
这个节点也没有什么用。可以删掉。
![](https://box.kancloud.cn/f8cea99d74fab1c5c764ee503f97998f_520x543.png)
在动手前,我们先分析一下。我们所有的纹理都在同一张纹理的不同通道上面。但是用于模拟摇曳和扰乱效果的噪声贴图需要依靠偏移UV实现移动,而其他的三个通道都不需要任何的移动。
**H子**:也就是说,需要一张纹理,两种UV的操作模式咯?直接创建两个Texture2D的节点?
**AOI**:并不需要这么麻烦呢。你可以看到Texture2D节点的入口有三个
![](https://box.kancloud.cn/b7edbbfef55f1186221cd596f6a736d2_166x194.png)
* UV
* MIP
* Tex
可以看到有一个绿色的Tex入口,这个入口的数据类型是用来接收纹理数据的
实际上,还有一个叫做TextureAsset的节点,他比Texture2D更为简洁。
![](https://box.kancloud.cn/9876f1eda052288b24ce1b7d7694e279_152x195.png)
这个节点只有一个绿色的Tex出口,毫无疑问,就是用来输出纹理数据的,他并不包含UV等的其他参数
首先把sbsar里面用来制作火焰的纹理拖到TextureAsset节点上,并且把TextureAsset跟Texture2D节点相连。
![](https://box.kancloud.cn/bfd13ee1d4befd7ad1d123ea7692d721_349x218.png)
**H子**:那么接下来就该混合和处理RG通道里面记录的能量中心和火焰形态了。我尝试了Add和Max两种节点。
![Add and Max](https://box.kancloud.cn/9de93e69988a11040eb6d15c67cf2170_617x306.png)
Add的话,中心的看起来好像亮了好大一块阿。看起来怪怪的。
**AOI**:中间那块,是因为混合之后的值已经大于1了。考虑到后面要进行各种的操作,要是有数据过大的话,会对整体控制造成影响,而且想必这样做出来,中间一定是一个圆形的火球。对造型的控制也不怎么好呢。
**H子**:那么就用max混合的结果来处理好了。
最后这部分看起来就是这样的。
![](https://box.kancloud.cn/d3bd7be5a0ed7e73f9d58f40916dfd54_453x194.png)
### 二点三、为摇曳效果进行噪声的偏移。
**H子**:好,接下来就是要对噪声纹理的偏移操作了吧。
那么,首先就是要增加一个新的Texture2D的节点,并且把TextureAsset节点连上去。
那么,要对UV偏移的话,要单独对UV每个通道进行运算吗。
**AOI**:并不需要呢,在ShaderForge里,有一个名叫Panner的节点,即可操作UV的偏移。
**H子**:我试试看。连起来就是这个样子呢。
![](https://box.kancloud.cn/660673df1bfbdb4ae7736f002f544b17_516x401.png)
连到Emission上看起来他会不断的45度偏移阿。
**H子**:我懂了,Panner节点下面的可以填写的两个输入框,就是U和V方向的偏移量吧。如果要让他垂直向上偏移的话......那就是这样!
![](https://box.kancloud.cn/a16d30e09ccf15cfc94e772c1022dbbc_505x416.png)
好了!把V值改成-1就好了!
**AOI**:这一步相当简单对不对。因为自带节点具有了期望的功能,所以复杂的操作可以被减少,同时节点图也会变得简单。
### 二点四、整体进行混合得到初步的效果。
**H子**:那么接下来我要把摇曳效果进行混合了。那么这里直接用乘法就好了。
![](https://box.kancloud.cn/76f75631a46ab88cff47d7fbd4ab2192_849x407.png)
看起来好像有点意思了,但是火焰总不会是这种效果嘛。
**AOI**:对的。到这一步的时候可以先进行一下最后效果的测试。
先添加一个Step(A<=B)节点。
并且把混合的结果连到B,并且在A入口连接一个Slider,拖动一下看看效果。
![](https://box.kancloud.cn/30e9d61f3bc6a86c59a85d37cb955d11_1071x470.png)
![](https://box.kancloud.cn/43bb4e629717beac2abf3a1d36a8c02a_482x149.png)
![](https://box.kancloud.cn/8438e7feb0092fac696d584589642958_486x182.png)
![](https://box.kancloud.cn/66b624b8211d98efd3fb6786ac4e8f90_511x187.png)
**H子**:阿火焰的边缘变得明确了阿,造型开始有那么些意思了。
但是好像并没有能量中心结构阿。果然是前面用add更好?
![](https://box.kancloud.cn/39851cceaeb2e0a8739bd4802597bebc_1104x573.png)
结果好像并没有任何好转。
**AOI**:因为不管前面做了什么运算,最后都会跟噪声纹理进行混合,也就是说,最后有些区间的值一定会因为乘法运算导致变得相当小,无限的接近黑色。这样的话,最后在处理Step的步骤时候,这些区域依旧会被剔除掉。
所以最佳的做法就是,把对能量中心的混合操作移动到后一步。在噪声纹理和形态纹理混合之后,再混合能量中心纹理。
**H子**:看起来效果好多了。
![](https://box.kancloud.cn/cc3f3eb7ae9af0d1b51d8a752168ca52_1056x451.png)
果然两边也依旧有产生摇曳的火苗,跟预计的一样。那么我继续在这一步混合之前修正造型用的蒙版。
![](https://box.kancloud.cn/263430b76cda0d8989f1afa76b3666cf_1082x478.png)
![](https://box.kancloud.cn/c5536d1fc297b98637e87b1a5526d044_267x265.png)
**H子**:看起来像话多了!
**AOI**:那么,最后把这个节点的输出链接到Opacity节点上吧。
![](https://box.kancloud.cn/e263b773b72a5f2d4c5e81af2a4f4156_1407x644.png)
**H子**:但是看起来黑色的地方没有透明啊。
**AOI**:看看左边的Console,里面有个黄色的感叹号对吧。这个地方是错误或者警告提醒。打开Console分页,点击旁边黄色警告按钮,大部分问题就会自动修复了。
![](https://box.kancloud.cn/fdc3c555345da89bea1e320b97192c8d_291x312.png)
看,修复了,成功了是不是。
具体对于透明以及渲染排序的设置是在下面的Blending页面
![](https://box.kancloud.cn/7317052356ad7f3d9a93d845bd55b2a6_332x379.png)
不过除非要主动进行细节的调整,不然利用模板或者自动修复都可以解决大部分的需求。所以这里可以先不管。