cocos2dx对于强大的RichText控制
2015-07-03 09:15
363 查看
最近准备做一个聊天系统,开始准备使用cocos2dx的UIRichText控制显示屏聊天,在使用中发现的结果,cocos2dx的RichText很有限。全然不具备实现聊天的功能。仅仅实现了增加文本、图像和自己定义控件的功能。支持不同字体、颜色、字号。
我个人觉得。一个RichText控件应该具备下面基本功能:
1、多样化的文本显示功能,包含字体、颜色、字号的设置。
2、能显示图片以及一些特殊元素。
3、应该支持图片文字的超链接功能。
4、可以支持滚动的效果。
5、可以有非常方便的换行功能,最好能设置行间距。
假设可以更好的实现聊天的功能。我认为还须要增加下面功能:
1、文本特效:描边。下划线,阴影,发光等功能。
2、支持设置控件最大显示行数。
3、支持数据的分类显示,用于分频道显示聊天内容。
cocos2dx仅仅实现了基础的1和2功能,所以考虑之后还是决定自己写一个RichText控件。UIRichText的框架还是不错的,实现了文本分行显示的技术。在他的基础上非常easy扩展。
首先,扩展RichItem,用来支持多样化的文本需求。
其次,扩展Label控件,用于支持特殊的文字效果。
再次。须要实现滚动功能,控件继承UIScrollView。
最后,还须要对lua进行支持,包含使用功能以及超链接点击事件的注冊。
以上是我实现控件的思路。这里就不贴代码了。非常多。我会把我的控件代码共享给大家,大家在使用中有什么问题也能够向我咨询。
源码在这里,cocos2dx-3.0功能强大的richText控件
最后贴一下使用的代码和效果图吧!
使用代码例如以下,我是在lua里面使用的。大家能够參考一下:
最后是效果图:
我个人觉得。一个RichText控件应该具备下面基本功能:
1、多样化的文本显示功能,包含字体、颜色、字号的设置。
2、能显示图片以及一些特殊元素。
3、应该支持图片文字的超链接功能。
4、可以支持滚动的效果。
5、可以有非常方便的换行功能,最好能设置行间距。
假设可以更好的实现聊天的功能。我认为还须要增加下面功能:
1、文本特效:描边。下划线,阴影,发光等功能。
2、支持设置控件最大显示行数。
3、支持数据的分类显示,用于分频道显示聊天内容。
cocos2dx仅仅实现了基础的1和2功能,所以考虑之后还是决定自己写一个RichText控件。UIRichText的框架还是不错的,实现了文本分行显示的技术。在他的基础上非常easy扩展。
首先,扩展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
最后是效果图:
相关文章推荐
- 在cocos2d-x中实现真随机数
- Cocos2D-x工程目录介绍
- cocos2d-x2.2.5 + cocos2d-x3.2鸟跳便宜源代码“开源”
- cocos2d 0.99 与cocos2d v2.1 restoreOriginalFrame 播放动画使用重置默认桢的区别
- 【转载】cocos2d-x tile map瓦片地图的黑线及地图抖动解决方案
- cocos2d-x坐标系
- cocos2d-x开发 - mac环境搭建
- cocos js 发布
- cocos2dx 程序 在 android 平台下的 启动顺序
- cocos2d-x 3.3 之卡牌设计 NO.6 Loading界面(异步加载图片,plist)
- Cocos2d-JS 热更新的策略
- Cocos2d-x 学习笔记–Cocos Studio UI加载
- cocos2dx 3.1.1 在线热更新 自动更新(使用AssetsManager更新游戏资源包)
- Cocos-js——粒子系统
- quick-cocos2d-x 3.3 配置开发环境
- cocos2dx的发展的例子2048(加入动画版)
- cocos2dx android 环境 搭建
- 【Cocos2d-x v3.x官方文档】Cocos2d-x 多分辨率适配完全解析
- Cocos2d-x 3.0 红孩儿私人义务教育 - 第一章 熟人Cocos2d-x 3.0project
- windows下搭建cocos2d-x环境