最近准备做一个聊天系统,开始准备使用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里面使用的,大家可以参考一下:
[plain] view plaincopy
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 最后是效果图:
