标题光效

来源：互联网发布：域名授权完整源码编辑：程序博客网时间：2024/04/29 21:16

标题光效是一种常见的图片特效，“遮罩层”从左往右经过，起到强调游戏标题的作用，如下图所示。那么怎样用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;
             
            structa2v 
            { 
                float4 vertex : POSITION; 
                float3 texcoord : TEXCOORD0;
            }; 
             
            structv2f 
            { 
                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;
                returno;
            } 
             
            fixed4 frag (v2f i) : SV_Target 
            {
                fixed4 c = tex2D(_MainTex, i.uv);
                 
                floatisMask = sin(_Time.y*_Speed  -i.uv.x*2*PI );
                isMask = step(_MaskLimit,isMask);
                 
                c.rgb += _MaskColor*isMask;
                returnc;
            }
            ENDCG
        } 
    }
    FallBack"Transparent/VertexLit"
}

2、使用材质
新建一个名为ImageEffect的材质，选择上述编写的shader。设置MaskColor、Speed、MaskLimit这3个参数，如下图所示。

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

(转自蛮牛)

0 0