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决定显示，覆盖的优先级