码迷,mamicode.com
首页 > 编程语言 > 详细

[Unity] Simple Shaderlab 1 || uGui用简单shader - 流光

时间:2015-11-11 14:40:39      阅读:3963      评论:0      收藏:0      [点我收藏+]

标签:

最近经常要给2D游戏写一些新的shader来做特效。比起粒子特效,着色器特效可能更适合UI和2D元素上的表现。

先看一下效果:

技术分享

关于在shaderlab种实现流光的文章很多,但很少有给UI实现的,并且常常只是Add一层颜色,并没有去表现“光”的效果。

以下是shader全文,后面会介绍一些细节:

 1 Shader "Sprites/Default_Flowlight"
 2 {
 3     Properties
 4     {
 5         [PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
 6         _Color ("Tint", Color) = (1, 1, 1, 1)
 7         [MaterialToggle] PixelSnap ("Pixel snap", float) = 0
 8         
 9         _FlowlightTex ("Flowlight Texture", 2D) = "white" {}
10         _Power ("Power", float) = 1
11         _SpeedX ("SpeedX", float) = 1
12         _SpeedY ("SpeedY", float) = 0
13     }
14 
15     SubShader
16     {
17         Tags
18         { 
19             "Queue"="Transparent" 
20             "IgnoreProjector"="True" 
21             "RenderType"="Transparent" 
22             "PreviewType"="Plane"
23             "CanUseSpriteAtlas"="True"
24         }
25 
26         Cull Off
27         Lighting Off
28         ZWrite Off
29         Blend One OneMinusSrcAlpha
30 
31         Pass
32         {
33         CGPROGRAM        
34             #pragma vertex vert
35             #pragma fragment frag
36             #pragma multi_compile _ PIXELSNAP_ON
37             #include "UnityCG.cginc"
38             
39             struct appdata_t
40             {
41                 float4 vertex : POSITION;
42                 float4 color : COLOR;
43                 float2 texcoord : TEXCOORD0;        
44             };
45 
46             struct v2f
47             {
48                 float4 vertex : SV_POSITION;
49                 fixed4 color : COLOR;
50                 half2 texcoord : TEXCOORD0;
51                 half2 texflow : TEXCOORD1;
52             };
53             
54             fixed4 _Color;
55             sampler2D _FlowlightTex;
56             fixed4 _FlowlightTex_ST;
57             fixed _SpeedX;
58             fixed _SpeedY;
59 
60             v2f vert(appdata_t IN)
61             {
62                 v2f OUT;
63                 OUT.vertex = mul(UNITY_MATRIX_MVP, IN.vertex);
64                 OUT.texcoord = IN.texcoord;
65                 OUT.texflow = TRANSFORM_TEX(IN.texcoord, _FlowlightTex);
66                 OUT.texflow.x += _Time * _SpeedX;
67                 OUT.texflow.y += _Time * _SpeedY;
68                 OUT.color = IN.color * _Color;
69                 #ifdef PIXELSNAP_ON
70                 OUT.vertex = UnityPixelSnap (OUT.vertex);
71                 #endif
72 
73                 return OUT;
74             }
75 
76             sampler2D _MainTex;
77             float _Power;
78 
79             fixed4 frag(v2f IN) : SV_Target
80             {
81                 fixed4 c = tex2D(_MainTex, IN.texcoord);
82                 fixed4 cadd = tex2D(_FlowlightTex, IN.texflow) * _Power;
83                 cadd.rgb *= c.rgb;
84                 c.rgb += cadd.rgb;
85                 c.rgb *= c.a;
86                 return c;
87             }
88         ENDCG
89         }
90     }
91 }

由于是从Unity自带shader“Sprites-Default”修改而来,故名字只是在其后加上“-Flowlight”。

 

其实流程和正常的UV滚动叠加没有什么区别,注意要用UI传入的UV计算纹理坐标。

66  OUT.texflow = TRANSFORM_TEX(IN.texcoord, _FlowlightTex);

之后两张纹理在frag中叠加输出,需要注意的只有一行:

83  cadd.rgb *= c.rgb;

很多shader作者在写流光的时候只是把叠加纹理的颜色+=在了主纹理上,但如果先将叠加纹理乘以主纹理的颜色,就会让暗色变得更暗,更符合光吸收的感觉,再配合Power控制光强度可以更好地表现光。

当然这样一来的副作用就是流光纹理本身的颜色就没有用了,因为变成了只用灰度,毕竟本身目的只是在打光。需要颜色的话可以在这行的下一行乘以自定义颜色,这里就不写了。

以上是需要留意的部分。

 

具体流程上,在vert中先获得流光纹理的纹理坐标OUT.texflow,而后使用_Time时间参数让纹理坐标随时间偏移,注意偏移操作在顶点着色vert部分进行而不是在片段着色frag,这样不会浪费计算量。

之后在frag中进行叠加将流光纹理与主纹理叠加,注意是c.rgb += cadd.rgb,否则c += cadd会导致透明通道也被叠加上去,对下一步c的预乘透明通道产生影响。

 

在纹理的制作上,因为是循环滚动,所以为了不会让光出现过度频繁,需要在流光纹理的旁边加上合适宽度的黑色区域,下面是本文开头动图使用的流光纹理。

技术分享

它在光线纹理(正方形纹理)的左侧加上了等宽的黑色区域,让纹理变为了2x1的宽度,这样再将材质的Tiling改为X:0.5  Y:1就可以让光出现的频率减半了,当然还可以把光线区域在PS再缩小为66%,这样就可以让光线的出现频率变为最初的1/3了(别忘了改Tilling),其他频率以此类推。

 

下一次会分享一下uGui用的溶解。说是uGui用,其实使用了Sprite Shader的东西都可以用。

[Unity] Simple Shaderlab 1 || uGui用简单shader - 流光

标签:

原文地址:http://www.cnblogs.com/twelveh/p/4955745.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!