一、NGUI 介绍

1.NGUI 插件安装

首先创建一个新的 Unity 工程项目，导入 NGUI 插件资源包。

导入 NGUI 后，Unity 的菜单栏会出现一个“NGUI”菜单，这个菜单包含了

NGUI 所有的操作功能。

2.NGUI 插件目录结构

Editor：编辑器扩展

Examples：示例工程

Resources：资源文件

Scripts：脚本组件

[Unity 是基于组件形式的引擎，任何功能都是一个独立的组件；

组件其实就是一个类，一个对象，一个脚本文件；

NGUI 中所有的 UI 也都是通过组件的形式体现的。]

二、NGUI 基本使用方法

1.NGUI Bug 修复

Bug 出现的环境：Unity5.4.1 + NGUI3.10.0

Bug 信息：Ignoring menu item NGUI because it is in no submenu!

修复步骤：

①找到并打开 NGUI 插件中的“NGUIMenu.cs”脚本文件；

②将 715,716 两行代码注释或者删掉;

③保存修改后的脚本，并重启 Unity 开发环境。

2.使用 NGUI 显示文字

1.简单思考

之前我们想显示一个简单的 3D 模型，我们可以创建一个 Cube 物体。

那么我们想显示文字，那么需要创建什么哪？而且我们使用的是 NGUI？

和文字沾边的单词有 Text 和 Lable。

操作步骤：

NGUI-->Create-->Label 创建一个用于显示文字的“游戏物体”。

切换到 Game 面板，我们就可以看到“New Label”。

2.NGUI 层次结构

UI Root（所有的 NGUI 元素都是这个的子物体）

|---Camera（用于渲染 NGUI 的摄像机）

|---Lable（Lable 游戏物体）

|---More UI（更多的 UI 游戏物体）

3.NGUI 操作细节

①在 Scene 视图“紫色”的矩形，就是我们 NGUI 的操作范围，其实也就是

UI Root 的范围（鼠标选中 UI Root，这个矩形区域会高亮显示）。

②我们可以点击 Scene 视图上方的“2D”按钮，切换到 2D 编辑模式。

③在 2D 模式下，鼠标选中 UI Root，紫色矩形也会高亮，现在将鼠标放到矩

形上，点击鼠标右键，会出现 NGUI 的操作菜单，这个菜单我们后期会大量且

频繁的使用。

④摄像机的图标会影响到我们的操作，可以将这个图标调小。

点击 Scene 面板右上角 Gizmos，3D Icons 选项，调小即可。

3.Prefab Toolbar

1.打开 Prefab Toolbar

NGUI-->Open-->Prefab Toolbar

2.Prefab Toolbar 简介

Prefab Toolbar ：(NGUI)预制体工具栏，其实就是 NGUI 提供的一些现成

的 UI 功能元素的预制体文件，我们可以直接鼠标单击选中，然后往 Scene 面板拖拽。

三、基本组件之 UILabel 面板控制

1.字体文件

1.字体图集

将所用到的文字处理成一张图片进行使用，这种比较适合英语国家。

2.TTF 字体

直接使用 TTF 格式的字体进行文字显示。

2.UILabel 面板属性

1.Font Size（字体大小）

控制文字显示的大小，以及基本样式[正常，粗体，倾斜，粗体+倾斜]

2.Text（文字）

UILable 要显示的文字，可以输入多行

3.Modifier（调节器）

控制英文显示状态，正常状态，大写状态，小写状态

4.Overflow（溢出）

当文字大小超出了 Widget 中 Size 属性的大小时，如何处理显示。

ShrinkContent：收缩内容 [再大也无效]

ClampContent：夹持内容 [能显示几个字就显示几个字]

Use Ellipsis：是否使用省略符

ResizeFreely：调整自由 [Widget 中的 Size 自动同步 Font Size]

ResizeHeight：调整高度 [宽度固定，高度自动调整]

5.Alignment（对齐方式）

设置文字的对齐方式

6.Gradient（渐变颜色）

设置文字从上到下的颜色渐变

7.Effect（特效）

设置文字特效，比如：颜色描边，投影

8.Spacing（间距）

设置文字与文字之间的间距大小

9.Color Tint（色彩化）

设置文字显示的颜色

四、基本组件之 UILabel 代码控制

1.文字展示案例

1.元宝与钱币数显示

重点设置 UILabel 的中心点，以及 Overflow 样式。

中心点水平轴向为左侧或者右侧；

Overflow 一般设置为 ResizeFreely。

2.物品描述信息

文字在一个固定区域内显示。

重点设置 UILabel 的中心点，以及对齐方式还有 Overflow 样式。

中心点设置为垂直轴向的顶部；

对齐方式为左对齐；

Overflow 为 ResizeHeight。

2.代码控制 UILabel

1.代码控制金币数

代码查找到对应的游戏对象，修改游戏对象身上的 UILabel 组件的 Text 属性。

2.代码控制物品描述

方法步骤同上

NGUI 代码中换行“\n”

五、NGUI 图片管理工具 AtlasMaker

1.AtlasMaker 制作图集

1.什么是 Atlas？

Atlas：图集，图片的一个集合，或者说打包格式。NGUI 中的 UISprite 组件

显示图片，需要用到图集，就和 UILabel 显示需要用到字体是一样的道理。

2.什么是 AtlasMaker？

AtlasMaker：图集制作器，NGUI 提供的打包 Atlas 的工具。

3.AtlasMaker 制作图集步骤

①打开 AtlasMaker 工具，点击“new”按钮；

②将需要打包成 Atlas 的图片选中；

②点击“Create”按钮，给新图集命名保存。

4.Atlas 结构分析

每一个 Atlas 都是由三个文件组成：

xxx.png：贴图文件，小图片拼接成的一张大图片

xxx.mat：材质球文件，使用 xxx.png 为素材制作的材质球

xxx.prefab：图集文件，使用 xxx.mat 为素材制作的图集文件

依赖关系：png-->mat-->prefab

2.图集常用修改操作

1.往图集中增加新图片

①打开 AtlasMarker，选中需要修改的图集；

②选中需要增加的图片，然后点击“Add/Update”按钮。

2.从图集中删除图片

①打开 AtlasMarker，选中需要修改的图集；

②点击图集中图片后面的“X”按钮，然后 Delete。

六、基本组件之 UISprite 面板控制

1.UISprite 显示图片

①创建 UISprite 组件，步骤：NGUI-->Create-->Sprite；

②选择图集，选择要显示的图片；

③Widget 中点击“Snap”按钮，让图片原始大小显示；

④Widget 中“Aspect”选中“Based On Width”，便于等比例调整图片

的大小。

2.UISprite 面板属性

1.Type（类型/模式）

Simple：简单模式 默认展示效果

Sliced：九宫模式 适合于按钮背景图处理 [演示九宫处理]

Tiled：平铺模式 使用该图片平铺 Widget 中 Size 的区域

Flip：进度模式 最复杂的一种图片模式

|---Fill Dir 填充方向

|---Fill Amount 填充量

|---Invert Fill 翻转填充

七、基本组件之 UISprite 代码控制

1.图片案例展示

1.金币元宝界面制作

导入相关的素材图片，更新图集，使用 UISprite 和 UILabel 制作界面。
2.代码控制 UISprite

1.动态创建 UISprite

分析手动添加 UISprite 时的步骤，然后使用代码还原整个步骤。

2.动态控制 UISprite 的属性

获取到当前的 UISprite 对象，以“.”的形式调出属性进行赋值，属性的名称

和 Inspecctor 面板上组件属性名基本保持一致。

八、基本组件之 UIButton 面板控制

1.UIButton 制作按钮

1.基础说明

在 UI 界面制作过程中，UILabel 用于显示文字，UISprite 用于显示图片，无

论多复杂的 UI 界面，都是由最基础的文字+图片的形式展示（制作）的。

UI 界面的主要功能有两个：1>展示数据；2>人机交互。

而最核心的交互就是点击，使用鼠标或者手指点击 UI，而能接收点击的 UI 组件

叫做 UIButton。我们可以在 UILable 和 UISprite 的基础上附加 UIButton

组件制作出我们的 UI 按钮。

2.按钮制作步骤

①首先展现一张图片或者一段文字；

②Attach-->BoxCollider，确定可以点击的区域，其实点击按钮就是这个这

个 Collider 区域进行交互的；

③Attach-->ButtonScript，附加按钮组件，按钮制作到此完成。

2.UIButton 面板属性

1.Colors 数组

使用颜色来描述按钮的四种状态。

如果不想让颜色影响图片的效果，可以将四种颜色全部选择为白色。

2.Sprites 数组

组使用图片来描述按钮的四种状态。

3.按钮四种状态

①Normal(*)：默认原始状态; ②Hover：经过停留状态;

③Pressed(*)：按下状态; ④Disabled：不可用状态；

九、基本组件之 UIButton 代码控制

1.按钮点击事件绑定

1.面板属性栏绑定

①创建一个代码文件，定义一个公开的方法，挂载到一个游戏物体上；

②将该脚本拖拽到 UIButton 的 OnClick 事件上（注意看我的操作演示）。

2.代码绑定

①创建一个代码文件，挂载到按钮游戏物体上；

②定义一个叫做 OnClick（）的方法。

2.按钮交互声音

1.UIPlaySound 组件

当我们和按钮进行交互（比如：点击）的时候，可以播放一个点击声音，起到一

个辅助反馈的作用。

2.操作步骤

①Attach-->Play Sound Script 添加组件；

②Audio Clip 指定一个声音文件；

③指定 Trigger 触发该声音播放的事件，常用的是 OnClick。

十、UI 动态加载

1.原理介绍

在实际项目开发过程中，UI 界面制作好以后会拖拽成为一个 Prefab 资源，和

Scene 场景分离，在实际加载到该场景的时候，动态的加载显示 UI 界面。

这样可以使得 UI 和 Scene 进行分离，好处是很大的，分离后我就可以让不同

的人编辑制作不同的部分，否则的话，UI 和 Scene 在一起，多人编辑的时候，

项目是没法合并（SVN，Git）的。

2.操作演示

①将制作好的 UI 面板拖拽成为一个 Prefab 资源，放到 Resources 文件夹下；

②使用 Resources.Load()将该资源加载到内存中；

③实例化该 UI 资源对象，放到 UIRoot 下完成显示；

3.相关 API

NGUITools.AddChild(父对象, 子对象); NGUI 提供的一个实例化物体，设置子物体的一个内置函数，操作 UI 尽量使用

该 NGUI 封装的函数。

![

关键代码

CreateUISprite

using UnityEngine;
using System.Collections;

/// <summary>
/// 使用代码控制UISprite 组件
/// </summary>
public class CreateUISprite : MonoBehaviour {

    private Transform m_Transform;
    void Start () {
    
        //获取游戏物体的transform物体组件
        m_Transform=gameObject.GetComponent<Transform>();
        //实例化对象
        GameObject uiSprite = new GameObject("TonyWan");

       //设置父物体；
        uiSprite.GetComponent<Transform>().SetParent ( m_Transform);
        //重置Scale；
        uiSprite.GetComponent<Transform>().localScale = Vector3.one;

        //动态添加图集
        UISprite sprite=uiSprite.AddComponent<UISprite>();

        //读取图集 资源加载
        UIAtlas atlas=Resources.Load<UIAtlas>("GameAtlas");//参数1：表示自定义的图集名称；

        //给组件指定图集
        sprite.atlas=atlas;

        //给组件指定图片
        sprite.spriteName="11000782";
    }

MyButton

public class MyButton : MonoBehaviour {

    //第一种点击事件方法

    //定义一个公开button点击事件
    public void ButtonClick() {

        Debug.Log("我是Button按钮被点击了");
    
    }

    //第二种点击事件方法

    //代码绑定点击事件 OnCLick内置点击事件 写这个就会点击
    public void OnClick(){

        Debug.Log("我是代码绑定点击事件");
    }


}

UILabelTest

public class UILabelTest : MonoBehaviour {

    //声明一个持有引用
    private UILabel goldNumber;

    private UILabel item_Label;

    void Start()
    {
        //查找值物体
        goldNumber = GameObject.Find("goldNumber").GetComponent<UILabel>();
        //对文本进行赋值
        goldNumber.text = "123456789";
        //对字体颜色改变
        goldNumber.color = Color.green;
    }
    
    void Update () {
    
        //按下空格键 进行描述切换
        if (Input.GetKeyDown(KeyCode.Space))
        {
            item_Label=GameObject.Find("item_Label").GetComponent<UILabel>();
            item_Label.text = "TonyWanTonyWanTonyWanTonyWanTonyWan\n我要换行了！TonyWanTonyWanTonyWanTonyWanTonyWanTonyWanTonyWan";
        }

    }
}

UIManager

public class UIManager : MonoBehaviour
{
    //声明一个持有引用，用来存贮加载后的预制体
    private GameObject prefab_Info;
    void Start () {

        //存贮预制体
        prefab_Info=Resources.Load<GameObject>("Info");//泛型 GameObject 参数1：预制体的名称

        //NGUI自带API 把预制体加载到场景中去 有重载
        NGUITools.AddChild(gameObject, prefab_Info);//参数1：父物体 参数2：子物体   
    }
    
    
}