之前有不少伙伴反馈 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.  

  9. cc.Class({

  10. extends: cc.Component,

  11.  

  12. properties: {

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

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

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

  16. },

  17.  

  18. start () {

  19. if (!this.effect) {

  20. return;

  21. }

  22.  

  23. //获取精灵组件

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

  25. if (!sprite) {

  26. return;

  27. }

  28.  

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

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

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

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

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

  34. material.effectAsset = this.effect;

  35. material.name = this.effect.name;

  36.  

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

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

  39. sprite.setMaterial(0, material);

  40.  

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

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

  43.  

  44. //初始化参数

  45. this.time = 0;

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

  47. },

  48.  

  49. /**

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

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

  52. */

  53. update () {

  54.  

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

  56. return;

  57. }

  58.  

  59.  

  60. if (this.flag) {

  61. this.time += this.speed;

  62. } else {

  63. this.time -= this.speed;

  64. }

  65.  

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

  67. this.flag = 0;

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

  69. this.flag = 1;

  70. }

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

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

  73. },

  74. });

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