CocosCreator实现划过的位置显示纹理

1、项目需求

项目需要有一个功能：是当一个光点走过的路径，这个路径的位置就都亮起来的功能。

 

2、资料内容

功能类似这位大神的橡皮擦功能：https://forum.cocos.org/t/2-0-8/74246

但是，项目的需求还要经过的路径周围有模糊的外边——也就是从中心到边缘越来越暗。

所以对于借鉴了网上大神的shader例子，类似以下的示例：

在大神的肩膀上做了一些改动，来实现项目的需求。

 

3、项目示例

以下是我自己的测试项目的示例：

（请忽略这渣渣的画质，懒得装录屏软件了）

 

4、项目代码

 

SliderPointLight.ts

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

2.  

3. @ccclass

4. export default class Follow_spot extends cc.Component {

5. @property(cc.Node)

6. bg: cc.Node = null;

7. material: cc.Material = null;

8. center: number[] = [0.5, 0.5];

9. testArr: number[] = [];

10.  

11. onLoad() {

12. this.material = this.bg.getComponent(cc.Sprite).getMaterial(0);

13. this.material.setProperty('wh_ratio', this.bg.width / this.bg.height);

14. this.material.setProperty('center', this.center);

15.  

16. //js 中最重要是这一句,这里参数是数组长度*数组里向量的维度

17. this.material.setProperty('colorArr', new Float32Array(400));

18. //这里设置的时候需要把数组里向量的分量展开到一个一维数组

19. this.material.setProperty('colorArr', []);

20.  

21. this.bg.on(cc.Node.EventType.TOUCH_MOVE, this.touchMoveEvent, this);

22. }

23.  

24. touchMoveEvent(evt: cc.Event.EventTouch) {

25. this.center[0] = evt.getLocation().x / this.bg.width;

26. this.center[1] = 1 - evt.getLocation().y / this.bg.height;

27. console.log(this.center);

28. this.material.setProperty('center', this.center);

29. if (this.testArr.length >= 400) {

30. this.testArr.shift();

31. this.testArr.shift();

32. }

33. this.testArr.push(this.center[0]);

34. this.testArr.push(this.center[1]);

35.  
36.  

37. //js 中最重要是这一句,这里参数是数组长度*数组里向量的维度

38. this.material.setProperty('colorArr', new Float32Array(this.testArr));

39. //这里设置的时候需要把数组里向量的分量展开到一个一维数组

40. this.material.setProperty('colorArr', this.testArr);

41. }

42. }

 

SliderPointLight.effect

1. CCEffect %{

2. techniques:

3. - passes:

4. - vert: vs

5. frag: fs

6. blendState:

7. targets:

8. - blend: true

9. rasterizerState:

10. cullMode: none

11. properties:

12. texture: { value: white }

13. wh_ratio: {

14. value: 1.78,

15. editor: {

16. tooltip: "宽高比"

17. }

18. }

19. blur: {

20. value: 0.35,

21. editor: {

22. tooltip: "光圈模糊程度"

23. }

24. }

25. radius: {

26. value: 0.5,

27. editor: {

28. tooltip: "光圈半径"

29. }

30. }

31. center: {

32. value: [0.5, 0.5],

33. editor: {

34. tooltip: "光圈起点"

35. }

36. }

37. colorArr: {value: [0.5,0.5,0.5,0.5]}

38. }%

39.  
40.  

41. CCProgram vs %{

42. precision highp float;

43.  

44. #include

45. #include

46.  

47. in vec3 a_position;

48. in vec4 a_color;

49. out vec4 v_color;

50.  

51. #if USE_TEXTURE

52. in vec2 a_uv0;

53. out vec2 v_uv0;

54. #endif

55.  

56. void main () {

57. vec4 pos = vec4(a_position, 1);

58.  

59. #if CC_USE_MODEL

60. pos = cc_matViewProj * cc_matWorld * pos;

61. #else

62. pos = cc_matViewProj * pos;

63. #endif

64.  

65. #if USE_TEXTURE

66. v_uv0 = a_uv0;

67. #endif

68.  

69. v_color = a_color;

70.  

71. gl_Position = pos;

72. }

73. }%

74.  

75. CCProgram fs %{

76.  

77. precision highp float;

78.  

79. #include

80.  

81. in vec4 v_color;

82.  

83. #if USE_TEXTURE

84. in vec2 v_uv0;

85. uniform sampler2D texture;

86. #endif

87.  

88. uniform ARGS{

89. float radius;

90. float blur;

91. vec2 center;

92. float wh_ratio;

93. };

94.  

95. //effect定义

96. uniform Metaball {

97. vec4 colorArr[100];

98. };

99.  

100. void main () {

101. vec4 o = vec4(1, 1, 1, 0);

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

103. o *= v_color;

104. float circle = radius * radius;

105. for(int i = 0; i < 100; i++) {

106. float colorX = colorArr[i].x;

107. float colorY = colorArr[i].y;

108. float rx = colorX * wh_ratio;

109. float ry = colorY;

110. float dis = (v_uv0.x * wh_ratio - rx) * (v_uv0.x * wh_ratio - rx) + (v_uv0.y - ry) * (v_uv0.y - ry);

111.  

112. o.a = smoothstep(circle, circle - blur, dis)+o.a;

113. }

114.  

115. gl_FragColor = o;

116. }

117. }%