利用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,
GRAY = 1,
}
-- 默认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" ..
"}"
-- 图片置灰
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,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
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_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()
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, 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", 0, &tolua_err)) goto tolua_lerror;
#endif
cobj = (cocos2d::Label*)tolua_tousertype(tolua_S, 1, 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,
GRAY = 1,
}
-- 默认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" ..
"}"
-- 图片置灰
function setGray(node)
-- 9切图
if node.getVirtualRenderer and iskindof(node:getVirtualRenderer(), "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,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
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
if node.getVirtualRenderer and iskindof(node:getVirtualRenderer(), "cc.Label") then
node:getVirtualRenderer():enableGray(false)
return
end
local pProgram = cc.GLProgram:createWithByteArrays(vertDefaultSource,pszRemoveGrayShader)
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()
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类,其他类就不做置灰操作了。这样,一个界面上显示颜色的控件就都被置灰了,就如最开始的示意图。
整个过程只求实现,遇到很多困难,然后一一克服。虽然实现了功能,但是有些方法看起来。如果有大神能提供更好的方法,小弟不胜感激!