本期我们继续为大家进行Unity UI简介（第一部分）的后续教程
本篇内容
4.添加你的第一个UI元素
5.设置菜单背景图像
6.使用Canvas Scaler（上）
文章末尾可免费获取教程源代码
本篇Unity UI简介（第一部分）篇幅较长，分为十篇，本篇为第二篇。
4.添加你的第一个UI元素
你要制作的第一个元素是菜单场景的背景图像。
在顶部栏中，选择GameObject‣UI‣Image，会将名为Image的对象添加到场景。你应该在Hierarchy 中以Canvas的子身份看到它。所有元素必须放置在画布上。如果你没有，那么Unity会自动为你创建一个。
选择图像并将其位置设置为（X：0，Y：0）。
你刚刚发现了Rect Transform：
注意：Rect Transform是与Transform等效的UI。它可以在Canvas中定位，旋转和缩放UI元素。在本教程中，你将经常使用它。
你稍后将设置正确的位置和大小。现在，有三件事要注意。在“
Hierarchy”中，你将在场景中看到三个新对象：
·Image
·Canvas
·EventSystem
所述图像是一个非交互控制其显示子画面，以定制许多选项。
例如，你可以为图像添加颜色，为其分配材质，控制显示多少图像，甚至可以使用顺时针擦拭在屏幕上设置动画效果。
该画布是你所有的UI元素的根对象。请记住，当你添加第一个UI元素时，Unity会为你创建一个。它具有多个属性，可让你控制UI的呈现方式。
该EventSystem流程和路线输入事件到场景中的对象。它还负责管理射线广播。与画布一样，UI需要Event System，因此Unity会自动添加它。
5.设置菜单背景图像
首先要做的是重命名你的Image。在 Hierarchy中，选择图像并将其重命名为Background
接下来，在项目窗口中打开RW‣UI‣菜单，然后找到menu_background图像。将其拖到Inspector中“ Background”中“ Image ”组件的“Source Image”字段中：
现在你有了背景图像，而不是默认的白色图像。但是，这不是很好，因为太小，而且纵横比不正确。
要解决此问题，需要在Inspector中找到“Set Native Size”按钮，然后单击它以将大小设置为1136 x 640。
现在看起来像一个合适的背景了。
哦哦 还有一个问题。
缩小“Scene view”视图，你将看到“Canvas”的白色矩形仅覆盖图像的一部分。如果切换到“Game”视图，则只会看到背景图像的一部分，就好像相机距离图像太近以至于无法完全捕获它一样。
注意：原始游戏设计是针对具有3.5英寸和4英寸显示屏的iPhone。这就是为什么所有游戏美术都支持1136 x 640和960 x 640分辨率的原因。你很快会看到UI如何适应不同的游戏分辨率。
你将使用Canvas Scaler解决此问题。
6.使用Canvas Scaler（上）
你将使用Canvas Scaler来调整背景图像显示。
首先，你需要知道显示出来的是不是错误的结果。从Unity的角度来看，你已将“Game”视图（或视口）设置为很小的尺寸，以使其仅显示适合“Game”视图的图像部分。
如果要在具有足够大分辨率的设备上运行游戏或拉伸“Game”视图以适合整个图像，则会看到整个背景图像。
尽管Unity的设置在大多数情况下都是有意义的，但是有时候你需要采取不同的行为，例如，当你有一台不适合目标设备分辨率的小型显示器时。
此外，许多游戏仅支持一种分辨率。设计人员使用该参考分辨率来确定尺寸，位置和其他数据。当你基于单个参考分辨率开发游戏时，请确保输入设计者的规格而不进行额外的计算，以便用户可以按预期看到所有内容。
如果你曾经忽略过设计师的指示，那么你就会付出代价。用户体验和不同的分辨率很重要，但是也要使你的设计满意。
Canvas Scaler可以解救这个问题，默认情况下，每个画布都包含Canvas Scaler
在Hierarchy中选择“ Canvas ”，然后在Inspector中，你应该看到“Canvas Scaler ”组件
本期的教程就到这里结束了，我们下期会继续Unity UI简介（第一部分）的后续教程
Unity架构师之路
Unity教程 | 墙外的Unity | 免费资源 | 游戏开发日记
长按添加微信获取教程源代码