Cocos2D-X shader(五) cocostudio导出界面置灰及复原lua实现版

前端之家收集整理的这篇文章主要介绍了Cocos2D-X shader(五) cocostudio导出界面置灰及复原lua实现版前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

利用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类,其他类就不做置灰操作了。这样,一个界面上显示颜色的控件就都被置灰了,就如最开始的示意图。

整个过程只求实现,遇到很多困难,然后一一克服。虽然实现了功能,但是有些方法看起来。如果有大神能提供更好的方法,小弟不胜感激!

猜你在找的Cocos2d-x相关文章