最近开始学cocos shader 学了小有所成, 做了个ui边框流光效果分享一下
先上效果 ,引擎版本3.5.2
讲一下基本思路,
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的精灵资源即可
附effect文件