[学习笔记]unity3d-UGUI

简介

• Unity 图形用户界面(unity Graphical User Interface)
• Unity4.6版本之后引入的界面显示系统
• Unity公司自己研发的一套界面显示系统

UGUI和OnGUI、NGUI的区别

1. uGUI的Canavas有世界坐标和屏幕坐标
2. uGUI的Image可以使用material
3. UGUI通过Mask来裁剪，而NGUI通过Panel的Clip
4. NGUI的渲染前后顺序是通过Widget的Depth，而UGUI渲染顺序根据Hierarchy的顺序，越下面渲染在顶层。
5. UGUI不需要绑定Colliders，UI可以自动拦截事件
6. UGUI的Anchor是相对于父对象，没有提供高级选项
7. UGUI没有Atlas一说，使用Sprite Packer
8. UGUI的Navigation在Scene中能可视化
9. UGUI的事件需要实现时间系统的接口，但写起来也算简单
10. NGUI还保留着图集，需要进行图集的维护。而UGUI没有图集的概念，可以充分利用资源，避免重复资源
11. UGUI出现了锚点的概念，更方便屏幕自适应
12. NGUI支持图文混排，UGUI暂未发现支持此功能
13. UGUI没有UIWrap来循环scrollview内容
14. 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物体性质相同。
• 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 制作小地图

1. 制作一个小地图
2. 将相机放置在地图的正上方，可以设置Culling Mask(遮挡剔除)
3. 创建一张Render Texture,将Target Texture属性指向这张纹理
4. 创建UI面板，创建Raw Image，将Raw Image下的Texture属性指向小地图纹理即可
5. 如果要制作圆形的小地图，可以为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 间隔