[小白自学]Shader-03-实现循环无缝滚动效果

功能描述:
实现纹理连续循环滚动的效果
效果:


参数:

// 主材质(默认)
mainTexture:    { value: white }
// 主颜色(默认)
mainColor:      { value: [1, 1, 1, 1], editor: { type: color } }
// 速度方向的无级调节(水平,垂直) 可正向,反向;
speed:          { value: [1,0], editor: { slide : true, range : [-10.0,10.0], step: 0.01 } }

核心思路:
根据时间值,对vu值进行平移。

vec4 frag () {
    
    // 根据时间修改贴图偏移
    vec2 uv_offset = v_uv;
    uv_offset -= cc_time.x * speed;
    // 判断超出范围
    uv_offset.x = uv_offset.x > 1.0 ? uv_offset.x - 1.0 : uv_offset.x;
    uv_offset.y = uv_offset.y > 1.0 ? uv_offset.y - 1.0 : uv_offset.y;
 
    vec4 col = mainColor * texture(mainTexture, uv_offset);
    return CCFragOutput(col);
  }

扩展:可以应用于场景内路标指示,广告牌滚动等的效果。

7赞

先赞再看~

以前我有这个shader,可以控制移动速度和方向。
后来用不了了,因为cocos新版不兼容老版本的shader。

这个shader写的对吗

坐标不是一直在增大吗,只是减去了1.0吗

有完整版吗?按照你这样写怎么什么都看不到

有的兄弟,有的,该作者已经免费上传到store了,可以点个赞。

没有搜到,有地址发下吗?

coccos商店搜索2d shader基础功能入门篇

谢谢,ai帮我写好了 :grinning: