美文网首页
7、UI流光效果

7、UI流光效果

作者: GameObjectLgy | 来源:发表于2020-10-27 03:13 被阅读0次

    1、建立材质
    2、写Shader
    3、流光Texture样式赋值
    4、把材质给UI

    Shader "Sprites/FlowLight"
     {
        Properties
        {
        [PerRendererData]
            _MainTex("Sprite Texture", 2D) = "white" {}
            _Color("Tint", Color) = (1, 1, 1, 1)
        [MaterialToggle] 
            PixelSnap("Pixel snap", float) = 0
            _FlowlightTex("Flowlight Texture", 2D) = "white" {}
            _Power("Power", float) = 1
            _SpeedX("SpeedX", float) = 1
            _SpeedY("SpeedY", float) = 0
            //以下代码块可以有效防止Editor报缺失参数的错误(笔者踩过的坑)
            _StencilComp("Stencil Comparison", Float) = 8
            _Stencil("Stencil ID", Float) = 0
            _StencilOp("Stencil Operation", Float) = 0
            _StencilWriteMask("Stencil Write Mask", Float) = 255
            _StencilReadMask("Stencil Read Mask", Float) = 255
            _ColorMask("Color Mask", Float) = 15
            //-----
        }
        
         SubShader
         {
            Tags{   
                "Queue" = "Transparent"
                "IgnoreProjector" = "True"
                "RenderType" = "Transparent"
                "PreviewType" = "Plane"
                "CanUseSpriteAtlas" = "True"
            }
              //以下代码块可以有效防止Editor报缺失参数的错误(笔者踩过的坑)
            Stencil{
                Ref[_Stencil]
                Comp[_StencilComp]
                Pass[_StencilOp]
                ReadMask[_StencilReadMask]
                WriteMask[_StencilWriteMask]
            }
            //----
            Cull Off
                 Lighting Off
                 ZWrite Off
                 Blend One OneMinusSrcAlpha
                
            Pass
            {
                 CGPROGRAM
                 #pragma vertex vert
                 #pragma fragment frag
                 #pragma multi_compile _ PIXELSNAP_ON
             #include "UnityCG.cginc"
                    
                 struct appdata_t
                 {
                     float4 vertex : POSITION;
                     float4 color : COLOR;
                     float2 texcoord : TEXCOORD0;
                 };
                struct v2f
                {
                     float4 vertex : SV_POSITION;
                     fixed4 color : COLOR;
                     half2 texcoord : TEXCOORD0;
                     half2 texflow : TEXCOORD1;
                };
            fixed4 _Color;
            sampler2D _FlowlightTex;
                fixed4 _FlowlightTex_ST;
                fixed _SpeedX;
                fixed _SpeedY;
        
                 v2f vert(appdata_t IN)
                 {
                     v2f OUT;
                     OUT.vertex = UnityObjectToClipPos(IN.vertex);
                     OUT.texcoord = IN.texcoord;
                     OUT.texflow = TRANSFORM_TEX(IN.texcoord, _FlowlightTex);
                     OUT.texflow.x += _Time * _SpeedX;
                     OUT.texflow.y += _Time * _SpeedY;
                     OUT.color = IN.color * _Color;
                 #ifdef PIXELSNAP_ON
                     OUT.vertex = UnityPixelSnap(OUT.vertex);
                 #endif
                        
                     return OUT;
                 }
                
                 sampler2D _MainTex;
                 float _Power;
                
                 fixed4 frag(v2f IN) : SV_Target
                 {
                     fixed4 c = tex2D(_MainTex, IN.texcoord);
                     fixed4 cadd = tex2D(_FlowlightTex, IN.texflow) * _Power;
                     cadd.rgb *= c.rgb;
                     c.rgb += cadd.rgb;
                     c.rgb *= c.a;
                     return c;
                 }
            ENDCG
           }
       }
    }
    
    流光材质贴图示例

    相关文章

      网友评论

          本文标题:7、UI流光效果

          本文链接:https://www.haomeiwen.com/subject/mezumktx.html