【Cocos2d-x】RichText打字机效果思路分享

前情提要

今天在开发游戏引导框架时,遇到这样的需求:人物对话文本支持打字机效果,且需要个别文字高亮。如果仅仅是前者的需求,是挺好实现的,创建一个Label,通过getLetter(index)获取每个字,调用setVisible(isVisible)即可;但是个别文字高亮是RichText才有的功能,于是难点变成了如何获取RichText里的每个字

代码分析

话不多说,看源代码,从UIRichText.cpp文件的formatText方法中,我们发现RichText的本质就是多个Label的拼接:

void RichText::formatText(bool isForce)
{
  ...
        _elementRenders.clear();
            ...
            for (ssize_t i=0; i<_richElements.size(); i++)
            {
                RichElement* element = _richElements.at(i);
                Node* elementRenderer = nullptr;
                switch (element->_type)
                {
                    case RichElement::Type::TEXT:
                    {
                        RichElementText* elmtText = static_cast<RichElementText*>(element);
                        Label* label;
                        if (FileUtils::getInstance()->isFileExist(elmtText->_fontName))
                        {
                             label = Label::createWithTTF(elmtText->_text, elmtText->_fontName, elmtText->_fontSize);
                        }
                        else
                        {
                            label = Label::createWithSystemFont(elmtText->_text, elmtText->_fontName, elmtText->_fontSize);
                        }
                        ...
                        elementRenderer = label;
                        break;
                    }
                    case RichElement::Type::IMAGE:
                    {
                      ...
                    }
                    case RichElement::Type::CUSTOM:
                    {
                      ...
                    }
                    case RichElement::Type::NEWLINE:
                    {
                      ...
                    }
                    default:
                        break;
                }

                if (elementRenderer)
                {
                    Label * pLabel = dynamic_cast<Label *>(elementRenderer);
                    if (pLabel)
                    {
                        pLabel->setTextColor(Color4B(element->_color, element->_opacity));
                    }
                    else
                    {
                        elementRenderer->setColor(element->_color);
                        elementRenderer->setOpacity(element->_opacity);
                    }

                    pushToContainer(elementRenderer);
                }
            }
        }
        else
        {
          // 与前一段if结构基本一致
          ...
        }
        formarRenderers();
        _formatTextDirty = false;
    }
}

这段代码的逻辑是通过读取insertElement()方法传入的RichElement,根据RichElement类别的不同,创建LabelSpriteNode等,放入RichText这个容器中,因为在当前情境下,只有Label被创建,所以其他不在考虑范围。

有了Label就可以拿到每个文字了,那么Label从哪里获取呢?我们把上面代码再精简下:

void RichText::formatText(bool isForce)
{
    _elementRenders.clear();
    Node* elementRender = Label::create...
    pushToContainer(elementRender);
    formarRenderers();
}

发现Label被传进了pushToContainer(render)方法中,这个方法的代码很简单:

void RichText::pushToContainer(cocos2d::Node *renderer)
{
    if (_elementRenders.size() <= 0)
    {
        return;
    }
    _elementRenders[_elementRenders.size()-1]->pushBack(renderer);
}

所以思路就变成了如何从_elementRenders中获取所有的Label

逻辑编写

基于上述梳理,编写获取RichText中所有文字的逻辑如下:

void RichText::getAllLetters()
{
    Vector<Sprite*> letters;

    for (auto& element : _elementRenders)
    {
        Vector<Node*>* row = element;
        for (ssize_t i = 0; i<row->size(); i++)
        {
            Node* pNode = row->at(i);
            Label * pLabel = dynamic_cast<Label*>(pNode);
            if (pLabel)
            {
                int len = pLabel->getStringLength();
                for (int j = 0; j < len; j++)
                {
                    Sprite* letter = pLabel->getLetter(j);
                    if (letter)
                        letters.pushBack(letter);
                }
            }
        }
    }

    return letters;
}

编写完成,将CPP转为Lua,看一下效果!

代码:
local ret = richText:getAllLetters()

输出:
ret: {}

为什么会出现这样的情况呢?

打断点,进入getAllLetters(),傻眼了,_elementRenders是个空数组。原因是formatText()方法的最后,RichText调用了formarRenderers()方法,我们来简单地看一下formarRenderers的逻辑:

void RichText::formarRenderers()
{
    // 此处省略一大坨代码...
    
    size_t length = _elementRenders.size();
    for (size_t i = 0; i<length; i++)
      {
        Vector<Node*>* l = _elementRenders[i];
        l->clear();
        delete l;
      }    
    _elementRenders.clear();
    
    updateContentSizeWithTextureSize(_contentSize);
}

前面做了什么逻辑我们不关心,我们关心的是方法的最后调用了_elementRenders.clear(),也就是说:每次执行formatText()后,_elementRenders都会被清空,它只是一个临时变量,所以接下来要做的就是_elementRenders被清掉前,遍历获取每一个Letter并存下来

于是代码变成了这样:

UIRichText.h

class CC_GUI_DLL RichText : public Widget
{
public:
    Vector<Sprite*>& getAllLetters();

protected:
    Vector<Sprite*> _letters;
};

--------------------------------------------------

UIRichText.CPP

void RichText::updateLetters()
{
    _letters.clear();

    for (auto& element : _elementRenders)
    {
        Vector<Node*>* row = element;
        for (ssize_t i = 0; i<row->size(); i++)
        {
            Node* pNode = row->at(i);
            Label * pLabel = dynamic_cast<Label*>(pNode);
            if (pLabel)
            {
                int len = pLabel->getStringLength();
                for (int j = 0; j < len; j++)
                {
                    Sprite* letter = pLabel->getLetter(j);
                    if (letter)
                        _letters.pushBack(letter);
                }
            }
        }
    }
}

Vector<Sprite*>& RichText::getAllLetters()
{
    return _letters;
}

void RichText::formarRenderers()
{
    // 此处省略一大坨代码...

    // ------------------
    // 添加的代码
    updateLetters();
    // ------------------
    
    size_t length = _elementRenders.size();
    for (size_t i = 0; i<length; i++)
      {
        Vector<Node*>* l = _elementRenders[i];
        l->clear();
        delete l;
      }    
    _elementRenders.clear();
    
    updateContentSizeWithTextureSize(_contentSize);
}

终于,CPP层间的逻辑算是实现了。但这时候,又有新的问题出现了。

解决LabelLetter无法转Lua问题

按照新的逻辑,从Lua层面调用getAllLetters()方法,发现获取的结果依然是空table;但是在CPP层面,却是可以获取到数据的。那么问题就出在toLua的过程。

说明:tolua是cocos2d-x提供的lua-binding工具,位于项目tools/tolua目录下。

继续断点调试,将问题定位在了下面这个方法:

/**
 * Push a table converted from a cocos2d::Vector object into the Lua stack.
 * The format of table as follows: {userdata1, userdata2, ..., userdataVectorSize}
 * The object in the cocos2d::Vector which would be pushed into the table should be Ref type.
 *
 * @param L the current lua_State.
 * @param inValue a cocos2d::Vector object.
 */
template <class T>
void ccvector_to_luaval(lua_State* L,const cocos2d::Vector<T>& inValue)
{
    lua_newtable(L);

    if (nullptr == L)
        return;

    int indexTable = 1;
    for (const auto& obj : inValue)
    {
        if (nullptr == obj)
            continue;


        if (nullptr != dynamic_cast<cocos2d::Ref *>(obj))
        {
            std::string typeName = typeid(*obj).name();
            auto iter = g_luaType.find(typeName);
            if (g_luaType.end() != iter)
            {
                lua_pushnumber(L, (lua_Number)indexTable);
                int ID = (obj) ? (int)obj->_ID : -1;
                int* luaID = (obj) ? &obj->_luaID : NULL;
                toluafix_pushusertype_ccobject(L, ID, luaID, (void*)obj,iter->second.c_str());
                lua_rawset(L, -3);
                ++indexTable;
            }
        }
    }
}

问题的症结出在了g_luaType这里,在这个数组里,找不到LabelLetter类,虽然getAllLetters()返回的是Sprite的数组,但本质上,Label::getLetter()中返回的Sprite是通过LabelLetter创建的,而LabelLetter是在CCLabel.cpp里面定义的,g_luaType根本不知道LabelLetter的存在。

既然如此,就一改到底吧!

template <class T>
void ccvector_to_luaval(lua_State* L,const cocos2d::Vector<T>& inValue)
{
    lua_newtable(L);

    if (nullptr == L)
        return;

    int indexTable = 1;
    for (const auto& obj : inValue)
    {
        if (nullptr == obj)
            continue;


        if (nullptr != dynamic_cast<cocos2d::Ref *>(obj))
        {
            std::string typeName = typeid(*obj).name();

            // --------------------------------------------
            // 添加的代码
            if (typeName == "class cocos2d::LabelLetter")
            {
                typeName = "class cocos2d::Sprite";
            }
            // --------------------------------------------

            auto iter = g_luaType.find(typeName);
            if (g_luaType.end() != iter)
            {
                lua_pushnumber(L, (lua_Number)indexTable);
                int ID = (obj) ? (int)obj->_ID : -1;
                int* luaID = (obj) ? &obj->_luaID : NULL;
                toluafix_pushusertype_ccobject(L, ID, luaID, (void*)obj,iter->second.c_str());
                lua_rawset(L, -3);
                ++indexTable;
            }
        }
    }
}

在获取typeName以后,判断typeName的类别,若是class cocos2d::LabelLetter,则将其强行改为class cocos2d::Sprite

至此,RichText可算可以调用getAllLetters()拿到所有的文字了,本教程也算告一段落。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏python3

使用python创建cocos2d-x项

已准备条件: 已安装vs2012,已下载cocos2d-x sdk 2.2.3包。

6020
来自专栏python3

cocos2dx[3.2](3) ——大

(1)v3.0 发布说明:https://github.com/fusijie/Cocos2d-x3.0-Release-Note/blob/master/c...

3820
来自专栏大白技术控的技术自留地

知乎高赞:中国有什么拿得出手的开源软件产品?(整理自本人原创回答)

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

8520
来自专栏Cocos Creator开发

Cocos Creator实现左右跳游戏

游戏开始后,点击屏幕左右两侧,机器人朝左上方或右上方跳一步,如果下一步有石块,成功得1分,否则游戏结束。

23650
来自专栏Crossin的编程教室

用python写一个简单的贪吃蛇游戏

Python 虽然并不是一个“为游戏而生”的语言,但也有着自己的游戏引擎。最常用的就是 pygame。另外还有一个知名游戏引擎 cocos2d,它的最初版本就是...

15810
来自专栏python3

从零开始学会用Python3做捕鱼达人游

首先对捕鱼达人这款游戏做个简单了解。捕鱼达人是前几年特别火的一款游戏,他是一款以深海狩猎为题材的休闲竞技游戏。2009年《捕鱼达人》上线,最初以简单轻松的捕鱼玩...

4920
来自专栏游戏开发之旅

Cocos Creator 制作第一个游戏

您正在阅读的手册文档包括了系统化的介绍 Cocos Creator 的编辑器界面、功能和工作流程,但如果您想快速上手体验使用 Cocos Creator 开发游...

6920
来自专栏IMWeb前端团队

修复cocos2d-jsv3.1文本换行bug

使用cocos2d-js版开发跨平台手游非常简单,并且在手机端也拥有不错的性能。但因为推出时间并不够久,用户也不够多,项目里仍然存在不少bug,这里介绍一个常见...

8520
来自专栏python3

Lua(3) ——Cocos之_语法糖c

    在使用Lua的时候,cocos2d-x为我们提供了一个 class(classname, super) 这个函数。

4820

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励