文章目录
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;
}
}
}
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学习笔记目录整理