标题光效是一种常见的图片特效，“遮罩层”从左往右经过，起到强调游戏标题的作用，如下图所示。那么怎样用Shader实现这种效果呢？
By 知乎@罗培羽
1、编写Shader
下面的着色器代码使用了顶点/片元着色器处理标题光效功能。这里定义4个属性，其中_MainTex代表图片贴图，_MaskColor代表遮罩颜色，Speed代表光效的移动速度，_MaskLimit控制着光效的宽度。核心代码为“float isMask = sin(_Time.y*_Speed -i.uv.x*2*PI );”“isMask = step(_MaskLimit,isMask);”“c.rgb += _MaskColor*isMask;”这3句。如果isMask为1，代表该片元被遮罩，如果为0，表示不被遮罩，通过“c.rgb += _MaskColor*isMask;”便可计算片元的颜色。“float isMask = sin(_Time.y*_Speed -i.uv.x*2*PI );”将根据时间和uv的x坐标计算isMask，此时isMask的取值范围为[-1,1]。step(_MaskLimit,isMask)的功能相当于“if(isMask > MaskLimit) return 1; else return 0;”通过_MaskLimit将指定区间的值设为1，其他设为0。
2、使用材质
新建一个名为ImageEffect的材质，选择上述编写的shader。设置MaskColor、Speed、MaskLimit这3个参数，如下图所示。
将刚创建的材质应用于图片上，即可看到效果。如下图所示。
By 知乎@罗培羽
1、编写Shader
下面的着色器代码使用了顶点/片元着色器处理标题光效功能。这里定义4个属性，其中_MainTex代表图片贴图，_MaskColor代表遮罩颜色，Speed代表光效的移动速度，_MaskLimit控制着光效的宽度。核心代码为“float isMask = sin(_Time.y*_Speed -i.uv.x*2*PI );”“isMask = step(_MaskLimit,isMask);”“c.rgb += _MaskColor*isMask;”这3句。如果isMask为1，代表该片元被遮罩，如果为0，表示不被遮罩，通过“c.rgb += _MaskColor*isMask;”便可计算片元的颜色。“float isMask = sin(_Time.y*_Speed -i.uv.x*2*PI );”将根据时间和uv的x坐标计算isMask，此时isMask的取值范围为[-1,1]。step(_MaskLimit,isMask)的功能相当于“if(isMask > MaskLimit) return 1; else return 0;”通过_MaskLimit将指定区间的值设为1，其他设为0。
[C#]
纯文本查看
复制代码
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
|
Shader
"Lpy/ImageEffect"
{
Properties
{
_MainTex (
"Main Tex"
, 2D) =
"white"
{}
_MaskColor (
"Mask Color"
, Color) = (1, 1, 1, 1)
_Speed (
"Speed"
,
float
) = 2
_MaskLimit (
"MaskLimit"
,
float
) = 0.8
}
SubShader
{
Tags {
"Queue"
=
"Transparent"
"IgnoreProjector"
=
"True"
"RenderType"
=
"Transparent"
}
Pass
{
Tags {
"LightMode"
=
"ForwardBase"
}
ZTest off
ZWrite Off
Blend SrcAlpha OneMinusSrcAlpha
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
#define PI 3.14159265358979
sampler2D _MainTex;
fixed3 _MaskColor;
float
_Speed;
float
_MaskLimit;
struct
a2v
{
float4 vertex : POSITION;
float3 texcoord : TEXCOORD0;
};
struct
v2f
{
float4 pos : SV_POSITION;
float2 uv : TEXCOORD0;
};
v2f vert (a2v v)
{
v2f o;
o.pos = mul(UNITY_MATRIX_MVP, v.vertex);
o.uv = v.texcoord;
return
o;
}
fixed4 frag (v2f i) : SV_Target
{
fixed4 c = tex2D(_MainTex, i.uv);
float
isMask = sin(_Time.y*_Speed -i.uv.x*2*PI );
isMask = step(_MaskLimit,isMask);
c.rgb += _MaskColor*isMask;
return
c;
}
ENDCG
}
}
FallBack
"Transparent/VertexLit"
}
|
2、使用材质
新建一个名为ImageEffect的材质，选择上述编写的shader。设置MaskColor、Speed、MaskLimit这3个参数，如下图所示。
将刚创建的材质应用于图片上，即可看到效果。如下图所示。
(转自蛮牛)