IOS|cocos2d cocos2d-x 使用自定义字体 cocos2d-x|cocos2d自定义字体|Bitm

我们写项目，难免游戏或应用里用一些艺术字，今天我们来扯一扯cocos2d-iphone(cocos2d-x一样)的自定义字体CCLabelBMFont：
首先下个字体编辑工具来设置字体

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)（我们今天以这个为例）
http://glyphdesigner.71squared.com/ (Mac only)
http://www.bmglyph.com (Mac only)
http://tinyfont.com (Mac only)

我们今天以Bitmap font generator 为例，下载、安装、打开就看到这么个界面

文章图片

第一步：Options ——> Font settings设置要自定义字体的基字体

文章图片

小注：size就是字体大小，因为这个方法会糊，尽可能靠近你使用的字体大小，其他的没啥特别要说明的，根据英文见名知意就好了

第二步：Edit ——> Clear all chars in font。

第三步：Edit——> Select chars from file
事先建好的一个txt，里面有你要设置特殊字的文字，例如我有一个123.txt

文章图片

选取这个文件，确定的时候，如果没有任何提示说明就成功了，如果提示有问题，这个就是字符编码的问题，建议选择unicod或UTF-8（当然了，这个后续生成的图片有问题,出现乱码或无图片也就是这个txt的编码问题，修改下就可以了，不要告诉我你不会修改txt的编码）
第四步：Options ——> Font settings

文章图片

小注：因为我要后续描边所以我的padding 2, 2,2, 2 ； Bit depth:选择32位这样才支持透明；Texture 的width和高度，根据你的字体大约数字调整，因为我们在玩cocos2d-x和cocos2d,所以记得2的n次方，不浪费的程序员才是好程序员（哈哈，这里千万别太省了，太省了你会二笔的发现，保存字体后，我靠，好多 .fnt 和 .png）； Textures这个肯定png了，然后OK。
最后一步：导出字体Ctrl+S ( Options ——> Save bitmap font as ) 起个名字，然后就看到了一个*.fnt 和一个*.png

文章图片

OK 拿着这两个东东，.png加工后（这个png我是拿到photoshop里面做了个简单的描边），切处理完毕，这两个东东托到我们的项目里面去。
首先呢，我们来看看cocos2d-iphone

CCLabelBMFont *label = [CCLabelBMFont labelWithString:@"关于我们" fntFile:@"jingui.fnt" width:32 alignment:NSTextAlignmentLeft]; // ask director for the window size CGSize size = [[CCDirector sharedDirector] winSize]; // position the label on the center of the screen label.position =ccp( size.width /2 , size.height/2 ); CCLabelBMFont *label2 = [CCLabelBMFont labelWithString:@"我是jingui" fntFile:@"jingui.fnt" width:32 alignment:NSTextAlignmentLeft]; // position the label on the center of the screen label2.position =ccp( size.width /2 , size.height*0.76 ); // add the label as a child to this Layer [self addChild: label]; [self addChild: label2];

运行效果：

文章图片

然后我们再来看看cocos2d-x

CCLabelBMFont *labelTest = CCLabelBMFont::create("我是jingui", "jingui.fnt", 32.f, kCCTextAlignmentLeft); labelTest->setPosition(ccp(origin.x + visibleSize.width*0.5, origin.y + visibleSize.height*0.66)); // add the label as a child to this layerthis->addChild(labelTest,1);

运行效果：