之前有不少夥伴反饋 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 特效文件！
在公衆號上回復【ShaderHelper2】獲取項目，感謝你的支持，在前進的道路上我們一起砥礪前行，共同成長！
Creator星球遊戲開發社區
長按二維碼，關注我們！