cocos2dx3.2版本利用shader实现sprite灰态图的正确方法

最新推荐文章于 2019-01-09 18:48:07 发布

原创最新推荐文章于 2019-01-09 18:48:07 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

cocos2d-x 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了在cocos2dx 3.2版本中，如何使用shader轻松实现精灵的灰度效果。通过提供vert和frag文件的代码示例，展示了创建和应用GLProgram的过程，指出3.2版本中GLProgram预定义了一些uniform和VertexAttribs，简化了设置步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于cocos2dx生成灰图的方法网上可以搜到不少文章，但不得不吐槽一下都是抄来抄去，其实3.2版本的灰度shader非常简单。

代码我保持了2dx的一些风格，包括vert，frag文件命名规则和宏定义，这些在源码renderer目录都能找到。

首先是vert文件：

//ccShader_PositionTextureGray_.vert

const char* ccPositionTextureGray_vert = STRINGIFY(
attribute vec4 a_position;
attribute vec2 a_texCoord;
attribute vec4 a_color;

\n#ifdef GL_ES\n
varying lowp vec4 v_fragmentColor;
varying mediump vec2 v_texCoord;
\n#else\n
varying vec4 v_fragmentColor;
varying vec2 v_texCoord;
\n#endif\n

void main()
{
gl_Position = CC_MVPMatrix * a_position;
v_fragmentColor = a_color;
v_texCoord = a_texCoord;
}
);

然后是frag文件:

//ccShader_PositionTextureGray_.frag

const char* ccPositionTextureGray_frag = STRINGIFY(
\n#ifdef GL_ES\n
precision lowp float;
\n#endif\n

varying vec4 v_fragmentColor;
varying vec2 v_texCoord;

void main()
{

vec4 color = texture2D(CC_Texture0,v_texCoord);

float gray = dot(v_orColor.rgb,vec3(0.299,0.587,0.114));

gl_FragColor = vec4(gray,gray,gray,color.a);

}
);

最后实现一个调用方法：

#define STRINGIFY(A) #A

#include "ccShader_PositionTextureGray_.vert"

#include "ccShader_PositionTextureGray_.frag"

void addGrayEffectToSprite(cocos2d::Sprite* pSprite)

{

auto pGLProgram = GLProgram::createWithByteArrays(ccPositionTextureGray_vert, ccPositionTextureGray_frag);

pSprite->setGLProgram(pGLProgram);

}

因为3.2中的GLProgram会预定义一些uniform和VertexAttribs，所以这里我们创建完GLProgram后不用做其他额外的设置。例如frag里面的CC_Texture0就是2dx预定义的uniform变量。有兴趣的同学具体可以看renderer/CCGLProgram.h里的定义。