简介
- Unity 图形用户界面(unity Graphical User Interface)
- Unity4.6版本之后引入的界面显示系统
- Unity公司自己研发的一套界面显示系统
UGUI和OnGUI、NGUI的区别
- uGUI的Canavas有世界坐标和屏幕坐标
- uGUI的Image可以使用material
- UGUI通过Mask来裁剪,而NGUI通过Panel的Clip
- NGUI的渲染前后顺序是通过Widget的Depth,而UGUI渲染顺序根据Hierarchy的顺序,越下面渲染在顶层。
- UGUI不需要绑定Colliders,UI可以自动拦截事件
- UGUI的Anchor是相对于父对象,没有提供高级选项
- UGUI没有Atlas一说,使用Sprite Packer
- UGUI的Navigation在Scene中能可视化
- UGUI的事件需要实现时间系统的接口,但写起来也算简单
- NGUI还保留着图集,需要进行图集的维护。而UGUI没有图集的概念,可以充分利用资源,避免重复资源
- UGUI出现了锚点的概念,更方便屏幕自适应
- NGUI支持图文混排,UGUI暂未发现支持此功能
- UGUI没有UIWrap来循环scrollview内容
- UGUI暂时没有Tween组件
基础控件
Canavas(画布)
简介
画布,绘制UI元素的载体,所有元素必须在Canavas之下。
属性
- Render Mode(渲染方式)
- Screen Space-Overlay覆盖模式:UI元素将绘制在其他元素之前,且绘制过程独立于场景元素和摄像机设置,画布尺寸由屏幕大小和分辨率决定。
- Pixel Perfect 完美像素:若勾选,则会锐化屏幕显示效果。
- Sort Order 渲染顺序:在多个Canvas中,值越大越渲染到最上层。
- Screen Space-Camera摄像机模式:提供UICamera,Cancas对象被绘制在一个与摄像机固定距离的平面上,且绘制效果受摄像机参数的影响。
- Render Camera 渲染摄像机。
- Plane Distance 平面与摄像机的距离。
- Sorting Layer 排序层:通过Edit--Project Settings--Tags and Layers调整Canvas渲染顺序。
- World Space 世界空间坐标模式:画布渲染于世界空间,与场景中其他3D物体性质相同。
- Screen Space-Overlay覆盖模式:UI元素将绘制在其他元素之前,且绘制过程独立于场景元素和摄像机设置,画布尺寸由屏幕大小和分辨率决定。
- UI Scale Mode(UI缩放模式)
- Constant Pixel Size:像素大小始终不变,即一个100100的图片在任何分辨率下都占用100100的像素。(一般PC上会使用这种方式,因为PC端分辨率差异并不大。)
- Scale With Screen Size:不关心图片的实际像素大小,而只关心Width及Height值,这个值如果是1000,那么100高度的图片在任何分辨率下都只占用屏幕1/10的尺寸(一般移动端会使用这种方式,因为移动端分辨率差异较大)。
- Constant Phy Size:根据物理单位来进行缩放。
Rect Transform(矩形变换)
简介
派出自Transform,在UGUI控件上替代原有变换组件,表示一个可容纳UI元素的矩形。
属性
- Pos:控件轴心点相对于自身锚点的位置。
- Anchor锚点:UI元素的四个顶点与锚点的间距保持不变。锚点总是相对于父级,不能超越父物体范围。
表示点 -> PosX PosY Width Hight
表示拉伸 -> Left Right Top Bottom - Pivot 轴心点:移动,旋转与缩放都围绕轴心点发生变化,0,0为左下顶点,1,1为右上顶点
Text(文本)
- 属性
- Font:字体
- Font Style:样式
- Font Size:大小
- Line Spacing:行间距
- Rich Text:是否使用富文本样式
- Paragraph:段落
- Alignment:对齐方式
- Horizontal/Vertical Overflow:水平/垂直溢出
- Best Fit:大小自适应范围在Min Size与Max Size之间
- Color:颜色
- Material:材质
- 富文本语法
- \粗体\
- \斜体\
-
字号 -
颜色
Image(图片)
- 属性
- Image Type 贴图类型:
- Simple 简单
- Preserve Aspect :保持贴图原始比例
- Set Native Size :将贴图设置为原始比例
- Sliced 切割
- Fill Center :填充中部区域,如果取消中部区域为透明
- Tiled 平铺
- 保持图片原始尺寸,从左下角重复多次填充空白
- Filled 填充
- 可以呈现出从空白到完整填充的过程
Raw Image(原始图片)
- 简介
- Raw Image显示的图片可以是任意类型,而不仅仅是精灵图片。
- 属性
- 使图片的一部分显示在Raw Image组件里。X和Y属性指定图片左下角的位置,W和H属性指定图片右上角的位置。
- 应用
使用Raw Image 制作小地图
- 制作一个小地图
- 将相机放置在地图的正上方,可以设置Culling Mask(遮挡剔除)
- 创建一张Render Texture,将Target Texture属性指向这张纹理
- 创建UI面板,创建Raw Image,将Raw Image下的Texture属性指向小地图纹理即可
- 如果要制作圆形的小地图,可以为Raw Image添加Image为父物体,为Image添加Mask(遮罩),然后为Image选择图片就可以实现
Button(按钮)
- 属性
- Interactable 是否启用交互
- Transition 过渡方式
- Color Tint 颜色过渡
- Normal 正常 Highlighted 高亮 Pressed 点击
- Disabled 禁用 Multiplier 颜色倍数
- Fade Duration 变化时间
- Sprite Swap 精灵切换过渡
- Animation 动画过渡
- Navigation 导航
- Horizontal 水平导航
- Vertical 垂直导航
- Automatic 自动导航
- Explicit 显示导航
- Visualize 可视化-显示导航路径
- 制作按钮
- 使用Image或Text制作Button按钮
Toggle(开关)
- 属性
- Is On 复选框的选中状态
- Toggle Transition 状态改变时,是否启用过渡效果
- Graphic 切换的背景图片
- Group 单选组
Slider(滑动条)
- 属性
- Fill Rect 填充矩形区域
- Handle Rect 手柄矩形区域
- Direction 手柄方向
- Min/Max Value 最小/最大值
- Whole Numbers 整数数值
- Value 数值
Scrollbar(滚动条)
- 属性
- Size 手柄大小
- Number of Steps 从开始滑动到末尾的步骤
Dropdown(下拉框)
- 属性
- Template 模板
- Caption Text 标题文本
- Caption Image 标题图片
- Item Text 下拉列表中的文本
- Item Image 下拉列表中的图片
- Value 下拉列表选项对应的值
- Options 下拉列表中的文字和图片
InputField(输入框)
- 属性
- Character Limit 字符数量限制
- Content Type 内容类型
- Standard 标准 Autocorrected 自动验证
- Integer Number 数字 Decimal Number 小数
- Alphanumeric 字母数字 Name 姓名
- Email Address 邮件地址 Password 密码
- Pin 仅输入整数,用*隐藏字符
- Custom 自定义
Plane(面板)
- 简介
就是一张透明度为100的ImageScroll View(滑动视图)
- 属性
- ViewPort Content 用来存放内容
- ScrollBar Horizontal 水平的滚轮
- ScrollBar Vertical 垂直的滚轮
- Visiblity 层级显示
- Spacing 间隔