简介

  • 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显示的图片可以是任意类型,而不仅仅是精灵图片。
  • 属性
    Snipaste_2020-01-30_12-58-43.png
  • 使图片的一部分显示在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的Image

    Scroll View(滑动视图)

  • 属性
  • ViewPort Content 用来存放内容
  • ScrollBar Horizontal 水平的滚轮
  • ScrollBar Vertical 垂直的滚轮
  • Visiblity 层级显示
  • Spacing 间隔
最后修改:2020 年 01 月 30 日
如果觉得我的文章对你有用,请随意赞赏