UGUI中实现用shader做UI特效

来源：互联网发布：淘宝店耳机维修靠谱吗编辑：程序博客网时间：2024/05/07 10:32

我使用UGUI有一段时间了，这两天在看李总的Shader教程，自己动手把流光效果完成之后突然想到能不能在UGUI中使用Shader来做UI特效，然后自己就动手尝试着做了一下，完成后运行图如下：

这是一个有动态流光效果的Button，我只是截了个屏，下面放上制作方式。

首先需要效果的shader，我是在李总博客（http://www.cnblogs.com/crazylights/p/4040965.html）里shader_flowlight_step5.shader这个的基础上修改的，感谢李总通俗易懂的教程，下面放上修改后的shader代码：

Shader "TestShader/UIFlowLight" {      Properties {          _FlowTex("Light Texture(A)",2D)="black"{}          _MaskTex("Mask Texture(A)",2D)="white"{}          _uvAddSpeed("",float)=2      }      SubShader {          Tags { "RenderType"="Transparent" "Queue"="Transparent" }          LOD 200          Blend SrcAlpha OneMinusSrcAlpha          CGPROGRAM          #pragma surface surf Lambert            sampler2D _FlowTex;          sampler2D _MaskTex;          float _uvAddSpeed;            struct Input {              float2 uv_MaskTex;          };            void surf (Input IN, inout SurfaceOutput o) {              float2 uv=IN.uv_MaskTex;              uv.x /= 2;              uv.x -= _Time.y * _uvAddSpeed;              float flow = tex2D(_FlowTex, uv).a;              float mask = tex2D(_MaskTex, IN.uv_MaskTex).a;                o.Emission= float3(flow,flow,flow)*mask;              o.Alpha = flow * mask;          }          ENDCG      }   }

然后制作一个Material，使用刚才的那个shader，将那一根光线和你需要做效果的图片放上去，光线是李总GitHub上下载的，下面的mask就放你Button的那个Sprite，Sprite的背景要透明的才有效果：

然后将基本的UI界面搭好，在你需要添加特效的对象下面添加UGUI的RawImage对象，将RawImage的Material设置为刚才创建的Material，再设置RawImage的位置，我现在将它添加在Button下面，如下：

最后在Canvas下面选择渲染模式为摄像机，并把相应的摄像机给拖进去，注意摄像机的Culling Mask一定要选上UI哦。现在大功告成，运行就会看到有流光效果的Button了。

这是我第一次写博客，欢迎大家来交流讨论，共同进步！

0 0