CocosCreator1.x使用自定义流光shader

1.x使用shader与2.x使用shader有所不同，2.x的使用例子很多，1.x少些，这里列出使用流光shader例子。

1.创建顶点shader

image

代码：

module.exports =

`
attribute vec4 a_position;
attribute vec2 a_texCoord;
attribute vec4 a_color;
varying vec2 v_texCoord;
varying vec4 v_fragmentColor;
void main()
{
    gl_Position = CC_PMatrix * a_position;
    v_fragmentColor = a_color;
    v_texCoord = a_texCoord;
}
`

2.创建片段shader

image

代码：

module.exports = 

`

#ifdef GL_ES

precision mediump float;

#endif

varying vec2 v_texCoord;

uniform float sys_time;

void main()

{

    vec4 src_color = texture2D(CC_Texture0, v_texCoord).rgba;

    float width = 0.2;

    float start = sys_time * 1.2;

    float strength = 0.02;

    float offset = 0.2;

    if( v_texCoord.x < (start - offset * v_texCoord.y) &&  v_texCoord.x > (start - offset * v_texCoord.y - width))

    {

        vec3 improve = strength * vec3(255, 255, 255);

        vec3 result = improve * vec3( src_color.r, src_color.g, src_color.b);

        gl_FragColor = vec4(result, src_color.a);

    } else {

        gl_FragColor = src_color;

    }

}

`

3.为了方便使用，写一个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));
            glProgram.initWithString(vert, frag);
            if (!cc.sys.isNative) {  
                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);
        return glProgram;
    },
};

module.exports = ShaderUtils;

4.创建对象组件设置shader，控制效果

代码：

var ShaderUtils = require("ShaderUtils");

cc.Class({

extends: cc.Component,

properties: {

    sp: cc.Sprite,

},

onLoad : function(){

    this._time = 0;

    this._sin = 0;

    this._program = ShaderUtils.setShader(this.sp, "Fluxay");

},

update (dt) {

    this._time += 2 * dt;

    this._program.use();

    this._sin = Math.sin(this._time);

    if(this._sin > 0.99){

        this._sin = 0;

        this._time = 0;

    }

    if(cc.sys.isNative){

        var glProgram_state = cc.GLProgramState.getOrCreateWithGLProgram(this._program);

        glProgram_state.setUniformFloat("sys_time", this._sin);

    } else {

        this._program.setUniformLocationWith1f(this._program.getUniformLocationForName("sys_time"), this._sin);

    }

},

});

效果：

image

感谢关注个人博客