分享一个透明渐变切换图片的一个效果

效果图:


补上有背景时的效果:

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

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);
        }
    }
}
40赞

zan ~~~~

补上一张有背景时的效果图:

ui呢,层级呢,光给个代码不知道怎么摆场景啊

橙光游戏…?

和UI没什么关系,就是一个shader,怎么用都可以。

1赞

不是的

cc.macro.VERTEX_ATTRIB_POSITION
cc.macro.VERTEX_ATTRIB_COLOR
cc.macro.VERTEX_ATTRIB_TEX_COORDS
这几个值是啥

哦,我知道了

:scream:

mark,看起来不错

谢谢,学会了一点

手动点赞

cocos引擎不是有这个效果

额。。。是么?怎么用?

没有,creator没有这种东西,支持楼主的shader, 学习了

这个shader可以收藏一下,回头用起来

哦,还以为有,白忙活了。

:grinning:

mark