新版ShaderHelper，终于支持 Creator 2.1.2 了！

之前有不少伙伴反馈 ShaderHelper 在 2.1.2 版本中不能工作，非常抱歉，让你们久等了！

ShaderHelper 组件在 2.0.x 版本中有不少伙伴在使用，其实这里要感谢「Colin」大神，我是在他的git开源版本基本上修改而来的；同时要感谢「大掌教」，ShaderHelper中集成了大多数Shader特效是在「大掌教」的仓库中搬运过来的。

这一次，我仍然做一名搬运工，将 Cocos Creator 2.1.2 范例合集中的 custom_material 案例认真研究了一下，重新编写了新版本的 ShaderHelper2 终于可以让 ShaderHelper 又活过来了！下面是 ShaderHelper2 完整组件代码：

1. let ShaderProperty = cc.Class({

2. name: 'ShaderProperty',

3. properties: {

4. key: '',

5. value: '',

6. }

7. });

8. cc.Class({

9. extends: cc.Component,

10. properties: {

11. effect: cc.EffectAsset, //effect资源

12. speed: 0.01, //控制动态Shader的time参数

13. props: [ShaderProperty], //shader参数

14. },

15. start () {

16. if (!this.effect) {

17. return;

18. }

19. //获取精灵组件

20. let sprite = this.node.getComponent(cc.Sprite);

21. if (!sprite) {

22. return;

23. }

24. //实例化一个材质对象

25. let material = new cc.Material();

26. //在材质对象上开启USE_TEXTURE定义

27. material.define('USE_TEXTURE', true);

28. //为材质设置effect，也是就绑定Shader了

29. material.effectAsset = this.effect;

30. material.name = this.effect.name;

31. //将材质绑定到精灵组件上，精灵可以绑定多个材质

32. //这里我们替换0号默认材质

33. sprite.setMaterial(0, material);

34. //从精灵组件上获取材质，这步很重要，不然没效果

35. this.material = sprite.getMaterial(0);

36. //初始化参数

37. this.time = 0;

38. this.props.forEach(item => this.material.setProperty(item.key, item.value));

39. },

40. /**

41. * 在update事件中更新材质参数

42. * 不同的Shader这里可能需要重写

43. */

44. update () {

45. if (!this.material || !this.speed) {

46. return;

47. }

48. if (this.flag) {

49. this.time += this.speed;

50. } else {

51. this.time -= this.speed;

52. }

53. if (this.time >= 1.2) {

54. this.flag = 0;

55. } else if (this.time <= -0.2 ) {

56. this.flag = 1;

57. }

58. //更新Shader代码中的time参数

59. this.material.setProperty('time', this.time);

60. },

61. });

由于比较仓促，ShaderHelper2 使用上还与老版本有所差异，同时支持的Shader特殊只有两个，也欢迎你向 ShaderHelper2 提交更多的 effect 特效文件！

在公众号上回复【ShaderHelper2】获取项目，感谢你的支持，在前进的道路上我们一起砥砺前行，共同成长！

Creator星球游戏开发社区

长按二维码，关注我们！