2dx中使用自定义位图字体

开发日志系列(十三)

成品预览

环境与工具

cocos2d-x 2.2.3,AngelCode,PhotoShop

在我参与的项目中,由于美术对战斗表现非常苛刻,飘血等飘字的样式否需要逐字自定义,例如上图中的Zzz,闪避,反击,等等,最初他们设想是把所有飘字做成各个散图,用飘图来代替最初的飘文字.这绝对不是一种好的方法.于是我想到了自定义位图字体.在 cocos2d-x源码中发现CCLabelBMFont对位图字体支持的非常不错.因为CCLabelBMFont中仅仅看某个字的矩阵范围,而这个矩阵里是什么 有什么 完全不会干涉.创建位图字体首先需要使用一款叫做AngelCode的工具.步骤如下:

AngelCode的使用

• 新建一个文本文件,写入要做成位图的字,例如:反击 挡 连击 闪 睡(Zzz)
• 保存为UTF8格式
• AngelCode中Edit->Select chars form file
• AngelCode中Options->Font Setting 设置size大小
• AngelCode中Options->Font Setting 选择默认字体
• AngelCode中Options->Export Options修改 间隙像素 建议 > 3,
• AngelCode中Options->Export Options修改Texture寛高
• AngelCode中Options->Export Options修改Bit深度为32
• AngelCode中Options->Export Options修改File Format为Text
• AngelCode中Options->Export Options修改Textures为png文件
• AngelCode中Options->Save Bitmap font as生成位图字体

为适用cocostudio的自定义位图控件还需要改一下两个地方:

• 打开输出的.fnt修改file="xxx_0.png" 为file="xxx.png"
• 修改输出的.png文件名xxx_0.png 改为xxx.png

修改个别特殊字的矩阵

上图中我的睡字 其实是用了Zzz符号代替的,但是这个符号比睡字大根本放不下.怎么办呢?我们可以直接修改.fnt文件中睡字所在的矩阵范围.例如原来的是:

char id=30561 x=390   y=0     width=74    height=74    ....省略后面部分

74×74的寛高直接被我修改为:

char id=30561 x=390   y=0    width=112    height=94    ....省略后面部分

这样就解决了个别特殊字体过大的问题,当然 也可以在程序里把字体放大,但是美术们好像对放大的效果不满意.所以直接修改fnt数据应该是最好的方法了.

在cocos2dx中使用

std::string szString("睡睡");
std::string szFontName("FightFilyFont.fnt");
CCLabelBMFont::create( szString, szFontName, kCCLabelAutomaticWidth, kCCTextAlignmentCenter );