[小不溜] 用shader做一条流动的线条

这里给大家一个玩具,如何在2d中加一条流动的线条:

效果展示:

GIF2

GIF1

主要技术实现就是,用一张渐变纹理,过滤当前展示值域就能做到此效果:

curve

关键函数:

 vec4 flow() {
    vec4 baseColor = CCSampleWithAlphaSeparated(cc_spriteTexture, uv0);
    vec4 flowColor = CCSampleWithAlphaSeparated(flowTexture, uv0);
    
    float curFlow = mod(cc_time.x * speed, 1.0);
    float dist = abs(mod(curFlow - flowColor.r + 1.0, 1.0));
    float blend = step(dist, trail) * (1.0-dist/trail);
    return baseColor + blendColor * blend * step(0.01, flowColor.a);
  }

工具资源:
curve-vfx.zip (13.5 KB)

Tips:
我ps能力有限,不会去除边缘过渡色,有颜色溢出。

中午没午睡,头疼,匿了!

8赞

赞一个,至少是一种思路

吧alpha处理干净,应该可以用的

等会儿抄作业

翻车了,这两函数是哪里来的,有啥用?2.4.8好像没有


还有大佬你那个代码没看懂,能不能讲解下

我改成这样,shader不报错了,但是跑起来没啥效果

你最好拷贝一份2.x的sprite的shader再改,这个3.x的我不晓得能不能行

渐变边框流动效果 是不是更这个效果一样,我研究不出来,我只能研究出画一个边框

原理不一样