[Unity] Simple Shaderlab 1 | | Ugui with simple shader-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"Sprites/default_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_flowlighttex ("flowlight Texture", 2D) =" White" {}Ten_power ("Power",float) =1 One_speedx ("Speedx",float) =1 A_speedy ("SpeedY",float) =0 -     } -  the Subshader -     { - Tags -         {  +             "Queue"="Transparent"  -             "Ignoreprojector"="True"  +             "Rendertype"="Transparent"  A             "Previewtype"="Plane" at             "Canusespriteatlas"="True" -         } -  - Cull Off - Lighting Off - Zwrite Off in Blend One Oneminussrcalpha -  to Pass +         { - Cgprogram the             #pragmaVertex vert *             #pragmaFragment Frag $             #pragmaMulti_compile _ pixelsnap_onPanax Notoginseng#include"Unitycg.cginc" -              the             structappdata_t +             { A float4 vertex:position; the float4 Color:color; + FLOAT2 texcoord:texcoord0;  -             }; $  $             structv2f -             { - float4 vertex:sv_position; the fixed4 Color:color; - half2 texcoord:texcoord0;Wuyi half2 texflow:texcoord1; the             }; -              Wu fixed4 _color; - sampler2d _flowlighttex; About fixed4 _flowlighttex_st; $             fixed_speedx; -             fixed_speedy; -  - v2f Vert (appdata_t in) A             { + v2f out; theOut.vertex =Mul (UNITY_MATRIX_MVP, In.vertex); -Out.texcoord =In.texcoord; $Out.texflow =Transform_tex (In.texcoord, _flowlighttex); theout.texflow.x + = _time *_speedx; theOUT.TEXFLOW.Y + = _time *_speedy; theOut.color = In.color *_color; the #ifdef pixelsnap_on -Out.vertex =Unitypixelsnap (Out.vertex); in                 #endif the  the                 returnOut ; About             } the  the sampler2d _maintex; the             float_power; +  - fixed4 Frag (v2f in): Sv_target the             {BayiFixed4 C =tex2d (_maintex, In.texcoord); theFixed4 Cadd = tex2d (_flowlighttex, In.texflow) *_power; theCadd.rgb *=C.rgb; -C.rgb + =Cadd.rgb; -C.rgb *=C.A; the                 returnC; the             } the ENDCG the         } -     } the}

Since it was modified from unity with shader "Sprites-default", the name was added "-flowlight" after that.

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:

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, its 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.

Then overlay the streamer texture with the main texture in frag, note that c. RGB + = Cadd. RGB, otherwise C + = Cadd will cause the transparent channel is also superimposed up, the next step c of the pre-multiply transparent channel has an impact.

In the texture of the production, because it is circular scrolling, so in order not to allow the light to appear excessively frequent, need to be in the streamer texture next to the appropriate width of the black area, the following is the beginning of this article using the streamer texture.

It in the light texture (square texture) on the left side with the 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 use the sprite shader thing all can use.

[Unity] Simple Shaderlab 1 | | Ugui with simple shader-streamer