前言：关于Unity中关于UI的插件，我们最开始学的是UGUI，是Unity自带的UI系统，而在Unity版本还没更新出UGUI之前，除了NGUI没有一个更好些的插件，所以人们不得不去选择NGUI去制作UI，但随着Unity做出了自己的UGUI系统之后，人们更多是使用Unity自带的UI系统，也就是UGUI，这里我也只是简单的认识一下，毕竟前面学习了UGUI,它们很相似，好了，废话不多说了

---

下载NGUI

在Unity官网的Asset Store中下载UGUI

---

看NGUI的例子

在学习一个插件之前，如果快速的了解这个插件呢？最简单的方式就是查看插件自带的一些例子，通过看这些例子，了解基本的一些实现的功能，以及脚本

---

Prefab Toolbar(预设体工具栏)

• 首先新建一个场景
• NGUI>>Open>>Prefab Toolbar

• 会出现一个工具栏，通过它我们可以把UGUI已经做好的预设体（各种UI控件：按钮、复选框、滑条、下拉菜单、进度条、输入框等，跟UGUI中的基本一样）拖到场景中或是层级视图中

• 我们选中一个Button拖到场景中，会发现UGUI会自动添加一个UI Root（相当于UGUI中的画布）和一个Camera

• 我们看一下它们的检视面板
  • UI Root
    • Transform组件中多了P、R、S小按钮，它们是用来初始化Transform的
    • UI Root脚本
    • UI Panel脚本
    • 刚体组件

• Camera
  • 这里的照相机主要不是用来拍摄的照相机，而是用来控制事件的照相机
  • Transform组件
  • Camera组件
  • UI Camera脚本（控制事件）

• Button
  • Transform组件
  • UI Sprite脚本
  • UI Button脚本
  • 碰撞盒组件（这里需要注意一下，在NGUI中的这些控件如果要想发生事件，必须要有碰撞盒）

• 在Prefab Toolbar中会有很多页，我们可以点开其他的页，可以往里面添加新的预设体，你可以往里面拖入游戏对象添加新的预设体，也可以点击Add添加已有的预设体

• 当你添加完毕后，在Prefab Toolbar中会出现你添加的预设体，并且在你保存的路径下会多出个预设体，我这里保存在了Asset目录下，所以会在工程窗口看到刚刚添加的预设体

---

Widget Wizared（控件工具）

• NGUI>>Open>>Widget Wizared

• 会出现一个控件工具窗口，我们可以修改它里面的属性，值得注意的是：不同模板（控件类型）的属性是不同的。如图中所示，我们用的模板是精灵，那么这里面对应的属性就是精灵模板的属性，包括模板（也就是控件的类型）、精灵贴图、中心枢纽位置、添加该控件到哪个对象（也就是把该控件设为哪个对象的子物体），但是基本的属性不会发生变化：图集、字体样式

• 添加一个精灵
  • 模板选为Spriie
  • 设置所有的属性
  • 点击Add To，添加到UI Root中
  • 添加完之后，场景中多了个精灵、层级视图中多个精灵对象、精灵对象身上挂载着UI Sprite脚本

• 由此可见，每添加一个控件，控件身上都会有相应的脚本，来实现这个控件的相应功能，需要注意的是：这里的精灵身上没有通过脚本自动添加碰撞盒，那么它是不能触发事件的，而有些控件是自身就有碰撞盒的，比如说刚开始咱们创建的Button

---

创建新的图集

• 首先把要做成图集的图片设为精灵

• NGUI>>Open>>Atlas Maker

  

• 弹出Atlas Maker窗口，点击New按钮

  

• 点击完之后，Altas显示None

  
• 选中要添加到新图集的精灵
• 在Sprites窗口会显示选中的精灵
• 点击Create

• 会提示你保存目录，设置命名，点击保存

  

• 完成效果

  

• 点击View Sprites可以预览图集里面的精灵

  

• 保存的目录会多出同名的材质、预设体、导入设置文件三个东西

  

这样，包含选中精灵的图集就诞生了

注意：在NGUI中，不能像在UGUI中直接拖入精灵，而是必须要先设置图集，再从图集中选择精灵

---

Anchor （锚点、锚框）

• 创建一个场景
• 点开Widget Tool>>Open the New UI Wizard

• 创建一个UI
  • 点击Create Your UI

• 场景中会多出个UI Root、Camera，层级视图中也会多出，Widget Tool窗口会多出属性

• 添加一个精灵到UI Root中
• 添加锚点
  • 选中UI Root
  • NGUI>>Create>>Anchor

• 将刚刚创建的精灵作为Anchor的子物体
• 选中Anchor，设置Anchor的位置为右上角

• 刚刚是添加锚点，现在是添加锚框

  • 添加一个精灵

  • 选中精灵，将它的Anchors的Type：Unified

    

  • Target:精灵的参照物

  • Left：精灵的左边距离参照物左边的距离

  • Right：精灵的右边距离参照物右边的距离

  • Bottom：精灵的下边距离参照物下边的距离

  • Top：精灵的上边距离参照物上边的距离

、

• 如果将Type：Advanced，则精灵每个边都有对应的参照物

---

UI Root脚本

• Scaling Style:Flexible
• Minimum Height:当像素小于此值时，不再进行缩放
• Maximum Height:当像素大于此值时，不再进行缩放

• Scaling Style:Constrained

• Content Width:UI根据当前的宽度自动进行缩放

  • Fit：勾选则根据当前的宽度自动进行缩放

• Content Height：UI根据当前的高度自动进行缩放

  • Fit：勾选则根据当前的高度自动进行缩放

• Scaling Style:Constrained On Mobiles(跟Constrained类似，只不过是针对移动端的，用第二种就可以)

---

UI Panel脚本

• Alpha：阿尔法（透明度）
• Depth：渲染深度，深度越大越后被渲染，显示在照相机的最前面

先比较UI Panel的深度再去比较UI控件的深度

UI Panel相当于是一个容器，所有的UI控件都在 UI Panel中才能被显示

• Clipping：裁剪方式
  • None：无
  • Texture Mask：纹理遮罩裁剪
  • Soft Clip：片段裁剪
  • Constrain But Dont Clip:像素裁剪但不片段裁剪、

---

Camera脚本

• Event Type：
  • 3D World:根据三维世界坐标触发事件
  • 3D UI：根据三维UI Root上的像素坐标触发事件
  • 2D World：根据二维世界坐标触发事件
  • 2D UI：根据二维UI Root上的像素坐标触发事件
• Event Mask：能够触发事件的层

• Debug：在运行的时，会在Game视图的左上角显示一些信息，当鼠标触发事件的时候，值会发生相应的改变

  

• Event Sources：触发事件的来源
  • Mouse：鼠标
  • Touch：触屏
  • Keyboard：键盘
  • Controller：遥控杆

• Thresholds:微调
  • Mouse Drag：当鼠标距离拖动对象某个像素的时候可以拖动
  • Mouse Click：当鼠标距离点击对象某个像素的时候可以点击
  • Touch Drag：当触屏距离拖动对象某个像素的时候可以拖动
  • Touch Tap：当触屏距离按击对象某个像素的时候可以按击

• Axes and Keys:轴和键
  • Navigate X:X方向增量自定义名字
  • Navigate Y:Y 方向增量自定义名字
    -Scroll:鼠标滑轮自定义名字

---

Panel Tool（面板工具）

• NGUI>>Open>>Panel Tool

• 复选框：勾选则显示该Panel
• DP:渲染深度
• Panel's Name:Panel名字
• Layer：所在的层
• WG：控件个数
• DC:DrawCall（渲染调用）
• Tris：三角形个数（一个正方形是由两个三角形组成）
• Stc：勾选则为静态

---

Draw Call Tool（渲染调用工具）

• NGUI>>Open>>Draw Call Tool

• Draw Call Filter:渲染调用文件
  • All Panels：所有Panel
    • 下面会显示所有Panel（当前的两个面板）的Draw Call，会根据面板个数和使用图集的不同而分成不同的组，如下图所示，1组和2组是根据不同面板而划分的；而2组和3组是根据使用不同的图集而划分的
    • Material：所用的材质图集
    • Widgets：控件个数
    • Triangles：三角形个数

• Selected Panel：选择Panel

  • 显示选中的Panel的Draw Call

    

---

触发事件方法一：在编辑器中使用NGUI触发事件

-功能：点击小书按钮，精灵移动到UI Root中间位置；点击叉号按钮，返回起始位置

• 搭建场景：两个NGUI按钮、一个NGUI精灵

• 添加位移动画：
  • 选中精灵，NGUI>>Tween>>Position

• 在精灵身上会多个Tween Position脚本

  
  • From：动画播放起始位置
  • To：动画播放终点位置
  • Tweener：动画播放器
    • Play Style：
      • Once：一次
      • Loop：循环
      • Ping Pong：乒乓（在起始位置和终点位置之间来回播放）
    • Animation Curve:动画曲线
    • Duration：持续时间
    • Start Delay：开始的延迟
    • Tween Group：动画组
    • Ignore TimeScale：勾选则忽略时间缩放

• 选中打开按钮，在UI Button脚本的On Click面板中：

  • Notify:将刚刚添加了动画的对象拖到这

  • Method：TweenPosition/PlayForward（向前播放）

    

• 同理，选中关闭按钮，其他跟打开按钮一样，最后的Method换成TweenPosition/PlayReverse（向后播放）

  

• Tween Position脚本取消勾选（使用）

  

---

触发事件方法二：通过代码使用NGUI触发事件

• 如果你刚刚用了第一种方式触发事件，而现在用第二种方式触发事件，你需要把刚刚在两个按钮控件上的On Click中方法取消掉，点击Notify中的减号按钮取消

  
• 创建BtnEvent脚本
  • 挂载对象：随意对象
  • 实例对象：
    • Btn Open：ButtonOpen
    • Btn Close：ButtonClose
    • BG：Sprite

using System.Collections;

using System.Collections.Generic;

using UnityEngine;

public class BtnEvent : MonoBehaviour

{

    public UIButton BtnOpen;

    public UIButton BtnClose;

    public UISprite BG;

    private TweenPosition tp;

    private void Awake()

    {

        tp = BG.GetComponent<TweenPosition>();

    }

    private void OnEnable()

    {

        BtnOpen.onClick.Add(new EventDelegate(ClickBtnOpen));

        BtnClose.onClick.Add(new EventDelegate(ClickBtnClose));

    }

    private void OnDisable()

    {

        BtnOpen.onClick.Remove(new EventDelegate(ClickBtnOpen));

        BtnClose.onClick.Remove(new EventDelegate(ClickBtnClose));

    }

    void ClickBtnOpen()

    {

        tp.PlayForward();

    }

    void ClickBtnClose()

    {

        tp.PlayReverse();

    }

}