[Unity] Simple Shaderlab 1//UI shader 1-Streamer

Recently, I often have to write some new shader for 2D games to do special effects. Shader effects can be better for UI and 2D elements than particle effects.

First look at the effect:

There are many articles about Shaderlab, but few of them are implemented in the UI, and often just add a layer of color, and do not show the effect of "light".

The following is the full text of the shader, followed by some details:

1Shader"Ui/unlit/flowlight"2 {3 Properties4     {5[Perrendererdata] _maintex ("Sprite Texture", 2D) =" White" {}6_color ("Tint", Color) = (1,1,1,1)7[Materialtoggle] Pixelsnap ("Pixel Snap",float) =08         9         /*Flowlight*/Ten_flowlighttex ("Add Move Texture", 2D) =" White" {} One_flowlightcolor ("flowlight Color", Color) = (0,0,0,1) A_power ("Power",float) =1 -_speedx ("Speedx",float) =1 -_speedy ("SpeedY",float) =0 the         /* --------- */ -  -         /*UI*/ -_stencilcomp ("stencil Comparison", Float) =8 +_stencil ("stencil ID", Float) =0 -_stencilop ("stencil Operation", Float) =0 +_stencilwritemask ("stencil Write Mask", Float) =255 A_stencilreadmask ("stencil Read Mask", Float) =255 at         /* -- */ -     } -  - Subshader -     { - Tags in         {  -             "Queue"="Transparent"  to             "Ignoreprojector"="True"  +             "Rendertype"="Transparent"  -             "Previewtype"="Plane" the             "Canusespriteatlas"="True" *         } $ Panax Notoginseng Cull Off - Lighting Off the Zwrite Off + Blend One Oneminussrcalpha A          the         /*UI*/ + Stencil -         { $ Ref [_stencil] $ Comp [_stencilcomp] - Pass [_stencilop] - Readmask [_stencilreadmask] the Writemask [_stencilwritemask] -         }Wuyi         /* -- */ the  - Pass Wu         { - Cgprogram About             #pragmaVertex vert $             #pragmaFragment Frag -             #pragmaMulti_compile _ pixelsnap_on -#include"Unitycg.cginc" -              A             structappdata_t +             { the float4 vertex:position; - float4 Color:color; $ float2 texcoord:texcoord0; the             }; the  the             structv2f the             { - float4 vertex:sv_position; in fixed4 Color:color; the half2 texcoord:texcoord0; the  About                 /*Flowlight*/ the half2 texflowlight:texcoord1; the                 /* --------- */ the             }; +              - fixed4 _color; the Bayi             /*Flowlight*/ the fixed4 _flowlightcolor; the             float_power; - sampler2d _flowlighttex; - fixed4 _flowlighttex_st; the             fixed_speedx; the             fixed_speedy; the             /* --------- */ the  - v2f Vert (appdata_t in) the             { the v2f out; theOut.vertex =Mul (UNITY_MATRIX_MVP, In.vertex);94Out.texcoord =In.texcoord; the  the                 /*Flowlight*/ theOut.texflowlight =Transform_tex (In.texcoord, _flowlighttex);98Out.texflowlight.x + = _time *_speedx; AboutOut.texflowlight.y + = _time *_speedy; -                 /* --------- */101 102Out.color = In.color *_color;103 #ifdef pixelsnap_on104Out.vertex =Unitypixelsnap (Out.vertex); the                 #endif106 107                 returnOut ;108             }109  the sampler2d _maintex;111  the fixed4 Frag (v2f in): Sv_target113             { theFixed4 C =tex2d (_maintex, In.texcoord); the  the                 /*Flowlight*/117Fixed4 Cadd = tex2d (_flowlighttex, in.texflowlight) *_power;118Cadd.rgb *=C.rgb;119C.rgb + =Cadd.rgb; -C.rgb *=C.A;121                 /* --------- */122 123                 returnC;124             } the ENDCG126         }127     } -}

In fact, after the blog post issued this change once, because it is used sprite-default, can be used in the UI but did not implement masking and so on, this time.

/* UI */is the part that is added to the UI shader, which can be deleted if it is only used on a sprite.

and/* flowlight * * In the Sprite-default based on the addition of the part, removed and then became Sprite-default original (

In fact, there is no difference between the process and normal UV scrolling overlay, note that the texture coordinates are computed with the UV passed in by the UI.

Out.texflow = Transform_tex (In.texcoord, _flowlighttex);

After the two textures overlay the output in Frag, there is only one line to note:

118 Cadd.rgb *= C.rgb;

Many shader authors write streamer only the color of the overlay texture + + on the main texture, but if the overlay texture is multiplied by the main texture of the color, it will make the dark color darker, more in line with the sense of light absorption, and with power control light intensity can better show the light.

Of course, the side effect of this is that the color of the streamer texture itself is useless, because it becomes only in grayscale, after all, the original purpose is only to play the light. If you need a color, you can multiply the custom color on the next line of the row, not here.

These are the parts that need attention.

In the process, the texture coordinate out.texflow of the streamer texture is obtained in the Vert, and then the texture coordinates are shifted with time using the _time time parameter, noting that the offset operation is in the vertex shading vert part rather than in the fragment coloring frag, so the computational amount is not wasted.

After the Frag in the overlay will streamer texture and the main texture overlay, note is C.rgb + = Cadd.rgb, otherwise C + + Cadd will cause the transparent channel is superimposed on the next step c of the pre-multiply transparent channel has an impact.

In the production of textures, because it is circular scrolling, so in order not to let the light appear excessively frequent, need to be in the streamer texture next to the appropriate width of the black area.

Here is the streamer texture used by the start of this article:

It in the light texture (square) on the left side with a equal width of the black area, so that the texture into the width of the 2x1, so that the material tiling changed to x:0.5 y:1 can make the frequency of the light appear half, of course, can also reduce the area of light in PS to 66%, This allows the frequency of light to change to the original 1/3 (don't forget to change the tilling), and so on other frequencies.

Next time we will share the dissolution of Ugui. Say is Ugui use, actually uses the UI or the sprite shader the thing can use.

[Unity] Simple Shaderlab 1//UI shader 1-Streamer