大话cocos2d中的文字显示(CCLabelTTF、CCLabelBMFont和CCLabelAtlas)

原创 2017年01月03日 23:12:21

cocos2d中提供了三种文字显示方式,分别是CCLabelTTFCCLabelBMFontCCLabelAtlas,三种方式的效率由低到高,我们下面依次进行介绍。

 

CCLabelTTF

CCLabelTTF 每次调用 setString (即改变文字)的时候,一个新的OpenGL纹理将会被创建.。这意味着setString 和创建一个新的标签一样慢。所以,当你需要频繁的更新显示的文字内容的时候,尽可能不去使用该对象,而是使用CCLabelAtlas或者是CCLabelBMFont

调用方法如下:

CCLabelTTF*ttfLabel = [CCLabelTTF labelWithString:@”test123” fontName:@”Arial”fontSize:24];

ttfLabel.position= ccp(200, 200);

ttfLabel.color =ccWHITE;

[selfaddChild:ttfLabel];

效果如下:

【原创】大话cocos2d中的文字显示(CCLabelTTF、CCLabelBMFont和CCLabelAtlas) - 远行的风 - 风的驿站

 

CCLabelBMFont

CCLabelBMFont类使用一张纹理贴图(png文件)和一个详细记录了纹理贴图上每一个字符纹理的偏移量和大小的fnt文件,这张纹理贴图上面包括了CCLabelBMFont中全部允许使用的字符,如果使用了纹理贴图上面没有的字符,则不会显示相应的字符。

纹理贴图示例:

【原创】大话cocos2d中的文字显示(CCLabelTTF、CCLabelBMFont和CCLabelAtlas) - 远行的风 - 风的驿站

fnt文件内容(截取部分):

infoface="04b_19" size=32 bold=0 italic=0 charset="" unicode=1stretchH=100 smooth=1 aa=1 padding=0,0,0,0 spacing=1,1 outline=0

 

commonlineHeight=32 base=27 scaleW=256 scaleH=256 pages=1 packed=0 alphaChnl=0redChnl=0 greenChnl=0 blueChnl=0

 

page id=0file="flappyfont_0.png"

 

chars count=96

 

charid=32   x=247   y=52   width=3     height=1    xoffset=-1    yoffset=31   xadvance=14    page=0  chnl=15

 

charid=33   x=50    y=132  width=9     height=25   xoffset=-1    yoffset=2    xadvance=9     page=0  chnl=15

 

charid=34   x=91    y=158  width=18    height=9    xoffset=-1    yoffset=2    xadvance=18    page=0  chnl=15

……

我们看到fnt文件开头info部分定义了所有字符纹理的一些基本属性(单个字符纹理大小、字符集、平滑、填充、边缘间隔等等),common部分定义了整个纹理文件的属性(纹理文件大小、行高、分页、通道信息等等),page部分定义了纹理文件的分页信息,以及对应分页的纹理文件的名称。

这里我们解释一下什么是分页:纹理贴图的长宽必须为2的幂指数,也就是类似于64128256…这种,如果字符比较大或者字符总数比较多的时候,一张纹理贴图可能不能够完全存下所有的字符,这时候就会有多张纹理贴图对应同一个fnt文件,也就是所谓的分页。

page部分下面就是每个字符的定义了,包括每个字符的idxy位置,高宽,偏移量,所在的分页等信息。

关于纹理贴图和fnt文件的制作,请参考我的另一篇博文《教你使用免费的BMFont工具和Photoshop来制作纹理贴图和fnt文件》

下面是CCLabelBMFont类的用法:

CCLabelBMFont* bmFont = [CCLabelBMFontlabelWithString:@"test1234哈哈" fntFile:@"fntexample.fnt" width:0alignment:kCCTextAlignmentLeft];

bmFont.scale = 2;

bmFont.color =ccRED;

bmFont.position =ccp(200, 200);

[selfaddChild:bmFont];

注意在引入文件的时候,fnt文件和纹理文件一定都要引入工程中。上面的代码的效果如下:

【原创】大话cocos2d中的文字显示(CCLabelTTF、CCLabelBMFont和CCLabelAtlas) - 远行的风 - 风的驿站

注意我们仍然可以为BMFont制定color属性。

BMFont由于需要将整张纹理图载入内存,所以在内存消耗上要多一些,但是效率上面要比CCLabelTTF文件高很多,是一种空间换时间的方法。

 

CCLabelAtlas

相比于CCLabelBMFont的大图片,使用CCLabelAtlas可以使用更小的纹理图,但是在使用上相比CCLabelBMFont而言要缺乏灵活性。CCLabelAtlas不需要fnt文件,只需要一张纹理图就可以了,但是需要保证对于每个字符的纹理图都是相同大小,而且按照顺序排列,例如:

这张纹理图上面定义了罗马数字1-1010个数字,每个数字的纹理图为30px×30px,必须要按照顺序排列,我们通过下面的代码使用这张纹理图:

CCLabelAtlas*label = [CCLabelAtlas labelWithString:@"135792468:"charMapFile:@"RomeNums.png" itemWidth:30 itemHeight:30startCharMap:'1'];

label.position =ccp(200, 200);

[selfaddChild:label];

解释一下上面的代码:

charMapFile参数为纹理贴图的文件,itemWidthitemHeight为每一个字符纹理的高度和宽度,这个一定不要设置错误,不然显示的结果会有偏差,并且要注意区分Retina和非Retina屏的比例关系(如果是Retina屏的DeviceitemWidthItemHeight就要设置为15了)。startCharMap设置起始字符,也就是数字“1对应的字符的ASCII码。

在显示的时候,CCLabelAtlas类会根据字符的ASCII码查找字符,所以我们在制作纹理贴图的时候,如果ASCII码不连续,就需要将不连续的地方留空白,这样在调用的时候才不会出问题。并且注意我们上面调用的时候设置的字符串为@"135792468:",为什么是“:”符号呢?这是因为纹理贴图上面“9”后面是“10”,而在ASCII表中“9”后面是冒号“:”,因为CCLabelAtlas根据ASCII的顺序查找字符,所以我们要显示“10”就需要用冒号“:”来代替。

上面代码的执行结果:

【原创】大话cocos2d中的文字显示(CCLabelTTF、CCLabelBMFont和CCLabelAtlas) - 远行的风 - 风的驿站

CCLabelAtlas常用来显示需要频繁更新的数字,例如我们在Cocos2D中左下角看到的帧频率信息就是用这个方法显示的:

【原创】大话cocos2d中的文字显示(CCLabelTTF、CCLabelBMFont和CCLabelAtlas) - 远行的风 - 风的驿站

 

好了,就介绍到这里,如果有问题欢迎留言讨论。

版权声明:本文为博主原创文章,未经博主允许不得转载。

Cocos2d-x 3.10 使用BMFont 制作自定义位图字体.fnt文件

第一步,下载制作工具BMFont下载地址第二步,选择左上角的Edit->open Image Manager点击后的界面第三步,自定义位图字体资源,按照Ascll码表排序例如,控制字符0对应码值48例...
  • qq_28695619
  • qq_28695619
  • 2017年11月13日 18:19
  • 86

使用BMfont制作含有"中文图片"的.fnt格式字体合图

我们在制作手游中,经常会用到图片字体,即.fnt格式的字体,这种格式的字体中,如果图片是数字,我们可以很快的制作,如果是中文,会造成不小的麻烦,今天这种方法是一种取巧的方法,如果读者有更好的方法,麻烦...
  • MengKing_Curry
  • MengKing_Curry
  • 2017年06月06日 16:23
  • 1977

教你使用免费的BMFont工具和Photoshop来制作纹理贴图和fnt文件

使用免费的BMFont工具和Photoshop来制作纹理贴图和fnt文件
  • qwertyupoiuytr
  • qwertyupoiuytr
  • 2017年01月03日 23:10
  • 1141

cocos2d-x 使用位图工具BMFont自定义字体 fnt

转自:http://blog.csdn.net/keshuiyun/article/details/9960589
  • azhou_hui
  • azhou_hui
  • 2014年07月19日 22:44
  • 1009

通过 Bitmap Font Generator 生成 fnt 与 png 文件供 cocos2d-x 中 LabelBMFont 使用达到以图片表现数字

勤奋努力,持之以恒! 在每个项目开发中几乎都会用到数字,比如战斗结算会有数字的加减,而且往往还伴随着很多特效动画,为了使数字变动更有代入感,一般数字都会给精心设计好的图片资源。那这样程序应该如何实...
  • song_hui_xiang
  • song_hui_xiang
  • 2015年03月02日 21:30
  • 9177

用BMFont做UGUI美术字体

项目中经常会用到数字图片来显示玩家战力、战斗中的伤害数等,可以借助BMFont来制作一种字体,步骤如下: 1,先位图字体制作工具在电脑上安装好BMFont软件(位图字体制作工具),安装好之后打开如下:...
  • u013086341
  • u013086341
  • 2016年08月05日 10:59
  • 1425

UGUI中使用位图艺术字(使用BMfont的两种方式)

第一种方式实现:   NGUI中有 动态字体, BMFont (从官网下载就是一个  .exe  文件! http://www.angelcode.com/products/bmfont/  ) BM...
  • u010019717
  • u010019717
  • 2016年08月18日 09:32
  • 5489

基于cocoStudio和BMfont的艺术字体制作

我们在制作游戏的过程中经常要使用各式各样的艺术字体,这些字体让我们的游戏看起来更加美观更加的萌(- -!) 但是很多的新手都不知道这些字体是如何做出来的,这篇文章主要介绍的是基于cocos2dx它的...
  • u011373759
  • u011373759
  • 2015年03月16日 16:50
  • 3396

cocos2dx添加文本的三种方法及适用情况CCLabelTTF,CCLabelBMFont,CCLabelAtlas

今天白白继续跟大家分享一下cocos2dx添加文本信息的方法。 cocos2dx中有三个类可以添加文本信息:CCLabelTTF,CCLabelBMFont,CCLabelAtlas。 1...
  • w00w12l
  • w00w12l
  • 2014年06月19日 15:05
  • 7056

【独立开发者er Cocos2d-x实战 008】BMFont生成位图字体工具和Cocos2dx使用加载fnt文件

【独立开发者er Cocos2d-x实战 008】BMFont生成位图字体工具和Cocos2dx使用加载fnt文件...
  • chenqiai0
  • chenqiai0
  • 2015年07月14日 23:22
  • 2659
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:大话cocos2d中的文字显示(CCLabelTTF、CCLabelBMFont和CCLabelAtlas)
举报原因:
原因补充:

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