目录
一、Canvas上
1. Canvas:复制渲染子UI控件
2. ✨Canvas Scaler✨:画布分辨率自适应
3. Graphics Raycaster:射线事件响应
4. ✨Rect Transform✨:UI位置锚点对齐
二、Event System上
5. Event System
6. Standalone Input Module
一、Canvas上
1. Canvas:复制渲染子UI控件
(1)当场景中有多个画布时,可以设置Sort Order来控制图层,越大越上层
(2)3种渲染方式:
① Screen Space - Overlay:覆盖模式,UI始终显示在最上层 [default]
② Screen Space - Camera:摄像机模式,物体可以显示在UI之前。
该模式关联的摄像机最好不要用主摄像机,因为当游戏物体和UI物体用同一个摄像机渲染时,它们的前后关系不好单独控制。
所以建议是专门创建一个摄像机来渲染UI,将其Culling Mask改为只渲染UI,且主摄像机就不要渲染UI层了;此时因为它们都会渲染到背景or天空盒,所以无论怎么修改sort order都会一个画面挡住另一个画面,所以还需要将相机的Clear Flag改为Depth only,只渲染自己层相关的东西。
但是在实际使用中,需要在UI前显示的游戏物体还是少数,所以可以进行单独处理,将需要的物体直接创建在Canvas下,然后将其层级改为UI,通过控制z值来控制其显示在UI的前面还是后面。
③ World Space:3D模式,可以把UI当作3d物体一样处理,一般VR这类项目会使用
2. ✨Canvas Scaler✨:画布分辨率自适应
只负责UI大小自适应,而位置自适应是由Rect Transform做的。
核心公式:Canvas的宽高 * 缩放系数Scale = 屏幕分辨率
3种缩放模式:
(1) Constant Pixel Size (恒定像素模式):无论如何,UI保持相同像素大小
有些UI组件有 Set Native Size
的按钮,用来恢复其原始尺寸。
原始尺寸 = 图片原像素 / (Pixels Per Unit / Reference Pixels Per Unit)
一般不会使用这个模式,除非通过代码 修改缩放系数 来做自适应。
(2) Scale With Screen Size [最常用](缩放模式):UI随屏幕尺寸缩放,有参考分辨率
3种匹配方式:
① Match Width Or Height:以宽高的某种比例作为参考来缩放。
一般,竖屏游戏match=0(width);横屏游戏match=1(height)
② Expand:拓展画布Canvas的方式,可能有黑边
③ Shrink:裁剪画布Canvas的方式,可能会裁剪
(3) Constant Physical Size (恒定物理模式):无论如何,UI保持相同物理大小
3. Graphics Raycaster:射线事件响应
通过射线检测来判断玩家是否点击到了UI元素。
这里下面两个属性能设置在摄像机/3D模式下,UI的点击是否会被游戏物体阻挡的。在默认状态下,blocking objects设为none,也就是说游戏物体碰撞器的存在是不会影响射线检测的。所以可以通过这个属性值的设置来修改游戏物体的2D/3D碰撞器是否影响射线检测。
4. ✨Rect Transform✨:UI位置锚点对齐
继承于Transform组件 [位置、角度、缩放] ,在其基础上添加了pivot 中(轴)心点、anchors 锚点 [基于父组件] 等属性。
-
中心点的作用:
a. 作为旋转的中心;
b.物体宽高变化时影响延伸方向;
c.用其与锚点的距离来记录物体的位置。当锚点为一个点时【位置自适应】(更常见),控件的位置属性是posXYZ,此时是以锚点为原点计算中心点位置;当锚点为一个面时【大小自适应】,位置属性会变为上下左右,记录的是物体边缘与锚点的距离。 -
快捷键:
左键单点的话可以快速设置锚点,而如果一起按着shift和alt点击的话能直接将物体移动到吸附位置。
二、Event System上
5. Event System
6. Standalone Input Module
两者都是用来 监听玩家输入事件并分发给各UI控件的,一般不会对它们作修改,但是不能删掉,如果发现UI点击全都无法响应了可以检查是否被误删了。
运行时可以利用下方的小窗口帮助调式。