Cocos2dx Lua RichText关于createWithXML下划线问题。

已于 2023-11-26 20:43:27 修改
阅读量219 收藏
点赞数
分类专栏： Cocos2dx 文章标签： cocos2d 游戏引擎
于 2023-11-18 23:38:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/binzifu/article/details/134484171
版权
本文介绍了如何在Cocos2d-x游戏引擎中修改Label组件的下划线颜色和大小，包括通过`enableUnderline`函数和自定义XML标签`u`来设置，以及对lua接口的相应调整。
摘要由CSDN通过智能技术生成

前言。

由于自己最近工作需要用到这个功能。但是通过发现原有的不能设置颜色和大小。以前也没去细看，最近才去看了底层。自己也对此做了底层的修改。希望对各位有所帮助。

通过发现。最后的实现是通过Label的函数enableUnderline中在Label的基础上加上DrawNode实现。您自己也可以通过自己创建Label和DrawNode去实现，也有发现 Cocos2d-Lua-Community 通过在enableUnderline增加设置下划线颜色 在Label的函数 updateContent 中改变颜色。这个方案比较简单 也推荐大家使用。具体实现代码片段在如下

if (_numberOfLines)
        {
            // This is the logic for TTF fonts
            const float charheight = (_textDesiredHeight / _numberOfLines);
            _underlineNode->setLineWidth(charheight/6);

            // atlas font
            for (int i=0; i<_numberOfLines; ++i)
            {
                float offsety = 0;
                if (_strikethroughEnabled)
                    offsety += charheight / 2;
                // FIXME: Might not work with different vertical alignments
                float y = (_numberOfLines - i - 1) * charheight + offsety;

                // Github issue #15214. Uses _displayedColor instead of _textColor for the underline.
                // This is to have the same behavior of SystemFonts.
                Color4F color = _underlineColor4B.a > 0 ? Color4F(_underlineColor4B) : Color4F(_displayedColor);
                _underlineNode->drawLine(Vec2(_linesOffsetX[i] + 1, y), Vec2(_linesWidth[i] + _linesOffsetX[i] - 1, y), color);
            }
        }
        else if (_textSprite)
        {
            // ...and is the logic for System fonts
            float y = 0;
            const auto spriteSize = _textSprite->getContentSize();
            _underlineNode->setLineWidth(spriteSize.height/6);
            if (_strikethroughEnabled)
                // FIXME: system fonts don't report the height of the font correctly. only the size of the texture, which is POT
                y += spriteSize.height / 2;
            // FIXME: Might not work with different vertical alignments
            Color4F color = _underlineColor4B.a > 0 ? Color4F(_underlineColor4B) : Color4F(_textSprite->getDisplayedColor());
            _underlineNode->drawLine(Vec2(0.0f + 1, y), Vec2(spriteSize.width - 1, y), color);
        }
    }

还有一个简单的实现：就是将此函数中 这句代码

_underlineNode->drawLine(Vec2(_linesOffsetX[i] + 1, y), Vec2(_linesWidth[i] + _linesOffsetX[i] - 1, y), color);

的 _displayedColor 改成 _textColor 就是和字体颜色一样了

自己实现部分。

为了方便我自己，实现创建createWithXML时候直接通过原有标识“u”就直接设置颜色和线的宽度。

UIRichText部分

MyXMLVisitor::setTagDescription("u", true, [](const ValueMap& tagAttrValueMap) {
        // no supported attributes
        ValueMap attrValueMap;
        attrValueMap[RichText::KEY_TEXT_LINE] = RichText::VALUE_TEXT_LINE_UNDER;
        if (tagAttrValueMap.find("color") != tagAttrValueMap.end()) {
            attrValueMap[RichText::KEY_TEXT_LINE_COLOR] = tagAttrValueMap.at("color").asString();
        }
        if (tagAttrValueMap.find("size") != tagAttrValueMap.end()) {
            attrValueMap[RichText::KEY_TEXT_LINE_SIZE] = tagAttrValueMap.at("size").asString();
        }
        return make_pair(attrValueMap, nullptr);
    });

这里是添加 u 标识下 识别color和size 的实现部分。其中 KEY_TEXT_LINE_COLOR 和 KEY_TEXT_LINE_SIZE 自行添加 在 KEY_TEXT_LINE 下面。

const std::string RichText::KEY_TEXT_LINE_COLOR("KEY_TEXT_LINE_COLOR");
const std::string RichText::KEY_TEXT_LINE_SIZE("KEY_TEXT_LINE_SIZE");

既然在 MyXMLVisitor 中 那就把在此需要添加的加完。在 struct Attributes 中添加

Color3B underlineColor;                   /*!< the color of the underline */
int underlineSize;                        /*!< the underline effect size value */

在下面 public 函数中添加

std::tuple<bool, Color3B, int> getUnderline() const;

实现如下

std::tuple<bool, Color3B, int>MyXMLVisitor::getUnderline() const
{
    for (auto i = _fontElements.rbegin(), iRend = _fontElements.rend(); i != iRend; ++i)
    {
        if (i->line == StyleLine::UNDERLINE)
        {
            return std::make_tuple(true, i->underlineColor, i->underlineSize);
        }
    }
    return std::make_tuple(false, Color3B::WHITE, -1);

}

 在 MyXMLVisitor::startElement 函数。 在 

keyTextLine == RichText::VALUE_TEXT_LINE_UNDER 和

 keyTextStyle == RichText::VALUE_TEXT_LINE_UNDER 判断下替换以下代码

attributes.line = StyleLine::UNDERLINE;
if (attrValueMap.find(RichText::KEY_TEXT_LINE_COLOR) != attrValueMap.end()) {
    attributes.underlineColor = _richText->color3BWithString(attrValueMap.at(RichText::KEY_TEXT_LINE_COLOR).asString());
}
if (attrValueMap.find(RichText::KEY_TEXT_LINE_SIZE) != attrValueMap.end()) {
                            attributes.underlineSize = attrValueMap.at(RichText::KEY_TEXT_LINE_SIZE).asInt();
}

在 MyXMLVisitor::textHandler下改变这句代码 后面两个是我自己加的。

auto element = RichElementText::create(0, color, 255, text, face, fontSize, flags, url,
        std::get<1>(outline), std::get<2>(outline),
        std::get<1>(shadow), std::get<2>(shadow), std::get<3>(shadow),
        std::get<1>(glow),
        std::get<1>(underline), std::get<2>(underline));

 然后在这两个函数 RichElementText::create、RichElementText::init 中作修改。

RichElementText* RichElementText::create(int tag, const Color3B &color, GLubyte opacity, const std::string& text,

                                         const std::string& fontName, float fontSize, uint32_t flags, const std::string& url,

                                         const Color3B& outlineColor, int outlineSize ,

                                         const Color3B& shadowColor, const cocos2d::Size& shadowOffset, int shadowBlurRadius,

                                         const Color3B& glowColor,

                                         const Color3B& underlineColor, int underlineSize)

{

    RichElementText* element = new (std::nothrow) RichElementText();

    if (element && element->init(tag, color, opacity, text, fontName, fontSize, flags, url,

                                 outlineColor, outlineSize, shadowColor, shadowOffset, shadowBlurRadius, glowColor, underlineColor, underlineSize))

    {

        element->autorelease();

        return element;

    }

    CC_SAFE_DELETE(element);

    return nullptr;

}

    

bool RichElementText::init(int tag, const Color3B &color, GLubyte opacity, const std::string& text,

                           const std::string& fontName, float fontSize, uint32_t flags, const std::string& url,

                           const Color3B& outlineColor, int outlineSize ,

                           const Color3B& shadowColor, const cocos2d::Size& shadowOffset, int shadowBlurRadius,

                           const Color3B& glowColor,

                            const Color3B& underlineColor, int underlineSize)

{

    if (RichElement::init(tag, color, opacity))

    {

        _text = text;

        _fontName = fontName;

        _fontSize = fontSize;

        _flags = flags;

        _url = url;

        _outlineColor = outlineColor;

        _outlineSize = outlineSize;

        _shadowColor = shadowColor;

        _shadowOffset = shadowOffset;

        _shadowBlurRadius = shadowBlurRadius;

        _glowColor = glowColor;

        _underlineColor = underlineColor;

        _underlineSize = underlineSize;

        return true;

    }

    return false;

}

这是我修改后的。 

接下来 在 formatText 函数中 的 判断 if (elmtText->_flags & RichElementText::UNDERLINE_FLAG)下 改成

label->enableUnderline(Color4B(elmtText->_underlineColor), elmtText->_underlineSize);

case RichElement::Type::TEXT: 这个条件下改成

RichElementText* elmtText = static_cast<RichElementText*>(element);
                        handleTextRenderer(elmtText->_text, elmtText->_fontName, elmtText->_fontSize, elmtText->_color,
                                           elmtText->_opacity, elmtText->_flags, elmtText->_url,
                                           elmtText->_outlineColor, elmtText->_outlineSize,
                                           elmtText->_shadowColor, elmtText->_shadowOffset, elmtText->_shadowBlurRadius,
                                           elmtText->_glowColor,
                                           elmtText->_underlineColor, elmtText->_underlineSize);
                        break;

在 handleTextRenderer 中修改如下

void RichText::handleTextRenderer(const std::string& text, const std::string& fontName, float fontSize, const Color3B &color,
                                  GLubyte opacity, uint32_t flags, const std::string& url,
                                  const Color3B& outlineColor, int outlineSize ,
                                  const Color3B& shadowColor, const Size& shadowOffset, int shadowBlurRadius,
                                  const Color3B& glowColor,
                                  const Color3B& underlineColor, int  underlineSize)
if (flags & RichElementText::UNDERLINE_FLAG)
                textRenderer->enableUnderline(Color4B(underlineColor), underlineSize);

CCLabel修改

Label::reset() 中添加

_underlineColor = Color4B::WHITE;
_underlineSize = -1;

 enableUnderline 中为

void Label::enableUnderline(const Color4B& underlineColor, int underlineSize)
{
    // remove it, just in case to prevent adding two or more
    if (!_underlineNode)
    {
        _underlineNode = DrawNode::create();
        addChild(_underlineNode, 100000);
        _contentDirty = true;

        _underlineColor = underlineColor;
        if (underlineSize > 0)
        {
            _underlineSize = underlineSize;
        }
        
    }
}

updateContent 这个函数中的修改部分 两个地方。

// Github issue #15214. Uses _displayedColor instead of _textColor for the underline.
// This is to have the same behavior of SystemFonts.
Color4F Linecolor = _underlineColor != Color4B::WHITE ? Color4F(_underlineColor) : Color4F(_displayedColor);
 _underlineNode->drawLine(Vec2(_linesOffsetX[i], y), Vec2(_linesWidth[i] + _linesOffsetX[i], y), Linecolor);

 lua_cocos2dx_auto

lua_cocos2dx_Label_enableUnderline 部分

int lua_cocos2dx_Label_enableUnderline(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_enableUnderline'", nullptr);
        return 0;
    }
#endif

    argc = lua_gettop(tolua_S)-1;
    if (argc == 0)
    {
        if(!ok)
        {
            tolua_error(tolua_S,"invalid arguments in function 'lua_cocos2dx_Label_enableUnderline'", nullptr);
            return 0;
        }
        cobj->enableUnderline();
        lua_settop(tolua_S, 1);
        return 1;
    }
    if (argc == 1)
    {
        cocos2d::Color4B arg0;

        ok &= luaval_to_color4b(tolua_S, 2, &arg0, "cc.Label:enableUnderline");
        if (!ok)
        {
            tolua_error(tolua_S, "invalid arguments in function 'lua_cocos2dx_Label_enableUnderline'", nullptr);
            return 0;
        }
        cobj->enableOutline(arg0);
        lua_settop(tolua_S, 1);
        return 1;
    }
    if (argc == 2)
    {
        cocos2d::Color4B arg0;
        int arg1;

        ok &= luaval_to_color4b(tolua_S, 2, &arg0, "cc.Label:enableUnderline");

        ok &= luaval_to_int32(tolua_S, 3, (int*)&arg1, "cc.Label:enableUnderline");
        if (!ok)
        {
            tolua_error(tolua_S, "invalid arguments in function 'lua_cocos2dx_Label_enableUnderline'", nullptr);
            return 0;
        }
        cobj->enableOutline(arg0, arg1);
        lua_settop(tolua_S, 1);
        return 1;
    }
    luaL_error(tolua_S, "%s has wrong number of arguments: %d, was expecting %d \n", "cc.Label:enableUnderline",argc, 0);
    return 0;

#if COCOS2D_DEBUG >= 1
    tolua_lerror:
    tolua_error(tolua_S,"#ferror in function 'lua_cocos2dx_Label_enableUnderline'.",&tolua_err);
#endif

    return 0;
}

lua_cocos2dx_ui_RichElementText_init 和 lua_cocos2dx_ui_RichElementText_create 这些并没有做修改。方便使用XML 创建的UIRichText 方式设置下划线颜色 。不过您可以通过enableUnderline 函数去实现改变需要颜色和宽度。 至于其他您可以自己把 lua_cocos2dx_ui_RichElementText_init 和 lua_cocos2dx_ui_RichElementText_create 这个完善。

大概就这样了。本来不想写完的直接上代码。但是坚持把。谢谢阅读！！！

我怕遗漏！所修改资源文件已上传关联资源

binzifu
关注
专栏目录
cocos2dx实现功能强大的RichText控件
帘卷西风的专栏
05-18 2万+
最近准备做一个聊天系统，开始准备使用cocos2dx的UIRichText控件来显示聊天内容，结果在使用的时候才发现，cocos2dx的RichText功能非常有限，完全不具备实现聊天的功能，只实现了加入文本、图像和自定义控件的功能，支持不同字体、颜色、字号。       我个人认为，一个RichText控件应该具备以下基本功能：       1、多样化的文本显示功能，包括字体、颜色、字号的设
cocos2dx-3.0功能强大的richText控件源码
05-18
http://blog.csdn.net/ljxfblog 自写richtext博文配套代码。
cocos2dx --- 富文本的使用 RichText
weixin_34290352的博客
08-05 364
在实际工作中，有非常多地方会使用 富文本，这里仅仅介绍最简单的富文本用法： 是由cocostudio 提供的 RichText： 直接贴代码，再分析： //这里測试富文本控件 ui::RichText* _richText = ui::RichText::create(); _richText-&gt;ignoreContentAdaptWithSize(false); _ri...
cocos2dx richText
lyctianya的专栏
04-15 708
local function createMyRichText(fieldSize,spTb) local rc=ccui.RichText:create() -- node:addChild(rc) rc:ignoreContentAdaptWithSize(false) rc:setContentSize(fieldSize) for key, var i
cocos2dx 3.17 RichText 接口 createWithXML 参数记录
be YourSelf的博客
08-13 1810
// text // text // text // text 下划线/ // text 斜体字/ // text 加粗/ // text 中划线/ // 图片 / // http://www.google.com‘&amp;amp;gt;click me text 链接 / // 换行 == /n / // text 描边/ // text 阴影/ // text 外发光/...
CoCos2d-x Lua RichText关于createWithXML下划线问题 实现颜色和线的宽度改变 可不随字体颜色
最新发布
11-18
总之，解决`createWithXML`的下划线问题需要深入理解Cocos2d-x的渲染机制，并进行适当的代码修改。通过提供对下划线颜色和宽度的自定义，我们可以极大地增强`RichText`组件的表现力，同时保持与字体颜色的独立性。这...
cocos2d-lua 实现富文本
08-19
在游戏开发领域，Cocos2d-x 是一个广泛使用的开源跨平台2D游戏引擎，而 Lua 是一种轻量级的脚本语言，常被用作 Cocos2d-x 的脚本接口，即 Cocos2d-lua。在这个场景下，“cocos2d-lua 实现富文本”意味着我们要探讨...
cocos2d-js/lua游戏【解密】套件
01-25
《cocos2d-js/lua游戏解密套件详解》 在移动游戏开发领域，cocos2d-js和cocos2d-lua是常见的游戏引擎，它们为开发者提供了便捷的跨平台开发工具，使得游戏可以在iOS、Android等多个平台上运行。然而，随着游戏市场...
lua2js4cocos:lua将cocos2d-js转换为javascript
05-11
lua2js4cocos lua转换为cocos的javascript cocos2dx-lua到cocos2dx-js 将lua文件放入输入中运行lua2js.py脚本，该js文件将在输出中生成。
cocos2d-x 滚动文字(CCLabelTTF)
11-12
cocos2d-x 文字 遮挡 滚动，用labelWithString和setTextureRect实现
Cocos2d 3.10 + lua RichText
魔芋胡萝卜的博客
03-21 1347
某个csv中有个string字段是这样的1、每日快速战斗 &lt;font color='#9ced4d'&gt; 3 &lt;/font&gt;次&lt;br&gt;2、每日可领取银币×5000&lt;br&gt;3、招财次数&lt;font color='#9ced4d'&gt; 10 &lt;/font&gt;次&lt;br&gt;4、竞技场购买次数&lt;font color='#
Cocos2dx-- 聊天系统之富文本(RichText)与字体对齐
热门推荐
疯狂的程序员
10-10 1万+
前言游戏开发中我们一般都会有聊天系统，我们可以同时或单独发文字，图片，表情，超链接等信息的文本即称为富文本。如下图所示： 我使用的是cocos-3.4引擎版本里的RichText富文本控件实现这些操作的，但cocos自带封装的RichText还有一些问题，1：如上图看到的一样，当中英文混输时右边字体没对齐(看需求，QQ都没处理这问题)。2：聊天信息有时会需求像上面一样还要一个背景底框装着，底框大小
Cocos2dx富文本 RichText的使用
zihao127589的博客
09-17 2015
Cocos2dx富文本 RichText的使用 local richText = ccui.RichText:create() // Left:0 center:1 right:3 richText:setHorizontalAlignment(1) // 锚点 richText:setAnchorPoint(0,0.5) // 忽略内容调整缩放 richText:ignoreContentAdaptWithSize(false) // 宽高 richText:setContentSize(cc.
cocos2d-x改底层之RichText富文本换行
子弹头
06-15 5630
这里使用的是cocos2dx的2.2.3版本，底层的RictText换行机制不能满足中文换行，需要改动。由于在3.x的版本已经优化了，而且以后的项目也会转到3.x的版本，所以这里只是做一个记录，对底层换行机制的思想做一个分析，仅供学习用。 RichText的换行原理： 以文本换行为例(图片同样的道理)，先用一个不带换行的label，算出该label的总长度L，然后和程序设定的宽w比较，w v
cocos2d-x lua 手游之RichText 的改写(lua版)
哲学天空的博客
05-09 1375
RichText控件应该具备以下基本功能：1、多样化的文本显示功能，包括字体、颜色、字号的设置。2、能显示图片以及一些特殊元素。3、应该支持图片文字的超链接功能。4、能够支持滚动的效果。5、能够有很方便的换行功能，最好能设置行间距。6、文本特效：描边，下划线，阴影，发光等功能。7、支持设置控件最大显示行数。下面我将上传lua版的RichText 下载链接 点击打开链接下面把一些大神加工过的Rich...
cocos2d-x 获取不到富文本RichText的真实size
twicetwice的博客
08-29 1651
最近做聊天，用ListView+RichText1实现，但是无法动态改变item的高度，--无法获取richtext真实高度，解决办法 在cocos2d-x 源码中找到UIRichText.cpp文件，增加一行代码，编译 ...
createdXml
caipengxing的博客
04-03 111
private static void createXml(){ try { Document document = DocumentHelper.createDocument(); Element root = document.addElement("users"); root.addElement("user").addAttribute("i...
create table with xml error
徐迎军的专栏
01-19 680
CREATE TABLE customer1(cid BIGINT NOT NULL PRIMARY KEY, info XML);  log: ------------------------------ Commands Entered ------------------------------ CREATE TABLE customer1(cid BIGINT NOT NULL P
cocos2d-x+Lua快速开发游戏指南
"cocos2d-x+lua游戏开发教程概览" 本文主要介绍如何使用cocos2d-x游戏引擎结合Lua脚本语言进行游戏开发，包括环境搭建、基础使用、性能优势以及一系列相关主题。cocos2d-x提供对Lua的支持，使得开发者能够利用其...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值