本文已向 Cocos论坛社区大佬「lxb229」获得授权，感谢他的精彩分享！
粗解 Cocos Creator 2.1.2 Shader
最近空闲的时候，研究了一下 2.1.2 版本的 shader，这里单独提出来一个说明一下，希望对想了解 2.1.2 的童鞋有所帮助。
首先，新建一个Effect，从上往下说吧。
现在 2.1.2 的 Creator把 effect 做成了和 Component 类似的组件，在 properties 中，这里可以设置外部属性，在编译器中暴露出来。
在当前版本中，可以在properties中设置的类型有：float、vec2、vec3、color4。
第二，在顶点着色器 vs 中，属性名称有所变化，请看下图：
这里特别注意的是 uniform mat4 cc_matViewProj第三，在片元着色器 fs 中，基本和 2.0.x 的没有什么变化，只需要把外部属性对应在 properties 中即可，看下图所示：
注意，在 properties 中类型为 color4 的，这里是vec4。
最后，就是调用的问题，现在因为 shader 还不稳定，所以官方也没有把 API 完善，有点问题。我只写了一个需要刷新 time 的外部属性的例子，你也可以照着写，像下面一样：
//ShaderTime.ts
const {ccclass, property} = cc._decorator;
@ccclass
export default class ShaderTime extends cc.Component {
_material: any;
@property
max = 65535;
start() {
this._material = this.node.getComponent(cc.Sprite).sharedMaterials[0];
}
private _start = 0;
protected update(dt) {
if (this.node.active && this._material) {
this._setShaderTime(dt);
}
}
private _setShaderTime(dt) {
let start = this._start;
if (start > this.max) start = 0;
start += 0.01;
this._material.effect.setProperty('time', start);
this._start = start;
}
}哦，对了 Effect 设置好了，直接拖拽就可以用了，看下实际运行效果：
注意：因为切圆的 shader 在浏览器上的图片顶点取值好像有问题(实测：在 8 * 8 以下 和 513*513 以上的图片尺寸，在 Web 上没问题)，所以我重新放了一个外发光的 shader，供大家参考。
在Web显示有问题的解决方案 ：
// 关掉引擎的动态图集（慎用，这会导致游戏的其他drawcall 增高）
cc.dynamicAtlasManager.enabled = false;
本文工程下载地址：https://forum.cocos.com/uploads/default/original/3X/f/a/fa9f5a9ac9aa8a8db3d1781cb6d79b046e0a6252.zip
论坛原文地址：
https://forum.cocos.com/t/creator-2-1-2-shader/82058
结语
感谢 Cocos 论坛社区中的「lxb229」分享的精彩文章，让我们受益非浅，相信你还能从中获得更多的启发。「Creator星球游戏开发社区」感谢你的支持，也欢迎你来公众号上投稿，分享你的经验与技术，愿我们一起在前进的道路上，砥砺前行，共同成长！
ator星球游戏开发社区
长按二维码，关注我们！
