在实际项目中,经常需要用到灰色图像。比如按钮变灰,一般情况下,我们需要准备三张图,一张正常颜色图,一张按钮按下图,一张按钮变灰图。若此种类似情况过多,就会导致资源包过大,这显然不是我们愿意看到的结果。此种情况下,我们就可以考虑修改程序的方法,实现正常颜色图变灰,就可以减少资源图。
借鉴了多位博主的代码,谢谢!~~分享精神!
使用版本:cocos2d-x2.2.1
在实际项目中,经常需要用到灰色图像。比如按钮变灰,一般情况下,我们需要准备三张图,一张正常颜色图,一张按钮按下图,一张按钮变灰图。若此种类似情况过多,就会导致资源包过大,这显然不是我们愿意看到的结果。此种情况下,我们就可以考虑修改程序的方法,实现正常颜色图变灰,就可以减少资源图。
基于上述情况,我们需要增加程序中图像变灰代码。具体有两种思路:
(一)因为图像在cocos2dx引擎中是使用CCImage加载进来的,图像数据也使用CCImage存储。因此,可以使用图像处理方法将图像数据修改,转换为灰度图,然后创建精灵;
(二)使用shader的方式,将图像显示转化为灰度图显示。
1、本文采用的就是第二种方式。具体步骤如下:写好一个图像变灰的shader程序,并放入到cocos2dx引擎下面的shader文件夹中。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
//ccShader_PositionTextureGray_frag.h
" \n\
#ifdef GL_ES \n\
precision mediump
float
; \n\
#endif \n\
\n\
uniform sampler2D u_texture; \n\
varying vec2 v_texCoord; \n\
varying vec4 v_fragmentColor; \n\
\n\
void
main(
void
) \n\
{ \n\
// Convert to greyscale using NTSC weightings \n\
vec4 col = texture2D(u_texture, v_texCoord); \n\
float
grey = dot(col.rgb, vec3(0.299, 0.587, 0.114)); \n\
gl_FragColor = vec4(grey, grey, grey, col.a); \n\
} \n\
";
|
2、ccShaders.h中添加
1
|
extern
CC_DLL
const
GLchar * ccPositionTextureGray_frag;
|
3、ccShaders.cpp中添加
1
2
|
const
GLchar * ccPositionTextureGray_frag =
#include "ccShader_PositionTextureGray_frag.h"
|
4、CCShaderCache.cpp中添加枚举类型
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
enum
{
kCCShaderType_PositionTextureColor,
kCCShaderType_PositionTextureColorAlphaTest,
kCCShaderType_PositionTextureGray,
//add this
kCCShaderType_PositionColor,
kCCShaderType_PositionTexture,
kCCShaderType_PositionTexture_uColor,
kCCShaderType_PositionTextureA8Color,
kCCShaderType_Position_uColor,
kCCShaderType_PositionLengthTexureColor,
kCCShaderType_ControlSwitch,
kCCShaderType_MAX,
};
|
CCShaderCache::loadDefaultShaders()中添加
1
2
3
4
5
6
|
// Position Texture Gray shader
p =
new
CCGLProgram();
loadDefaultShader(p, kCCShaderType_PositionTextureGray);
m_pPrograms->setObject(p, kCCShader_PositionTextureGray);
p->release();
|
CCShaderCache::reloadDefaultShaders()中添加
1
2
3
4
|
// Position Texture Gray shader
p = programForKey(kCCShader_PositionTextureGray);
p->reset();
loadDefaultShader(p, kCCShaderType_PositionTextureGray);
|
CCShaderCache::loadDefaultShader(CCGLProgram *p, int type)中添加
1
2
3
4
5
6
7
8
|
case
kCCShaderType_PositionTextureGray:
p->initWithVertexShaderByteArray(ccPositionTextureColor_vert, ccPositionTextureGray_frag);
p->addAttribute(kCCAttributeNamePosition, kCCVertexAttrib_Position);
p->addAttribute(kCCAttributeNameColor, kCCVertexAttrib_Color);
p->addAttribute(kCCAttributeNameTexCoord, kCCVertexAttrib_TexCoords);
break
;
|
5、CCGLProgram.h中添加
1
|
#define kCCShader_PositionTextureGray "ShaderPositionTextureGray"
|
6、新建一个灰度转换调用类(以便扩展其他的颜色转换)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
//ColorUtils.h
#ifndef __COLOR_UTILS_H__
#define __COLOR_UTILS_H__
#include "cocos2d.h"
USING_NS_CC;
class
ColorUtils
{
public
:
ColorUtils();
~ColorUtils();
static
void
AddColorGray(CCSprite * spr);
static
void
RemoveColorGray(CCSprite * spr);
private
:
};
#endif
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
//ColorUtils.cpp
#include "ColorUtils.h"
ColorUtils::ColorUtils()
{
}
ColorUtils::~ColorUtils()
{
}
void
ColorUtils::AddColorGray(CCSprite * spr)
{
spr->setShaderProgram(CCShaderCache::sharedShaderCache()->programForKey(kCCShader_PositionTextureGray));
}
void
ColorUtils::RemoveColorGray(CCSprite * spr)
{
spr->setShaderProgram(CCShaderCache::sharedShaderCache()->programForKey(kCCShader_PositionTextureColor));
}
|
over!~
效果图: