前言：关于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脚本
- 刚体组件
- UI Root
- 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：三角形个数
- All Panels：所有Panel
- 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：勾选则忽略时间缩放
- Play Style：
-
选中打开按钮，在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();
}
}
作者：Joe_Game
链接：https://www.jianshu.com/p/98541f18999c
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。