## **叁、处理火焰颜色吧【利用SubstDesigner制作可以动态调整的RampTexture】**
### 三点一、为火焰添加颜色吧
**H子**：那么老师，现在这样做的话，只能得到一个白色的看起来像是燃烧的火球的东西。要怎么样给他加上颜色呢。直接贴一张纹理是不行的吧。
**AOI**：当然是不可以的。这样出来的效果非常糟糕。为火焰添加颜色的方法其实有好几种。比如做几套Step操作，创建多套Silder，用不同的值去控制火焰的区间大小。然后对这些区间乘上一个颜色值，最后进行混合。当然这种做法比较麻烦，也会增加无谓的节点，所以我们采取RampTexture的做法。
**H子**：所谓的Ramp Texture是什么东西呢。
**AOI**：RampTexture本质上就是一种1D的纹理索引表，建立一定的规则，使得可以从纹理上查找到想要的数据。
**H子**：麻烦说中文。
**AOI**：......
**H子**：？
**AOI**：好的，首先，RGB颜色，本质上就是由RGB三个通道构成的，而三个通道本质就是黑白的灰度数据对吧。
**H子**：对的。
**AOI**：那么再追寻本质，所谓的黑白灰度数据，也就是说，是0-1的浮点型（float）数据对吧。
**H子**：没错。
**AOI**：那么，再来看UV，所谓的UV，在3D软件里面，分UV使用的那个区间，名叫01区间没错吧。
**H子**：嗯。
**AOI**：那么再来追寻一下本质，所谓的UV，所谓的01区间，也就是说，其实UV空间就是一个平面坐标系，范围就是[0-1]对吧。换一种思路，UV值，其实是一个具有两个通道，单独一个通道就是一个0-1的浮点型数据。
**H子**：啊！我懂了。也就是说，我有一张纹理，那么其实我只要利用两个0-1区间内的浮点型作为UV数据，就可以获得纹理对应UV值的像素对吧。也就是说，我使用混合出来，未经过step处理的数据，就可以用来当作UV值传递进去，获得Ramp Texture上对应位置的颜色了。
**AOI**：说的没错，终于理解了嘛。
**H子**：那么动手吧，首先分析需求就是，一张纹理，从左边到右边，就代表是0-1的UV区间，也就是传入颜色从黑色到白色，代表着映射到纹理从左边到右边得像素。
也就是说，如果我打算用混合后的数据转变成颜色，我只需要制作从左边到右边代表着原始数据黑色到白色，也就是说从火焰的外焰到内焰的颜色。
**AOI**：说的没错。这次我们依旧使用SubstanceDesigner进行这个纹理的制作，并且暴露出参数，使得纹理可以在Unity里面调整。
首先打开之前做的S_Fire的项目，并且创建一个新的Graph，命名为FireRamp
然后创建新的Output节点。
而这次，我们需要创建三层颜色的卡通风格的RampTexutre。
首先，创建一个Shape节点，并且把类型设置为Square
这样就可以得到一个占据整个画布的方块了
**H子**：然后就是利用Transformation2D节点进行方块位置的控制吗。
奇怪了
我调整了Offset，但是为什么看到偏移，但是纹理没有任何变化呢。
**AOI**：这是Tiling的设置问题了。因为默认的Tiling模式都是水平和垂直两个方向
也就是说，不管你怎么偏移，他都会自动全方向的阵列，全屏的白色方块在水平和垂直方向都阵列。自然看不到任何变化。
解决的方法也很简单，首先点击Tilling Mode旁边设置模式的按钮
在弹出的菜单中选择
**Absolute**
这样，就可以对阵列模式进行设置。因为我们需要横向移动用以改变RampTexture，纵向并没有相关的需求，所以只要设置成垂直方向阵列即可。
现在再来移动一下，看看是不是好了。
**H子**：果然能达成目的了，但是为什么我增加X Offset的时候，他向左移动啊。
**AOI**：这个只能说是他的坐标系设计问题了。解决方法也很简单。
点解Rotation项目下的180按钮，即可将图像旋转180。这个时候，再拖动就可以了。而Offset可以双击直接输入数字，这样就可以直接填写超出默认-0.5到0.5范围的数据，得到期望的偏移值了。
**H子**：啊，我懂了。因为是黑白两色，所以接下来就是用Blend节点进行两个颜色的混合就是了吧。而要混合三个颜色，只需要再把已经进行混合的两个颜色，用同样的方法与第三个颜色混合就可以了。
好了！我做到了！
**AOI**：嗯，做的不错。这个时候，只要暴露出颜色和Offset的参数，就可以在Unity里面直接操作三段颜色参数的混合了。具体就不再赘述，直接做吧。
对了，offset暴露出来的值都是float2，可以手动设置成float型的数据，并且设置0-1的数据范围限制。但是这个时候，因为原来是float2，而当前只有一个值。这样的后果就是一个变量的数据，会被XY轴同时使用。
所以刚才在Transformation2D节点进行设置的垂直方向阵列的做法，也有保护图像纵向的效果。
你也可以完全不阵列试试看效果。
**H子**：还是算了......
做完之后再保存并且导出sbsar格式，再导入Unity就可以创建不同的材质和纹理了吧。
啊，确实看到了。
### 三点二、继续完善Shader以便使用RampTexture
**AOI**：素材已经准备好了，原理也已经明白了。那么接下来就该继续完善Shader以便于使用RampTexture了。
首先创建一个Append节点，这个节点用于合并通道。
创建后，把用于计算Step的数据，同时连到Append节点的两个入口。
RG在这个时候分别代表UV两个通道。然后再创建一个Texture2D节点。
并把定义火焰颜色用的Ramp Texture拖到该节点上，再把Append连到Texutre2D的UV入口上，使得合并后的数据作为UV被纹理使用。
然后把Texture2D的RGB出口链接到Emission
**H子**：啊！有效果了！
不过为啥中间看起来怪怪的，中间不是应该白色的吗。为啥变成外焰的颜色了
**AOI**，这是因为Unity里面默认的贴图阵列模式的原因。
选择纹理便可在Inspector面板看到材质的参数。
可以见到。默认Warp Mode是Repeat，也就是说当纹理超出01区间后，就会自动重复。
所以在火焰中心见到外焰的颜色，一来是因为中心的值其实已经大于1，二来是因为纹理重复模式的原因，使得超出1的数据又在回到了从0开始读取。
**H子**：也就是解决方法有两个，一方面是混合计算的值控制不要超出1，其次是把Wrap Mode改成Clamp了。
可以了！
在材质面板调整参数就可以改变区块的比例。
这个真是太方便了！
