前言:关于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
![](http://upload-images.jianshu.io/upload_images/9148742-2ee6f104baa0af88.png?imageMogr2/auto-orient/strip|imageView2/2/w/540)
- 会出现一个工具栏,通过它我们可以把UGUI已经做好的预设体(各种UI控件:按钮、复选框、滑条、下拉菜单、进度条、输入框等,跟UGUI中的基本一样)拖到场景中或是层级视图中
![](http://upload-images.jianshu.io/upload_images/9148742-8ff9a464fe62c81c.png?imageMogr2/auto-orient/strip|imageView2/2/w/244)
- 我们选中一个Button拖到场景中,会发现UGUI会自动添加一个UI Root(相当于UGUI中的画布)和一个Camera
![](http://upload-images.jianshu.io/upload_images/9148742-013d8edbeaa73cff.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200)
- 我们看一下它们的检视面板
- UI Root
- Transform组件中多了P、R、S小按钮,它们是用来初始化Transform的
- UI Root脚本
- UI Panel脚本
- 刚体组件
- UI Root
![](http://upload-images.jianshu.io/upload_images/9148742-b4186142059ab9df.png?imageMogr2/auto-orient/strip|imageView2/2/w/270)
- Camera
- 这里的照相机主要不是用来拍摄的照相机,而是用来控制事件的照相机
- Transform组件
- Camera组件
- UI Camera脚本(控制事件)
![](http://upload-images.jianshu.io/upload_images/9148742-af68045906ebbd9d.png?imageMogr2/auto-orient/strip|imageView2/2/w/279)
- Button
- Transform组件
- UI Sprite脚本
- UI Button脚本
- 碰撞盒组件(这里需要注意一下,在NGUI中的这些控件如果要想发生事件,必须要有碰撞盒)
![](http://upload-images.jianshu.io/upload_images/9148742-53f3fa0965949d13.png?imageMogr2/auto-orient/strip|imageView2/2/w/281)
- 在Prefab Toolbar中会有很多页,我们可以点开其他的页,可以往里面添加新的预设体,你可以往里面拖入游戏对象添加新的预设体,也可以点击Add添加已有的预设体
![](http://upload-images.jianshu.io/upload_images/9148742-e24a40d672196486.png?imageMogr2/auto-orient/strip|imageView2/2/w/223)
- 当你添加完毕后,在Prefab Toolbar中会出现你添加的预设体,并且在你保存的路径下会多出个预设体,我这里保存在了Asset目录下,所以会在工程窗口看到刚刚添加的预设体
![](http://upload-images.jianshu.io/upload_images/9148742-7cb4dec60347177f.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200)
Widget Wizared(控件工具)
- NGUI>>Open>>Widget Wizared
![](http://upload-images.jianshu.io/upload_images/9148742-f10e944b83f8d325.png?imageMogr2/auto-orient/strip|imageView2/2/w/556)
- 会出现一个控件工具窗口,我们可以修改它里面的属性,值得注意的是:不同模板(控件类型)的属性是不同的。如图中所示,我们用的模板是精灵,那么这里面对应的属性就是精灵模板的属性,包括模板(也就是控件的类型)、精灵贴图、中心枢纽位置、添加该控件到哪个对象(也就是把该控件设为哪个对象的子物体),但是基本的属性不会发生变化:图集、字体样式
![](http://upload-images.jianshu.io/upload_images/9148742-9c61de45b9777966.png?imageMogr2/auto-orient/strip|imageView2/2/w/507)
- 添加一个精灵
- 模板选为Spriie
- 设置所有的属性
- 点击Add To,添加到UI Root中
- 添加完之后,场景中多了个精灵、层级视图中多个精灵对象、精灵对象身上挂载着UI Sprite脚本
![](http://upload-images.jianshu.io/upload_images/9148742-22c74e6fc47e4c04.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200)
-
由此可见,每添加一个控件,控件身上都会有相应的脚本,来实现这个控件的相应功能,需要注意的是:这里的精灵身上没有通过脚本自动添加碰撞盒,那么它是不能触发事件的,而有些控件是自身就有碰撞盒的,比如说刚开始咱们创建的Button
创建新的图集
- 首先把要做成图集的图片设为精灵
-
NGUI>>Open>>Atlas Maker
-
弹出Atlas Maker窗口,点击New按钮
-
点击完之后,Altas显示None
- 选中要添加到新图集的精灵
- 在Sprites窗口会显示选中的精灵
- 点击Create
-
会提示你保存目录,设置命名,点击保存
-
完成效果
-
点击View Sprites可以预览图集里面的精灵
-
保存的目录会多出同名的材质、预设体、导入设置文件三个东西
这样,包含选中精灵的图集就诞生了
注意:在NGUI中,不能像在UGUI中直接拖入精灵,而是必须要先设置图集,再从图集中选择精灵
Anchor (锚点、锚框)
- 创建一个场景
- 点开Widget Tool>>Open the New UI Wizard
![](http://upload-images.jianshu.io/upload_images/9148742-e2855f0bddb201cb.png?imageMogr2/auto-orient/strip|imageView2/2/w/595)
- 创建一个UI
- 点击Create Your UI
![](http://upload-images.jianshu.io/upload_images/9148742-f41d99c052444ce1.png?imageMogr2/auto-orient/strip|imageView2/2/w/414)
- 场景中会多出个UI Root、Camera,层级视图中也会多出,Widget Tool窗口会多出属性
![](http://upload-images.jianshu.io/upload_images/9148742-53215ba3ed0e7034.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200)
- 添加一个精灵到UI Root中
- 添加锚点
- 选中UI Root
- NGUI>>Create>>Anchor
![](http://upload-images.jianshu.io/upload_images/9148742-9c5a5a257504c533.png?imageMogr2/auto-orient/strip|imageView2/2/w/576)
- 将刚刚创建的精灵作为Anchor的子物体
- 选中Anchor,设置Anchor的位置为右上角
![](http://upload-images.jianshu.io/upload_images/9148742-5a219f8d7e0a1b3d.png?imageMogr2/auto-orient/strip|imageView2/2/w/278)
![](http://upload-images.jianshu.io/upload_images/9148742-440a28f4419e2bf1.png?imageMogr2/auto-orient/strip|imageView2/2/w/286)
- 刚刚是添加锚点,现在是添加锚框
-
添加一个精灵
-
选中精灵,将它的Anchors的Type:Unified
-
Target:精灵的参照物
-
Left:精灵的左边距离参照物左边的距离
-
Right:精灵的右边距离参照物右边的距离
-
Bottom:精灵的下边距离参照物下边的距离
-
Top:精灵的上边距离参照物上边的距离
-
![](http://upload-images.jianshu.io/upload_images/9148742-ee69b3e35cb5d19f.png?imageMogr2/auto-orient/strip|imageView2/2/w/266)
、
- 如果将Type:Advanced,则精灵每个边都有对应的参照物
![](http://upload-images.jianshu.io/upload_images/9148742-226a22463065a10d.png?imageMogr2/auto-orient/strip|imageView2/2/w/257)
UI Root脚本
- Scaling Style:Flexible
- Minimum Height:当像素小于此值时,不再进行缩放
- Maximum Height:当像素大于此值时,不再进行缩放
![](http://upload-images.jianshu.io/upload_images/9148742-cabe851bfaadf0d2.png?imageMogr2/auto-orient/strip|imageView2/2/w/283)
-
Scaling Style:Constrained
-
Content Width:UI根据当前的宽度自动进行缩放
- Fit:勾选则根据当前的宽度自动进行缩放
-
Content Height:UI根据当前的高度自动进行缩放
- Fit:勾选则根据当前的高度自动进行缩放
-
Scaling Style:Constrained On Mobiles(跟Constrained类似,只不过是针对移动端的,用第二种就可以)
![](http://upload-images.jianshu.io/upload_images/9148742-63a245ce34ef61ce.png?imageMogr2/auto-orient/strip|imageView2/2/w/270)
UI Panel脚本
- Alpha:阿尔法(透明度)
- Depth:渲染深度,深度越大越后被渲染,显示在照相机的最前面
先比较UI Panel的深度再去比较UI控件的深度
UI Panel相当于是一个容器,所有的UI控件都在 UI Panel中才能被显示
![](http://upload-images.jianshu.io/upload_images/9148742-6b8a94278f2352e1.png?imageMogr2/auto-orient/strip|imageView2/2/w/282)
- Clipping:裁剪方式
- None:无
- Texture Mask:纹理遮罩裁剪
- Soft Clip:片段裁剪
- Constrain But Dont Clip:像素裁剪但不片段裁剪、
![](http://upload-images.jianshu.io/upload_images/9148742-e564d740ec4d160b.png?imageMogr2/auto-orient/strip|imageView2/2/w/261)
Camera脚本
![](http://upload-images.jianshu.io/upload_images/9148742-49e6331be31e55a2.png?imageMogr2/auto-orient/strip|imageView2/2/w/276)
- Event Type:
- 3D World:根据三维世界坐标触发事件
- 3D UI:根据三维UI Root上的像素坐标触发事件
- 2D World:根据二维世界坐标触发事件
- 2D UI:根据二维UI Root上的像素坐标触发事件
- Event Mask:能够触发事件的层
-
Debug:在运行的时,会在Game视图的左上角显示一些信息,当鼠标触发事件的时候,值会发生相应的改变
![](http://upload-images.jianshu.io/upload_images/9148742-71d6cbb854241a4b.png?imageMogr2/auto-orient/strip|imageView2/2/w/315)
- Event Sources:触发事件的来源
- Mouse:鼠标
- Touch:触屏
- Keyboard:键盘
- Controller:遥控杆
![](http://upload-images.jianshu.io/upload_images/9148742-ec8619e3541050bb.png?imageMogr2/auto-orient/strip|imageView2/2/w/323)
- Thresholds:微调
- Mouse Drag:当鼠标距离拖动对象某个像素的时候可以拖动
- Mouse Click:当鼠标距离点击对象某个像素的时候可以点击
- Touch Drag:当触屏距离拖动对象某个像素的时候可以拖动
- Touch Tap:当触屏距离按击对象某个像素的时候可以按击
![](http://upload-images.jianshu.io/upload_images/9148742-d19c59f917c13576.png?imageMogr2/auto-orient/strip|imageView2/2/w/326)
- Axes and Keys:轴和键
- Navigate X:X方向增量自定义名字
- Navigate Y:Y 方向增量自定义名字
-Scroll:鼠标滑轮自定义名字
Panel Tool(面板工具)
- NGUI>>Open>>Panel Tool
![](http://upload-images.jianshu.io/upload_images/9148742-91617cf89bdeaa6f.png?imageMogr2/auto-orient/strip|imageView2/2/w/542)
![](http://upload-images.jianshu.io/upload_images/9148742-f1fe7306bd2c3bda.png?imageMogr2/auto-orient/strip|imageView2/2/w/414)
- 复选框:勾选则显示该Panel
- DP:渲染深度
- Panel's Name:Panel名字
- Layer:所在的层
- WG:控件个数
- DC:DrawCall(渲染调用)
- Tris:三角形个数(一个正方形是由两个三角形组成)
- Stc:勾选则为静态
Draw Call Tool(渲染调用工具)
- NGUI>>Open>>Draw Call Tool
![](http://upload-images.jianshu.io/upload_images/9148742-3d066abc9ff37534.png?imageMogr2/auto-orient/strip|imageView2/2/w/549)
- Draw Call Filter:渲染调用文件
- All Panels:所有Panel
- 下面会显示所有Panel(当前的两个面板)的Draw Call,会根据面板个数和使用图集的不同而分成不同的组,如下图所示,1组和2组是根据不同面板而划分的;而2组和3组是根据使用不同的图集而划分的
- Material:所用的材质图集
- Widgets:控件个数
- Triangles:三角形个数
- All Panels:所有Panel
![](http://upload-images.jianshu.io/upload_images/9148742-f0084b6d048de37e.png?imageMogr2/auto-orient/strip|imageView2/2/w/414)
- Selected Panel:选择Panel
-
显示选中的Panel的Draw Call
-
触发事件方法一:在编辑器中使用NGUI触发事件
-功能:点击小书按钮,精灵移动到UI Root中间位置;点击叉号按钮,返回起始位置
- 搭建场景:两个NGUI按钮、一个NGUI精灵
![](http://upload-images.jianshu.io/upload_images/9148742-41007762d0cb85ab.png?imageMogr2/auto-orient/strip|imageView2/2/w/1138)
- 添加位移动画:
- 选中精灵,NGUI>>Tween>>Position
![](http://upload-images.jianshu.io/upload_images/9148742-2358f85f857febae.png?imageMogr2/auto-orient/strip|imageView2/2/w/513)
-
在精灵身上会多个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
![](http://upload-images.jianshu.io/upload_images/9148742-8a930f949488e6a8.png?imageMogr2/auto-orient/strip|imageView2/2/w/278)
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
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。