分享一个UI边框流光效果

最近开始学cocos shader 学了小有所成, 做了个ui边框流光效果分享一下

先上效果 ,引擎版本3.5.2

kuang

讲一下基本思路,
1.从图中心点(0.5,0.5)出发做向量kuang指向(1,1) ,不断对其进行旋转 ,
2.同时从每个点都做一条从中心点出发的向量org
3. 点乘kuang和org , 点乘所得的值大于某个阈值则为我们显示流光的范围

.
.
.

然后上代码逐行分析 , 文末会上effect文件.

    vec4 color  = texture(cc_spriteTexture, uv0);      //采样精灵颜色  

    vec2 dir =  normalize(vec2(1.,1.)-vec2(0.5,0.5));  
    //定义一个从uv中心点出发的向量   ,成为向量kuang


    float angle =fract(cc_time.x*0.2)*6.28;     //  用cc_time ,来表现增加的弧度值 

    dir = vec2(dir.x*cos(angle)-dir.y*sin(angle),dir.x*sin(angle)+dir.y*cos(angle)) ;  
    // 把上面的向量进行旋转 , 公式可参考向量旋转

    vec2 uvFromCenter =  uv0-vec2(0.5,0.5);              
    // 使用uv0 来定义图上每一个uv点 和中心点所组成的向量  ,称为向量org

    float dirColor = abs(dot( uvFromCenter,dir)); 
    //点乘org和kuang向量 ,然后用abs把负值的也掰为正的,实现有两条相对的流光

    dirColor*=color.a;      //  乘一下kuang的透明通道 , 剔除不在框上的颜色 

    dirColor= pow(dirColor,2.);    //pow一下不然流光范围太大   

    vec4 finalkuangColor= v_color*dirColor;     // 流光颜色叠加我们的主颜色 

    color += color*finalkuangColor*kuangColorStrength;     // 对流光颜色进行增亮, 不然太暗  

    return color;
 }  

.
好了 文章结束了

.
.
使用的时候新建自定义材质 , 指向我们的effect
然后调整你需要的主颜色 和kuang的精灵资源即可

image

附effect文件

22赞

kuang.zip (17.5 KB)

3赞

不错呦,感谢分享

膜拜大佬~

太强了!!!

互拜互拜~

互强互强~

我运行效果为什么是闪烁?

请问shader会影响性能吗?这种效果cocos动画和spine也能做,请问有什么优势吗?

不能勾选合图

嗯,去掉packable就行了

优势就是美术可以省点活 :upside_down_face:

向大佬看齐

好吧,就是程序多干一点咯 :smiley:

用着ui上你可能感觉不出来,但是如果用来角色上,你就会发现,好几把酷炫

大佬 2.x 能不能用

没用过2.x哈, 东西应该差挺多的 ,需要你自己去研究一下 , 实现的原理就是上面那几步

好的,之后试试

要在 2.x 上用,要改一下。

大佬,有详细一点的吗 借鉴