如何制作BMFont位图字体

不管是Cocos2d-x还是其他的引擎或程序中，我们通常需要用到中文或显示一些好看华丽的文字效果。一般情况下，最先想到的方法当然是让美术提供。但作为程序猿的你应该知道，这不算是个很好的方法，而且它也不是唯一的方法。所以今天本喽喽将要给大家说说另一种实现以上功能的方法——利用位图字体，当然本文的着重在于讲解如何制作BMFont位图字体。

Cocos2d-x中，支持位图字体创建的类是LabelBMFont类，LabelBMFont是一种纹理地图集形式的标签类，它支持FNT类型的文件，且它适合于需要频繁更新的文本内容或者显示好看华丽的文字内容。 LabelBMFont使用图片文件显示文本内容，相当于每次只是改变了图片的坐标，LabelBMFont中每个字符都可被看作是一个精灵，可以单独获取并运行动作。

所谓位图字体，其实是由很多单个的位图字符组成的纹理集，其就是说它是通过图片文件显示文本内容的。

位图字体可以使用专门的编辑工具制作，如Glyph Designer、Hiero和BMFont等等。这些工具可以帮助我们从字库文件中抽取字形，生成我们需要的文字集图片(png格式)和字体信息文件（fnt格式），其中fnt文件中包含了对应图片的名字(图片包含了所有你要绘制的字符)、图片中的字符对应的unicode编码、字符在图片中的坐标、宽和高等信息。

下面就让我们一起来看看如何制作位图字体吧。

Glyph Designer

在Mac环境下，这里我给大家介绍的位图字体编辑器是Glyph Designer，Cocos2d-x支持许多使用fnt文件格式的位图字体，Glyph Designer是一款Mac环境下的字体设计器来创建字体图集（Windows下可使用Hiero和BMFont）：

Glyph Designer是一款Mac环境下的字体设计器，使用它来创建位图字体相当的轻松，下面我们先来对编辑器整体做一个认识，见下图。

![jiemian][1]

上图中，最中间的部分是渲染区域，也就是我们的画布，所有字符编辑结果都会在这个区域中显示。

在左边窗口部分有一个TrueType字体列表。如果不够用，可以使用Load Font图标加载任意TTF文件，也就是PS中的笔刷文件，这里可以在网上下载任意喜欢的笔刷。Glyph Designer允许从任何TrueType字体创建位图字体。

在字体列表下方，可以使用滑动条改变字体大小，并应用粗体、斜体和其他字体样式。

在右侧窗口中，Glyph Info项记录了每个（选中）字符的基本信息，包括字符、字符ID和Glyph ID。

Texture Atlas项中可以修改纹理图册的设置，不如背景颜色、字符之间的空格等，不过其实在大多数情况下，这些属性是没有必要修改的。Glyph Designer确保了纹理图册总是足够大到能够在单个纹理中包含所有的笔画。

Glyph Fill项中可以修改字符的颜色、填充方式等属性。

Glyph Outline项中可以修改每个字符的外轮廓属性。

Glyph Shadow项中可以为字体创建3D外观，说直白一点就是设置具有立体视感的阴影。

Included Glyphs项中是你需要的全部字符，你可以在这里输入纹理图册中所需要包含的预定义字符。如果十分确定不需要某些字符，那么也可以输入自己的字符列表来减小纹理的尺寸。例如，在得分字符串中，只需要数字和很少的一些字符，所以这么做特别有帮助。

以下是使用Glyph Designer制作位图字体的一般步骤：

启动Glyph Designer，选择File->New，在左上的搜索框中键入需要的字体集名，如没有合适的字体，可自己导入。注意：如需要的字符中有中文，那么选择字体集时一定要选择包含有中文字符的字体集。 ![step1][2]

设置字体尺寸，默认情况下Glyph Designer自动调整字体图集尺寸为最小可能值以适配所有可能的图像。

在右边Glyph Fill里面设置字体填充方式、颜色等。

在Included Glyph里面点击NEHE按钮，在此区域键入你所需要用到的字符，完成后点击Update更新渲染区显示内容。

![step2][3]

点击Export按钮导出文件，选择导出文件类型时选择默认的“.fnt(cocos2d Text)”格式。 ![step3][4]

BMFont

在Windows中，最常用的字库图集制作工具是BMFont，在它的官网中可以找到其下载链接。BMFont编辑器相较于Glyph Designer当然是没有什么优势的，它也不能实现很多牛逼的文字特效效果，但起码地，它可以我们满足基本的要求。

BMFont编辑器的使用方法如下：

打开这款软件，界面如下，右边的列表是字体库：

![b1][5]

新建一个txt文本，在里面输入要用的文字（一定要保存为UTF-8格式，否则软件无法识别）。

![b2][6]

在BMFont上找到Option菜单，然后选择Font Setting设置字体，然后设置其中的Font和Charset（默认的Unicode就可以）。

![b3][7]

如txt文本中包含中文，那么Font类型应选择用中文的字体类型，比如宋体，黑体等等，像Arial之类的字体类型中是不可能有中文的。此时如选择了Arial，则会如下图一样：

![b4][8]

在BMFont上找到Edit菜单，然后选择Selects chars from file，载入刚才新建的txt文件，你会发现刚才输入的字符在BMFont中已经被选中。

![b5][9]

![b6][10]

设置导出选项，在BMFont上找到Option菜单，然后选择Export options，在cocos2d-x中需要按如下设置：

![b7][11]

Width和Height的值，一般都会自动调节，4096可以说是最大了，请不要超过这个值，不然做出来的图集太大，会加大drawcall的数量。

bit depth，这里选用的是8位，很多人可能觉得不清晰，但它是可以选择32位的，不过同样会增大负担。

注意以上所说的负担都是针对手机。

准备导出字体，在BMFont上找到Options，然后选择Save bitmap font as，完成后你会发现保存的路径下多出了一个fnt文件和一个png文件（这与plist文件保存拼图信息原理差不多）。

希望河南新华的回答可以帮助到你

//读取文件的函数

int readBmp(char *bmpName)

{

FILE *fp=fopen(bmpName,"rb")//fp指向文件的开头

if(fp==NULL)

{

return 0

}

else

{

fseek(fp, sizeof(BITMAPFILEHEADER),0) //以0为基准，偏移文件头个字节，fp指向此处，即信息头

BITMAPINFOHEADER head//定义信息头结构变量

fread(&head, sizeof(BITMAPINFOHEADER), 1,fp)//head指向读取出的信息头

bmpWidth = head.biWidth //图像的宽度

bmpHeight = head.biHeight //图像的高度

biBitCount = head.biBitCount//每像素的位数

int lineByte=(bmpWidth * biBitCount/8+3)/4*4//定义变量，计算图像每行像素所占的字节数（必须是4的倍数）

//申请位图数据所需要的空间，读位图数据进内存

pBmpBuf=new char[lineByte * bmpHeight] //图象数据指针，pBmpBuf指向实际的图象数据

fread(pBmpBuf,1,lineByte * bmpHeight,fp)

fclose(fp)//关闭文件

return 1//读取文件成功

}

}

比较简单的的方法是：在设计视图下预先向图片上添加(叠加)文本框或标签控件，如果是多行文本选择文本框比较合适，应去掉文本框前面的标签，在文本框属性中设置为无边框、底色设置为透明，字体、字号、颜色等都可以预先设置好，这些都弄好后就可以根据你的功能要求在不同的事件代码中(比如窗体加载、打开、打印按钮单击等等)直接向文本框赋值字符串就可以了，当然也可以让窗体进入打印预览，显示图像及文字满意后再正式打印。

---