寫在前面程剥,學(xué)習(xí)shader有一段時(shí)間了劝枣,算是基本入門了吧,就來(lái)寫一些簡(jiǎn)單效果的shader來(lái)練習(xí)一下唄织鲸。第一次我們來(lái)做一個(gè)掃光的效果舔腾,最為常見的效果。
原理
原理很簡(jiǎn)單:移動(dòng)掃光貼圖的UV既可搂擦,怎么移動(dòng)呢稳诚?我們?cè)趕hader申明了一個(gè)貼圖后,在控制面板中就可以看Tiling和Offset兩個(gè)選項(xiàng)瀑踢。tiling可以理解為在當(dāng)前背景大小中此貼圖可以平鋪多少個(gè)扳还,分為x軸和y軸的分布。offset就是偏移咯丘损。
這里指的注意的是我們需要把圖片的格式設(shè)置成repeat普办,這樣移動(dòng)offset就是重復(fù)出現(xiàn)工扎。
然后我們就更改貼圖的offset就可以了徘钥,在shader中一個(gè)_Time的參數(shù)吧,跟mono中的Time類差不多肢娘,這個(gè)移動(dòng)代碼我們放在頂點(diǎn)函數(shù)中呈础,我們的計(jì)算公式:
//掃光貼圖頂點(diǎn)顏色坐標(biāo) += 時(shí)間值 * 速度
OUT.texFlowLight.x+=_Time * _SpeedX;
OUT.texFlowLight.y+=_Time * _SpeedY;
代碼
我們創(chuàng)建一個(gè)unlit shader,在屬性中添加上我們掃光需要的一些屬性:
// FlowLight
_FLowLightTex("Move Texture",2D)="white"{}//掃光貼圖
_FLowLightColor("FlowLight Color",Color)=(0,0,0,1)//掃光顏色
_Power("Power",float)=1//掃光大小
_SpeedX("SpeedX",float)=1//X軸移動(dòng)速度
_SpeedY("SpeedY",float)=0//Y軸移動(dòng)速度
這里設(shè)置了一個(gè)Power變量來(lái)空中掃光的亮度橱健,這個(gè)值會(huì)跟掃光貼圖融合而钞。然后我們?cè)O(shè)置標(biāo)簽與透明圖設(shè)置。
Tags
{
"Queue"="Transparent"
"IgnoreProjector"="True"
"RenderType"="Transparent"
"PreviewType"="Plane"
"CanUseSpriteAtlas"="True"
}
Cull off
Lighting off
ZWrite off
Blend One OneMinusSrcAlpha
這里我們打開了混合透明的設(shè)置拘荡,如果我們不打開透明的話臼节,畫面中就是這樣的:
這里背景就永遠(yuǎn)是黑色的,由于我們的logo一般是有透明的部分,這里我們就需要把那部分的顏色作為一個(gè)透明的网缝。所以我們?cè)谶@里是需要打開透明通道的巨税,至于為什么這樣設(shè)置可以看看這個(gè)文章。
然后我們?cè)陧旤c(diǎn)函數(shù)添加移動(dòng):
// FlowLight
OUT.texFlowLight=TRANSFORM_TEX(IN.texcoord,_FLowLightTex);
OUT.texFlowLight.x+=_Time * _SpeedX;
OUT.texFlowLight.y+=_Time * _SpeedY;
最后在片元函數(shù)中做顏色的融合:
fixed4 col = tex2D(_MainTex, IN.texcoord);
// FlowLight
fixed4 cadd=tex2D(_FLowLightTex,IN.texFlowLight)*_Power*_FLowLightColor;
cadd.rgb*=col.rgb;
col.rgb +=cadd.rgb;
我們的做法是把原圖的顏色與掃光圖的顏色做了融合生成掃光貼圖最終的顏色粉臊,然后再與主貼圖的顏色相疊加草添。
然后就完成了,是不是覺得很簡(jiǎn)單呢扼仲,其實(shí)寫下來(lái)的感受就是---道理我都懂远寸,但是就是不會(huì)寫。哈哈哈屠凶。今天就先這樣咯驰后。