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

流光效果

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

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

片元着色器代码如下：

1. CCProgram fs %{

2. precision highp float;

3.  

4. #include <alpha-test>

5.  

6. in vec4 v_color;

7.  

8. #if USE_TEXTURE

9. in vec2 v_uv0;

10. uniform sampler2D texture;

11. #endif

12.  

13. uniform inputData{

14. float k; //斜率k

15. float b; //y轴截距b

16. };

17.  

18. void main () {

19. vec4 o = vec4(1, 1, 1, 1);

20. //流光宽度

21. float flickerWidth = 0.1;

22. #if USE_TEXTURE

23. o *= texture(texture, v_uv0);

24. //直线斜截式： y = kx + b

25. float y = k*v_uv0.x + b;

26. //转换y轴坐标

27. float y1 = 1.0 - v_uv0.y;

28. if(y1 >= y && y1 <= y + flickerWidth){

29. vec3 white = vec3(255, 255, 255);

30. vec3 result = white * vec3(o.r, o.g, o.b);

31. o = vec4(result, o.a);

32. }

33. #if CC_USE_ALPHA_ATLAS_TEXTURE

34. o.a *= texture2D(texture, v_uv0 + vec2(0, 0.5)).r;

35. #endif

36. #endif

37.  

38. o *= v_color;

39.  

40. ALPHA_TEST(o);

41.  

42. gl_FragColor = o;

43. }

44. }%

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

脚本代码如下：

1. const {ccclass, property} = cc._decorator;

2.  

3. @ccclass

4. export default class Cocos extends cc.Component {

5.  

6. material: cc.Material = null;

7.  

8. b:number = 1.0;

9. bMax: number = 1.0;

10. bMin: number = -1.0;

11.  

12. start () {

13. //获取材质

14. this.material = this.node.getComponent(cc.Sprite).getMaterial(0);

15. //设置参数k

16. this.material.setProperty("k", 1);

17. }

18.  

19. update (dt) {

20. if(this.node.active && this.material != null){

21. //设置参数b

22. this.material.setProperty("b", this.b);

23. }

24. this.b -= 0.03;

25. if(this.b < this.bMin)this.b = this.bMax;

26. }

27. }

28. ​

实际效果图: