给quick-cocos的drawnode支持alpha

画五维图

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

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

缩放特效

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

透明度变化

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

凝重
怎么办呢?

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

查找问题所在

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

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

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

1
2
3
4
5
6
7
8
9
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里被设置的。

1
2
3
4
5
6
7
8
9
10
11
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里的具体实现:

1
2
3
4
5
6
7
8
9
10
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怎么写的:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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改成:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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方法里都加上一句

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

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

最后

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

文章目录
  1. 1. 画五维图
  2. 2. 缩放特效
  3. 3. 透明度变化
  4. 4. 查找问题所在
  5. 5. 修改问题
  6. 6. 最后
|