大话cocos2d中的文字显示（CCLabelTTF、CCLabelBMFont和CCLabelAtlas）

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

 

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];

效果如下：

 

CCLabelBMFont：

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

纹理贴图示例：

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的幂指数，也就是类似于64，128，256…这种，如果字符比较大或者字符总数比较多的时候，一张纹理贴图可能不能够完全存下所有的字符，这时候就会有多张纹理贴图对应同一个fnt文件，也就是所谓的分页。

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

关于纹理贴图和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文件和纹理文件一定都要引入工程中。上面的代码的效果如下：

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

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

 

CCLabelAtlas：

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

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

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

label.position =ccp(200, 200);

[selfaddChild:label];

解释一下上面的代码：

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

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

上面代码的执行结果：

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

 

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