本期我们继续为大家进行Unity UI简介（第一部分）的后续教程
本篇内容
6.使用Canvas Scaler（下）
文章末尾可免费获取教程源代码
本篇Unity UI简介（第一部分）篇幅较长，分为十篇，本篇为第三篇。
6.使用Canvas Scaler（下）
画布缩放器具有三种缩放模式：
Constant Pixel Size：使UI元素保留相同的像素大小，而不管屏幕大小如何。这是“Canvas”的默认值。
Scale With Screen Size：根据参考分辨率调整UI元素的尺寸和位置。如果当前分辨率大于参考分辨率，则Canvas将维持参考分辨率，同时按比例放大元素以匹配目标分辨率。
Constant Physical Size：UI元素的位置以物理单位（例如毫米或点）指定。这需要正确报告屏幕DPI。
将组件模式更改为“Scale With Screen Size”，并将其“Reference Resolution”设置为（X：1136，Y：640）。另外，将“Match Width”或“Height”一直滑动到最右边，或者在输入字段中简单输入1。
进行这些更改后，即使在一个小的游戏视图窗口中，你也将看到完整的背景图像。
更改游戏视图分辨率，以查看游戏在不同分辨率下的外观，例如，在iPhone Wide 480×320上。你会发现它看起来仍然不错！
注意：如果看不到任何iPhone选项，则很可能是在为其他平台构建。从菜单栏中，选择File‣Build Settings。在平台设置下方的构建设置对话框中，确保选择iOS。
Unity将重新处理你的所有资产，这可能需要一段时间。最后，你应该可以访问各种iOS屏幕尺寸。
现在切换到“Scene ”视图，当你调整“Scene”视图的大小时，你会看到“Canvas”的大小没有改变。屏幕的边缘整齐地裁剪，而中央部分完全可见。这是将“Match Width”或“Height”设置为1的结果，会非常适合你的目标分辨率。
这些设计是旧的！在横向模式下，现代手机的屏幕要宽得多。切换到iPhoneX横向模式，我们遇到了一个全新的问题。
如果将“Match Width ”或“Height”值重新更改为零，则它适用于iPhone 5和iPhoneX，但在iPhone 4上显示为带顶框。
幸运的是，还有其他解决方案。虽然Canvas Scaler具有其他两种缩放模式，Expand和Shrink，但还有一个有用的组件，我们可以专门用于背景图像。
将Canvas Scaler重新设置为Match Width或Height，其值为1，然后将Game视图设置为iPhoneX。它应该再次喜欢上面的图像。
现在，选择“Background”并添加一个“Aspect Ratio Fitter”组件。它将自动将“Aspect Ratio”值设置为图像的Rect变换的当前比率。将Aspect Mode切换到“Envelope Parent.”。图像将自动调整大小以再次充满整个屏幕。
这是将会有很多工作，而且我们仅仅添加了背景图片，但是，以正确的方式设置Canvas Scaler和背景将使一切变得更容易。经过几次此操作后，你会发现设置如此快速简便，以至于你几乎没有时间眨眼。
那按钮呢？如果它们太靠近屏幕的左边缘或右边缘，会发生什么？
幸运的是，Unity具有一项功能，可以帮助你避开这个菜鸟错误。你将很快了解。
本期的教程就到这里结束了，我们下期会继续Unity UI简介（第一部分）的后续教程
Unity架构师之路
Unity教程 | 墙外的Unity | 免费资源 | 游戏开发日记
添加下方微信获取教程源代码