CocosCreator Shader学习（二）：流光效果

流光效果

原理：在以图片左下角为原点的坐标系中， 假设流光就是一条直线（斜截式:y=kx+b），那么只需要把直线和图片所在矩形的交点全部找出来即可。

顶点着色器代码不用修改。

片元着色器代码如下：

CCProgram fs %{
  precision highp float;
  
  #include <alpha-test>

  in vec4 v_color;

  #if USE_TEXTURE
  in vec2 v_uv0;
  uniform sampler2D texture;
  #endif

  uniform inputData{
    float k;   //斜率k
    float b;   //y轴截距b
  };

  void main () {
    vec4 o = vec4(1, 1, 1, 1);
    //流光宽度
    float flickerWidth = 0.1;
    #if USE_TEXTURE
      o *= texture(texture, v_uv0);
      //直线斜截式： y = kx + b
      float y = k*v_uv0.x + b;
      //转换y轴坐标
      float y1 = 1.0 - v_uv0.y;
      if(y1 >= y && y1 <= y + flickerWidth){
        vec3 white = vec3(255, 255, 255);
        vec3 result = white * vec3(o.r, o.g, o.b);
        o = vec4(result, o.a);
      }
      #if CC_USE_ALPHA_ATLAS_TEXTURE
        o.a *= texture2D(texture, v_uv0 + vec2(0, 0.5)).r;
      #endif
    #endif

    o *= v_color;

    ALPHA_TEST(o);

    gl_FragColor = o;
  }
}%

由于流光效果是一个动态的，所以我们要不断改变输入参数b，来实现让流光在图片上移动的效果。

脚本代码如下：

const {ccclass, property} = cc._decorator;

@ccclass
export default class Cocos extends cc.Component {

    material: cc.Material = null;

    b:number = 1.0;
    bMax: number = 1.0;
    bMin: number = -1.0;

    start () {
        //获取材质
        this.material = this.node.getComponent(cc.Sprite).getMaterial(0);
        //设置参数k
        this.material.setProperty("k", 1);
    }

    update (dt) {
        if(this.node.active && this.material != null){
            //设置参数b
            this.material.setProperty("b", this.b);
        }
        this.b -= 0.03;
        if(this.b < this.bMin)this.b = this.bMax;
    }
}
​

实际效果图: