Cocos creator 中使用自定义shader

发表于2017-12-13
评论0 6.2k浏览

想免费获取内部独家PPT资料库?观看行业大牛直播?点击加入腾讯游戏学院游戏程序行业精英群

711501594

为了减少游戏资源,在游戏中会使用一些shader来做协助,下面是一个将图片变灰shader,以此来看看如何在cocos creator中使用和管理shader。

Shader文件管理

在assets中新建一个文件夹resources,然后在resources中新建一个Shader文件夹。将所shader文件放在Shader文件夹中。

现在在Shader文件夹中新建两个文件gray.vert.js和gray.frag.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; 
}
`

// 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;
}
`


Shader使用

为了方便使用,写一个ShaderUtils,使用时只需要传入修改shader的Sprite和shader的名字。

// ShaderUtils.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;

为了避免同一个shader程序多次创建,这里做了一个缓冲,若是已有的就不再创建,直接使用。

方便对比,在HelloWorld的场景中再加一个Sprite,绑定到spGray,在spGray上使用上面写的shader。

// HelloWorld.js
var ShaderUtils = require("ShaderUtils");
cc.Class({
    extends: cc.Component,
    properties: {
        spGray: cc.Sprite
    },
    onLoad: function () {
        ShaderUtils.setShader(this.spGray, "gray");
    },
    update: function (dt) {
    },
});


效果如图:


spine上使用shader

有人在论坛里问,怎么把shader用在龙骨上,这里补充下。

var ShaderUtils = require("ShaderUtils");
cc.Class({
    extends: cc.Component,
    properties: {
        sp: sp.Skeleton
    },
    onLoad: function () {
        ShaderUtils.setShader(this.sp, "gray");
    },
});

如图,下编辑器中加入龙骨,骨骼动画直接用的官方实例。

运行效果:

原文链接

著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

如社区发表内容存在侵权行为,您可以点击这里查看侵权投诉指引

游戏学院公众号二维码
腾讯游戏学院
微信公众号

提供更专业的游戏知识学习平台