使用Creator2.0的材质系统实现几个Shader，效果如下：
-
正常效果(Sprite自带)：
-
灰度效果（Sprite自带）：
-
高亮叠加效果
-
雨水效果
Sprite默认提供了两种材质效果，就是上面的正常效果，和灰度效果，个人觉得实现得有点局限性：比如我想实现一种效果（如上面的高亮），只能通过外部强制指定材质来实现，如果Sprite换了另一张纹理，或是Sprite同时有一个Animation组件用于播放序列帧，那么Sprite内部会强制切换回正常效果。
所以，我Hook了Sprite的实现，增加自定义材质的逻辑，代码在： SpriteHook
继承自引擎的Material类，实现了一个CustomMaterial，这个材质类可以实现各种不同的效果。
高亮效果
{
var name = 'overlay';
var mat = this.spImage.getMaterial(name);
if (!mat) {
var CustomMaterial = require("CustomMaterial");
mat = new CustomMaterial(name);
this.spImage.setMaterial(name, mat);
}
this.spImage.node.color = new cc.Color().fromHEX("#FBC00C")
this.spImage.activateMaterial(name);
}雨效果
// 雨珠效果
this.resetImage();
this._start = Date.now();
var name = 'rainheart';
var mat = this.spImage.getMaterial(name);
if (!mat) {
var CustomMaterial = require("CustomMaterial");
mat = new CustomMaterial(name,
[
{ name: 'texSize', type: renderer.PARAM_FLOAT2 },
{ name: 'iResolution', type: renderer.PARAM_FLOAT3 },
{ name: 'iTime', type: renderer.PARAM_FLOAT },
],
[
{ name: 'HAS_HEART', value: false },
{ name: 'USE_POST_PROCESSING', value: true }
]);
this.spImage.setMaterial(name, mat);
}
this.spImage.activateMaterial(name);
mat.texture.update({flipY: true});
var iResolution = new cc.Vec3(this.spImage.node.width, this.spImage.node.height, 0);
var texSize = new cc.Vec2(this.spImage.node.width, this.spImage.node.height);
mat.setParamValue("iResolution", iResolution);
mat.setParamValue("texSize", texSize);Shaders目录中只有两个，有兴趣的欢迎增加更多的效果：）
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent