如何用NGUI创建图集字体

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

步骤一：创建图集

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

准备素材

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

使用TexturePacker制作图集

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. 选中创建出来的New Atlas.prefab，在右边的属性栏中设置TP Import，即导入图集的UV信息，使图片的每一个小图都有对应的UV信息。需要导入的图是之前生成的文本文件，将其拖入箭头所指的位置即可。

至此，第一步创建图集完成。

步骤二：创建字体UIFont

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

使用BMFont生成文件

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

在Unity中创建字体

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

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

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