UGUI,NGUI

UGUI

Unity，UGUI文档

关于UGUI的底层小知识

Canvas

alt

Render Mode渲染模式

1.Screen Space - Overlay屏幕空间-覆盖

表示 Canvas 下的所有的 UI 控件永远位于屏幕的前面 , 不管有没有相机 , UI元素永远在屏幕最前面 ，主要是2D效果。在这种模式下，在不同的屏幕分辨率下画布会自动适配屏幕的分辨率大小。

Pixel Perfect：完美像素，UI元素精确到像素对齐，边缘更清晰

Sort Order：排列顺序，多个Canvas存在的时候，数值越大，越优先显示

2.Screen Space - Camera屏幕空间-相机模式

Canvas 和 摄像机之间有一定的距离 , 可以在摄像机和 Canvas 之间播放一些粒子特效，主要是3D效果。

Pixel Perfect ：完美像素，UI元素精确到像素对齐，边缘更清晰

Render Camera ：指定一个相机，用于渲染Canvas

Plane Distance：Canvas平面与摄像机的距离

Sorting Layer：Canvas显示层级，存在多个Canvas时，层级越大，显示优先级越高

Order in Layer：层级顺序，同 Sorting Layer下，Order越大，显示优先级越高

3.World Space世界空间 Canvas 就和普通的 3D 物体一样了 , 可以控制它的大小,旋转,缩放等 , 一般用来做血条。

Event Camera：用于响应事件的相机

Sorting Layer：Canvas显示层级，存在多个Canvas时，层级越大，显示优先级越高

Order in Layer：层级顺序，同 Sorting Layer下，Order越大，显示优先级越高

Canvas Scaler（画布缩放）

https://docs.unity3d.com/Packages/com.unity.ugui@1.0/manual/script-CanvasScaler.html

Canvas Scaler组件用于控制Canvas中UI元素的整体比例和像素密度。这种缩放会影响画布下的所有东西，包括字体大小和图像边界。

缩放模式

  1. Constant Pixel Size（恒定像素大小）：无论屏幕大小如何，都使UI元素保持相同的像素大小

    Scale Factor（缩放比例）：以此比例缩放Canvas中的所有UI元素。

alt

  1. Scale With Screen Size（以屏幕尺寸缩放）：根据不同屏幕尺寸自动改变UI大小,保持画布一定比例下随屏幕改变，画布进行缩放。可以实现在不同分辨率下保持UI的一致性

alt

  1. Constant Physical Size（不变的物理尺寸）？？
    使UI元素保持相同的物理大小，无论屏幕大小和分辨率。Match:画布缩放可以根据宽度（例：横屏游戏）或者高度（例：竖屏游戏）进行匹配

alt

Rect Transform

alt

锚点

锚点：四个点重合的情况。无论如何改变父物体的尺寸， UI子物体Rect Transform四个参数的的值不变，其含义分别为：

PosX：锚点到UI子物体轴心的垂直距离
PosY：锚点到UI子物体轴心的垂直距离
Width：UI子物体的宽度
Height：UI子物体的高度

锚线

锚线：两个点重合的情况。改变父物体的尺寸，UI子物体Rect Transform四个参数的值不变，其含义分别为：

PosX/PosY：锚线与UI子物体左右/上下边框的垂直距离
Top/Bottom：锚线上方端点/下方端点与 UI子物体上边框/下边框的垂直距离
Width/Height：UI子物体的宽度/高度
Left/Right：锚线左方端点/右方端点与 UI子物体左边框/右边框的垂直距离

锚线到UI子物体轴点的垂直距离保持不变，但是UI子物体的高度/宽度会随着父物体的高度/宽度变化而变化

锚框

四个点分开的情况。改变父物体的尺寸，UI子物体Rect Transform四个参数的值不变，其含义分别为：

Left：左方锚线与UI子物体左边框的垂直距离
Top：上方锚线与 UI子物体上边框的垂直距离
Right：右方锚线与 UI子物体右边框的垂直距离
Bottom：下方锚线与 UI子物体下边框的垂直距离

表示UI子物体的尺寸大小包括高度宽度都会随着父物体的尺寸改变而改变；  注意：UI父物体与UI子物体的尺寸大小变化会受两者Scale大小比例影响

Scroll View--滚动视图

是一个能上下或者左右拖动的UI列表，用于展示图像，文本，按钮等，在需要展示较多的内容的情况的时候会用到。例如：背包，文字。

组成：

alt

Scroll View（滚动视口）：挂载Scroll Rect 组件；Viewport（视口）：挂载Mask组件；Content（内容）：挂载Layout Group组件（有三种类型）；水平/垂直滚动条Scrollbar；

Scroll Rect组件

alt

Mask组件

遮罩，不是一个可见的UI控件，只是一个用来限制子物体显示内容的组件。即挂载Mark组件的父物体，只显示子物体中与父物体重合的部分。

Layout Group-->Grid Layout Group组件

alt

Dropdown--下拉框

组成：

alt

	Label：初始化的文字；	Arrow：初始化的下拉箭头； 	Template：Dropdown（下拉框）的模板样式；滚动视图；
    Item Background：每一个Item（目标选项）的背景图片； 	Item Checkmark：每一个Item的选中标识图片；
    Item Label：每一个Item的文字显示内容；   	Scrollbar：滚动条

可以在Template模板中自定义所需要的目标选项的元素信息；同时也可以在Dropdown中自定义：如上图；

alt

Input Field--输入框

组成：

alt

Placeholder：位置标志如图中‘Enter text...’，带有Text组件的物体；Text：Input Field的初始值

Input Field组件

Text Component：文本组件，Input Field的文本显示输入组件
Text：Input Field的初始值。
Character Limit：字符数量限制，最大输入的字符数，0为不限制。
Content Type：内容类型，限定Input Field的输入内容类型，包括数字、密码等，常用的类型如下：
	Standard：标准类型，什么字符都能输入，只要是当前字体支持的。
 	Autocorrected：自动更正
 	Integer Number：整数类型，只能输入整数。
 	Decimal Number：十进制数，能输入整数或小数。
 	Alphanumeric：文字和数字，能输入数字和字母。
 	Name：姓名，能输入英文及其他文字，当输入英文时自动姓名化（首字母大写）。
 	Password：密码类型，输入的字符隐藏为*
 	Email Address:邮箱类型
 	Pin：Pin类型，字符隐藏为*
 	Custom：自定义

Line Type：换行方式，当输入的内容超过输入域边界时：
	single Line：单行，不换行，继续延伸此行，输入域中的内容只有一行；
	multi Line Submit：多行，超过边界则换行，输入域中内容有多行；
	multi Line Newline：多行，超过边界则新建换行，输入域中内容有多行。
    
Placeholder：位置标示，此输入域的输入位控制符，任何带有Text组件的物体。注意：Placeholder对应的Text也为此输入框的提示语显示：（例如Enter text...为提示语，当输入框内容为空时，提示语可见，内容不为空时，提示语不可见）
Caret blink rate：光标闪烁速度，标示输入光标的闪烁速度。
Selection Color：选中文本的颜色
Hide mobile input：手机端隐藏输入 
Read Only：只读，不允许输入
On Value Changed： 值改变时事件
End Edit： 输入结束时事件

使中文输入法的备选框跟随InputField的光标： 链接

UGUI九宫格纹理拉伸的使用(Image->Image Type->Sliced(切片))

CSDN：https://blog.csdn.net/andyhebear/article/details/50476802

原理：

alt

根据上图做拉伸制定规则：

1.保证四个角1,3,9,7不做任何拉伸

2.与四个角有公共边的四个矩形2,6,8,4做单向拉伸，即保证与四个角的公共边不拉伸，例如2,8只进行横向拉伸，4,6只进行纵向拉伸

3.中间部分5做双向拉伸，即横向，纵向同时拉伸

例：

：alt

制作血条

1.普通长形血条：使用Slider（滑杆）组件制作；改变Value值。

2.圆形血条：利用圆形空心图片，使用Image组件中Image Type-->Filled制作；改变Fill Amount值；同时也适用于制作技能冷却。

EventSystem

待补充...

NGUI（Next Gen UI）

NGUI中所有的UI也都是通过组件的形式体现的。NGUI是以插件的形式导入到Unity中的。

完整的NGUI系统，必须拥有UI Root/UI Panel/UI Camera，在创建NGUI内容时，系统会帮我们自动创建出来。

NGUI中的控件要发生事件，必须添加Collider碰撞体组件，Collider区分2D/3D,并且要注意调整碰撞器的大小！！

图集Atlas Maker，字体集Font Maker

UIRoot组件

NGUI的UI内容，必须都挂载在UI Root下面

alt

Scaling Style：缩放比例类型。UI Root的尺寸会随着分辨率的设置改变进行缩放

Flexible：灵活的，根据高度，在设置的最小高度到最大高度之间缩放。
Constrained：约束的，可以指定高度或者宽度，根据指定高度或者指定宽度进行缩放。
Constrained On Mobiles：在手机上进行约束。

UI Panel组件

在NGUI中，UI Panel就像一个容器，只有在UI Panel中的UI对象才能显示，可以有多个UI Panel，每个UI Panel显示自己所包含的UI内容

alt

  • Alpha：透明度
  • Depth：深度，显示优先级，数值越大，显示优先级越高
  • Clipping：裁剪方式
Texture Mask：纹理遮罩
Soft Clip：细致裁剪
Constrain but don't clip：约束但不裁剪

UI Camera组件

NGUI中的事件检测事件响应都是通过UI Camera来实现的

alt

UI Camera(Event System"事件系统")帮助我们处理UI事件，点击，触摸，拖拽等等

  • Event Type：可以理解为可以触发接收UI Camera事件的游戏对象类型
3D World:3D世界中带有3D Collider的游戏对象
3D UI： 带有3D Collider的UI 对象
2D World：2D世界中带有2D Collider的游戏对象
2D UI：带有2D Collider的UI 对象
  • Event go to：事件接收类型；对于NGUI的UI对象而言，默认都为Collider，此设置无实际意义；只有当Event Type为World时，才起作用
  • Progress Events In：事件处理时间:1.Update,2.Late Update;
  • Event Mask：可以接收事件的层
  • Debug：用于调试，显示与鼠标交互的对象信息
  • Command Click：在Mac电脑触控板上用command按键模拟右键操作
  • Allow Multi Touch：是否允许多点触摸
  • Auto Hide Cursor：当游戏控制器或者输入设备被检测到时NGUI是否自动隐藏光标
  • Sticky Tooltip：粘性提示，True：一直显示直到鼠标移开对象；False：鼠标移动立即隐藏
  • Long Press Tooltip：长按住对象，持续Tooltip Delay时间之后，显示提示消息
  • Tooltip Delay：提示消息延迟时间
  • Raycast Range：射线长度，默认-1，表示无限远
  • Event Sources：用来确定哪些事件类型会被处理。被勾选掉的事件就不会被处理。有些平台会强制关闭一些事件。比如使用手柄时会自动关掉鼠标和touch时事件。
  • Thresholds：是指事件误差的范围，比如Mouse Click是指鼠标的按下和抬起两个事件在UI上的偏移误差不能大于10pixels，当大于10pixels时，则认为不是点击事件！ 。以像素为单位。
  • Axes and Keys：是指方向键/摇杆，键盘绑定。这些名字需要和Input Manager里面的一致。

UI Camera的原理: UI Camera就是通过在触摸/鼠标移动的位置的地方发射射线（就是Unity的Raycast），然后获取射线撞击的碰撞体(collider)信息，然后发射消息（通过Unity的SendMessage函数）给该碰撞体关联的GameObject的所有脚本

UICamera中响应的事件函数

使用： 在编辑器中直接输入函数名即可进行调用

  • OnHover (bool isOver)：鼠标悬停或移出时触发。悬停时传入true，移出时传入false。
  • OnPress (bool isDown)：鼠标或触摸按下或松开时触发，按下时传入true，松开时传入false。
  • OnClick()：鼠标或触摸单击（按下并释放）时触发。
  • OnDoubleClick () ：双击（双击时间间隔小于0.25秒）时触发。
  • OnSelect (bool selected)：类似单击，区别在于选中一次之后再选中将不再触发OnSelect事件，除非期间选择了其他控件。 
  • OnDrag (Vector2 delta)：鼠标或触摸按下并移动时触发。delta为传入的位移。
  • OnInput (string text)：只用于输入控件，每次输入完成后触发，text传入本次输入的信息，而非输入控件中的文本信息。 
  • OnTooltip (bool show)：鼠标悬停一段时间或移开时触发，悬停时传入true，移开时传入false。
  • OnScroll (float delta)：鼠标中键滚动时触发，delta为传入的滚动增量。

UICamera中常用的相关变量

  • UICamera.currentTouchID：用于区分鼠标按下的键位，-1为左键，-2为右键，-3为中键
  • UICamera.lastHit：RaycastHit类型。用于获取被触发的物体。
  • UICamera.lastTouchPosition：用于获取鼠标或触摸的位置。

Sprite—精灵

alt

区别：一个使用图集，一个使用单独的精灵；着重介绍Sprite：

  • Atlas：图集，选择事先创建的图集
  • Sprite：精灵，选择图集中的精灵图片
  • Fixed Aspect:方向固定，缩放时按比例缩放
  • Type：图片类型，和UGUI中Image Type一样
  • Simple：简单的；Sliced：切片（需要Sprite进行九宫格分割）；Tiled：平铺；Filled：填充；Advanced：高级的
  • Flip：翻转
  • Gradient：梯度，或者说颜色渐变
  • Color Tint：颜色
  • Pivot：轴点
  • Depth：深度，同一Panel下， 深度值越大，显示优先级越高
  • Size：尺寸大小
  • Anchors：锚点

Label—文本

alt

字体选择：可以选择Unity自带的字体，也可以自己打包一个字体集Font Maker,使用字体集中的字体

  • Font Size：字体大小
  • Text：文本内容
  • Modifier： To uppercase 变大写，To Lowercase 变小写， Custom 自定义
  • OverFlow：溢出方式。Shrink 当溢出之后，缩小内容字体；Clamp 溢出之后，剪切掉；Resize Freely 无限制的调整大小；Resize Height 宽度不变，调整高度，高度大于UI界面也会溢出
  • Alignment：对齐方式
  • Gradient：梯度，或者说颜色渐变
  • Effect：效果。阴影，描边
  • Float Spacing：浮动间距
  • Spacing：间距
  • Max Lines：最大行数
  • BB Code：富文本支持
  • Color Tint：颜色
  • Pivot：轴点
  • Depth：深度，值越大，优先级越高
  • Anchors：锚点

Tooltip—提示信息

通过事件函数: OnTooltip (bool show)：鼠标悬停一段时间或移开时触发，悬停时传入true，移开时传入false。触发提示信息的显示；需要显示提示消息的组件要带有碰撞器组件。

例：

alt

alt

  • UI Camera：事件监听相机
  • Text：提示信息Label
  • Tooltip Root：根，要带有UIRoot组件
  • Background：背景Sprite
  • Appear Speed：出现的速度
  • Scaling Transition：尺寸变化的过渡效果

Texture—纹理

alt

基本和Sprite相同，区别在于，可以渲染所有的格式的图片，不需要使用图集。另外，多了UV Rect矩阵，通过改变UV的值，可实现一张图片切分，如果这一组图相互切换变成一个动画，例如动物跑动，就能实现动图的效果。

Input Field—输入框

alt

  • Label：输入的文本，带有UI Label的组件。
  • Starting Value：起始显示的值。
  • Saved As：内容指定保存的键值。使用PlayerPrefs类进行存取，需要进行事件绑定，例：
 public void ValueChangeTest()
    {
        string value = PlayerPrefs.GetString("InputTest");
        //PlayerPrefs:游戏存档；PlayerPrefs.GetString 获得字符串，如果存在，返回游戏存档文件中key对应的字符串值。 ？？？
        Debug.Log(value);//value为输入框中的内容
    }
  • Active Text Color：文本激活的时候显示的颜色。
  • Inactive Color：未激活的时候显示的颜色。
  • Caret Color：闪烁光标的颜色。
  • Select Color：被选择文字的颜色。
  • Input Type：输入内容格式化；Standard：标准的，Auto Correct：自动更正；Paaeeword：密码
  • Validation：输入内容格式验证，如整数，浮点数，名字，邮箱等。
  • Mobile KeyBoard：移动键盘，移动设备可以输入的内容，如：链接，邮件等
  • Hide Input：输入隐藏 ？
  • On Return Key：当提交数据时，按Enter键时，Default：默认；Submit：提交
  • Character Limit：输入字符个数限制。

Button—按钮

alt

  • Tween Target:tween动画目标
  • Drag Over:拖动；拖拽鼠标 Do Nothing：什么都不做；Press：按下按钮
  • Transition：过渡时间
  • Colors：颜色过渡
  • Sprites：sprite过渡

Check Box（Toggle)选框

alt

  • Group：属于哪个组，用于实现单选（类似于UGUI中的Group）；
  • State of “None”：是否允许none值
  • Starting State：开始状态
  • Sprite：状态转换影响的Sprite
  • Invert Sprite State：反转Sprite状态
  • Transition：转换方式。Smooth：平滑过渡；Instant：瞬间过渡

alt

  • Options：选项集合，每个选项之间使用回车键分隔
  • Position：位置；下拉框出现的位置，自动，上方，下方
  • Selection：选择操作
  • Alignment：对齐方式
  • Open On：打开弹出框方式；直接点击；双击...
  • On Top：显示层级最高
  • Localized：本地化 ？？
  • Keep Value：勾选之后可以选择首选项
  • Initial Value：首选项
  • Atlas：下拉框背景使用的图集
  • Font：下拉框选项使用的字体

On Value Change事件： 绑定UILabel/SetCurrentSelection方法，更换Label（选项）内容

Slider—滑动器

alt

  • Value：滚动条的值
  • Steps：步数，滚动条从1到0所需要的步数，把滚动条成若干节，值按照一节一节的变化
  • Alpha：滚动条透明度
  • Foreground：前景；滚动范围以及滚动块UISprite组件
  • Background：背景；UISprite组件
  • Thumb：滑杆；UISprite组件
  • Direction：滑动方向

Thumb需要添加刚体才可以被拖拽

Scroll Bar—滚动条

alt

  • Value：滚动条的值
  • Size：滚动条滚动块（ForeGround）的尺寸
  • Alpha：滚动条透明度 -Steps：把滚动条成若干节，值按照一节一节的变化
  • Foreground：前景；滚动范围以及滚动块UISprite组件
  • Background：背景；UISprite组件
  • Thumb：滑杆；UISprite组件
  • Direction：滑动方向

Foreground，Thumb需要添加刚体才可以被拖拽

Scroll View—滚动视图

alt

  • Content Origin：内容开始位置
  • Movement：活动方式，水平；垂直；不限制；自定义
  • Drag Effect：拖拽效果，Momentum，动量/惯性；Spring 弹性
  • Scroll Wheel Factor：鼠标滚轮滚动系数
  • Momentum Amount：动量大小
  • Restrict Within Panel：限制内容在Panel之内
  • Constrain On Dray：对拖拽进行限制
  • Cancel Drag if Fits：如果合适则取消拖拽
  • Smooth Drag Start：以平滑拖拽开始
  • IOS Drag Emulation：IOS阻力模拟
  • Scroll Bars：滚动条，水平；垂直
  • Show Condition：滚动条显示条件，总是显示；需要时显示；拖拽时显示

Drag Scroll View-拖拽滚动视图组件

  • Scroll View：要进行拖拽的滚动视图