标题光效

标题光效是一种常见的图片特效，“遮罩层”从左往右经过，起到强调游戏标题的作用，如下图所示。那么怎样用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。

[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个参数，如下图所示。
 


将刚创建的材质应用于图片上，即可看到效果。如下图所示。

 

(转自蛮牛)