Cocos Shader 高性能轉(zhuǎn)場(chǎng)特效合集!免費(fèi)開(kāi)源!二次元卡牌必備!

引言：Cocos Creator 3.8.0 正式版本正在緊鑼密鼓地準(zhǔn)備中。在等待新版本的同時(shí)，社區(qū)的高產(chǎn)大戶(hù)孫二喵同學(xué)給大家?guī)?lái)了 7 種炫酷的 Cocos Shader 轉(zhuǎn)場(chǎng)特效方案，并附帶了源碼。

本文是孫二喵用 AIGC 制作的卡牌游戲項(xiàng)目中的產(chǎn)物，有興趣的同學(xué)可以查看之前的文章： AIGC 制作 3D 貪吃蛇游戲 ?和? AIGC 制作卡牌游戲 。

前言

我利用 AIGC 工具配合 Cocos Creator 制作的卡牌游戲項(xiàng)目已接近尾聲。

但最近遇到一個(gè)很頭疼的問(wèn)題，就是如何又流暢、又生動(dòng)地實(shí)現(xiàn)轉(zhuǎn)場(chǎng)效果。

在經(jīng)過(guò)一番摸索后，最終我使用了 Cocos Shader 來(lái)實(shí)現(xiàn)，借助 GPU 的運(yùn)算能力，這些轉(zhuǎn)場(chǎng)特效可以高效地運(yùn)行在各個(gè)平臺(tái)。

在這個(gè)過(guò)程中，我實(shí)驗(yàn)了多個(gè)效果，一共寫(xiě)了 7 個(gè)轉(zhuǎn)場(chǎng)特效，現(xiàn)在分享給大家，希望對(duì)大家有所幫助。

預(yù)覽地址： http://learncocos.com/shader1/

接下來(lái)就讓我們看看具體的實(shí)現(xiàn)以及對(duì)應(yīng)的效果。

注意：參與轉(zhuǎn)場(chǎng)效果的圖片不能參與合圖，合圖會(huì)因?yàn)?UV 被轉(zhuǎn)換導(dǎo)致效果不對(duì)。在 Assets 中選擇對(duì)應(yīng)圖片，在屬性面板中取消勾選 Packable 屬性即可。

01 線(xiàn)性轉(zhuǎn)場(chǎng)

轉(zhuǎn)場(chǎng)的 Shader 需要兩張圖片，主圖片使用默認(rèn)的精靈，需要轉(zhuǎn)場(chǎng)的圖片，我們可以新建一個(gè) subTexure 屬性。

線(xiàn)性轉(zhuǎn)場(chǎng)效果相對(duì)比較簡(jiǎn)單，關(guān)鍵的 Shader 代碼如下：

      
        #include?<builtin/uniforms/cc-global>

const?float?tranSize?=?0.1;?
vec4?LinearTransition(vec4?color,vec4?mixcolor,?vec2?uv,?float?progression,bool?isUVX)?{
??float?dir?=?isUVX?uv.x:uv.y;
??float?f?=?dir*(1.0-tranSize)?+?tranSize?-?(progression?*?(1.0?+?tranSize));
??float?m?=?smoothstep(0.,?-tranSize,f);
??color?=?mix(color,mixcolor,m);
??return?color;
}

      
    

這里使用了 smoothstep 函數(shù)，我們先看下 smoothstep 的源碼：

      
        float?smoothstep(float?t1,?float?t2,?float?x)?{
??//?Scale,?bias?and?saturate?x?to?0..1?range
??x?=?clamp((x?-?t1)?/?(t2?-?t1),?0.0,?1.0);?
??//?Evaluate?polynomial
??return?x?*?x?*?(3?-?2?*?x);
}

      
    

從源碼中可以看出，它根據(jù) x 在 t1 和 t2 之間的距離，返回 [0,1] 的平滑過(guò)渡值。

這里使用了 f = dir *(1-s)+s-p*(1+s) 使選定的 uv 軸向，返回在進(jìn)度參數(shù)下的 混合系數(shù) 。

最終實(shí)現(xiàn)的效果如下：

02 風(fēng)吹線(xiàn)性過(guò)度

在線(xiàn)性轉(zhuǎn)場(chǎng)的基礎(chǔ)上加入隨機(jī)的風(fēng)吹效果，Cocos Shader 代碼如下：

      
        #include?<builtin/uniforms/cc-global>

//?Variables
const?float?tranSize?=?0.25;?

float?rand?(vec2?co)?{
??return?fract(sin(dot(co.xy?,vec2(12.9898,78.233)))?*?43758.5453);
}

vec4?WindTransition(vec4?color,vec4?mixcolor,?vec2?uv,?float?progression)?{
??float?r?=?rand(vec2(0,?uv.y));
??float?m?=?smoothstep(0.0,?-tranSize,?uv.x*(1.0-tranSize)?+?tranSize*r?-?(progression?*?(1.0?+?tranSize)));
??color?=?mix(color,mixcolor,m);
??return?color;
}

      
    

最終實(shí)現(xiàn)的效果如下：

03 圓形過(guò)度

      
        #include?<builtin/uniforms/cc-global>

float?rule(vec2?coord)
{
????vec2?uv2?=?coord?-?vec2(0.5,?0.5);
????float?angle?=?atan(uv2.x,?uv2.y);
????return?angle?/?2.0?/?3.1416?+?0.5;
}

vec4?CircleTransition(vec4?color,vec4?mixcolor,?vec2?uv,?float?progression)?{
??float?rule?=?rule(uv);
??float?vague?=?0.2;
??float?phase?=?progression?*?(1.0?+?vague);
??float?p0?=?smoothstep(rule,?rule?+?vague,?phase);
??color?=?color?*?(1.0?-?p0)?+?mixcolor?*?p0;
??return?color;
}

      
    

效果見(jiàn)下：

04 隨機(jī)方塊過(guò)度

      
        float?smoothness?=?0.5;?//?0-1

float?rand?(vec2?co)?{
??return?fract(sin(dot(co.xy?,vec2(12.9898,78.233)))?*?43758.5453);
}
const?float?tranSize?=?10.;

vec4?RandomTransition(vec4?color,vec4?mixcolor,?vec2?uv,?float?progression)?{
??float?r?=?rand(floor(vec2(tranSize)?*?uv));
??float?m?=?smoothstep(0.0,?-smoothness,?r?-?(progression?*?(1.0?+?smoothness)));
??color=??mix(color,?mixcolor,?m);
??return?color;
}

      
    

效果見(jiàn)下：

05 規(guī)則方塊過(guò)度

這個(gè)效果來(lái)自 shadertoy

      
        #include?<builtin/uniforms/cc-global>

const?float?tranSize?=?32.;

vec4?BoxTransition(vec4?color,vec4?mixcolor,?vec2?uv,?float?progression)?{
??vec2?fragCoord?=?gl_FragCoord.xy;
??vec2?blockPos?=?vec2(progression)?*?cc_screenSize.xy;
??vec2?p?=?ceil(fragCoord?/?tranSize)?*?tranSize;?
??float?progress?=?(p.x?+?p.y)?/?(blockPos.x?+?blockPos.y);
??vec2?v?=?abs(fragCoord?-?p?+?vec2(tranSize/2.));
??if?(max(v.x,?v.y)?*?progress?<?tranSize/2.)?{
??????color?=?mixcolor;
??}
??return?color;
}

      
    

效果見(jiàn)下：

06 棱形過(guò)度

      
        #include?<builtin/uniforms/cc-global>

const?float?tranSize?=?32.;

vec4?SideTransition(vec4?color,vec4?mixcolor,?vec2?uv,?float?progression)?{
??uv.x?=?1.0?-?uv.x;
??float?xFraction?=?fract(gl_FragCoord.x?/?tranSize);
??float?yFraction?=?fract(gl_FragCoord.y?/?tranSize);
??
??float?xDistance?=?abs(xFraction?-?0.5);
??float?yDistance?=?abs(yFraction?-?0.5);

??if?(xDistance?+?yDistance?+?uv.x?+?uv.y?<?progression?*?4.0)?{
??????color?=?mixcolor;
??}
??return?color;
}

      
    

效果演示：

07 燃燒轉(zhuǎn)場(chǎng)

注意：此效果由于未使用第二張圖，因此可以合圖

      
        float?fr(vec2?c,?float?seed)?
{
return?fract(43.0?*?sin(c.x?+?7.0?*?c.y)?*?seed);
}

float?fn(vec2?p,?float?seed)
{
????vec2?i?=?floor(p),?w?=?p?-?i,?j?=?vec2(1.0,?0.0);
????w?=?w?*?w?*?(3.0?-?w?-?w);
????return?mix(mix(fr(i,?seed),?fr(i?+?j,?seed),?w.x),?mix(fr(i?+?j.yx,?seed),?fr(i?+?1.0,?seed),?w.x),?w.y);
}

float?fa(vec2?p,?float?seed)?
{
????float?m?=?0.0,?f?=?2.0;
????for?(int?i?=?0;?i?<?6;?i++)?{
????m?+=?fn(f?*?p,?seed)?/?f;?
????f?+=?f;
????}
????return?m;
}
vec4?BurnOut(vec4?MainColor,?vec2?UV,?float?Intensity)?
{
????float?t?=?fract(Intensity?*?0.9999);
????float?cc?=?smoothstep(t?/?1.2,?t?+?0.1,?fa(3.5?*?UV,?1.));
????vec4?c?=?vec4(cc);
????c?=?MainColor?*?c;
????c.r?=?mix(c.r,?c.r?*?15.0?*?(1.0?-?c.a)?*?8.0,?Intensity);
????c.g?=?mix(c.g,?c.g?*?10.0?*?(1.0?-?c.a)?*?4.0,?Intensity);
????c.b?=?mix(c.b,?c.b?*?5.0?*?(1.0?-?c.a),?Intensity);
????return?vec4(c.rgb,?c.a);
}

      
    

演示效果：

你可以把這些效果，應(yīng)用于畫(huà)面截圖、場(chǎng)景切換、戰(zhàn)斗開(kāi)始、卡牌溶解、抽獎(jiǎng)系統(tǒng)等等。

希望上面的分享能夠給大家的項(xiàng)目帶來(lái)效果和開(kāi)發(fā)效率上的提升，使大家可以用 Cocos Creator 更快地制作出更好的產(chǎn)品。

08 代碼下載

上面的源碼已在 Cocos Store 上免費(fèi)開(kāi)源！

今天的分享就到這里，快去下載吧！點(diǎn)擊閱讀原文可直達(dá)源碼頁(yè)面。