Question

如何制作BMFont位图字体

Answer 1

不管是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文件保存拼图信息原理差不多）。
希望河南新华的回答可以帮助到你