ngui 让一个容器中的精灵平铺

本文将详细介绍如何将 NGUI 插件导入 Unity 中，以及如何使用 NGUI 进行界面创建、组件设置、Atlas 和 Font 制作，还有 NGUI 按钮和标签的使用方法。

一、导入 NGUI 插件到 Unity

步骤 1：导入插件

打开 Unity，开始导入插件。在 Project 视图中右键选择 Import Package -> Custom Package，然后选择刚刚下载至本地的 ngui_free.unitypackage。导入完毕后，刷新工程，确保 Unity 导航菜单栏中出现 NGUI 的菜单项。由于 Unity 版本不同，可能会出现 NGUI 导入时不存在菜单项的情况，此时退出 Unity 并重新进入即可。

二、创建新的 UI 界面

步骤 1：删除原有摄像机对象

在新创建的 Unity 工程中，删除 Hierarchy 视图中原有的摄像机对象。

步骤 2：创建新 UI

在 Unity 导航栏菜单中选择 NGUI -> Create a New UI。这一步相当于创建摄像机，该摄像机垂直照射在一个平面上，此平面即为我们的 UI 平面。点击 Create a New UI 菜单项后，会弹出 UI Tool 工具栏。

• Layer：下拉列表表示摄像机的显示层。当选择最后一项 Add Layer 时，灰色的为系统默认层，可双击可用层的右边对层进行重命名。
• Camera：下拉列表用于设置摄像机的朝向，可选择 2D 或 3D。 完成上述设置后，直接点击 Create Your UI 即可创建一个新的界面。此时，NGUI 会自动在 Hierarchy 视图中生成如下对象关系：
• UI ROOT(2D)：界面根节点、入口点。
• Camera：NGUI 生成的摄像机对象，垂直照射在锚点面板上。
• Anchor：界面的锚点，会影响 UI 的显示位置，其下面会挂载面板。
• Panel：面板，摄像机照射的对象，下面会挂载一些控件，如标签、按钮、精灵、拖动条等。

三、创建界面组件

在 Unity 导航菜单栏中选择 NGUI -> Create a Widget 来创建小部件，创建时会涉及以下设置项：

• Atlas：图像集合。
• Font：字体。
• Template：模板。
• P（Position）：X、Y、Z 坐标，Z 值越小越先绘制。
• R（Rotation）：X、Y、Z 轴的旋转。
• S（Scale）：X 可理解为图片宽度，Y 可理解为图片高度。

若创建的模板为 Simple Texture，NGUI 会自动绑定 UITexture 脚本，同时还有以下设置项：

• Material：添加的材质对象。为使材质显示更清晰，可将材质的着色器设置为 Unlit/Texture。
• Depth：表示深度，即 UI 绘制的先后顺序，数值越高越先绘制，主要应用于 Sprite 精灵。在 Simple Texture 中设置无效，可通过修改 Z 轴坐标来更改绘制顺序。
• Color Tint：用于设置颜色，适用于没有贴图的材质。
• Correction：自动设置图片宽高。例如，若图片宽高为 128X128，点击该按钮后，会自动将 Transform 中 S 的 X 和 Y 值修改为 128。
• Pivot：锚点位置。
• Preview：决定是否在监测面板视图中预览下方的贴图。
• 添加缩放平铺屏幕的控件：通过 component ==> NGUI ==> UI ==> stretch 添加。

四、制作 Atlas 和 Font

制作 Atlas

1. 首先，在 Project 视图中用鼠标选中所有需要制作 UIAtlas 的图片。
2. 接着，在导航菜单栏中选择 NGUI -> Atlas Maker。若不先选择图片，直接点击 Atlas Maker，UIAtlas 中将不会有任何精灵，这一点需特别注意。
3. 点击 Create 完成创建。点击 sprite 下拉按钮，即可看到所有的精灵文件。新版的 NGUI 会将所有贴图合并在同一张图片上，宽高均为 2 的次幂，可避免图片尺寸 2 次幂比例的问题。
4. 若要在原有的 Atlas 上更新与删除精灵，先在 Project 中选择需要添加的精灵图片，然后在导航菜单栏中选择 NGUI -> Atlas Maker。若要删除精灵，点击对应精灵的“X”按钮，最后点击 ADD/UpdateALL。若只是更新，不要点击 Replace，否则会将之前的精灵全部替换掉。

制作 Font

字体的制作方法可参考：http://game.ceeger.com/forum/read.php?tid=619。直接将做好的字体通过 NGUI -> Font Maker 进行设置：

• Font Data：将 .fnt 后缀改成 .txt 后拖入。
• Texture：直接将 .fnt 文件拖入。

五、NGUI 按钮和标签的使用

按钮设置

1. 选择 NGUI ==> Creat a widget ==> Template 下拉项中的 Button，并选好其它项后，点击 Add To。
2. 通过 component ==> NGUI ==> UI ==> interaction ==> Button Message 添加一个按钮关联事件和控件的处理脚本。
3. 选择 GameObject ==> Create Empty，用它挂载处理方法实现的脚本。

标签赋值

在脚本中声明：

public GameObject label_name_item1;

然后拖动一个标签与这个属性关联，最后通过代码修改其属性，例如：

((UILabel)label_name_item1.transform.GetComponent(typeof(UILabel))).text = "dsfsdfs";

按钮赋值

button_goldrain.transform.GetChild(0).gameObject.SetActiveRecursively(false);

通过以上步骤，你可以使用 NGUI 完成界面创建、精灵平铺等操作，同时掌握按钮和标签的使用方法。