cocos creater shader

利用shader可以使图片置灰和高亮，可以利用这一点来节省游戏图片资源（比如在游戏领取按钮，无法领取的时候可以选择置灰效果）

这里是我们需要创建的目录结构
1. helloworld.js 中的内容如下

这里是绑定在Canvas的文件
var ShaderUtils = require("ShaderUtils");
//加载里一个文件中的方法（这里只要能够require到就可以了）
cc.Class({
    extends: cc.Component,
    properties: {
        spGray: cc.Sprite,
        //这就是编辑器中的图片
    },
    onLoad: function () {
        // 使用其中的方法置灰
        ShaderUtils.setShader(this.spGray, "gray");
    },
});

1. gray.frag.js 中的内容

// gray.frag.js
module.exports =
`
#ifdef GL_ES
precision lowp float;
#endif

varying vec4 v_fragmentColor;
varying vec2 v_texCoord;
void main()
{
    vec4 c = v_fragmentColor * texture2D(CC_Texture0, v_texCoord);
    gl_FragColor.xyz = vec3(0.2126*c.r + 0.7152*c.g + 0.0722*c.b);
    gl_FragColor.w = c.w;
}
`

只要复制到其中就可以
3. gray.vert.js 内容如下

// gray.vert.js
module.exports =
`
attribute vec4 a_position;
attribute vec2 a_texCoord;
attribute vec4 a_color;
varying vec4 v_fragmentColor; 
varying vec2 v_texCoord; 
void main() 
{ 
    gl_Position = CC_PMatrix * a_position;
    v_fragmentColor = a_color; 
    v_texCoord = a_texCoord; 
}
`

最后一个文件是对另外两个文件中的引用
4. ShaderUtils.js 文件的内容

// gray.frag.js
var ShaderUtils = {
    shaderPrograms: {},
    setShader: function(sprite, shaderName) {
        var glProgram = this.shaderPrograms[shaderName];
        if (!glProgram) {
            glProgram = new cc.GLProgram();
            //这边是对文件的引用
            var vert = require(cc.js.formatStr("%s.vert", shaderName));
            //对文件的引用
            var frag = require(cc.js.formatStr("%s.frag", shaderName));
            if (cc.sys.isNative) {  
                glProgram.initWithString(vert, frag);
            } else {  
                 glProgram.initWithVertexShaderByteArray(vert, frag);
                glProgram.addAttribute(cc.macro.ATTRIBUTE_NAME_POSITION, cc.macro.VERTEX_ATTRIB_POSITION);  
                glProgram.addAttribute(cc.macro.ATTRIBUTE_NAME_COLOR, cc.macro.VERTEX_ATTRIB_COLOR);  
                glProgram.addAttribute(cc.macro.ATTRIBUTE_NAME_TEX_COORD, cc.macro.VERTEX_ATTRIB_TEX_COORDS);  
            }
            glProgram.link();  
            glProgram.updateUniforms();
            this.shaderPrograms[shaderName] = glProgram;
        }
        sprite._sgNode.setShaderProgram(glProgram);
    },
};
module.exports = ShaderUtils;

运行就可以看到灰色的图片
效果图：

这里其中的代码并非原创（如有雷同请见谅），记下只是为了下次自己使用的时候可以用到。