文章目录

NGUI基础功能与知识点
Atlas图集资源
Sprite精灵
Button按钮
Anchor（锚点）
Label文本
Toggle开关
Slider滑动条
Popup List下拉框
Panel面板
Input Field Script文本域脚本
Text List组件
Chat Input组件
Scroll Bar滚动条（预制件）
Scroll View滚动视图
Drag and Drop拖放组件
Grid网格布局
3D模型展现
其他组件

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;
}

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
}

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

Slider滑动条

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

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

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;}
}

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的时候都用此方式获取内容
}

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;}}
}