Unity特效设计教程：标题光效

关联文章：

Unity特效设计教程：实现“梦幻旋屏”
Unity特效设计教程：图片的切割与翻转
Unity特效设计教程（四) ：标题光效
Unity特效设计教程：滚动的背景

标题光效是一种常见的图片特效，“遮罩层”从左往右经过，起到强调游戏标题的作用，如下图所示。那么怎样用Shader实现这种效果呢？


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。

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


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


最后依然到了广告时间：最后依然到了广告时间：

笔者在分享文章的同时也结识了一群兴趣相投的朋友，本周五将会作客游戏蛮牛，在线答疑。

【2.24 某知名游戏公司主程在线答疑 参与有机会得《Unity 3D网络游戏实战》】

专栏地址：https://zhuanlan.zhihu.com/p/25336817