(搬运工)NGUI系列教程 四（自定义Atlas，Font）

今天我们来看一下怎么自定义NGUIAtlas，制作属于自己风格的UI。
第一部分：自定义 Atlas
1 . 首先我们要准备一些图标素材，也就是我们的UI素材，将其导入到unity工程中。
2. 全选我们需要用到的UI素材。选择菜单NGUI-->Open the Atlas Maker(快捷键 Alt +shift+M)。打开Atlas Maker窗口，如图

我们可以看到，刚才选择的图片素材已经在下面的Spirit窗口中列出来了。

3. 在Create右侧为Atlas起个名称，其余默认即可（这里第二个参数Select可以让我们在现有的Atlas基础上添加新的图片进去）。点击 Create，NGUI会自动为我们完成创建。等待一会完成之后，回到Project视图，可以看到刚才选择的图片的目录下多了三个物体，如图

分别是Atlas的材质球，Atlas，Atlas组合后的图片。
4. 现在我们可以使用自己定义的Atlas了，新建一个UI，然后选择菜单NGUI—>Open the widget wizard,打开widget窗口，把我们刚才新建的Atlas拖到Atlas窗口，然后我们在创建Button等的时候，就可以选择我们自己的UI图片。

第二部分： 自定义Font.

自定义字体常用的有两种方法，第一种方法是导出一些我们需要的文字，单独制作字体。第二种是全部导入整个字体文件，然后动态使用需要的字体。
第一，单独选择使用到的字体。这种方法需要用到一个小软件：bmfont，位图字体生成工具。下载链接见附件，内附使用说明，完全按照默认安装即可。安装完成后打开，界面如图，

这里中间的列表是我们现有字体的文字图集列表。右侧是不同的分类。选择菜单 options，font settings，打开字体设置窗口

在这里设置我们需要的字体，比如我们这里选择的是微软雅黑，编码格式使用默认的Unicode,字体大小设置为32，其他默认即可，点击OK。
然后是选择我们需要的文字，因为在这里列出了所有的雅黑字体的文字，我们有时候不需要这么多，我们就要选择我们需要的文字导出。首先我们打开记事本，输入我们需要的文字。然后保存，在保存的时候注意使用Utf8编码保存

回到bmfont窗口，选择菜单，edit-->Select chars from file（从文件选择字符）。找到我们刚才保存的Txt文件，然后点击打开。bmfont会自动为我们选择我们需要的字符。设置字体输出格式：点击 Options-->Export options打开输出设置窗口，如图

设置输出尺寸为2048，这里的大小根据我们选择的字符多少确定，如果字符数少，可以选择1024或者更少，一般常用中文字体加一块大概四千左 右，2048大小的图片即可完全容纳。设置图像深度为32比特，因为我们需要用到Alpha通道。在Presets选项下选择带有Alpha通道的输出设 置，字体颜色可以选择白色或者黑色，设置Textures为PNG格式，点击OK，回到主界面。

导出字体：选择菜单Options-->Save bitmap font as。打开保存窗口，命名保存，然后打开保存的目录，我们可以看到，我们导出了两个文件，一个带有我们选择文字的Png格式的图片，另一个记录字符信息的 txt文本文件。拷贝导出的两个文件到Unity工程目录下。

制作字体：选择菜单NGUI-->Open the Font Maker,打开字体制作窗口，如图：

在Type中选择bitmap,将我们刚才导出字体的Txt文本文件拖到Font Data槽中，Texture设置为刚才导出的字符图片，输入字体名称，其余默认，点击Create the font。完成字体的创建。以后我们就可以在任何地方使用我们创建的字体了。这个方法有个缺点就是我们必须事先知道我们所要用到的字符，然后导入制作字 体。假如输入我们没有用到的字符，将无法显示。如何解决这样的问题呢？那就是动态字体啦。

第二种制作字体方法，动态字体。
1. 首先我们导入需要的字体，从Windows/fonts目录下拷贝出我们需要的字体，粘贴到Unity工程目录下。此过程需要一段时间的导入。导入完成后，我们可以看到字体包括两个子文件，一个材质球和一个贴图文件。
2. 制作动态字体，选择菜单NGUI--->Open the Font Maker,打开字体制作窗口，将Type设置为dynamic方式，拖放我们导入的字体文件到 Font TFF下， 设置我们需要的 Font Size。还可以设置字体方式为加粗，斜体等效果。
3. 点击Create the font 完成动态字体创建。此方法创建的字体优点就是可以使用该字体包含的任何文字，不用担心找不到字符的问题。

 

声明: 本文由( zqcyou )原创编译，转载请保留链接: NGUI系列教程四（自定义Atlas，Font）