BMFont工具生成自定义字体

BMFont工具【利用文本文件】/【利用美工提供的字符图形】来生成自定义字体
Unity字体制作工具BMFont：
下载官网：https://www.softpedia.com/get/Programming/Other-Programming-Files/BMFon.shtml
下载网址：http://www.angelcode.com/products/bmfont/
最新版本下载网址：http://gad.qq.com/tool/detail?id=7
最新版本下载_1.14_：点击下载install_bmfont_1.14_beta.exe.7z大小：0.35MB

BMFont的基本用法。对BMFont比较陌生的同学请点击这里先去学习：[()
制作教程网址：<>

本篇讲解如何利用美工提供的字符图形来生成自定义字体。
美术提供的字体经常是下面这样的：

或者这样的：

这时候我们就要借助BMFont了，首先针对真彩色的图形，我们要做一些设定，点击"Options"->“Export options”：

在弹出的窗口中，注意红框中“位深”，设为32：

然后，点击"Edit"->"(Un)Select all chars"，取消选择所有字符。因为我们将在后边导入需要的字符。

OK，现在点击"Edit"->“Open Image Manager”：

弹出图片管理窗体，如下：

那个"Image"是菜单，可以点击。选择"Image"->“Import image…”：

弹出如下窗体：

点击"Browse"按钮，在弹出的“打开”窗口中选择一个字符图片，比如"0":
[注意：图片所在路径必须是英文路径]

然后在ID后的文本框中输入字符"0"的Ascii值：48，点击"OK"。

这时返回主窗体，你会看到字符表中"0"右下角有一个小亮点标记，说明该字符的图形为自定义图片。如下图：

按上述方法，依次加入其它字符的图片，完成后如下：

OK，下面准备导出。导出前我们可以先点击"Options"->"Visualize"预览一下：

嗯，材质稍微有点大。导出fnt：

最后得到如下文件：

作者：keshuiyun
来源：
原文：<>

链接：http://ascii.911cha.com/?year=0

使用制作成功的字体图集：
1、根据C#脚本文件导入Unity后使用
代码链接：<>


材质需要是这个类型的

Font
有几张图片Size就是几
1、将上面的文件导入进Unity【Resources文件夹下】

2、将制作完成的图集导入进Unity

3、更改图集格式

4、开始编辑图集
（1）切图集【选择随意，能切好就行】

（2）将每一个图片按照Ascii码命名，就是根据图片所代表数字改一下每一个图片的名字【图片5对应名字5】：如下图5对应的是7，所以要改成5
【注意：改图片名字不能重复不然改不过来，所以先用一个其他所有图片没使用过的名字代替，然后一个个改成想要改成的名字】
例如：图片7对应名字Score_0_5 相应 图片5对应名字Score_0_7，那么图片7的名字先改为Score_0_17 然后 图片5的名字才能改为Score_0_5，然后图片7的名字再改为Score_0_7

（3）所有图片名对应属于自己数字后应用一下
【注意：图集有更改应用按钮才可以点 没更改不用点相应的也不能点】

返回Resources文件夹

（4）创建材质：选中图集/右键/CreateMyFontSprite

会弹出下面窗口：点击导入就行

结果：

（5）使用:
W:字宽 H:字高

设置行间距Line Spacing

创建Text文本框/将字体拖进Font里就可以正常使用了

2、直接使用Unity自带的功能Assets/Create/ 材质和Font手动拖拽一下完成【即图片添加进材质中，材质添加进Font中】
步骤：
首先，要有一张要做的字体的图：

然后新建一个字体，叫colorfulFont, 资源面板空白处Resources文件夹右键，Create - Custom Font

然后建一个材质，shader选择GUI,图就是上面的图：

然后把这个材质赋给这个字体：

然后选择字的个数，我这里边是11个数字，就写入11：

然后以第三个元素为例，讲解每个元素的设置：

（1）index值，这个值是ASCII编码，可以去这个网站看对照表：http://tool.oschina.net/commons?type=4
（3）先说3，3是每个元素的宽度，整体为1，我这里有11个元素，所以为0.0909
（2）再说2， 因为一个的宽度是0.0909，所以第三个元素的起始位置就是0.0909x2 = 0.1818；
（4） -50， 这个位置的数字一定是负的，因为整个图的高度是50，所以这里填-50；
（5） 40，我的图全宽是440，有十一个数字，所以每个宽度是40；
（6）这里跟5的位置填一样就行；


图片原文：<>

Custom Font的缺点和不足
Custom Font虽然给了用户自定义字体的能力，但比起常规的Dynamic Font还是有很多缺点的：
1、无法定义中文字体。这点是由于Custom Font使用Ascii字符集导致的，Ascii字符集并不包含汉字。
2、无法通过Size改变字体大小。 因为Custom Font本身无法改变字符大小，不过依然可以通过Scale来变相调节
3、无法得到理想的字体颜色。 当改变Color，会在原图片的基础上变化，所以为了得到最好的显示效果，最好保证 字体颜色是白色，背景为透明。
原文：<>

利用文本制作图集：
不管是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编辑器的使用方法如下：
打开这款软件，界面如下，右边的列表是字体库：

新建一个txt文本，在里面输入要用的文字（一定要保存为UTF-8格式，否则软件无法识别）。
【任意一个文件夹空白处右键/新建/文本文档】


双击打开/文件/另存为/UTF-8格式

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


如txt文本中包含中文，那么Font类型应选择用中文的字体类型，比如宋体，黑体等等，像Arial之类的字体类型中是不可能有中文的。

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

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

Width和Height的值，一般都会自动调节，4096可以说是最大了，请不要超过这个值，不然做出来的图集太大，会加大drawcall的数量。
bit depth，这里选用的是8位，很多人可能觉得不清晰，但它是可以选择32位的，不过同样会增大负担。
注意以上所说的负担都是针对手机。

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

之后导入Unity同图片一样先把图集编辑一下，图片名设置一下就可以用了

Unity3D开发之编辑器统一修改Text字体
<>