[初级]Unity Shader-模仿炉石传说卡牌动态效果(一)

转自：http://www.manew.com/thread-110739-1-1.html

虽然距离炉石传说的卡面特效还有不少距离，但加之特效妹子做的一些点缀，比如加点粒子什么的，看起来也挺不错，所以记录一下，恐日后年龄大了记忆力减退再给忘喽。

此总结回顾将分为以下三个部分呈现：

第一部分：会展示部分成品效果，简单介绍材质编辑器的组成及特点，基本使用方法及第一种效果：“扰动”的实现；

第二部分：将介绍“移动”、“旋转”效果的实现及两种混合效果的显示差异；

第三部分：会对自定义材质编辑器作出介绍，并对全文作出总结。

那就开车吧。

效果展示

↑ 黄盖身上起火了

↑ 关羽身上起火了

↑ 李儒身上起火了

↑ 典韦身上起火了

特点

方便特效同学编辑的材质界面，使用自定义材质编辑器，可根据需求自由选择开启层数，开启层数越多，特效表现力越强，特效越复杂，渲染开销也更高。

使用的时候感觉就像这样：

目前，每层特效仅包含最基本的两种模式：移动、旋转，第一层特效额包含一种扰动效果。

下面对效果分别做一下介绍：

扰动：

↑ 扰动标签下面板的配置

↑ 扰动标签下的相关说明

扰动的原理其实很简单，就是在对图片采样时，给采样UV坐标一点“无规律”的偏移，比如采样(0.11,0.51)时偏移到(0.12, 0.50)，采样(0.23,0.15)时偏移到(0.22,0.17)，可以想象，如果对图片上每个点都做这种“无规律”的偏移，那么最终结果一定是画面将变得扭曲，而随着偏移量的增加，扭曲程度也增加，如：

只要理解这种偏移的原理，那么稍加利用，就能实现扰动的效果，比如从一张图片中采样颜色并转换为坐标偏移量来代替上述的无规律的偏移，而这张图一般就叫做噪声贴图(NoiseTexture)如：

↑ 一张噪声贴图

网络上有很多成品噪声图，以及生成噪声图的方法，因此这里就不再赘述了。

如果进一步将噪声图"流动"起来，画面的流动效果也就随之出现了，再加之一张遮罩图控制噪声影响区域，就可以基本实现画面的扰动效果了。

]

↑ Ps下编辑遮罩图(这里使用红色通道作为噪声强度)

↑ 典韦背后的火光扰动了起来

关键部分代码

以下是鄙人总结的几项实现扰动效果时需要注意的事项：

1、环绕模式一定要选择Repeat，因为这样才能让噪声图正确的“流动”起来。

2、从噪声图采样后，乘了一个适配UV单位的参数，因为坐标偏移范围在-1~1之间，但这对于UV坐标显然是太大了，因此我使用了0.005作为转换参数，这个参数可以自己制定，也可以用原图尺寸处理一下，在这就不赘述了。

3、遮罩不仅可以控制扰动区域，同时可以控制扰动强度，只需要在绘制遮罩的时候调整R值即可(当然，你也可以用绿色(G)或者蓝色(B)通道)，同时，遮罩贴图的底色必须为黑色，如果使用了白色，全屏都会是扰动效果，原因很简单就不再解释了。