Unity3D学习之UI系统——NGUI

文章目录

1. 前言

在这里插入图片描述

2 NGUI下载和导入

资源商店搜索
在这里插入图片描述
学习版自行搜索

导入即可
创建UI

3. NGUI三大组件

在这里插入图片描述
创建NGUI后，挂载在UI Root 和其子Camera的脚本

3.1 Root组件

分辨率自适应模式的基础

3.1.1 分辨率概念

在这里插入图片描述

3.1.2 Root的作用

在这里插入图片描述

3.1.3 root脚本各组件

在这里插入图片描述
Minimun Height 和 Maximum Height
用于拖动窗口时，如果窗口变得很小了，UI不缩放的话，会挡住游戏，使用Flexible模式用于解决该问题，会在小于或着大于这两个值的时候，进行等比缩放

Shrink Portrait UI 竖屏时按宽度来适配

Adjust by DPI 勾选就是

在这里插入图片描述
Content Width 和 Content Height 是自适应屏幕时默认的分辨率
不勾选Fit 时会裁剪，不会有黑边，始终会有UI填充屏幕
勾选Height 画布总是跟着屏幕高度缩放（横屏游戏
勾选Width 画布总是跟着屏幕宽度缩放（竖屏游戏
在这里插入图片描述

3.1.4 总结

在这里插入图片描述

3.2 Panel 组件

3.2.1 Panel的作用

管理渲染相关内容
在这里插入图片描述

3.2.2 Panel的控件

在这里插入图片描述
Depth 控制层级，层级越高的遮挡层级低的。要注意不同Panel最好不要在一个层级
Clipping 通过参数裁剪

在这里插入图片描述
排序层之后再讲

3.2.3 总结

在这里插入图片描述

3.3 EventSystem组件

3.3.1 作用

在这里插入图片描述

3.3.2 组件

在这里插入图片描述

UI模式是根据组件深度处理事件
World模式根据距离著摄像机的远近来响应排序（这两个的主要区别在眼睛看到在前面的，进行交互时UI模式点击看起来在被前面的窗口压在后面的，但被压在的那一层层级更高，会先相应被压在下面的UI）

EventMask 决定哪个层级接受事件
在这里插入图片描述
Debug就是测试时，你点击这个UI，会打印出来交互的时什么对象

在这里插入图片描述

3.3.3 总结

在这里插入图片描述

4 图集制作

4.1 图集的作用

在这里插入图片描述

4.2 打开图集制作工具

在这里插入图片描述

4.3 新建图集

点击New 新建

在这里插入图片描述
选择加入图集的文件

创建图集，一般存放在Resources文件夹内，方便读取

有三个文件
1.图集文件
2.图集材质
3.图集图片

在这里插入图片描述

5 三大基础控件

在这里插入图片描述
公共内容

5.1 Sprite 精灵图片

在这里插入图片描述

5.1.1 创建Sprite

方式1
在这里插入图片描述
方式2

5.1.2 Sprite 控件

在这里插入图片描述
Atlas 选择图集
Sprite选择图集中的图片
Fiexed Aspect保持宽高比

sliced模式
点击Edit
在这里插入图片描述
拉伸Border，会根据九宫格进行拉伸。保证四个角不变化，只会拉伸中间的十字区域

Tiled 平铺模式
图片会重复绘制

Filled 填充模式
填充模式用于制作进度条、血条
在这里插入图片描述

在这里插入图片描述

5.1.3 在代码中的Sprite

在这里插入图片描述

5.2 Label文本控件

在这里插入图片描述

5.2.1 创建Label

NGUI - create - Lable

5.2.2 Label控件

在这里插入图片描述

shrink Content

Calmp Content
在这里插入图片描述
Resize freely

在这里插入图片描述

在这里插入图片描述

给Lable增加碰撞器，然后点击超链接可以转到超链接的网之

5.2.3 代码控制

在这里插入图片描述

5.3 Texture 大图控件

在这里插入图片描述

6 组合控件

在这里插入图片描述

6.1 Button组件

6.1.1 添加Sprite组件

在这里插入图片描述

6.1.2 添加Button脚本

在这里插入图片描述

6.1.3 添加碰撞器

在这里插入图片描述

6.1.4 组合

在这里插入图片描述

6.1.5 button组件参数

在这里插入图片描述
Transition 过渡时间从某一个颜色编导另外一个颜色所需要的时间
Sprite 可以设置各个状态时的效果

6.1.6 监听点击事件

在这里插入图片描述
把Panel（挂载脚本的组件）拖入到button 的on click中

然后在Method选择需要使用的函数
在这里插入图片描述

点击后

如果方法是私有，会找不到
同时可以添加多个监听函数

使用代码获得按钮对象监听

在这里插入图片描述
拖入

使用拉姆达表达式

在这里插入图片描述

6.1.7 总结

在这里插入图片描述

6.2 Toggle单选多选框

6.2.1 创建toggle

在这里插入图片描述

增加脚本和碰撞器

6.2.2 toggle控件

在这里插入图片描述
关联选中时的图片

加入Sprite后
未选中

选中

Starting state 一开始的选中状态
Invert State 反转状态

Group 多选框分组
在这里插入图片描述
如果只能选择一个
可以设置为同一个Group

State of None是这个Group必须要选中一个

6.2.3 监听事件

创建一个Panel用于挂载脚本
然后再Toggle上拖入函数
在这里插入图片描述

在这里插入图片描述

如何知道哪一个Toggle选中，可以在Panel的脚本中设声明三个Sprite变量关联

在这里插入图片描述
然后给所有的Toggle关联Panel

分别选中
在这里插入图片描述
代码监听

在这里插入图片描述

6.3 Input文本输入

6.3.1 Input文本创建

在这里插入图片描述

6.3.2 Input组件

在这里插入图片描述

拖入Label
在这里插入图片描述
Input type

在这里插入图片描述

6.3.3 监听事件的两种方式

在这里插入图片描述

Panel装载脚本，关联Input的Sprite

input脚本里关联Panel的函数

在这里插入图片描述

测试的时候把回车改成提交

在这里插入图片描述

6.4 PopupList 下拉列表组件

如此类似的
在这里插入图片描述

6.4.1 制作PopupList

在这里插入图片描述

6.4.2 组件相关

在这里插入图片描述

选项空一行一个组件

如果设置了之后没有反应，首先设置一下字体

在这里插入图片描述
出现了三个，很奇怪后面的参数可以设置

在这里插入图片描述

6.4.3 选择相关

选择这个脚本
在这里插入图片描述

6.4.4 监听事件

在这里插入图片描述

和之前一样的套路Panel挂载脚本，popupList关联事件

新加选项

6.5 Slider滑动条控件

在这里插入图片描述

6.5.1 创建

在这里插入图片描述

NGUI的Slider是添加到背景的这个Sprite上
但是碰撞器添加到背景的Sprite上，用户按和拖动滑块都能进行移动，如果碰撞器添加到滑块的Sprite 上，用户只能通过拖动滑块进行移动

6.5.2 参数

在这里插入图片描述
steps 会等分成十份

6.5.3 监听函数

和其他控件一样，就一笔带过了
在这里插入图片描述

在这里插入图片描述

6.6 ScrollBar 滚动条和 ProgressBar进度条

在这里插入图片描述

6.6.1 制作ScrollBar 滚动条

在这里插入图片描述

6.6.2 制作 ProgressBar进度条

在这里插入图片描述

6.7 ScrollView 滚动视图

在这里插入图片描述

6.7.1 制作ScrollView

在这里插入图片描述

子对象添加Drag Scorll View和碰撞器

6.7.2 ScrollView组件

在这里插入图片描述
Panel主要用于设置范围

在这里插入图片描述
改变可视范围

MoveMent 水平移动或者竖直移动
设置只能水平或者垂直或者自由（左右都行
拖动

Drag Effect 类似于惯性和弹性的效果

ScrollWheel Factor 滚动因子滚动速度和方向
在这里插入图片描述
Momentum Amount动量设置惯性大小
Sppring Strength 弹力大小
Dampen Strength 阻尼强度
Cancel Drag if fits 如果内容没有超过可视范围，决定此时能不能拖动