cocos2dx-js灰化高亮等等

来源：互联网发布：数据脱敏编辑：程序博客网时间：2024/06/04 01:01

// 给节点设置自定义的Shadercc.Node.prototype.setCustomShader = function (vsh, fsh, enable) {    var node = this;    var children;    var i;    // 现在写的这些shader在web版中不兼容，一下子没找到兼容方法，    // 暂时先把web版屏蔽一下，不然点击之后就不显示了，不太爽    if (! cc.sys.isNative) {        return;    }    // 判断是不是widget    if (this.getVirtualRenderer != null && this.getVirtualRenderer().getSprite != null) {        node = this.getVirtualRenderer().getSprite();    } else if (this.getVirtualRenderer != null) {        node = this.getVirtualRenderer();    }    _nodeSetCustomShader(node, vsh, fsh, enable);    children = this.getChildren();    for (i in children) {        if (children[i] instanceof ccui.TextAtlas) {            // todo 高亮效果会导致数字标签不显示，所以暂时屏蔽掉，对效果也没什么影响            continue;        }        children[i].setCustomShader(vsh, fsh, enable);    }    //控件内部节点    if (this.getProtectedChildren != null) {        children = this.getProtectedChildren();        for (i in children) {            children[i].setCustomShader(vsh, fsh, enable);        }    }};

// 给动画设置Shaer, 动画的置灰跟普通节点的置灰不太一样，所以需要特殊设置ccs.Armature.prototype.setCustomShader = function (vsh, fsh, enable) {    var bones; // 动画的骨骼    var bone;    var key;    var list, display, i;    // 现在写的这些shader在web版中不兼容，一下子没找到兼容方法，    // 暂时先把web版屏蔽一下，不然点击之后就不显示了，在太爽    if (! cc.sys.isNative) {        return;    }    bones = this.getBoneDic();    for (key in bones) {        bone = bones[key];                // 因为我们是序列动画，如果只取当前显示的node进行处理的话，只有当动画        // 播放到当前帧时才会有效果，播放到其他帧时没有效果，所以要取整个list进行处理        list = bone.getDisplayManager().getDecorativeDisplayList();                for (i in list) {            display = list[i].getDisplay();                        _nodeSetCustomShader(display, vsh, fsh, enable);        }    }};

// 一个基础函数，用于实现下面的setCustomShader功能var _nodeSetCustomShader = function (node, vsh, fsh, enable) {    var nodeProgram, program, _fsh;    if (node == null) {        return;    }    nodeProgram = node.getShaderProgram();    // 创建shader    if (enable === true) {        _fsh = fsh;        // 为ETCA特殊处理一下        if (nodeProgram === cc.shaderCache.getProgram("ShaderPositionTextureColorEtcAlpha_noMVP")) {            node.__alphaTexture = true;            if (_fsh === res.HighlightFsh)                _fsh = res.HighlightEtcaFsh;        }        program = cc.shaderCache.getProgram(vsh + _fsh);        if (program == null) {            program = new cc.GLProgram(vsh, _fsh);            program.link();            program.updateUniforms();            // shader创建后缓存起来，之后要用时每次从缓存中取，之前每次都创建一次，导致内存泄漏            cc.shaderCache.addProgram(program, vsh + _fsh);        }    } else {        if (node.__alphaTexture) {            program = cc.shaderCache.getProgram("ShaderPositionTextureColorEtcAlpha_noMVP");        } else {            program = cc.shaderCache.getProgram("ShaderPositionTextureColor_noMVP");        }    }    if (program != null/* && nodeProgram != null*/)        node.setShaderProgram(program);};

// 效果脚本

灰化：

gray.fsh

#ifdef GL_ESprecision mediump float;#endifvarying 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;}

gray.vsh

attribute vec4 a_position;attribute vec2 a_texCoord;attribute vec4 a_color;#ifdef GL_ESvarying lowp vec4 v_fragmentColor;varying mediump vec2 v_texCoord;#elsevarying vec4 v_fragmentColor;varying vec2 v_texCoord;#endifvoid main(){    gl_Position = CC_PMatrix * a_position;v_fragmentColor = a_color;v_texCoord = a_texCoord;}

// 将一个节点高亮

highlight.fsh

#ifdef GL_ESprecision mediump float;#endifvarying vec4 v_fragmentColor;varying vec2 v_texCoord;void main(){    vec4 c = v_fragmentColor * texture2D(CC_Texture0, v_texCoord);    gl_FragColor.xyz = c.xyz * 2.0;    gl_FragColor.w = c.w;}

highlight.vsh

attribute vec4 a_position;attribute vec2 a_texCoord;attribute vec4 a_color;#ifdef GL_ESvarying lowp vec4 v_fragmentColor;varying mediump vec2 v_texCoord;#elsevarying vec4 v_fragmentColor;varying vec2 v_texCoord;#endifvoid main(){    gl_Position = CC_PMatrix * a_position;v_fragmentColor = a_color;v_texCoord = a_texCoord;}

highlightEtca.fsh

#ifdef GL_ESprecision mediump float;#endifvarying vec4 v_fragmentColor;varying vec2 v_texCoord;void main(){    vec4 v4Colour = texture2D(CC_Texture0, v_texCoord);    v4Colour.a = texture2D(CC_Texture1, v_texCoord).r;    vec4 c = v_fragmentColor * v4Colour;    gl_FragColor.xyz = c.xyz * 2.0;    gl_FragColor.w = c.w;}

// 将一个节点高亮, 主要是针对IU条件
uihighlight.fsh

#ifdef GL_ESprecision mediump float;#endifvarying vec4 v_fragmentColor;varying vec2 v_texCoord;void main(){    vec4 c = v_fragmentColor * texture2D(CC_Texture0, v_texCoord);    gl_FragColor.xyz = c.xyz * 1.2;    gl_FragColor.w = c.w;}

uihighlight.vsh

attribute vec4 a_position;attribute vec2 a_texCoord;attribute vec4 a_color;#ifdef GL_ESvarying lowp vec4 v_fragmentColor;varying mediump vec2 v_texCoord;#elsevarying vec4 v_fragmentColor;varying vec2 v_texCoord;#endifvoid main(){    gl_Position = CC_PMatrix * a_position;v_fragmentColor = a_color;v_texCoord = a_texCoord;}

// 将一个节点按照sin曲线高亮

highlightSin.fsh

#ifdef GL_ESprecision mediump float;#endif#define speed 15#define scale 1.5varying vec4 v_fragmentColor;varying vec2 v_texCoord;void main(){    vec4 c = v_fragmentColor * texture2D(CC_Texture0, v_texCoord);    gl_FragColor.rgb = c.rgb * (1 + abs(sin(CC_Time.x * speed)) * scale);    gl_FragColor.a = c.a;}

highlightSin.vsh

attribute vec4 a_position;attribute vec2 a_texCoord;attribute vec4 a_color;#ifdef GL_ESvarying lowp vec4 v_fragmentColor;varying mediump vec2 v_texCoord;#elsevarying vec4 v_fragmentColor;varying vec2 v_texCoord;#endifvoid main(){    gl_Position = CC_PMatrix * a_position;v_fragmentColor = a_color;v_texCoord = a_texCoord;}

0 0