相信大家在制作游戏的过程中，经常会遇到一些界面需要用到一些很漂亮的美术字体，而NGUI的动态字体是不可能达到效果的，关于NGUI图集字体的资料也不少，然而，却大多只是做了不是很深入的介绍，并且对于新手来说不是那么容易理解，因此在这里图文并茂的讲解一下NGUI如何创建图集字体。闲话不多说马上进入主题，制作图集字体我们需要如下几个步骤

 

1.先创建图集
 
顾名思义，图集字体，也就是把字跟图集关联起来，那么首先就需要有图集，而制作图集的话，目前最好的工具毫无疑问应该就是TexturePacker了。如下图，我们准备了从0-9的十个小图作为一个图集。

 

打开TexturePacker，  。将这十个小图拖入右侧的Sprites栏内

 

 

然后看下图，红色箭头所指向的地方就是需要设置好的地方，按照如图所示设置好即可

 

 

设置完成后，中间部分的效果图基本如下图

 

 

尽量保证最终的图大小是一个正方形，这是一个良好习惯。然后找到菜单栏下面的Publish按钮，如图所示，可以生成最终的大图和对应的UV信息文件。

 

 

选择好保存路径，最终能得到两个文件NewFontAtlas.txt和NewFontAtlas.png,将他们放入Unity工程内的某个文件夹内即可。

 

 

 

如上图，我们已经有了图片和它对应的UV信息文本了，接下来就需要创建NGUI用的图集了。
如下图所示，在Unity的菜单中选择NGUI->Open->Atlas Maker
会打开图集创建工具

 

 

这里需要注意一下，箭头所示的地方最好能按照图中的设置，如果打开的界面不太一样，标号为1的地方不是None的话，就选择标号2打开选取界面，选择最上方的None,我们创建的图集是不关联任何图片的，只需要一个空的即可。

 

 

如下图，创建完之后也是需要保存的，我们把它和之前的图片保存在同一个目录下，这样我们就会有如下五个文件了，前面说了，我们不需要创建出来的图片，因此选中这里生成的New Atlas.png 将它删除。

 

 

然后选择NewAtals材质球，

 

 

我们可以发现材质所对应的纹理已经为空了,如下图箭头所示的地方。

 

 

这里我们需要将之前通过工具生成的图片拖到箭头所示的位置，为这个材质指定一个纹理。

 

 

然后如下图所示，选中创建出来的New Atlas.prefab  在右边的属性栏中设置一下 TP Import，即导入一下图集的UV信息，使得图片的每一个小图都有一个对应的UV信息。

 

  

 

需要导入的图就是下图选中的这个文本文件，拖入上图中箭头所指的位置即可。

 

 

第一步大功告成了，接下来是第二部

 

2.创建字体 UIFont
 
这里我们又需要用到一个常用的工具，BMFont。打开它后如下图所示，选中0-9几个常用数字

 

 

选择菜单Options Save bitmap font as...

 

 

需要为保存的文件命名，如下图我们用NewFontImportData为名字,点击保存。

 

 

最终生成两个文件，而我们只需要用到这个fnt 文件，将它的后缀名改成txt即可。然后将它放入前面的图集所在的目录

 

 

继续看图，还是根据下图所示，点开Font Maker

 

 

这里需要注意了，要严格按照下图箭头所示的位置进行设置，其中type 选择 improted Bitmap
FontData 选择上一部我们通过BMFont导出的那个txt文件，即NewFontImprotData.txt
Texture则选择上一步中生成的大图
输出部分 Atlas 这里一定要留空，即选择None,否则会很麻烦，原来的图片可能会被改动，需要重新生成了，造成不必要的麻烦。

 

 

最后选择Create the Font 就会出现如下图所示的保存菜单

 

 

我们同样将它与前面几个文件保存在一个目录下，如下图所示，到目前位置我们已经有如下7个文件了

 

 

这里因为我们的字体用的是图集，所以生成的字体没必要自带材质，可以把New Font.mat 删除掉，如下图所示，选中的材质球删除掉即可。

 

 

之后如下图，选择生成的New Font.prefab,看它的属性

 

 

在下图中箭头指示的地方将第一步生成的New Atlas.prefab 拖入。

 

 

再如下图箭头所指，将前一步通过BMFont 导出的文本文件拖入，这里有时候也可以不拖入，直接已经有效果了，具体情况看操作时如何

 

 

最终我们可以看到下图，点击箭头所指处

 

  
选择一个图素，我们这里选择0吧，

 

 

然后在左侧这个输入框也填入0，这样数字0就和图片0对应起来了。

 

 

然后选择右边的绿色add 按钮，增加一栏

 

  
如下图所示，重复上一个步骤，将每个图片输需要的数字对应起来(其实也不仅仅是数字，也可以是字符哦)

 

 

这个时候我们的图集字体已经创建完毕，这个时候创建一个Label看看效果吧

 

 

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