相信大家在制作游戏的过程中,经常会遇到一些界面需要用到一些很漂亮的美术字体,而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的数字即可。是不是很炫酷?