cocos2dx实现功能强大的RichText控件

原创 2014年05月18日 11:35:14

      最近准备做一个聊天系统,开始准备使用cocos2dx的UIRichText控件来显示聊天内容,结果在使用的时候才发现,cocos2dx的RichText功能非常有限,完全不具备实现聊天的功能,只实现了加入文本、图像和自定义控件的功能,支持不同字体、颜色、字号。

      我个人认为,一个RichText控件应该具备以下基本功能:

      1、多样化的文本显示功能,包括字体、颜色、字号的设置。

      2、能显示图片以及一些特殊元素。

      3、应该支持图片文字的超链接功能。

      4、能够支持滚动的效果。

      5、能够有很方便的换行功能,最好能设置行间距。

      如果能够更好的实现聊天的功能,我觉得还需要加入以下功能:

      1、文本特效:描边,下划线,阴影,发光等功能。

      2、支持设置控件最大显示行数。

      3、支持数据的分类显示,用于分频道显示聊天内容。

      cocos2dx只实现了基础的1和2功能,所以考虑之后还是决定自己写一个RichText控件。UIRichText的框架还是不错的,实现了文本分行显示的技术。在他的基础上很容易扩展。 

      首先,扩展RichItem,用来支持多样化的文本需求。

      其次,扩展Label控件,用于支持特殊的文字效果。

      再次,需要实现滚动功能,控件继承UIScrollView。

      最后,还需要对lua进行支持,包括使用功能以及超链接点击事件的注册。

      以上是我实现控件的思路,这里就不贴代码了,很多,我会把我的控件代码共享给大家,大家在使用中有什么问题也可以向我咨询。 

      源代码在这里,cocos2dx-3.0功能强大的richText控件 

      最后贴一下使用的代码和效果图吧!

      使用代码如下,我是在lua里面使用的,大家可以参考一下:     

function ChatUI:initRichEdit()    
    local widget = self:getWidget()
    if widget then
        --创建小喇叭控件
        self._richBugle = ui.RichTextUI:create()
        self._richBugle:setSize(cc.size(940, 35))
        self._richBugle:setAnchorPoint(cc.p(0, 0))
        self._richBugle:setPosition(cc.p(100, 510))
        self._richBugle:setMaxLine(1)
        --创建聊天控件
        self._richChat= ui.RichTextUI:create()
        self._richChat:setSize(cc.size(940, 420))
        self._richChat:setAnchorPoint(cc.p(0, 0))
        self._richChat:setPosition(cc.p(20, 70))  

        widget:addChild(self._richBugle)
        widget:addChild(self._richChat)

        local function callback(sender, eventType)
			if eventType == ui.RICHTEXT_ANCHOR_CLICKED then
				print(">>>>>>>>>>>addEventListenerRichText")
			end
		end
		self._richChat:addEventListenerRichText(callback)
    end 
end

function ChatUI:addChatMsg(channel, roleName, chatMsg, signs)
    local richText = (channel == Channel_ID_Bugle) and self._richBugle or self._richChat
    if richText and channel and roleName and chatMsg then
        local ChannelNameSwitch = 
        {
            [Channel_ID_Team] = "【队伍】",
            [Channel_ID_Privacy] = "【私聊】",
            [Channel_ID_Faction] = "【帮会】",
            [Channel_ID_World] = "【世界】",
            [Channel_ID_System] = "【系统】"
        }
        local ChannelColor = 
        {
            [Channel_ID_Team] = Color3B.ORANGE,
            [Channel_ID_Privacy] = Color3B.ORANGE,
            [Channel_ID_Faction] = Color3B.ORANGE,
            [Channel_ID_World] = Color3B.ORANGE,
            [Channel_ID_System] = Color3B.WHITE,
            [Channel_ID_Bugle] = Color3B.ORANGE
        }
        local linkColor = Color3B.YELLOW
        local linklineColor = Color4B.YELLOW   
        local outlineColor = Color4B.BLACK  

        if channel == Channel_ID_Bugle then
            richText:insertNewLine()
        end
        if ChannelNameSwitch[channel] then
            local rc = ui.RichItemText:create(channel, ChannelColor[channel], 255, strg2u(ChannelNameSwitch[channel]), "DFYuanW7-GB2312.ttf", 25)    
            rc:enableOutLine(outlineColor, 2)
            richText:insertElement(rc)
        end
        if channel ~= Channel_ID_System then
            local rcn = ui.RichItemText:create(channel, linkColor, 255, strg2u(roleName), "DFYuanW7-GB2312.ttf", 25)  
            rcn:enableLinkLine(linklineColor, 1)
            rcn:enableOutLine(outlineColor, 2)
            richText:insertElement(rcn)
            chatMsg = ":" .. chatMsg
        end
        local rcm = ui.RichItemText:create(channel, ChannelColor[channel], 255, strg2u(chatMsg), "DFYuanW7-GB2312.ttf", 25)  
        richText:insertElement(rcm)
        if channel ~= Channel_ID_Bugle then
            richText:insertNewLine()
        end
    end
end

function ChatUI:initComponent()   
    self:addChatMsg(Channel_ID_Bugle, "王小二", "This is Bugle Msg")
    self:addChatMsg(Channel_ID_System, "", "This is System Msg")
    self:addChatMsg(Channel_ID_Team, "王小二", "This is Team Msg")
    self:addChatMsg(Channel_ID_World, "王小二", "This is World Msg")
    self:addChatMsg(Channel_ID_Faction, "王小二", "This is Faction Msg")

    self._channel = Channel_ID_World
    self:showChannel(Channel_ID_All)
    local btnChannel = self:getChild("Button_Channel")
	if btnChannel then
        btnChannel:setTitleText(strg2u("世界"))
    end    
end

        最后是效果图:

         

cocos2dx --- 富文本的使用 RichText

cocostudio 提供的 RichText 研究,简单富文本显示研究。
  • bys0201
  • bys0201
  • 2014年06月04日 10:44
  • 8153

Cocos2dx-- 聊天系统之富文本(RichText)与字体对齐

前言游戏开发中我们一般都会有聊天系统,我们可以同时或单独发文字,图片,表情,超链接等信息的文本即称为富文本。如下图所示: 我使用的是cocos-3.4引擎版本里的RichText富文本控件实现这些操...

富文本 richText 分段加载 ColorFont.lua

module("ColorFont",package.seeall) local DEFAULT_FONT = "Droid Sans Fallback" -- "Droid Sans Fa...
  • lynon
  • lynon
  • 2015年05月22日 17:14
  • 1166

cocos2d-x ScrollView RichText用法和使用中的坑

ScrollView 是滚动层,RichText 是富文本 版本 cocos2d-x 3.8.1 直接上代码好了 头文件,不管用不用得到,包涵了总没错 #include "cocos2...
  • wtfATT
  • wtfATT
  • 2015年11月11日 12:59
  • 1884

cocos2d-lua 手游之RichText的改写

cocos2d-lua 手游之RichText 的改写(lua版) RichText控件应该具备以下基本功能: 1、多样化的文本显示功能,包括字体、颜色、字号的设置。 2、能显示图片以及一些特...

cocos3——7.使用UI的RichText

1.创建 var richText = new ccui.RichText(); richText.ignoreContentAdaptWithSiz...

cocos2d-js RichText使用

需求:显示这样的一段文字 1.黑色,随便填的颜色黑色。\n2.第二行了随便填的颜色 其中的font标签用来包裹要用其他颜色显示的文字。 实现: addRichText: function(...

cocos2d-js ccui.RichText的一点总结

cocos2d-js ccui.RichText的一点总结

Sublime Text 3插件安装和主题配置

安装Sublime text 3插件,配置主题

9 个最佳的 Sublime Text 3主题

Sublime Text 是一个轻量、简洁、高效、跨平台的编辑器。有些人会认为变更Sublime Text的皮肤是一件浪费时间的事情,但也许你没想过,一个漂亮的主题会提高你的工作效率。下面这9款主题都...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:cocos2dx实现功能强大的RichText控件
举报原因:
原因补充:

(最多只允许输入30个字)