Quick-x cocos2dx下的彩色文本显示--RichLabel

本文源自: http://www.cnblogs.com/creeper/p/3975085.html


部分关键代码与思路参考 http://www.cocoachina.com/bbs/read.php?tid=218977&page=1

感谢原作者 i7909

代码下载地址:https://github.com/chenquanjun/Quick-x-RichLabel

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

cocos2dx支持的文本显示模式比较单一,不支持图文混排与彩色文本。刚好项目要用到彩色文本,所以写了一个简单的类来实现

  • 一、介绍

支持功能

1、图文混排

2、多彩文字混排,支持定义颜色,大小,字体等等属性

3、支持标签内嵌

4、支持自动换行

5、文字fadeIn动画效果(因为是单个字符创建成精灵,可扩展成各种动画效果)

6、支持改变文字,改变文字整体尺寸(其实是宽度)

用于聊天系统、公告或装备描述性文本块(抄原作者的话啦)

还可以用作人物对话,类似Galgame的人物对话(咳咳)

 

  • 二、原理

 1、字符串定义/规则

(1)彩色文本以[fontColor=xx]开头,[/fontColor]结尾,若要改变字体大小,字体类型等等,在开头框中加入对应的关键字(不需要加入关键字结尾),例如:

local str = "[fontColor=ff7f00 fontName=ArialRoundedMTBold fontSize = 30]测试[/fontColor]" --创建颜色为ff7f00,字体名为ArialRoundedMTBold,大小为30的测试 label

文本支持参数 fontColor, fontSize, fontName等等

 

(2)图片以[image=xx.png]开头,[/image]结尾,例如图片支持参数 image(必须), scale

local imageStr = "[image=test.png scale = 1.2][/image]" --创建文件名为test.png的精灵,大小为1.2

 

(3)支持图文混排,例如

local multiStr = "[fontColor=42426f]哈哈哈哈哈哈!![/fontColor][image=wsk1.png scale=1.3][/image]"

 

2、实现原理

(1)字符串解析

1.将字符串以标签头[]为关键字分隔字符串

  标签头分割

2.标签解析

原理就是将标签的定义属性一个个分离出来然后以table来储存

  标签解析

 

(2)字符分隔

主要用了Unicode编码的原理分隔字符串,此处就不展开了

简单来说就是每个字符的第一位定义了该字符占据了多少字节。这个可以用排队来理解,如果每个人都一样体型的话,n个人的队列长度是一定的,但是如果有些人长得胖有些人长得瘦,那么队列的长度就不确定了,于是乎我们定了一个规则

最瘦的占1个空间,比较瘦的占2个空间,如此类推,只要在范围内的都固定相同空间,然后在头上贴个标签说明他是哪个分段的。这样的话我们只要不断读取他们的头(-,-),就可以把他们分出来了。

  字符分隔

 

(3)精灵创建

前面已经把字符串都分割成单个字符了,这里就是简单的创建精灵了,因为只有两种,所以区分一下用label还是sprite来创建即可

  创建精灵

 

(4)位置调整

字符串解析和位置调整是richlabel实现的关键,主要是通过实际创建精灵然后获得精灵的大小,然后按顺序"填"到指定的区域之中,遇到边界则换行

  位置调整

 

  • 三、测试

测试(1):改变大小 (浅灰色的是设置的尺寸,深灰色的是文字实际的尺寸)

目前仅实现了宽度适应

 

测试(2)设置文字测试

测试(3)动画测试

 


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值