如何用NGUI创建图集字体

在游戏制作过程中，我们常常会遇到一些界面需要使用漂亮的美术字体，而NGUI的动态字体难以达到理想效果。虽然关于NGUI图集字体的资料不少，但大多介绍不够深入，对于新手来说理解起来有一定难度。因此，本文将图文并茂地详细讲解如何使用NGUI创建图集字体。下面我们正式进入主题，制作图集字体主要需要以下几个步骤：

1. 创建图集

图集字体是将字与图集关联起来，所以首先要创建图集。目前，制作图集最好的工具当属TexturePacker。

准备素材

我们准备了从0 - 9的十个小图作为图集素材。

使用TexturePacker生成大图和UV信息文件

1. 打开TexturePacker，将这十个小图拖入右侧的Sprites栏内。
2. 按照下图中红色箭头所指的位置进行设置。
3. 设置完成后，中间部分的效果图大致如下。尽量保证最终的图大小为正方形，这是一个良好的操作习惯。
4. 找到菜单栏下面的Publish按钮，点击后可生成最终的大图和对应的UV信息文件。
5. 选择好保存路径，最终会得到两个文件：NewFontAtlas.txt和NewFontAtlas.png，将它们放入Unity工程内的某个文件夹中。

在Unity中创建NGUI用的图集

1. 在Unity的菜单中选择NGUI -> Open -> Atlas Maker，打开图集创建工具。
2. 这里需要注意，箭头所示的地方最好按照图中的设置。如果打开的界面不太一样，标号为1的地方不是None，就选择标号2打开选取界面，选择最上方的None。因为我们创建的图集不关联任何图片，只需要一个空的即可。
3. 创建完成后需要保存，将其和之前的图片保存在同一个目录下。此时会有五个文件，由于我们不需要创建出来的图片，所以选中生成的New Atlas.png并将其删除。
4. 选择NewAtals材质球，可以发现材质所对应的纹理已经为空。
5. 将之前通过工具生成的图片拖到箭头所示的位置，为这个材质指定一个纹理。
6. 选中创建出来的New Atlas.prefab，在右边的属性栏中设置TP Import，即导入图集的UV信息，使图片的每一个小图都有对应的UV信息。需要导入的图就是之前生成的文本文件，将其拖入箭头所指的位置即可。

至此，第一步创建图集的工作大功告成，接下来进行第二步。

2. 创建字体UIFont

这一步我们需要用到常用工具BMFont。

使用BMFont生成fnt文件

1. 打开BMFont后，选中0 - 9几个常用数字。
2. 选择菜单Options -> Save bitmap font as...，为保存的文件命名，这里我们使用NewFontImportData作为文件名，点击保存。
3. 最终会生成两个文件，我们只需要用到fnt文件，将其后缀名改成txt，然后放入前面图集所在的目录。

在Unity中创建字体

1. 点开Font Maker。
2. 严格按照下图箭头所示的位置进行设置，其中type选择imported Bitmap，FontData选择上一步通过BMFont导出的txt文件（即NewFontImportData.txt），Texture选择上一步中生成的大图。输出部分Atlas这里一定要留空，即选择None，否则原来的图片可能会被改动，需要重新生成，造成不必要的麻烦。
3. 选择Create the Font，会出现保存菜单，将其与前面几个文件保存在同一个目录下。此时我们已经有七个文件了。
4. 由于我们的字体使用的是图集，生成的字体没必要自带材质，所以可以把New Font.mat删除。
5. 选择生成的New Font.prefab，查看它的属性，在箭头指示的地方将第一步生成的New Atlas.prefab拖入。
6. 将前一步通过BMFont导出的文本文件拖入箭头所指的位置，有时不拖入也可能直接有效果，具体情况根据实际操作而定。
7. 点击箭头所指处，选择一个图素，这里选择0，然后在左侧输入框也填入0，这样数字0就和图片0对应起来了。
8. 选择右边的绿色add按钮，增加一栏，重复上述步骤，将每个图片与需要的数字（也可以是字符）对应起来。

至此，我们的图集字体已经创建完毕。此时可以创建一个Label来查看效果。

使用图集字体可以方便地实现一些美术要求的效果。例如，美术要求某个结算界面中结算分数使用美术数字，并且数字要从0慢慢加到100。按照以往的经验，可能需要创建三个Sprite，分别代表个位、十位、百位，然后设置每一位对应的SpriteName，这种方法逻辑实现复杂，还需要考虑数字的位数。而采用图集字体来实现就非常简单，做好图集字体后，只需设置Label的数字即可。是不是很实用呢？