cocos creator 1.x透明渐变效果实现

时间:2022-07-22
本文章向大家介绍cocos creator 1.x透明渐变效果实现,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

先来一个效果图:

再来一个带背景的:

代码如下,写的粗糙,有问题还请指出:

public static TRANSFER_VERT:string = `
    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; 
    }
    `;
public static TRANSFER_FRAG:string = `
    #ifdef GL_ES
    precision lowp float;
    #endif
    
    uniform float time;

    varying vec4 v_fragmentColor;
    varying vec2 v_texCoord;
    void main()
    {
        vec4 c = v_fragmentColor * texture2D(CC_Texture0, v_texCoord);
        gl_FragColor = c;

        float temp = v_texCoord.x - time;
        if (temp <= 0.0) {
            float temp2 = abs(temp);
            if (temp2 <= 0.2) {
                gl_FragColor.w = 1.0 - temp2/0.2;
            } else {
                gl_FragColor.w = 0.0;
            }
        } else {
            gl_FragColor.w = 1.0;
        }
    }
    `;
 
private _program:any;
private _time:number = 0;
    
start () {
    this.testShader();
}
testShader() {
    let bgSp:cc.Sprite = this.bgNode.getChildByName("bg").getComponent(cc.Sprite);
    this._program = new cc.GLProgram();
    
    if (cc.sys.isNative) {  
        this._program.initWithString(StoryHandlerScript.TRANSFER_VERT, StoryHandlerScript.TRANSFER_FRAG);
    } else {  
        this._program.initWithVertexShaderByteArray(StoryHandlerScript.TRANSFER_VERT, StoryHandlerScript.TRANSFER_FRAG);
        this._program.addAttribute(cc.macro.ATTRIBUTE_NAME_POSITION, cc.macro.VERTEX_ATTRIB_POSITION);  
        this._program.addAttribute(cc.macro.ATTRIBUTE_NAME_COLOR, cc.macro.VERTEX_ATTRIB_COLOR);  
        this._program.addAttribute(cc.macro.ATTRIBUTE_NAME_TEX_COORD, cc.macro.VERTEX_ATTRIB_TEX_COORDS);  
    }
    this._program.link();  
    this._program.updateUniforms();
    this._program.use();

    if (cc.sys.isNative) {  
        var glProgram_state = cc.GLProgramState.getOrCreateWithGLProgram(this._program);
        glProgram_state.setUniformFloat( "time", this._time );    
    } else {
        let time = this._program.getUniformLocationForName("time");
        this._program.setUniformLocationWith1f(time, this._time);
    }
    bgSp._sgNode.setShaderProgram(this._program);
}

update(dt){
    this._time += 0.02;
    if (this._program) {
        this._program.use();
        if (cc.sys.isNative) {
            var glProgram_state = cc.GLProgramState.getOrCreateWithGLProgram(this._program);
            glProgram_state.setUniformFloat( "time", this._time );    
        } else {
            let time = this._program.getUniformLocationForName("time");
            this._program.setUniformLocationWith1f(time, this._time);
        }
    }
}

以上就是全部代码。