【进击的Shader】【入门一】Cocos Shader Effect 实现Sprite 滚动效果

无情的搬砖机

已于 2024-01-31 17:43:40 修改

阅读量602

点赞数 6

分类专栏： cocoscreator 文章标签：游戏引擎 ui 程序人生

于 2024-01-23 20:16:42 首次发布

本文链接：https://blog.csdn.net/weixin_43677520/article/details/135779918

版权

cocoscreator 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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; 
  }
}%