第四章 Unity基础之UGUI

• 目录

  一、 Canvas画布

  1. 组件

  Canvas

  画布缩放器(Canvas Scaler)

  Graphic Raycaster

  二、 输入框

  三、 Text

  组件

  四、 Image

  五、 Button

  六、 Toggle

  七、 Slider

  八、 关卡滚动

  九、 小知识点

  ---

  一、 Canvas画布

  • 1. 组件

    • Canvas

      • 渲染模式的设置
        • Screen Space - Overlay
          • 在此模式下，画布会进行缩放来适应屏幕，然后直接渲染而不参考场景或摄像机（即使场景中根本没有摄像机，也会渲染 UI）。如果更改屏幕的大小或分辨率，则 UI 将自动重新缩放进行适应。UI 将绘制在所有其他图形（例如摄像机视图）上。
        • Screen Space - Camera
          • 在此模式下，画布的渲染效果就好像是在摄像机前面一定距离的平面对象上绘制的效果。UI 在屏幕上的大小不随距离而变化，因为 UI 始终会重新缩放来准确适应摄像机视锥体。如果更改屏幕的大小或分辨率或更改摄像机视锥体，则 UI 将自动重新缩放进行适应。场景中比 UI 平面更靠近摄像机的所有 3D 对象都将在 UI 前面渲染，而平面后的对象将被遮挡。
        • World Space
          • 在此渲染模式下，画布的行为与场景中的所有其他对象相同。画布大小可用矩形变换进行手动设置，而 UI 元素将基于 3D 位置在场景中的其他对象前面或后面渲染。此模式对于要成为世界一部分的 UI 非常有用。这种界面也称为“叙事界面”。
          • 此模式将 UI 视为场景中的平面对象进行渲染。但是，与 Screen Space - Camera 模式不同，该平面不需要面对摄像机，可以根据喜好任意定向。画布的大小可以使用矩形变换来设置，但画布在屏幕上的大小将取决于摄像机的视角和距离。其他场景对象可以位于画布后面、穿透画布或位于画布前面。

    • 画布缩放器(Canvas Scaler)

      • 调整UI的规模模式
        • 不变的像素规模
          • 使用 Constant Pixel Size 模式时，可在屏幕上按像素指定 UI 元素的位置和大小。这也是画布在未附加任何画布缩放器时的默认功能。但是，借助画布缩放器中的“Scale Factor”设置，可以向画布中的所有 UI 元素应用常量缩放。
        • 跟着屏幕改变
          • 使用 Scale With Screen Size 模式时，可以根据指定参考分辨率的像素来指定位置和大小。如果当前屏幕分辨率大于参考分辨率，则画布会保持只具有参考分辨率的分辨率，但是会放大以便适应屏幕。如果当前屏幕分辨率小于参考分辨率，则画布会相应缩小以适应屏幕。
        • 不变的物理规模
          • 使用 Constant Physical Size 模式时，可按物理单位（如毫米、点或派卡）指定 UI 元素的位置和大小。此模式要求设备正确报告其屏幕 DPI。对于不报告 DPI 的设备，可以指定回退 DPI。
      • 缩放因子
        • 对画布内容进行缩放或扩大
      • 参考像素

    • Graphic Raycaster

      • 用于检测投向Canvas的射线。
        • Ignore Reversed Graphics：
          • 忽略颠倒的图形的射线检测，即旋转180°后的图片不会与射线发生交互（检测）
        • Blocked Objects：
          • 会阻挡图形射线的对象类型（2D或(/和)3D对象，需要有collider组件）。
        • Blocked Mask：
          • 会阻挡图形射线的Layer。

• 二、 输入框

  • inputField
    • 类型可以修改

• 三、 Text

  • 组件

    • Canvas Renderer
      • 在画布上渲染出来
    • Text
      • Font字体
      • Rich Text
        • 可以用HTTP形式让字体丰富
    • TextMeshProUGUI
      • 使用自己的字体方法
        • 在字体创建Font Asset即可引用
    • Rect Transform
      • 锚点位置
        • 可以通过Alt来控制4个锚点在四周
        • UI的游戏对象与锚点距离是固定的
        • 如果有父物体，就是相对于父物体的锚点，而不是画布锚点
      • Pivot
        • 自身的中心点，用来比对与锚点距离
          • 例如将中心点放在右上角

• 四、 Image

  • 组件
    • Image
      • 图片模式
        • 简单，啥也没有，随着图片拉伸会模糊
        • Sliced切片，边框不变，中间拉伸
          • 将图片设置为像素Sprite(2D and UI)
          • 用Sprite Editor即可画出边框
        • Tiled平铺，放大会用多张原图片铺起来
        • Filled填充，可以将图片慢慢用透明填充，类似技能冷却

• 五、 Button

  • 组件
    • Image
    • Button
      • Interactable
        • 是否有交互
      • Transition
        • 过度按钮，控制过度形式
          • 例如说点击的时候有动画或者图片颜色改变
      • On Click()
        • 需要脚本写方法
        • 然后拖进去，引用尽可
  • 子物体
    • Text
  • 图片没变化就用Button

• 六、 Toggle

  • 子物体
    • Background
      • 实际就是个image
      • Checkmark
        • 点击出现与取消图片
        • 实际就是个image
    • Label
      • 实际就是个Text
  • 可以设置Toggle Group
    • 就可以点击一个，另一个就会取消
    • 将一组Toggle放在一个空物体上
      • 然后将父物体添加组件Toggle Group
      • 将子物体的Toggle组件的Group设置为父物体就行了
  • 改变Graphic就可以通过图片点击选中
  • 在OnValueChange里边可以添加其他物体的更改
    • 点击激活背包页面
    • 取消不激活背包页面
  • 图片有变化就用Toggle

• 七、 Slider

  • 滑动块
  • 子物体
    • Background
    • Fill Area
      • Fill
        • 实际就是个image
        • 填充的图片
    • Handle Slide Area
      • Handle
        • 实际就是个image
  • 声音
    • 滑动条Slider

• 八、 关卡滚动

  • 把光卡全部添加到GridLayoutGroup
    • 也可以在Layout里选择水平层次或者竖直层次
  • 添加一个图片作为滚动区域
    • 然后添加一个ScrollRect组件就可以滚动了
    • 这样才能才选中区域内进行滚动
    • 然后将Layout作为content就可以滑动了
  • 其他就添加Mask遮罩挡住后边的关卡
  • 添加滑动动画效果
    • 在Update里边添加方法，用Lerp函数慢慢移动过去
    • scroll.horizontalNormalizedPosition = Mathf.Lerp(scroll.horizontalNormalizedPosition, targetPosition, Time.deltaTime*speed);
    • if( Mathf.Abs(scroll.horizontalNormalizedPosition - targetPosition)<0.001f)
      • isMoving = false;
      • scroll.horizontalNormalizedPosition = targetPosition;

• 九、 小知识点

  • 组件Shadow可以添加阴影
  • 组件Outline可以添加边框
  • 调整渲染顺序可以调整层级
  • 背包里的各个道具有网格间隔
    • 通过添加GridLayoutGroup组件来形成图片格
    • 需要有间隔的话，将图片外边添加空物体，调整空物体的规格，就可以有间隔
    • 只显示边框可以吧里边的物体图片取消激活
  • 预制体断开连接
    • 右键Prefab即可断开连接

      

      思维导图