shader 动画之 loading 特效! Cocos Creator !
手把手带你玩转
shader动画！！文末视频讲解+完整代码。
效果预览
实现步骤
准备阶段
为了制作动画时需要用到纹理中的uv坐标。特别注意的是，在Cocos Creator的Sprite组件中设置了uv坐标。
并且，sprite 组件需要有spriteFrame时，才会有uv坐标。
我们就用新建项目后，这个自带的资源作为 sprite 的 spriteFrame 吧。
需要注意的是，在移除该资源的Packable参数后可防止出现uv坐标不正确的错误情况
接着创建 effect 节点，并生成 material 材质参数以及 sprite 精灵节点。随后将这些效果与材质和图形元素进行连接。
画一个圆
编辑刚刚创建好的 effect , 开始编写。
uv 坐标系的原点在这里是左上角，u轴向右，v轴向下，范围是0~1。
一般会把uv坐标范围转成-0.5~0.5这个范围。这样，图片的正中心刚好是(0,0)。
vec2 uv = v_uv0 - 0.5;通过内置函数 length 和 step 可以帮助我们画一个圆。
让距离中心距离小于0.2的点的alpha值设为1.0，代码如下。
vec4 o = vec4(1, 1, 1, 1);
vec2 uv = v_uv0 - 0.5;
o.a = 1.0 - step(0.2, length(uv));
gl_FragColor = o;
这看起来有点锯齿，可以用 smoothstep 消除锯齿。
float radius = 0.2;
o.a = 1.0 - smoothstep(radius-0.01*radius, radius+0.01*radius, length(uv));
把圆围成一个圈
先看看怎么平移这个圆。
只需要减去一个坐标，就会往右下角移动。
可以把画一个圆封装成一个方法。
float circle(in vec2 uv, in float radius){
return 1.0 - smoothstep(radius-0.01*radius, radius+0.01*radius, length(uv));
}接着，在页面上绘制一组圆，并将这些圆排列成一个环状结构。如果将这个环均分为若干等分，则每个分割点对应一个角度值。根据所设定的半径以及对应的中心角的角度大小关系，则能够计算出各个偏移坐标的具体数值。
float R = 0.35;
float radius = 0.05;
vec2 pos = vec2(0.0);
float rotation = 0.0;
const float count = 8.0;
for(float i = 0.0; i<count; i++){
rotation = 2.0*PI*i/count;
pos = vec2(R*cos(rotation), R*sin(rotation));
o.a += circle(uv-pos, radius);
}
动起来
cocos creator 中内置了一个 cc_time 变量，表示运行了多少秒。
float time = cc_time.x;利用这个时间参数，我们可以给角度添加一个时间变化。
rotation = 2.0*PI*i/count + time*2.0*PI/5.0;
当然还可以添加一些颜色，大小的变化。
rotation = 2.0*PI*i/count + time*2.0*PI/4.0;
pos = vec2(R*cos(rotation), R*sin(rotation));
o.a += circle(uv-pos, radius * (sin(rotation*0.45)+1.0)/3.0 + radius/3.0);
o.r += o.a * (sin(i/count + time + PI*6.0/3.0)+ 1.0)/2.0;
o.g += o.a * (sin(i/count + time + PI*4.0/3.0)+1.0)/2.0;
o.b += o.a * (sin(i/count + time + PI*2.0/3.0)+1.0)/2.0;
小结
动手实践！在实践中成长！在模仿中学习！
简述其实现步骤如下：第一步绘制一个静止的圆形；第二步绘制多个同心圆；第三步动态调整各圆的位置，并依据时间参数进行实时更新。
本人记录了自己在Cocos Creator v2.3.3环境下进行技术探索的过程——具体实现了"shader 动画之 loading"功能的技术分享。
更****
多****
精****
彩****
2019年精选作品！提供 GitHub 链接！ #wechat_redirect
游戏娱乐：《不停歇的小球》——深度解析：关键技术探讨 源代码奉上
该抛物线上焦点定位的呈现方式！
此等实体以抛掷式移动
探索贪吃蛇游戏世界：深入解析蛇类角色的路径规划与代码实现
转载请保留文末二维码和完整代码获取方式！
完整代码: https://github.com/baiyuwubing/cocos-creator-examples/tree/master/shader_animation
点击“阅读原文”查看完整代码
我就知道你“在看”▼