unity学习51:所有UI的父物体:canvas画布

目录

1 下载资源

1.1 在window / Asset store下下载一套免费的UI资源

1.2 下载,导入import

1.3 导入后在 project / Asset下面可以看到

2 画布canvas,UI的父物体

2.1 创建canvas

2.1.1 画布的下面是 event system是UI相关的事件系统

2.2  canvas基础

2.2.1 切换到2D

2.2.2  使用矩形工具操作UI

2.3 canvas 的白色线框是什么?

2.3.1 canvas 的白色线框,就是game窗口的边界

​编辑

2.3.2 下面的UI实验

2.3.3 理解摄像机camera 前景框,就是UI的边界

2.4 创建一个测试的UI

3  canvas的属性

3.1 raycaster

3.2  sacler 缩放

3.2.1 UI的缩放

3.2.1 默认模式: constant pixel size 恒定像素大小

3.2.2 scale with screen size 随着屏幕大小缩放

3.2.3 constant physicl size  恒定物理大小

4 canvas / render mode 渲染模式

4.1 screen space -overlay   覆盖

4.2 screen space -camera  

4.2.1 现在这种情况下,canvas永远面向摄像机

4.2.2 物体遮挡UI

4.2.3 UI完全遮挡了物体

4.3 world space

5  sort order


1 下载资源

1.1 在window / Asset store下下载一套免费的UI资源

1.2 下载,导入import

1.3 导入后在 project / Asset下面可以看到

2 画布canvas,UI的父物体

  • UI最基础,最底层的就是画布 canvas
  • 可以认为是一张,画画基础的白纸
  • 也可以认为是最底层的容器吧
  • UI的所有内容都必须在canvas上
  • UI必须是其他UI内容的父物体

2.1 创建canvas

  • UI/ canvas

2.1.1 画布的下面是 event system是UI相关的事件系统

  • 创建CANVAS的同时
  • 会自动创建一个event system

2.2  canvas基础

  • canvas 就是一个白色的虚线框

2.2.1 切换到2D

2.2.2  使用矩形工具操作UI

2.3 canvas 的白色线框是什么?

2.3.1 canvas 的白色线框,就是game窗口的边界

  • canvas 的白色线框,就是game窗口的边界
  • game窗口不要黑色填充的那部分的边界

    2.3.2 下面的UI实验

    • 当 game 游戏窗口时 free aspect的情况下
    • 随便缩放game窗口,UI线框会跟着变化,变形

    • 当 game 游戏窗口时 free aspect的情况下
    • 随便缩放game窗口,UI线框会跟着变化,变大变小,而且可能变形

    • 当 game 游戏窗口时 16/9 aspect的情况下
    • 随便缩放game窗口,UI线框会跟着变化,变大变小,但是一直保持16/9 不变形

    2.3.3 总结:UI,完全跟着游戏game窗口的分辨率走,决定最终显示效果

    • game窗口的比例,会决定UI的比例

    2.3.4 理解摄像机camera 前景框,就是UI的边界

    • 摄像机camera,有一个大的锥形盒子
    • 摄像机camera 前景框,就是UI的边界
    • 后面都是景深内容
    • camera 前景框
    • 在UI的渲染模式:屏幕空间--摄像机的选择下,也就是UI

    2.4 创建一个测试的UI

    • 创建 canvas
    • 在canvas下,创建子物体 UI/image
    • 给image选择一个图片

    3  canvas的属性

    3.1 raycaster

    • 就是之前的 ray 检测。判断人在UI点击位置的

    3.2  sacler 缩放

    3.2.1 UI的缩放

    • UI的缩放是一个很重要的问题
    • 因为unity游戏世界 scene里的其他gameObject,都没有这个问题,只有UI有这个问题
    • 因为UI要求无论什么分辨率下,都显示相同的效果
    • 其他gameObject 都是随着分辨率,缩放的

    3.2.2 默认模式: constant pixel size 恒定像素大小

    • constant pixel size 恒定的像素
    • 默认的缩放模式:constant pixel size 按像素大小缩放
    • 我理解就是大分辨率下,恒定的像素就看起来小了

    下面2个图分别是这个模式下

    • 1920;1080
    • 16:9
    • 两种结果下不同的分辨率

    3.2.3 scale with screen size 随着屏幕大小缩放

    • scale with screen size  随着屏幕大小缩放
    • 保持某一种屏幕分辨率,无论屏幕怎么缩放,都坚持为这种分辨下的效果

    下面2个图分别是这个模式下

    • 1920;1080
    • 16:9
    • 两种结果下不同的分辨率
    • 图片固定为1920:1080了,game窗口变成16:9,UI效果完全不变

    3.2.4 constant physicl size  恒定物理大小

    • constant physicl size

    4 canvas / render mode 渲染模式

    • screen space -overlay      // ui 的内容,永远覆盖在摄像机内容的上面
    • screen space -camera    // UI也用camera来渲染,总是在camera的正面,且可能场景里更近的东西遮挡UI
    • world space  //也是camera来渲染。且UI 类gameObject 可以旋转,斜着,等等

    4.1 screen space -overlay   覆盖

    • ui 的内容,永远覆盖在摄像机内容的上面
    • 最常用模式
    • 不需要专门的摄像机
    • 内容直接覆盖在其他摄像机内容之上!!!就是这么霸道

    4.2 screen space -camera  

      // UI也用camera来渲染,总是在camera的正面,且可能场景里更近的东西遮挡UI

    • 选择这个模式
    • 需要给 关联一个camera

    4.2.1 现在这种情况下,canvas永远面向摄像机

    • 现在这种情况下,canvas永远面向摄像机
    • 否则UI不能被渲染

    4.2.2 物体遮挡UI

    4.2.3 UI完全遮挡了物体

    4.3 world space

    • 也是camera来渲染。
    • 也需要关联一个摄像机
    • 且UI 类gameObject 可以旋转,斜着,等等
    • 选择这个模式后,上面的旋转属性等不再灰色,可以编辑

    可以实现这种斜着的效果

    5  sort order

    • 如果有多个canvas
    • 这个order决定显示,覆盖的优先级