美文网首页Lua与cocoscocos 2dx
给quick-cocos的drawnode支持alpha

给quick-cocos的drawnode支持alpha

作者: 禹子歆 | 来源:发表于2018-08-24 17:51 被阅读1次

    可以透明是人类的终极梦想

    画五维图

    很久很久很久以前,策划要求我给他们做个功能,按照英雄当前的属性值,显示一个五维图,我拍了拍手里的砖头,爽快的答应了。
    大概就长下边这样


    截图

    这很简单啊,display.newPolygon走一个,半小时搞定(主要是为了要对上她画的这几个点,妈耶累死我)。

    缩放特效

    然后策划又来了,说我要个缩放特效,让这个东西从小放大,我又摸了摸手里的砖头,点头答应了,也很简单啊,scaleTo一下就好了。

    透明度变化

    接着策划又㕛叒来了,说,不仅要缩放,还要有透明度的变化。我心想好吧,砸嘛又不能砸死,只能做了。于是对创建的五维图进行了setOpacity,然鹅,并没有变化。

    凝重

    怎么办呢?

    这个时候,要先冷静下来,总之要先找到Time Machine(钻垃圾桶

    查找问题所在

    既然设置不成功,肯定就是它不支持,那我来看看为啥不支持吧,首先打开CCDrawNode.cpp,看下draw方法是怎么写的。
    嗯,不出所料,是用OpenGL画的,那我们看下它的shader是咋写的,onDraw里只有个glProgram,所以还得继续找找。

        auto glProgram = getGLProgram();
        glProgram->use();
        glProgram->setUniformsForBuiltins(transform);
    

    既然是直接get,那肯定是init的时候设置了,看看init函数。

    bool DrawNode::init()
    {
        _blendFunc = BlendFunc::ALPHA_PREMULTIPLIED;
    
        setGLProgramState(GLProgramState::getOrCreateWithGLProgramName(GLProgram::SHADER_NAME_POSITION_LENGTH_TEXTURE_COLOR));
        
        ensureCapacity(512);
        ...
    }
    

    那么这个SHADER_NAME_POSITION_LENGTH_TEXTURE_COLOR是对应的哪个shader呢?继续找,搜索一下SHADER_NAME_POSITION_LENGTH_TEXTURE_COLOR,发现它是在CCGLProgramCache.cpp里被设置的。

    void GLProgramCache::loadDefaultGLPrograms()
    {
        ...
        //
        // Position, Legth(TexCoords, Color (used by Draw Node basically )
        //
        p = new (std::nothrow) GLProgram();
        loadDefaultGLProgram(p, kShaderType_PositionLengthTexureColor);
        _programs.insert( std::make_pair(GLProgram::SHADER_NAME_POSITION_LENGTH_TEXTURE_COLOR, p) );
        ...
    }
    

    再看看loadDefaultGLProgram里的具体实现:

    void GLProgramCache::loadDefaultGLProgram(GLProgram *p, int type)
    {
        switch (type) {
            ...
            case kShaderType_PositionLengthTexureColor:
                p->initWithByteArrays(ccPositionColorLengthTexture_vert, ccPositionColorLengthTexture_frag);
                break;
            ...
        }
    }
    

    破案了,用的是ccPositionColorLengthTexture_vert这个shader,再搜一下这个,是ccShader_PositionColorLengthTexture.vert这个文件,目录是cocos/renderer/ccShader_PositionColorLengthTexture.vert,系统性的shader好像都在cocos/renderer/下边,加载是在CCShaders.cpp里加载的。

    修改问题

    好,咱来看看这个shader怎么写的:

    const char* ccPositionColorLengthTexture_vert = STRINGIFY(
    
    \n#ifdef GL_ES\n
    attribute mediump vec4 a_position;
    attribute mediump vec2 a_texcoord;
    attribute mediump vec4 a_color;
    
    varying mediump vec4 v_color;
    varying mediump vec2 v_texcoord;
    
    \n#else\n
    
    attribute vec4 a_position;
    attribute vec2 a_texcoord;
    attribute vec4 a_color;
    
    varying vec4 v_color;
    varying vec2 v_texcoord;
    
    \n#endif\n
    
    void main()
    {
        v_color = vec4(a_color.rgb * a_color.a, a_color.a);
        v_texcoord = a_texcoord;
    
        gl_Position = CC_MVPMatrix * a_position;
    }
    );
    
    

    很明显了,是v_color = vec4(a_color.rgb * a_color.a, a_color.a);这句的问题,我们只要把alpha加上即可,将以上shader改成:

    const char* ccPositionColorLengthTexture_vert = STRINGIFY(
    
    \n#ifdef GL_ES\n
    attribute mediump vec4 a_position;
    attribute mediump vec2 a_texcoord;
    attribute mediump vec4 a_color;
    
    varying mediump vec4 v_color;
    varying mediump vec2 v_texcoord;
    
    \n#else\n
    
    attribute vec4 a_position;
    attribute vec2 a_texcoord;
    attribute vec4 a_color;
    
    varying vec4 v_color;
    varying vec2 v_texcoord;
    
    uniform float u_alpha;
    
    \n#endif\n
    
    void main()
    {
        v_color = vec4(a_color.rgb * a_color.a * u_alpha, a_color.a * u_alpha);
        v_texcoord = a_texcoord;
    
        gl_Position = CC_MVPMatrix * a_position;
    }
    );
    

    既然增加了一个uniform u_alpha,那就要在程序里设置它。
    打开CCDrawNode.cpp
    onDrawonDrawGLLineonDrawGLPoint方法里都加上一句

    glProgram->setUniformLocationWith1f(glProgram->getUniformLocation("u_alpha"), _displayedOpacity / 255.0);
    

    重新编译player,再来一次setOpacity,果然如我们所想的一样,成功了。

    最后

    策划看了一眼,说,加上透明度变化好丑哦,去掉吧。


    敲里lailai

    相关文章

      网友评论

        本文标题:给quick-cocos的drawnode支持alpha

        本文链接:https://www.haomeiwen.com/subject/ymjiiftx.html