基于cocoscreater 2.0X使用shader 实现流光效果

最新推荐文章于 2024-08-15 17:20:34 发布

huadu0ber

最新推荐文章于 2024-08-15 17:20:34 发布

阅读量2.2k

点赞数 1

分类专栏： cocoscreater2.0.x shader 流光

本文链接：https://blog.csdn.net/huadudududud/article/details/88631355

版权

本文介绍了如何在CocosCreator 2.0.8版本中利用Shader创建流光效果。参照大神的教程，通过新建saoguang.frag.js、shaderMaterial.js和saoguang.js文件，将流光效果应用到项目中的图片上，实现视觉特效。

摘要由CSDN通过智能技术生成

首先是根据大神

https://blog.csdn.net/qq_15682489/article/details/84843304

https://blog.csdn.net/xufeng0991/article/details/79942979写的shader修改部分内容，

实现流光效果

cocoscreater 2.0.8版本中新建一个helloworld项目

1.新建saoguang.frag.js

//saoguang.vert.js
module.exports = `
uniform mat4 viewProj;
attribute vec3 a_position;
attribute vec2 a_uv0;
varying vec2 uv0;
void main () {
    vec4 pos = viewProj * vec4(a_position, 1);
    gl_Position = pos;
    uv0 = a_uv0;
}`

2.新建saoguang.frag.js

//saoguang.trag.js
module.exports =
    `

uniform sampler2D texture;
varying vec2 uv0;
uniform float sys_time;
void main()
{
    vec4 src_color = texture2D(texture, uv0).rgba;
    float width = 0.2;
    float start = sys_time * 1.2;
    float strength = 0.02;
    float offset = 0.2;
    
    if( uv0.x < (start - offset * uv0.y) &&  uv0.x > (sta