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