Unity可视化Shader工具ASE介绍——8、UI类型的特效Shader编写

阿赵的Unity可视化Shader工具ASE介绍目录

Unity的UGUI图片特效角色闪卡效果

  大家好，我是阿赵。
  继续介绍Unity可视化Shader编辑插件ASE的使用。这次讲一下UI类特效Shader的写法。

一、例子说明

  这次编写一个Shader，给一张UGUI里面的图片增加一个闪卡的特效。

  然后还能保持UGUI图片的特性，能被mask裁剪

  然后我们需要通过Image上的图片来读取角色的图片，通过Image的颜色来控制整体的颜色和闪卡的闪烁强度。

二、制作说明

1、读取Image的图片和颜色
  先创建一个UI类模板的ASE的Shader

  打开一些别人写好的UI类Shader，可以发现，一开始的属性都有这样的：

[PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
_Color ("Tint", Color) = (1,1,1,1)

  那是不是可以认为，我们在创建一个TextureSample的节点叫做MainTex，然后再建一个Color节点就可以了呢？

1.MainTex的获取

  我们可以试一下

  当我建了一个TextureSample，并且打算起名叫做MainTex的时候，发现没有命名成功，并且右下角有个提示。
  那是因为，在UI类的Shader模板里面，MainTex这个名字已经被占用了，我们不能再使用这个名字。如果想使用MainTex，应该这样：
  搜索并创建Template Parameter节点：

  创建了之后，发现这个节点默认就是SpriteTexture，然后选择这个节点，看一下属性栏，会发现这个节点的属性名就是_MainTex。

  除了MainTex，还可以在属性栏里面选择其他类型的参数：

  我们已经拿到了MainTex了，它不是TextureSample，而是TextureObject，所以我们还要建一个TextureSample节点，来把它连到颜色去：

  保存shader，创建材质球，并把材质球拖到Image下面的Material上

  这时候应该可以看到图片正确的显示了

2.颜色的获取

  Image上面的图片，估计很多人第一印象是再建立一个Template Parameter节点，然后类型选中Tint颜色？很遗憾，并不是这样的。
  Image的颜色，其实是顶点颜色。

  测试一下，把顶点颜色和MainTex的颜色相乘

  这时候，调整Image的颜色，就可以改变图片的颜色了。

2、Flow节点的用法

  这一篇主要是讲UI模板的Shader 的，为了实现这个例子，做了一个闪卡特效。不过这个效果不是重点，所以我就比较快的介绍一下：
  ASE里面有一个叫做Flow的节点，可以用来做流动效果的：

  下面快速的连接一下：

  使用了2张贴图，一张是noiseTex噪声贴图，一张是normalTex法线贴图。
  根据Flow的输入参数，建了dir、strength、speed三个变量输入。
  得到了Flow流动的颜色之后，最后就是和原来的MainTex颜色叠加在一起就可以了

  看着好像很复杂，其实只是简单的rgb相乘，再通过Alpha控制一下范围。
  整个Shader的连线是这样：

  看着比较乱，下一篇找机会说一下怎么去整理这些节点。
  保存Shader，给材质球指定法线贴图和噪声贴图，并根据实际情况调整一下平铺次数

  这个时候，应该就能看到效果了

三、生成的Shader的特点

  打开生成的Shader代码看看，会发现有几个特点：
1、根据UIShader的特性，添加了蒙板和一些属性

2、由于需要计算UI的Mask裁剪，所以计算了世界顶点坐标，然后通过裁剪来修改Alpha

3、生成的代码还算比较简洁，和自己手写的差别已经不大了，除了有比较多随机变量名。如果不是很介意的话，其实直接拿来使用都可以。
4、最后附上整个Shader的代码，可以在ASE里面查看：

// Made with Amplify Shader Editor
// Available at the Unity Asset Store - http://u3d.as/y3X 
Shader "UITest"
{Properties{[PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}_Color ("Tint", Color) = (1,1,1,1)_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[Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip ("Use Alpha Clip", Float) = 0_normalTex("normalTex", 2D) = "bump" {}_Size("Size", Range( 0 , 10)) = 1_noiseTex("noiseTex", 2D) = "white" {}_speed("speed", Float) = 1_dir("dir", Vector) = (0,-1,0,0)_strength("strength", Vector) = (1,1,0,0)[HideInInspector] _texcoord( "", 2D ) = "white" {}}SubShader{LOD 0Tags { "Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent" "PreviewType"="Plane" "CanUseSpriteAtlas"="True" }Stencil{Ref [_Stencil]ReadMask [_StencilReadMask]WriteMask [_StencilWriteMask]CompFront [_StencilComp]PassFront [_StencilOp]FailFront KeepZFailFront KeepCompBack AlwaysPassBack KeepFailBack KeepZFailBack Keep}Cull OffLighting OffZWrite OffZTest [unity_GUIZTestMode]Blend SrcAlpha OneMinusSrcAlphaColorMask [_ColorMask]Pass{Name "Default"CGPROGRAM#pragma vertex vert#pragma fragment frag#pragma target 3.0#include "UnityCG.cginc"#include "UnityUI.cginc"#pragma multi_compile __ UNITY_UI_CLIP_RECT#pragma multi_compile __ UNITY_UI_ALPHACLIP#include "UnityShaderVariables.cginc"#define ASE_NEEDS_FRAG_COLORstruct appdata_t{float4 vertex   : POSITION;float4 color    : COLOR;float2 texcoord : TEXCOORD0;UNITY_VERTEX_INPUT_INSTANCE_ID};struct v2f{float4 vertex   : SV_POSITION;fixed4 color    : COLOR;half2 texcoord  : TEXCOORD0;float4 worldPosition : TEXCOORD1;UNITY_VERTEX_INPUT_INSTANCE_IDUNITY_VERTEX_OUTPUT_STEREO};uniform fixed4 _Color;uniform fixed4 _TextureSampleAdd;uniform float4 _ClipRect;uniform sampler2D _MainTex;uniform sampler2D _noiseTex;uniform sampler2D _normalTex;uniform float4 _normalTex_ST;uniform float _Size;uniform float2 _dir;uniform float2 _strength;uniform float _speed;uniform float4 _MainTex_ST;v2f vert( appdata_t IN  ){v2f OUT;UNITY_SETUP_INSTANCE_ID( IN );UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(OUT);UNITY_TRANSFER_INSTANCE_ID(IN, OUT);OUT.worldPosition = IN.vertex;OUT.worldPosition.xyz +=  float3( 0, 0, 0 ) ;OUT.vertex = UnityObjectToClipPos(OUT.worldPosition);OUT.texcoord = IN.texcoord;OUT.color = IN.color * _Color;return OUT;}fixed4 frag(v2f IN  ) : SV_Target{float2 texCoord13 = IN.texcoord.xy * float2( 1,1 ) + float2( 0,0 );float2 uv_normalTex = IN.texcoord.xy * _normalTex_ST.xy + _normalTex_ST.zw;float2 temp_output_4_0_g2 = (( ( float3( texCoord13 ,  0.0 ) * UnpackNormal( tex2D( _normalTex, uv_normalTex ) ) ).xy / _Size )).xy;float2 temp_output_41_0_g2 = ( _dir + 0.5 );float2 temp_output_17_0_g2 = _strength;float mulTime22_g2 = _Time.y * _speed;float temp_output_27_0_g2 = frac( mulTime22_g2 );float2 temp_output_11_0_g2 = ( temp_output_4_0_g2 + ( temp_output_41_0_g2 * temp_output_17_0_g2 * temp_output_27_0_g2 ) );float2 temp_output_12_0_g2 = ( temp_output_4_0_g2 + ( temp_output_41_0_g2 * temp_output_17_0_g2 * frac( ( mulTime22_g2 + 0.5 ) ) ) );float3 lerpResult9_g2 = lerp( UnpackNormal( tex2D( _noiseTex, temp_output_11_0_g2 ) ) , UnpackNormal( tex2D( _noiseTex, temp_output_12_0_g2 ) ) , ( abs( ( temp_output_27_0_g2 - 0.5 ) ) / 0.5 ));float2 uv_MainTex = IN.texcoord.xy * _MainTex_ST.xy + _MainTex_ST.zw;float4 tex2DNode3 = tex2D( _MainTex, uv_MainTex );float3 appendResult27 = (float3(tex2DNode3.rgb));float3 appendResult28 = (float3(IN.color.rgb));float4 appendResult22 = (float4(( ( lerpResult9_g2 * IN.color.a ) + ( appendResult27 * appendResult28 ) ) , tex2DNode3.a));half4 color = appendResult22;#ifdef UNITY_UI_CLIP_RECTcolor.a *= UnityGet2DClipping(IN.worldPosition.xy, _ClipRect);#endif#ifdef UNITY_UI_ALPHACLIPclip (color.a - 0.001);#endifreturn color;}ENDCG}}CustomEditor "ASEMaterialInspector"}
/*ASEBEGIN
Version=18500
259;12;1661;1007;2369.394;1093.456;2.028551;True;True
Node;AmplifyShaderEditor.TextureCoordinatesNode;13;-1598.555,-479.9796;Inherit;False;0;-1;2;3;2;SAMPLER2D;;False;0;FLOAT2;1,1;False;1;FLOAT2;0,0;False;5;FLOAT2;0;FLOAT;1;FLOAT;2;FLOAT;3;FLOAT;4
Node;AmplifyShaderEditor.TemplateShaderPropertyNode;2;-1023.386,50.42144;Inherit;False;0;0;_MainTex;Shader;0;5;SAMPLER2D;0;FLOAT;1;FLOAT;2;FLOAT;3;FLOAT;4
Node;AmplifyShaderEditor.SamplerNode;14;-1576.524,-302.3614;Inherit;True;Property;_normalTex;normalTex;0;0;Create;True;0;0;False;0;False;-1;0bebe40e9ebbecc48b8e9cfea982da7e;0bebe40e9ebbecc48b8e9cfea982da7e;True;0;True;bump;Auto;True;Object;-1;Auto;Texture2D;8;0;SAMPLER2D;;False;1;FLOAT2;0,0;False;2;FLOAT;0;False;3;FLOAT2;0,0;False;4;FLOAT2;0,0;False;5;FLOAT;1;False;6;FLOAT;0;False;7;SAMPLERSTATE;;False;5;FLOAT3;0;FLOAT;1;FLOAT;2;FLOAT;3;FLOAT;4
Node;AmplifyShaderEditor.VertexColorNode;4;-704.494,288.5937;Inherit;False;0;5;COLOR;0;FLOAT;1;FLOAT;2;FLOAT;3;FLOAT;4
Node;AmplifyShaderEditor.SimpleMultiplyOpNode;18;-1240.182,-471.6718;Inherit;False;2;2;0;FLOAT2;0,0;False;1;FLOAT3;0,0,0;False;1;FLOAT3;0
Node;AmplifyShaderEditor.TexturePropertyNode;19;-1079.893,-642.5373;Inherit;True;Property;_noiseTex;noiseTex;4;0;Create;True;0;0;False;0;False;e28dc97a9541e3642a48c0e3886688c5;cd460ee4ac5c1e746b7a734cc7cc64dd;False;white;Auto;Texture2D;-1;0;2;SAMPLER2D;0;SAMPLERSTATE;1
Node;AmplifyShaderEditor.SamplerNode;3;-806.93,36.96289;Inherit;True;Property;_TextureSample0;Texture Sample 0;0;0;Create;True;0;0;False;0;False;-1;None;None;True;0;False;white;Auto;False;Object;-1;Auto;Texture2D;8;0;SAMPLER2D;;False;1;FLOAT2;0,0;False;2;FLOAT;0;False;3;FLOAT2;0,0;False;4;FLOAT2;0,0;False;5;FLOAT;1;False;6;FLOAT;0;False;7;SAMPLERSTATE;;False;5;COLOR;0;FLOAT;1;FLOAT;2;FLOAT;3;FLOAT;4
Node;AmplifyShaderEditor.Vector2Node;15;-1132.393,-263.3424;Inherit;False;Property;_strength;strength;7;0;Create;True;0;0;False;0;False;1,1;1,1;0;3;FLOAT2;0;FLOAT;1;FLOAT;2
Node;AmplifyShaderEditor.Vector2Node;17;-1152.206,-374.9799;Inherit;False;Property;_dir;dir;6;0;Create;True;0;0;False;0;False;0,-1;0,-1;0;3;FLOAT2;0;FLOAT;1;FLOAT;2
Node;AmplifyShaderEditor.RangedFloatNode;16;-1040.738,-127.9429;Inherit;False;Property;_speed;speed;5;0;Create;True;0;0;False;0;False;1;1;0;0;0;1;FLOAT;0
Node;AmplifyShaderEditor.DynamicAppendNode;27;-483.9323,32.2692;Inherit;False;FLOAT3;4;0;FLOAT3;0,0,0;False;1;FLOAT;0;False;2;FLOAT;0;False;3;FLOAT;0;False;1;FLOAT3;0
Node;AmplifyShaderEditor.FunctionNode;12;-799.0388,-335.9053;Inherit;False;Flow;1;;2;acad10cc8145e1f4eb8042bebe2d9a42;2,50,1,51,1;5;5;SAMPLER2D;;False;2;FLOAT2;0,0;False;18;FLOAT2;0,0;False;17;FLOAT2;1,1;False;24;FLOAT;0.2;False;1;FLOAT3;0
Node;AmplifyShaderEditor.DynamicAppendNode;28;-487.0394,256.8657;Inherit;False;FLOAT3;4;0;FLOAT3;0,0,0;False;1;FLOAT;0;False;2;FLOAT;0;False;3;FLOAT;0;False;1;FLOAT3;0
Node;AmplifyShaderEditor.SimpleMultiplyOpNode;21;-458.0888,-109.1593;Inherit;False;2;2;0;FLOAT3;0,0,0;False;1;FLOAT;0;False;1;FLOAT3;0
Node;AmplifyShaderEditor.SimpleMultiplyOpNode;5;-299.8992,74.58842;Inherit;False;2;2;0;FLOAT3;0,0,0;False;1;FLOAT3;0,0,0;False;1;FLOAT3;0
Node;AmplifyShaderEditor.SimpleAddOpNode;26;-144.8332,3.467314;Inherit;False;2;2;0;FLOAT3;0,0,0;False;1;FLOAT3;0,0,0;False;1;FLOAT3;0
Node;AmplifyShaderEditor.DynamicAppendNode;22;-26.98483,138.3909;Inherit;False;COLOR;4;0;FLOAT3;0,0,0;False;1;FLOAT;0;False;2;FLOAT;0;False;3;FLOAT;0;False;1;COLOR;0
Node;AmplifyShaderEditor.TemplateMultiPassMasterNode;0;222.6413,-34.4096;Float;False;True;-1;2;ASEMaterialInspector;0;4;UITest;5056123faa0c79b47ab6ad7e8bf059a4;True;Default;0;0;Default;2;True;2;5;False;-1;10;False;-1;0;1;False;-1;0;False;-1;False;False;False;False;False;False;False;False;True;2;False;-1;True;True;True;True;True;0;True;-9;False;False;False;True;True;0;True;-5;255;True;-8;255;True;-7;0;True;-4;0;True;-6;1;False;-1;1;False;-1;7;False;-1;1;False;-1;1;False;-1;1;False;-1;True;2;False;-1;True;0;True;-11;False;True;5;Queue=Transparent=Queue=0;IgnoreProjector=True;RenderType=Transparent=RenderType;PreviewType=Plane;CanUseSpriteAtlas=True;False;0;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;True;2;0;;0;0;Standard;0;0;1;True;False;;False;0
WireConnection;18;0;13;0
WireConnection;18;1;14;0
WireConnection;3;0;2;0
WireConnection;27;0;3;0
WireConnection;12;5;19;0
WireConnection;12;2;18;0
WireConnection;12;18;17;0
WireConnection;12;17;15;0
WireConnection;12;24;16;0
WireConnection;28;0;4;0
WireConnection;21;0;12;0
WireConnection;21;1;4;4
WireConnection;5;0;27;0
WireConnection;5;1;28;0
WireConnection;26;0;21;0
WireConnection;26;1;5;0
WireConnection;22;0;26;0
WireConnection;22;3;3;4
WireConnection;0;0;22;0
ASEEND*/
//CHKSM=3AEED58159A9C53960F5E6D1BBE33889B74E67E4