Fork me on GitHub

cocos2d Labels and Fonts 标签和字体(附：关于Hiero的二三事)

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:

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退出。













 

 

 

 

 

 

 

 

posted on 2012-04-06 14:40  pengyingh  阅读(2773)  评论(0)  编辑  收藏  举报

导航