Unity之NGUI插件(一)
前言:关于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();
}
}
跟UGUI的触发事件方法很相似
UI Sprtie脚本
- Type:选择不同的类型:简单、九宫格、填充等,跟UGUI类似
- Gradient:勾选则使用
- Top:上半部分的颜色
- Bottom:下半部分的颜色
- Color Tint:如果Gradient没有勾选则按照Color Tint的颜色进行显示
- Widget:控件
- Pivot:中心枢纽,用来调整控件位置(对齐方式)
- Depth:渲染优先级,越大的越后渲染,也就会显示在前面
- Size:精灵尺寸,以像素为单位
- Snap:恢复原始尺寸

UI规范
- 将所有UI Root以及它的所有子物体的Layer都设为UI
- Main Camera的Culling Mask设为所有,并把UI层取消掉
- Camera中的Culling Mask设为UI
NGUI控件
跟UGUI中的类似,这里就不多说了

实现功能:一个按钮按一下打开,再按一下关闭
-
两种方式:
-
方式一:使用NGUI中的UI Play Tween脚本和Tween Position脚本控制
如果你看过NGUI中的示例,那么咱们要实现的功能就在那里用到过,实例七中的Click Me按钮可以一个按钮实现开关窗口的功能
- 在工程目录中查找UIPlayTween脚本
- 将脚本挂载到需要实现功能的按钮身上
- 更改UI Play Tween脚本
- Tween Target:将含有动画脚本的Sprite托到这
-
Play direction:Toggle(实现来回播放动画)
-
方式二:通过自己写脚本(主要用了bool类型的标志位)和NGUI中的Tween Position脚本控制
- 创建Test03_1脚本
- 挂载对象:
- Btn:ButtonOpen
-
BG:Sprite
- 挂载对象:
- 创建Test03_1脚本
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class Test03_1 : MonoBehaviour {
public UIButton Btn;
public UISprite BG;
private TweenPosition tp;
private bool IsOpen=false;
private void Awake()
{
tp = BG.GetComponent<TweenPosition>();
}
private void OnEnable()
{
Btn.onClick.Add(new EventDelegate(ClickBtn));
}
private void OnDisable()
{
Btn.onClick.Remove(new EventDelegate(ClickBtn));
}
private void Update()
{
}
void ClickBtn()
{
if (IsOpen)
{
tp.PlayReverse();
IsOpen = false;
print("关闭");
}
else
{
tp.PlayForward();
IsOpen = true;
print("打开");
}
}
}