【Unity】 NGUI学习笔记（二）NGUI基础功能

---

NGUI基础功能与知识点

• NGUI的根节点为UI Root。所有的物体想要显示在界面上都必须挂在具有UI Panel组件的物体下。
• UI Panel具有深度属性，深度决定了物体显示的层级，类似于z-index。
• NGUI没有节点的概念，创建的物体直接就是Sprite、Label之类的。
• NGUI主相机可以理解为没有Z轴，所以Clear Flags设置为Depth only（仅影响深度）。UI的深度值永远大于其他物体。
• 把UI Root及其子物体的Layer设置为UI层，再把UI相机的Culling Mask设置为只看UI层，然后把其他相机设置为不看UI层。
• UI界面的图标是可以缩小的，在Scene界面的右上角设置。
• UI Root的Scaling Style属性一般设置为Fixed Size固定大小，避免出现自适应问题。
• 通常情况下终端的屏幕比例都是16:9、5:4、16:10等，如果只做手机，可以默认16：9，如果还要支持非宽屏（例如PC、Pad）就需要另外做一套UI。
• 不管什么组件，如果要做互动就要加碰撞，要加碰撞最后就钩上BoxCollider选项，免得碰撞体跟操作节点大小不一致导致点击失败。
• 如果碰撞物体是不规则图形，需要先取消Widget中的Box Collider属性，然后再到Box Collider插件中的编辑状态下拼一个碰撞范围。
• 如果想让3D物体显示在UI界面上，只需要把这个3D物体的Layer设置为UI层就可以了。
• 通常情况下，如果想要做一个UI界面，其节点结构会设置为Anchor-Panel-SpriteXX。

Atlas图集资源

• NGUI支持图集资源的显示，并提供了图集的制作功能（Atlas Maker）。
• 图集资源能够减少draw call，一个图集理论上只进行一次draw call。
• 图集一般是将同一个场景下或者同一类别的图片放到一起。

Sprite精灵

精灵Sprite的类型：

• Simple：一只普普通通的精灵。
• Sliced：一只被切割的精灵。切割可以保留图片部分位置的精度，一般用于按钮的背景图，这样图片被拉伸以后边缘也不会失真。详细设置需要点击精灵的Edit按钮，设置完以后可以点击下面的返回精灵按钮。如果要切割精灵，要将Sprite Mode改为Multiple，应用以后，点击Edit模式进行切割。
• Tiled：一群被平铺的精灵。
• Filled：一只被填充的精灵。填充的时候可以按照角度和长度填充，可以用来做进度条、时钟、血条之类的东东。
• Advanced：一只很高级的精灵。它可以将精灵切成九宫格，每个格子单独操作。比如手机，把中间部分设置为不显示。

精灵的基本属性：
Pivot：内部对齐方式，一般适用于label。
Dimensions：精灵大小，单位为像素。后面的Snap按钮是用来恢复原始大小的。

Button按钮

• 精灵如果需要实现点击效果，需要设置碰撞。【鼠标右键点击精灵-Attach-Box Collider】
• 如果要实现按钮事件监听，需要先设置碰撞，然后添加按钮脚本。【鼠标右键点击精灵-Attach-Button Script】
• 如果要触发脚本事件，需要给OnClick指定脚本。
• 脚本需要挂在空物体上，Create Empty即可，脚本要继承MonoBehaviour。
• 脚本中可以使用正常的生命周期以及属性，按钮的响应事件只要指定相应的方法即可，此部分使用委托模式自动调用。

private void Start()
{
	render = cube.GetComponent<Renderer>();
}
public void test()
{
	// 给3D物体cube换颜色
	render.material.color = Color.red;
	// 给精灵换图集中的其他图片
	sprite.spriteName = "XXXX图片名称";
	// 给精灵换颜色
	sprite.color = Color.red;
}
1
2
3
4
5
6
7
8
9
10
11
12
13

Button Scale按钮缩放：
如果要实现按钮的动态效果需要添加Button组件，比如实现鼠标悬停时的放大效果要添加Button Rotation组件。
Hover：光标悬停状态的缩放。
Pressed：点击按钮时的缩放。
Tween Target：当点击按钮后需要变化的不是按钮本身时，就要用到Tween Target，这样所设置的动画就作用在你所指定的节点上了。

Anchor（锚点）

Unity的锚点概念跟cocos的是不同的，Unity的锚点就像cocos中的widget，是用来设置节点与父节点间的位置关系的。而cocos的锚点是作用于当前节点本身的，当节点旋转、缩放、对齐时会有影响。所以cocos的锚点是单点，而Unity的锚点是四点。
NGUI和UGUI的锚点也有所不同，NGUI的锚点是上下左右，而UGUI的是花瓣锚点。
NGUI锚点通常分为两种，第一种是节点锚点，第二种是属性锚点，节点锚点一般用作做一个区域，形成父子关系并统一管理。而属性锚点也能实现相同的功能，一般用作跟其他同级节点做同步处理。
不建议节点锚点和属性锚点共用，容易出现界面混乱。
NGUI的布局方式可以考虑在UI Root下先根据方位建立几个锚点，然后把各个方向的节点放在锚点下面。

Label文本

如何更换字体：
使用Unity字体：准备好字体文件，放到项目中，把属性中第一个下拉框由NGUI改成Unity，然后把字体文件拖放到后面即可。
使用NGUI字体：创建空节点，添加NGUI Font组件，将字体类型Font Type改为动态字体Dynamic，给字体文件，然后点应用。后面就可以用NGUI选字体了。弄好后空节点就可以删了。
选了Unity就直接给字体文件，而选择NGUI则直接从font下拉框选择，不要手动给字体文件。

Toggle开关

使用Toggle，要先给Sprite添加碰撞组件，然后添加Toggle组件。
在On Value Change中指定脚本，脚本内容如下：

public AudioSource audio;
public void ToggleFunc()
{
	audio.mute = UIToggle.current.value;
	print("开关状态：" + UIToggle.current.value);// true\false
}
1
2
3
4
5
6

另外：Toggle有一个Group属性，相同group数字的开关会被视为同一组。

Slider滑动条

滑动条提供了默认的一些用于改变label的方法，用于显示百分比。也可以自己写。

public AudioSource audio;
public void SliderFunc()
{
	audio.volume = UISlider.current.value;// 改变音频音量大小
	print("滑动条当前值：" + UISlider.current.value);// 0~1之间的小数
}
1
2
3
4
5
6

Popup List下拉框

• 在options里添加选项文字。
• On Value Change里可以指定label，然后Method选择SetCurrentSelection，选择的结果会显示在label上。
• 下拉菜单中的字体和选中后显示的字体有时候会不一致，这时候统一使用Unity字体就好了。

public float score = 10;
public void ListFunc()
{
	switch(UIPopupList.current.value)
	{
		case "简单":
			score = 10;
			break;
		case "一般":
			score = 100;
			break;
		case "困难":
			score = 1000;
			break;
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Panel面板

• 实现打组的功能，深度值也可以统一管理，相对方便一些。
• 统一的大小、位置、旋转管理。
• Panel还可以实现类似于mask遮挡的效果，把Panel的Clipping属性设置为Soft Clip后，在Panel区域外的子节点将不会在屏幕上展示。

Input Field Script文本域脚本

给精灵添加Input Field Script组件后，精灵就可以实现文本域的效果。

• 一般可以先做一个精灵当背景，然后在精灵下面再创建一个label。
• 精灵要添加碰撞，不然无法实现输入效果。
• Label属性要指定好。
• Input Type输入类型：Standard标准的，Auto Correct自动检查，Password密码域。
• validation验证：None是不限制，Alphanumeric阿拉伯数字，Username用户名字母数字组合，name只能是字母。
• On Return Key可以指定是否通过按回车来调用submit方法。

public void InputFunc()
{
	print("当前输入内容：" + UIInput.current.value);// submit和change的时候都用此方式获取内容
}
1
2
3
4

Text List组件

可以将文本域变成多行文本域，类似于聊天界面。

• 如果只是为了实现多行显示，直接添加组件就可以了。
• 如果要实现聊天效果，需要把style改成Chat。
• Paragraph History是显示的行数。
• 还可以添加Scroll Bar滚动条。

Chat Input组件

一般要跟Text List组合使用，用于聊天界面的输入框。添加组建后别忘了把对应的Text List组件所在的UI元素拖过来。
这些脚本都是可以改的，比如Chat Input脚本中按了回车键会执行一行代码mInput.isSelected = false;这一行就可以改为true或者直接注释掉，这样就能一直输入了，不用每次输入后都丢失焦点。

Scroll Bar滚动条（预制件）

NGUI提供了Scroll Bar的预制件，可以直接搜索，搜索的时候可以筛选一下文件类型Prefab预制件，选择Control - Simple Horizontal Scroll Bar，直接拖放到hierarchy列表中即可。调整大小和位置以后，把滚动条跟刚才的UI Text List组件中的Scroll Bar对应上即可实现关联滚动。

筛选方式如下：

Scroll View滚动视图

Scroll View和Scroll Bar不一样，Scroll View是一种默认UI元素（不是预制件），Scroll View默认自带一个Panel组件，他的功能是充当一个遮罩，在View内部的子元素才会展现出来。

• Scroll View一般用作滚动展示内容，比如类似于走马灯的功能就可以用Scroll View。
• 如果要实现拖拽滚动还要结合Drag Scroll View组件。
• 将Scroll View的方向设置好以后，添加Drag Scroll View组件，会自动实现同方向上的拖拽功能。
• Content Origin对齐方式
• Movement滑动方向，当设置为Custom时，可以根据X轴和Y轴分别设置权重比例，来调整滑动的范围和速度。
• Drag Effect拖拽弹性。
• Scroll View可以设置Scroll Bar滚动条，设置方法基本相同，可以设置横向的和纵向的，还可以配置滚动条显示的方式，Always是一直显示，Only If Needed是需要滚动条的时候才显示，When Drag是拖拽并且超出范围时显示。

Drag and Drop拖放组件

拖放组件一般会涉及到多个组件，分别为Drag and Drop Root、Drag and Drop Item、Drag and Drop Container等。这一套组件可以实现普通物体的拖拽，也可以配合Scroll View做一些类似拖放排序的功能。

• Item设置给需要拖拽的子物体，Root设置给拖拽展示的区域。
• 如果不需要将物体拖拽出Scroll View范围外，那就不用指定root。但是如果需要将物体拖拽到Scroll View外时也能显示，就需要另外建一个深度值高的Panel并添加root组件。
• 注意，被拖拽的物体一定要有碰撞才能拖拽。
• Drag and Drop Container可以用作拖拽容器，从其他的区域拖拽过来的物体会自动挂载在当前容器节点下（类似于吸附功能）。
• 如想让物体自动移动到容器下的其他节点（例如Grid），需要将Reparent Target指定为需要挂载的节点（比如Grid）。

有时候拖拽功能的目标不是一个完整的容器，而是多个方格（例如背包换格子），这个时候可以简单的对NGUI的代码做个二次封装：

// 继承UIDragDropItem类，重写他的Release方法
public class MyDrag : UIDragDropItem
{
	protected voerride void OnDragDropRelease(GameObject surface)
	{
		base.OnDragDropRelease(surface);
		Transform releaseParent = transform.parent;// 记录初始物体
		if (surface != null)// 如果拖拽后有指向目标，则根据不同的指向目标执行不同的操作
		{
			if (surfase.tag == "Back")// 如果拖拽后指向的目标是back背包，则移动到当前指定位置
			{
				transform.parent = surface.transform;
				transform.localPosition = Vector3.zero;
			}
			else if (surfase.tag == "Obj")// 如果拖拽后指向的目标是Obj物体，则与当前物体交换位置
			{
				Transform surfaceParent = surface.transform.parent;
				transform.parent = surfaceParent;
				transform.localPosition = Vector3.zero;
				surface.transform.parent = releaseParent;
				surface.transform.localPosition = Vector3.zero;
			}
		}
		else // 如果拖拽后没有指向目标，则回到原位置
		{
			transform.parent = releaseParent;
			transform.localPosition = Vector3.zero;
		}
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

Grid网格布局

此网格非彼网格，这个网格指的是网格布局，是一个UI节点，并且是父节点，这个节点下的物体都会以网格的形式排列展示。

• 要想看到效果，需要右键点击Grid节点，然后点击Execute。
• Grid可以跟Scroll View结合使用。
• Arrangement网格的排布方式。
• Cell Width、Height单元格的宽高。
• Column、Row Limit行列数量。
• Sorting排序方式：
• Pivot内部对齐方式。
• Smooth Tween平滑动画效果。

3D模型展现

• 如果想让3D物体显示在UI界面上，只需要把这个3D物体的Layer设置为UI层就可以了。
• 如果需要对3D物体进行旋转，首先要添加碰撞体。
• Spin组件用于模型的自动旋转，可以分别设置沿着不同的轴向旋转。
• 如果不想要自动旋转，可以使用Spin With Mouse组件，可以用鼠标操作旋转。组件中的Target属性是指定真正被旋转的对象，如果不指定，默认旋转自己。
• 如果有时候旋转失效了，可以往模型下面放一个Sprite，然后把Sprite缩到最小，这样模型就彻底变成UI模型了。

其他组件

• Drag Object拖拽组件

更多内容请查看总目录【Unity】Unity学习笔记目录整理