NGUI学习笔记（一）

一、基础组件

注意！！！带Debug模式下能显示更多参数

1、RacTransform

Anchors：锚点

Anchors Preset ：锚点预设

pivot： 轴心点

Anchors和pivot的位置为panel的比例位置，panel x为1 y为1。

注意！需要在pivot状态下才能调整轴心点位置

UI的定位注意根据轴心点的和锚点的相对位置

 

在Debug模式下：

Anchors position 时轴心点与Anchors构成的几何中心的相对位置

Local position 是UI的panel几何中心点与轴心点的相对位置

需要改变UI尺寸而位置有所固定，可以通过改变轴心点位置。因为尺寸的延申是以轴心点为基准的。

 

获取UI宽高的方式

RectTransform rect = transform.GetComponent<RectTransform>();
rect.rect.width
rect.rect.height

蓝图模式和原始编辑模式，是对panel的控制

虚线框是蓝图编辑模式，固定panel大小。

"R"是原始编辑模式在编辑Anchors和Pivot固定Anchors和Pivo只改变panel

 

2、Canvas

有三种显示模式 sceen space overlay（显示在屏幕的最上层）  camera（根据相机的照射来显示，可设置与相机的距离 distance） worldspace（canvas变成空间中的一个物体根据实际情况显示）

 

canvas scale（script）

constant pixel size

scale factor： 缩放因子 0—1之间。

代码控制缩放

float wScale = Screen.width/[编辑时屏幕的宽度尺寸.f];
float hScale -Screen.hight/[编辑室时屏幕的长度尺寸.f];
GetCompent<CancasScaler>().scaleFactor = wScale;

scale with screen size（这个最常用）

constant physical size

reference pixel per ：每个unit多少个像素，在图片的设置界面有个 pixel per unit所以图片实际显示的像素点是经过俩次换算的。

 

 Graphic RayCaster(图像射线检测)

ignore reversed Graphic （忽略翻转的图像）

Blocking object （可以阻塞的对象）

Blocking Mask （阻塞层级设置）

Canvas Group（统一管理子物体的canvas属性，如：alpha interactable（点击响应） Block Ray（能否接受图形射线检测）ignore parent group（是否接受父物体的更改管理））

 

渲染层级 相机深度 > 层级（canvas—》sortlays）> 自然层级（UI排列顺序）

Image

 

image type   simple(简单，可以设置原始大小)  sliced（切片）Tiled（平铺）Filed（图片以特定增量图形消隐，可以用来做cd冷却效果）  

 

Raw image UV Rect （帧动画）

x y 用来分割帧图

w h 用来分隔帧图 

在Raw Image上显示3d物体，先创建一个render texture 将他赋值给一个camera 然后把render texture复赋值给Raw Image。（改变相机的clear flag可以改变3d物体的显示背景）

 

Text

Rich text (勾选时可以像html一样用<\>***<\>更改文本格式)

Horizontal / Vertical Overflo （水平和垂直方向文字显示方式） warp（包含）over low（溢出） Truncate（截断）

Best Fit（文本大小的最佳适配）

 

Image

mask(UI子物体Canvas 是否遮盖当前Canvas）直接使用mask组件会消耗性能，使用 rect mask 2d 容易出现bug

selectable 改变image被选中时的一些变化 可以改变颜色 图片 以及展示不同动画。

 

Button

代码添加点击事件

GetComponet<Botton>().onClick.AddListener(functionname);

 

Toggle

Fade(渐变)

代码添加事件

GetComponet<Toggle>().OnValueChange.AddListener(delegate) 

GetComponent<Toggle>().onValueChanged.AddListener((Value)=> { Debug.Log(Value); });Value系统传参，使用onValueChanged.AddListener

都可以为委托添加Value参数，组件的Value是什么类型委托的Value就是什么类型

toggle group allow select off(是否可设置全部toggle为off)

 

slider（滑块）

 

GetComponet<Toggle>().OnValueChange.AddListener(delegate) 

使用onValueChanged.AddListener

都可以为委托添加Value参数，组件的Value是什么类型委托的Value就是什么类型

 

scroll bar（滚动条）

相当于浏览器最右边的滚动条，在scroll view上使用可以做出一个类似内容浏览的窗口。

 

scroll view（滑动图标）

主要由俩个scroll bar 和一个 content 组成，内容放在content下，显示情况由scrollbar展示。在scrollview下有组件movement type分别有三个选项 没有弹性（内容移出边框不弹回） 弹性（内容移出边框自动弹回） 固定（内容仅在可动范围内浏览）

 

Dorpdown（下拉列表）

在Dorpdown下组件脚本Dorpdown可以编辑选项text标题 image图标，注意区分俩个不同的模板和组的text和image。

 

IputField（输入框）

PlaceHolder 控制输入前文本框预设属性

Text 控制输入后显示的属性

caret 光标

blink 闪烁

 

Horizontal Layout Group（水平布局管理）

一个组件可以添加至父物体，能够控制子物体的排列和尺寸及间隔。

 

Vertical Layout Group(垂直布局管理)

 

Grid Layout Group（网格自动布局组件）

Start Corner (排列起点)

Start Axis  （排列轴方向）

Child Alignment （子物体直线排列顺序方向）

Constraint （子物体canvas大小约束）

 

Layout Element （使子物体在父物体的布局排列下有自己的布局）

 

Flexible （灵活的）：与同父物体下的子物体按比例平分空间

 

Aspect Ratio Fitter（自身宽高比适配器）

 

Content Size Fitter （canvas适配内容工具）