利用cocostudio导出的界面，实现界面置灰与复原效果：
需要变色的有三种类型控件：普通图片(ImageView)，九宫格切图(Scale9Sprite)以及文字(Text)
普通图片
普通图片比较容易处理，可以直接使用shader来实现。先来看shader代码：
-- 默认vert
local vertDefaultSource = "\n"..
"attribute vec4 a_position; \n" ..
"attribute vec2 a_texCoord; \n" ..
"attribute vec4 a_color; \n"..
"#ifdef GL_ES \n"..
"varying lowp vec4 v_fragmentColor;\n"..
"varying mediump vec2 v_texCoord;\n"..
"#else \n" ..
"varying vec4 v_fragmentColor; \n" ..
"varying vec2 v_texCoord; \n"..
"#endif \n"..
"void main() \n"..
"{\n" ..
"gl_Position = CC_PMatrix * a_position; \n"..
"v_fragmentColor = a_color;\n"..
"v_texCoord = a_texCoord;\n"..
"}"
-- 置灰frag
local pszGrayShader = "#ifdef GL_ES \n" ..
"precision mediump float; \n" ..
"#endif \n" ..
"varying vec4 v_fragmentColor; \n" ..
"varying vec2 v_texCoord; \n" ..
"void main(void) \n" ..
"{ \n" ..
"vec4 c = texture2D(CC_Texture0,v_texCoord); \n" ..
"float gray = dot(c.rgb,vec3(0.299,0.587,0.114)); \n" ..
"gl_FragColor.xyz = vec3(gray); \n"..
"gl_FragColor.w = c.w; \n"..
"}"
-- 移除置灰frag
local pszRemoveGrayShader = "#ifdef GL_ES \n" ..
"precision mediump float; \n" ..
"#endif \n" ..
"varying vec4 v_fragmentColor; \n" ..
"varying vec2 v_texCoord; \n" ..
"void main(void) \n" ..
"{ \n" ..
"gl_FragColor = texture2D(CC_Texture0,v_texCoord); \n" ..
"}"这些代码都非常简单，不做解释，可以直接拿来用。默认vert和置灰frag生成的shader可以用作图片置灰，默认vert和移除置灰frag生成的shader可以显示图片原来的颜色。利用vert和frag字符串，生成shader的代码入下：
local pProgram = cc.GLProgram:createWithByteArrays(vertDefaultSource,pszGrayShader)
pProgram:bindAttribLocation(cc.ATTRIBUTE_NAME_POSITION,cc.VERTEX_ATTRIB_POSITION)
pProgram:bindAttribLocation(cc.ATTRIBUTE_NAME_COLOR,cc.VERTEX_ATTRIB_COLOR)
pProgram:bindAttribLocation(cc.ATTRIBUTE_NAME_TEX_COORD,cc.VERTEX_ATTRIB_FLAG_TEX_COORDS)
pProgram:link()
pProgram:updateUniforms()
-- ImageView
imageview:getVirtualRenderer():getSprite():setGLProgram(pProgram)
这里使用 getVirtualRender方法获取渲染节点，再使用getSprite获得真正的渲染精灵，之所以这么绕，是因为cocostudio中的ImageView对渲染节点进行了一层封装。如果对于cocos lua如何使用shader没有任何基础的话，可以参考我前面的文章，也可以借助百度。这里着重把整个思路理清。
九宫格切图
网上很多帖子都在询问，上述shader方法对九宫格图片不起作用。这是正常的，因为ImageView继承自widget，而Scale9Sprite继承自Node。基类都不同，设置Shader的方法当然也不同。这里偷个懒，有个自带的快速给Scale9Sprite置灰的方法：setState(State state)
State是个枚举，总共两种状态：
local State =
{
NORMAL = 0,GRAY = 1,}
因此，使用Scale9Sprite:getVirtualRenderer():setState(State.GRAY)和Scale9Sprite:getVirtualRenderer():setState(State.NORMAL)就能置灰和恢复彩色图片了。
这个时候，我们可以创建setGray(node_)和removeGray(node_)两个函数来实现对这两种图片的置灰效果了。参数中传入的都是node_，如何判断他是ImageView还是Scale9Sprite呢？cocos为我们提供了iskindof()方法。先上代码：
local State =
{
NORMAL = 0,}
-- 默认vert
local vertDefaultSource = "\n"..
"attribute vec4 a_position; \n" ..
"attribute vec2 a_texCoord; \n" ..
"attribute vec4 a_color; \n"..
"#ifdef GL_ES \n"..
"varying lowp vec4 v_fragmentColor;\n"..
"varying mediump vec2 v_texCoord;\n"..
"#else \n" ..
"varying vec4 v_fragmentColor; \n" ..
"varying vec2 v_texCoord; \n"..
"#endif \n"..
"void main() \n"..
"{\n" ..
"gl_Position = CC_PMatrix * a_position; \n"..
"v_fragmentColor = a_color;\n"..
"v_texCoord = a_texCoord;\n"..
"}"
-- 置灰frag
local pszGrayShader = "#ifdef GL_ES \n" ..
"precision mediump float; \n" ..
"#endif \n" ..
"varying vec4 v_fragmentColor; \n" ..
"varying vec2 v_texCoord; \n" ..
"void main(void) \n" ..
"{ \n" ..
"vec4 c = texture2D(CC_Texture0,v_texCoord); \n" ..
"}"
-- 图片置灰
function setGray(node)
-- 9切图
if node.getVirtualRenderer and iskindof(node:getVirtualRenderer(),"ccui.Scale9Sprite") then
node:getVirtualRenderer():setState(State.GRAY)
return
end
local pProgram = cc.GLProgram:createWithByteArrays(vertDefaultSource,cc.VERTEX_ATTRIB_FLAG_TEX_COORDS)
pProgram:link()
pProgram:updateUniforms()
-- ImageView
if node.getVirtualRenderer then
local virtualRenderer = node:getVirtualRenderer()
if virtualRenderer.getSprite then
virtualRenderer:getSprite():setGLProgram(pProgram)
end
return
end
end
--图片恢复颜色
function removeGray(node)
if node.getVirtualRenderer and iskindof(node:getVirtualRenderer(),"ccui.Scale9Sprite") then
node:getVirtualRenderer():setState(State.NORMAL)
return
end
local pProgram = cc.GLProgram:createWithByteArrays(vertDefaultSource,pszRemoveGrayShader)
pProgram:bindAttribLocation(cc.ATTRIBUTE_NAME_POSITION,cc.VERTEX_ATTRIB_FLAG_TEX_COORDS)
pProgram:link()
pProgram:updateUniforms()
if node.getVirtualRenderer then
local virtualRenderer = node:getVirtualRenderer()
if virtualRenderer.getSprite then
virtualRenderer:getSprite():setGLProgram(pProgram)
end
return
end
end
这里我们先调用iskindof(node:getVirtualRenderer(),"CCUI.Scale9Sprite")来判断他是不是Scale9Sprite类，如果是，这调用自带的setState函数置灰或回复彩色即可。如果不是Scale9Sprite，他还可能是容器等控件，但是这些控件没有getVirtualRenderer或getSprite方法，因此，对于集成了这两个方法（可定就是ImageView啦）可以直接设置shader。
文字
好了，现在不同种类的图片都能置灰和恢复彩色了。我们还剩下文字没有处理。Text继承自Label类，本人菜鸟，翻看Label类的源码，发现没有提供设置shader的函数接口。网上搜了一遍，也没找到解决贴。只能用一种比较笨，但是有效的方法来实现文字置灰了：修改引擎源码，为Label类添加置灰和恢复置灰函数，并注册到lua环境供lua代码调用。
首先找到Label类的实现，添加成员变量Color4B _textOrigColor来记录文字初始颜色。文字颜色初始设置是通过void Label::setTextColor(const Color4B &color);来设置，添加最后一行代码，记录初始颜色或最新赋值颜色：
void Label::setTextColor(const Color4B &color)
{
CCASSERT(_currentLabelType == LabelType::TTF || _currentLabelType == LabelType::STRING_TEXTURE,"Only supported system font and ttf!");
if (_currentLabelType == LabelType::STRING_TEXTURE && _textColor != color)
{
_contentDirty = true;
}
_textColor = color;
_textColorF.r = _textColor.r / 255.0f;
_textColorF.g = _textColor.g / 255.0f;
_textColorF.b = _textColor.b / 255.0f;
_textColorF.a = _textColor.a / 255.0f;
_textOrigColor = color;//记录原彩色
}
新建成员函数，用于实现置灰和恢复彩色：
void Label::enableGray(bool isEnable)
{
_contentDirty = true;
if (isEnable)
{
_textColor = Color4B(86,82,83,1);
_textColorF = Color4F(0.34f,0.32f,1);
}
else
{
_textColor = _textOrigColor;
_textColorF.r = _textColor.r / 255.0f;
_textColorF.g = _textColor.g / 255.0f;
_textColorF.b = _textColor.b / 255.0f;
_textColorF.a = _textColor.a / 255.0f;
}
}
修改了_textColorF，字体颜色会自动刷新（貌似在OnDraw函数里）。
接下来就是注册这个enableGray函数到lua环境里了。找到lua_cocos2dx_auto.cpp文件里int lua_register_cocos2dx_Label(lua_State* tolua_S)函数，在合适的地方插入一行
tolua_function(tolua_S,"enableGray",lua_cocos2dx_Label_enableGray);
再在合适的地方（。。。）实现lua_cocos2dx_Label_enableGray函数：
int lua_cocos2dx_Label_enableGray(lua_State* tolua_S)
{
int argc = 0;
cocos2d::Label* cobj = nullptr;
bool ok = true;
#if COCOS2D_DEBUG >= 1
tolua_Error tolua_err;
#endif
#if COCOS2D_DEBUG >= 1
if (!tolua_isusertype(tolua_S,1,"cc.Label",&tolua_err)) goto tolua_lerror;
#endif
cobj = (cocos2d::Label*)tolua_tousertype(tolua_S,0);
#if COCOS2D_DEBUG >= 1
if (!cobj)
{
tolua_error(tolua_S,"invalid 'cobj' in function 'lua_cocos2dx_Label_enableGray'",nullptr);
return 0;
}
#endif
argc = lua_gettop(tolua_S) - 1;
if (argc == 1)
{
bool arg0;
ok &= luaval_to_boolean(tolua_S,2,&arg0,"cc.Label:enableGray");
if (!ok)
{
tolua_error(tolua_S,"invalid arguments in function 'lua_cocos2dx_Label_enableGray'",nullptr);
return 0;
}
cobj->enableGray(arg0);
lua_settop(tolua_S,1);
return 1;
}
luaL_error(tolua_S,"%s has wrong number of arguments: %d,was expecting %d \n","cc.Label:enableGray",argc,1);
return 0;
#if COCOS2D_DEBUG >= 1
tolua_lerror:
tolua_error(tolua_S,"#ferror in function 'lua_cocos2dx_Label_enableGray'.",&tolua_err);
#endif
return 0;
}
这其中好多断言，我也没看明白，照着相似的，就写成这样了。编译后，替换libcocos2d.dll和MyPrj.exe文件，就可以在lua中调enableGray()方法了。
另外，我们可以丰富一下功能，实现传入节点后，遍历子节点，给每个子节点也置灰或回复置灰的效果：
local State =
{
NORMAL = 0,"ccui.Scale9Sprite") then
node:getVirtualRenderer():setState(State.GRAY)
return
end
-- 文字
if node.getVirtualRenderer and iskindof(node:getVirtualRenderer(),"cc.Label") then
node:getVirtualRenderer():enableGray(true)
return
end
local pProgram = cc.GLProgram:createWithByteArrays(vertDefaultSource,"ccui.Scale9Sprite") then
node:getVirtualRenderer():setState(State.NORMAL)
return
end
if node.getVirtualRenderer and iskindof(node:getVirtualRenderer(),"cc.Label") then
node:getVirtualRenderer():enableGray(false)
return
end
local pProgram = cc.GLProgram:createWithByteArrays(vertDefaultSource,cc.VERTEX_ATTRIB_FLAG_TEX_COORDS)
pProgram:link()
pProgram:updateUniforms()
if node.getVirtualRenderer then
local virtualRenderer = node:getVirtualRenderer()
if virtualRenderer.getSprite then
virtualRenderer:getSprite():setGLProgram(pProgram)
end
return
end
end
--遍历变灰
function setGrayAndChild(node,isNotRecursive)
if node == nil then
return
end
setGray(node)
if isNotRecursive ~= true then
--children
local array = node:getChildren()
for key,childNode in pairs(array) do
setGrayAndChild(childNode)
end
end
end
--遍历取消变灰
function removeGrayAndChild(node,isNotRecursive)
if node == nil then
return
end
removeGray(node)
if isNotRecursive ~= true then
--children
local array = node:getChildren()
for key,var in pairs(array) do
removeGrayAndChild(var)
end
end
end
setGrayAndChile()和removeGrayAndChild()就是遍历置灰和遍历恢复彩色两个功能函数。setGray()或removeGray()中先操作Scale9Sprite类，再操作Text类，最后操作ImageView类，其他类就不做置灰操作了。这样，一个界面上显示颜色的控件就都被置灰了，就如最开始的示意图。
整个过程只求实现，遇到很多困难，然后一一克服。虽然实现了功能，但是有些方法看起来。如果有大神能提供更好的方法，小弟不胜感激！
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。