[学习笔记]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:材质
  • 富文本语法

    • <b>粗体</b>
    • <i>斜体</i>
    • <size=14>字号</size>
    • <color=green>颜色</color>

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 间隔
本文作者:六月丶

本文链接:https://hctra.cn/index.php/archives/544/

版权声明:如无特别声明,本文即为六月'blog原创,仅代表个人观点,如要转载请务必注明文章出处。
最后修改:2020 年 01 月 30 日 04 : 00 PM
如果觉得我的文章对你有用,请随意赞赏

发表评论