Unity UGUI煙霧效果

2021-08-05 19:48:56 字數 2310 閱讀 3202

效果:

**如下:

shader "ui/unlit/addflowtex"

_color("tint", color) = (1, 1, 1, 1)

[materialtoggle] pixelsnap("pixel snap", float) = 0

/* ui */

_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

/* -- */

}subshader

cull off

lighting off

zwrite off

blend one oneminussrcalpha

colormask[_colormask]

/* ui */

stencil

/* -- */

pass

;struct v2f

;fixed4 _color;

sampler2d _maintex;

float4 _maintex_st;

/* flowtex */

sampler2d _flowtex;

float _movespeed;

float _amscale;

fixed4 _flowlightcolor;

float _width;

/* --------- */

//如果使用圖集中的,需要設定一下引數

float _widthrate;

float _xoffset;

float _heightrate;

float _yoffset;

float2 _tiling;

bool _usecliprect;

float4 _cliprect;

float _clipsoftx;

float _clipsofty;

fixed4 frag(v2f in) : sv_target

/* --------- */

/* flowtex*/

//將uv由圖集中的變換到0-1

float2 uv = (in

.texcoord - float2(_xoffset, _yoffset)) / float2(_widthrate, _heightrate);

//新增正弦擾動

float offsety = sin(uv.x * 6.28)*_amscale;

uv = (uv + float2(_time.x*_movespeed, offsety))*_tiling;

//輪廓的限制,以0.5為中心,上下擴充套件

fixed temp = step(abs(uv.y - 0.5*_tiling.y), _width*0.5*_tiling.y);

//對煙霧圖進行取樣

fixed4 cadd = tex2d(_flowtex,uv)*temp;

/* //使用blend src,1-src

c.rgb = cadd.rgb*cadd.a* _flowlightcolor +c.rgb*(1-cadd.a);

*///使用blend add

c.rgb = cadd.rgb*cadd.a* _flowlightcolor + c.rgb

;/* --------- */

c.rgb *= c.a

; return c;

}endcg}}

}

**中有注釋,就不多做解釋了。這個shader有幾個特點:

1、支援ugui裁剪,在scrollview中可用。

2、支援疊加的編輯,可以重用遊戲中的資源,可填充顏色和tiling限制取樣區域。

3、支援疊加區域的編輯,由於只寫了橫向移動,所以只能編輯縱向的區域。

4、uv流動的同時,縱向uv擾動,讓效果更自然,並且按照擾動編輯疊加區域。

canvas煙霧效果學習

canvas實現的煙霧繚繞效果title smoke smoke canvas style head id main canvas實現的煙霧繚繞效果例項頁面h1 id body class light id content class show 展示h3 class smoke id smokeca...

flash漸變製作煙霧效果

1b 用漸變製作煙霧 1b 1b 效果 1b 這兒有幾個製作煙霧的方法,每一種技巧都基於煙霧自已的風格。你想將煙霧製作成 風格雲霧嗎?或者你想做成輕柔上飄的寫實的雲霧效果?乙個典型的捲曲角的形狀移動的煙霧又該怎樣做呢?在flash中有很多不同的方法可得到相同的結果,不管你是用as還是用動畫。flas...

flash格式化的煙霧效果製作

1b 流行的煙霧效果 流行幾乎總是被要求的動畫技巧。客戶常常要求基於現有的logo或公司標識的特別的藝術效果。這裡始終存在著挑戰,不僅只是使用藝術作品同時還使用好的動畫風格。乙個寫實的煙霧動畫看上去很好但它不一定是客戶喜歡的風格。這次我們創健乙個格式化煙霧效果,它仍然很簡單且效果不錯。1.最簡單的方...