位图字体的制作与使用

前言

由于有开发者反馈位图字体不会用，上周对位图字体的官网文档进行了更新，把细节介绍的更清晰了。今天，又遇到有没看文档的开发者来提问位图字体的使用问题，因此将官网文档同步到公众号，让更多人知道，也希望大家遇到问题，先翻一下官网文档和社区，再进行提问。

当我们常规使用文本时，通常采用的是系统字体。而位图字体的本质是位图，通过位图的形式去表现字体效果，这样不仅会更美观，还可以解决一些字体在不同平台由于用户没有安装而无法使用的问题，另外也有的字体，在不同浏览器或者平台也会有显示差异的问题，就是chrome浏览器，低版本与高版本也可能会存在像素级的显示偏移，这些全都属于字体的兼容性问题。而这些问题，当文本的复杂度要求不高时，都可以通过位图字体来解决。

像聊天室这种无法固定好文本内容的场景就不适用了。

LayaAir引擎支持位图字体的使用。本篇将引导开发者如何通过第三方工具 Bitmap Font Generator来制作位图字体并在LayaAir引擎中使用。

一、下载并安装字体制作工具

下载安装 windows下免费的位图字体制作工具 Bitmap Font Generator。
下载地址：http://www.angelcode.com/products/bmfont/

Bitmap Font Generator工具当前仅支持windows系统

二、使用字体库中的字体来制作位图字体

制作位图字体有两种方式，一是用字体库的字体来制作位图字体，二是用美术设计的位图美术字来制作位图字体。我们先来介绍用字体库中的字体来制作位图字体。

第一步：准备好要用的字体文本

制作位图字体，因为不是把每一个字体都要导出为位图字体，那样的位图就太大了，也没有意义。所以就用多少准备多少。

把我们在游戏中可能用到的文本都放到一个.txt后缀的文本里就可以了。

例如下图所示：

第二步：改变为Unicode编码(UTF-16 LE)

txt文本必须要存为Unicode编码格式才可以，如果我们不能确认编码是不是正确的，那就另存为的时候选择一下编码类型。如下图所示。

这里提醒一下，有一些操作系统是没有Unicode编码的，那是因为windows后来系统升级后，旧系统的Unicode编码模式没有了。我们去选择UTF-16 LE也是可以的。

第三步：字体的设置

在这一步里，我们要设置字体的导出配置项，当导出位图的时候要采用什么字体，字体的大小，源文本字符的编码等等，要在这一个步骤里配置。

我们打开打开软件，选择 Opotion -> Font Settings，如下图所示。

打开的设置面板如下图所示：

Font Settings面板的重要参数说明：

设置完以上这些，直接点OK，保存退出该界面。

第四步：导入源字符文件

在这个步骤里，我们把之前保存为Unicode编码的txt文件，导入到位图字体制作的工具里。

菜单栏的操作步骤为：Edit -> Select chars from file，如下图所示，选中之前输入了文字或字符准备要转换的txt文本文件。

如果有提示失败，请检查txt文件是不是unicode编码(UTF-16 LE)的文件，以及使用的字体是否包含了选中的txt文本文件内的内容。

第五步：设置导出选项

这是最后一个关键步骤，这里配置一些位图文本的导出样式效果，以及导出的格式。

我们先通过菜单栏的 Options->Export Options ，打开Export Options 设置导出选项，如下图所示：

打开后效果如下图所示：

在这个界面里，我们仍然来介绍一下重要的参数。

尽量不要拿其它引擎的位图字体资源在LayaAir中使用，LayaAir引擎只支持xml格式的字体描述文件

第六步：导出位图字体

完成以上这些配置步骤后，就可以导出位图字体了。

选择菜单栏的 Options-> Save bitmap font as…，如下图所示：

在另存为的窗口，选择要保存位图字体文件的目录，起