CCEffect %{
  techniques:
  - passes:
    - vert: sprite-vs:vert
      frag: sprite-fs:frag
      depthStencilState:
        depthTest: false
        depthWrite: false
      blendState:
        targets:
        - blend: true
          blendSrc: src_alpha
          blendDst: one_minus_src_alpha
          blendDstAlpha: one_minus_src_alpha
      rasterizerState:
        cullMode: none
      properties:
}%

CCProgram sprite-vs %{
  precision highp float;
  #include <cc-global>

  in vec3 a_position;
  in vec2 a_texCoord; 
  
  out vec2 v_uv;

  vec4 vert () {
    vec4 pos = vec4(a_position, 1);

    //这个逻辑反向理解，从本地-》世界-》投影
    pos = cc_matProj * cc_matView * pos; 

    v_uv = a_texCoord;
    return pos;
  }
}%

CCProgram sprite-fs %{
  precision highp float;
  #include <cc-global> 
  in vec2 v_uv;

  #pragma builtin(local)
  layout(set = 2, binding = 11) uniform sampler2D cc_spriteTexture; 

  vec4 frag () {  
    //mod 函数返回0~10范围的数值，fract函数返回0~1范围的数值 ,cc_time.x表示游戏运行的时间，以秒为单位，小数点后精度到毫秒
    float offsetY = fract( mod(cc_time.x, 10.0) * 1.0);

    //uv取值范围实在 0~1 ，所有偏移值也取 0~1 之间
    vec2 v_uv = v_uv + vec2(0.0, offsetY );

    //根据uv信息，从纹理中取颜色信息
    vec4 color = texture(cc_spriteTexture, v_uv);  
    return color; 
  }
}%

保姆说流程

1、创建 材质 和 着色器

2、 创建Sprite 、 挂载着色器 、挂载纹理

3、 链接材质和着色器

4、把开头的代码替换到 effect2.effect 文件内

5、看效果