Labels and Fonts 标签和字体
Introduction 介绍
cocos2d 支持 TTF (True Type Fonts) 标签和纹理 atlas 标签.
Pros and Cons of TTF labels: ( Label )
-
+ All the pros of TTF fonts: any size, kerning support, etc.
-
+ 简单实用，不需要外部编辑器.
-
- 创建和更新很慢，因为一个新的纹理将要被创建
Pros and Cons of texture atlas labels: ( LabelAtlas, BitmapFontAtlas )
-
+ 创建和更新很快，因为它不需要创建新的纹理.
-
+ 字体可以自定义 (shadows, gradients, blur, etc)
-
- 依赖于外部的编辑器: AngelCode / Hiero editor, GIMP / Photoshop
Label objects 标签对象
Creating labels 创建标签的简单方式
例如:
Label *label = [Label labelWithString:@"Hello World" fontName:@"Marker Felt" fontSize:24];
[self add: label];
fontName 是要使用的 TTF 格式字体的名字
从 v0.8.2 版本开始，你可以使用自定义的TTF文件. 只需要把.ttf 文件加入到工程. 例如自定义的TTF 文件:
Label *label = [Label labelWithString:@"Hello World" fontName:@"Schwarzwald Regular" fontSize:24];
[self add: label];
从 v0.8.2版本开始:
-
使用 FontLabel 库来读取字体.
-
如果不成功将会使用
UIFont类 (like in v0.8.1)
重要: OpenGL 纹理的大小将会根据字体的大小和名字自动计算出来.
创建标签的复杂方式：
你同样可以使用 API创建:
Label *left = [Label labelWithString:@"Hello World" dimensions:CGSizeMake(480,50)
alignment:UITextAlignmentLeft fontName:@"Marker Felt" fontSize:32];
[self add: left]
如果你使用了这种方式，那么你必须传递一个OpenGL纹理的维度，如果这个纹理不够大，那么只能创建出来一部分了。
可能的对齐方式:
-
UITextAlignmentLeft(左对齐) -
UITextAlignmentCenter(居中) -
UITextAlignmentRight(右对齐)
Updating更新
Like any object that implements the CocosNodeLabel protocol you can update it using the setString method. Example:
[label setString: @"Hello World 2"];
重要: 每次调用 setString 的时候，一个新的OPENGL 纹理将会被创建. 这意味着setString 和创建一个新的标签一样慢.所以，当你需要频繁的更新它们的时候，尽可能的不用去使用标签对象。而应该使用LabelAtlas或者是BitmapFontAtlas
Alignment 对齐
使用anchorPoint 属性可以改变对齐方式. 例如:
//left alignment
[label setAnchorPoint: ccp(0, 0.5f)];
// right alignment
[label setAnchorPoint: ccp(1, 0.5f)];
// center aligment (default)
[label setAnchorPoint: ccp(0.5f, 0.5f)];
Texture Atlas labels
一共有两种类型的 atlas:
-
BitmapFontAtlas -
LabelAtlas
BitmapFontAtlas
Introduction 介绍
BitmapFontAtlas 可以创建一个很快的标签有以下几个原因:
-
bitmap (image) 可以通过编辑器自定义
-
可以没有任何时间中断去创建或者更新一个标签
-
It is very flexible. Each letter of the label can be treated like an
AtlasSprite -
有内核的支持
The BitmapFontAtlas label parses the Angel Code Font format to create a label. To create these kind of labels, you can use any of these editors:
-
http://www.n4te.com/hiero/hiero.jnlp (java version)
-
http://slick.cokeandcode.com/demos/hiero.jnlp (java version)
-
http://www.angelcode.com/products/bmfont/ (windows only)
Java版本编辑器 vs. Windows版本的编辑器:
-
Windows 编辑器是官方的Angel Code 编辑器
-
Java版本编辑器: 可以在Mac使用
-
Java 版本编辑器: 可以有一些额外的特性例如 shadow, gradient, blur
创建一个BitmapFontAtlas
通过如下的方式可以创建一个对象:
BitmapFontAtlas *label = [BitmapFontAtlas bitmapFontAtlasWithString:@"Hello World" fntFile:
@"bitmapFontTest.fnt"];
[self add:label]
操作
由于 BitmapFontAtlas 是 AtlasSpriteManager的子类，你可以以AtlasSprite的形式操纵其中的任何一个字符。第一个字符以tag＝0的形式加载，第二个是依次加1。等等。。例如:
BitmapFontAtlas *label = [BitmapFontAtlas bitmapFontAtlasWithString:@"Bitmap Font Atlas"
fntFile:@"bitmapFontTest.fnt"];
AtlasSprite *char_B = (AtlasSprite*) [label getChildByTag:0]; // character 'B'
AtlasSprite *char_m = (AtlasSprite*) [label getChildByTag:3]; // character 'm'
LabelAtlas
Introduction 介绍
LabelAtlas是cocos2d里面最快的。但是是BitmapFontAtlas子类。它落后的兼容性还是被维护的，但是你可以使用BitmapFontAtlas替换。
Creating a LabelAtlas 创建一个LableAtlas
LabelAtlas *label = [LabelAtlas labelAtlasWithString:@"Hello World" charMapFile:
@"tuffy_bold_italic-charmap.png" itemWidth:48 itemHeight:64 startCharMap:' '];
[self add:label]；
-
charMapFile是一个包含所有字符的图像文件。每一个符号都可以按着ASCII进行排序，并且不能包含多于256的符号在里面
-
itemWidth是字符的宽度像素为单位 -
itemHeight是字符里面的最高的以像素为单位 -
startCharMap是Map里面的第一个字符.
LabelAtlas / BitmapFontAtlas 如何更新
像其他的 CocosNodeLabel 协议中的对象一样。我们使用 setString 方法进行更新.
[label setString:@"Hello World 2"];
更新一个 LabelAtlas 或者是 BitmapFontAtlas 基本上不耗费什么时间
LabelAtlas / BitmapFontAtlas 的对齐方式
如果你要修改对齐方式可以使用anchorPoint属性.例如:
//left alignment
[label setAnchorPoint: ccp(0, 0.5f)];
// right alignment
[label setAnchorPoint: ccp(1, 0.5f)];
// center aligment (default)
[label setAnchorPoint: ccp(0.5f, 0.5f)];
http://zhaaaa.tuita.com/blogpost/21673041
关于Hiero的二三事
昨天使用hiero自定义字体，经过一番小折腾，最后终于ok，再次总结一下经验。
hiero是一个java小程序，能够帮助用户自定义.fnt字体。其中包括填充、轮廓、阴影等效果。进入软件后，首先选择系统自带的字体，然后在Sample Text中输入需要用到的字符。可以根据自己的需要，在右侧的Effects中增减效果。
下方的Rendering中可以预览到当前的字体样式。选择Glyph cache，可以调节所生成png的尺寸以及页数。调节完成后点击reset cache。
最后点击File菜单下面的 Save BMFont files即可。 （注：生成.png和.fnt两个文件，都要拖到工程中才可以执行）
CCLabelBMFont *lbScore = [CCLabelBMFont labelWithString:@"Time:0" fntFile:@"font09.fnt"];
lbScore.anchorPoint = ccp(1,1);
lbScore.scale = 0.6;
[self addChild:lbScore z:1 tag:3];
lbScore.position = ccp(310, 450);
需要注意的是：
1、如果发现生成出来的文字显示时会有重叠、切割的现象，可以再回到hiero界面中查看预览，有可能是字符之间的间距太小造成。只需要调节相应Padding值即可。
2、每生成一个文件，最好关闭hiero，然后再重新进入以生成新的文件。因为这款软件存在不少bug，只打开一次时，不管是覆盖原有文件，还是重新命名，都有可能只改变fnt或png文件中的某一个，就会导致在模拟器中测试时，发现字符全都对不上。
3、有些版本的hiero生成的png文件是反的，将图放进ps中，垂直翻转即可。
4、退出hiero时，最好选择File菜单下的Exit退出。