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

• 2019 年 10 月 4 日
• 笔记

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

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

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

let ShaderProperty = cc.Class({      name: 'ShaderProperty',      properties: {          key: '',          value: '',      }  });    cc.Class({      extends: cc.Component,        properties: {          effect: cc.EffectAsset,   //effect资源          speed: 0.01,              //控制动态Shader的time参数          props: [ShaderProperty],  //shader参数      },        start () {          if (!this.effect) {              return;          }            //获取精灵组件          let sprite = this.node.getComponent(cc.Sprite);          if (!sprite) {              return;          }            //实例化一个材质对象          let material = new cc.Material();          //在材质对象上开启USE_TEXTURE定义          material.define('USE_TEXTURE', true);          //为材质设置effect，也是就绑定Shader了          material.effectAsset = this.effect;          material.name = this.effect.name;            //将材质绑定到精灵组件上，精灵可以绑定多个材质          //这里我们替换0号默认材质          sprite.setMaterial(0, material);            //从精灵组件上获取材质，这步很重要，不然没效果          this.material = sprite.getMaterial(0);            //初始化参数          this.time = 0;          this.props.forEach(item => this.material.setProperty(item.key, item.value));      },        /**       * 在update事件中更新材质参数       * 不同的Shader这里可能需要重写       */      update () {            if (!this.material || !this.speed) {              return;          }              if (this.flag) {              this.time += this.speed;          } else {              this.time -= this.speed;          }            if (this.time >= 1.2) {              this.flag = 0;          } else if (this.time <= -0.2 ) {              this.flag = 1;          }          //更新Shader代码中的time参数          this.material.setProperty('time', this.time);      },  });

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