【Simple Shader】扫光效果

写在前面，学习shader有一段时间了，算是基本入门了吧，就来写一些简单效果的shader来练习一下呗。第一次我们来做一个扫光的效果，最为常见的效果。

效果

原理

原理很简单：移动扫光贴图的UV既可，怎么移动呢？我们在shader申明了一个贴图后，在控制面板中就可以看Tiling和Offset两个选项。tiling可以理解为在当前背景大小中此贴图可以平铺多少个，分为x轴和y轴的分布。offset就是偏移咯。

控制面板

这里指的注意的是我们需要把图片的格式设置成repeat，这样移动offset就是重复出现。

图片设置

然后我们就更改贴图的offset就可以了，在shader中一个_Time的参数吧，跟mono中的Time类差不多，这个移动代码我们放在顶点函数中，我们的计算公式：

//扫光贴图顶点颜色坐标 += 时间值 * 速度
OUT.texFlowLight.x+=_Time * _SpeedX;
OUT.texFlowLight.y+=_Time * _SpeedY;

代码

我们创建一个unlit shader，在属性中添加上我们扫光需要的一些属性：

// FlowLight
_FLowLightTex("Move Texture",2D)="white"{}//扫光贴图
_FLowLightColor("FlowLight Color",Color)=(0,0,0,1)//扫光颜色
_Power("Power",float)=1//扫光大小
_SpeedX("SpeedX",float)=1//X轴移动速度
_SpeedY("SpeedY",float)=0//Y轴移动速度

这里设置了一个Power变量来空中扫光的亮度，这个值会跟扫光贴图融合。然后我们设置标签与透明图设置。

Tags 
{ 
    "Queue"="Transparent"
    "IgnoreProjector"="True"
    "RenderType"="Transparent"
    "PreviewType"="Plane"
    "CanUseSpriteAtlas"="True"
}

Cull off
Lighting off
ZWrite off
Blend One OneMinusSrcAlpha

这里我们打开了混合透明的设置，如果我们不打开透明的话，画面中就是这样的：

关闭透明设置

这里背景就永远是黑色的，由于我们的logo一般是有透明的部分，这里我们就需要把那部分的颜色作为一个透明的。所以我们在这里是需要打开透明通道的，至于为什么这样设置可以看看这个文章。

然后我们在顶点函数添加移动：

// FlowLight
OUT.texFlowLight=TRANSFORM_TEX(IN.texcoord,_FLowLightTex);
OUT.texFlowLight.x+=_Time * _SpeedX;
OUT.texFlowLight.y+=_Time * _SpeedY;

最后在片元函数中做颜色的融合：

fixed4 col = tex2D(_MainTex, IN.texcoord);
        
// FlowLight
fixed4 cadd=tex2D(_FLowLightTex,IN.texFlowLight)*_Power*_FLowLightColor;
cadd.rgb*=col.rgb;
col.rgb +=cadd.rgb;

我们的做法是把原图的颜色与扫光图的颜色做了融合生成扫光贴图最终的颜色，然后再与主贴图的颜色相叠加。
然后就完成了，是不是觉得很简单呢，其实写下来的感受就是---道理我都懂，但是就是不会写。哈哈哈。今天就先这样咯。

完整及资源代码