Unity开启篇（十五） —— Unity UI简介（二）

作者: 刀客传奇 | 来源:发表于2019-01-27 18:04 被阅读55次

版本记录

版本号	时间
V1.0	2019.01.27 星期日

前言

Unity是由Unity Technologies开发的一个让玩家轻松创建诸如三维视频游戏、建筑可视化、实时三维动画等类型互动内容的多平台的综合型游戏开发工具，是一个全面整合的专业游戏引擎。Unity类似于Director,Blender game engine, Virtools 或 Torque Game Builder等利用交互的图型化开发环境为首要方式的软件。其编辑器运行在Windows 和Mac OS X下，可发布游戏至Windows、Mac、Wii、iPhone、WebGL（需要HTML5）、Windows phone 8和Android平台。也可以利用Unity web player插件发布网页游戏，支持Mac和Windows的网页浏览。它的网页播放器也被Mac 所支持。网页游戏坦克英雄和手机游戏王者荣耀都是基于它的开发。
下面我们就一起开启Unity之旅。感兴趣的看下面几篇文章。
1. Unity开启篇（一） —— Unity界面及创建第一个简单的游戏（一）
2. Unity开启篇（二） —— Unity界面及创建第一个简单的游戏（二）
3. Unity开启篇（三） —— 一款简单射击游戏示例（一）
4. Unity开启篇（四） —— 一款简单射击游戏示例（二）
5. Unity开启篇（五） —— 一款简单射击游戏示例（三）
6. Unity开启篇（六） —— Unity动画简介（一）
7. Unity开启篇（七） —— Unity动画简介（二）
8. Unity开启篇（八） —— Unity声音简介（一）
9. Unity开启篇（九） —— Unity声音简介（二）
10. Unity开启篇（十） —— Unity粒子系统简介（一）
11. Unity开启篇（十一） —— Unity粒子系统简介（二）
12. Unity开启篇（十二） —— Unity脚本简介（一）
13. Unity开启篇（十三） —— Unity脚本简介（二）
14. Unity开启篇（十四） —— Unity UI简介（一）

Rect Transform, Anchors, Pivot and You

如果您之前使用过Unity，那么您可能已经接触过Transform组件。

如果没有，那也没关系。它只是一个可以定位，旋转和缩放场景中对象的工具。这是它的样子：

在层次结构视图中选择任何类型的非UI GameObject时，您将看到Transform组件。但是，如果选择任何UI元素，例如Img_Header，您将看到另一个名为Rect Transform的组件。

如您所见，Transform和Rect Transform看起来有点不同。此外，Rect Transform可以根据其Anchor设置更改其外观。例如，它看起来像这样：

这里，你有Left, Top, Right and Bottom，而不是Pos X，Pos Y，Width和Height。

您是否想知道如何显着改变Rect Transform外观的Anchors设置？您将在下一部分找到您要寻找的答案。

1. Anchors

设置锚点是一种简单，优雅且功能强大的方法，可以控制UI元素相对于父元素的位置和大小。当你必须调整父元素的大小时，它会特别方便。

设置锚点时，可以在父级中指定多个位置，通常在父级UI元素Rect的每个角上指定一个位置。调整父级的大小时，UI元素将尝试与锚点保持一致的距离，从而强制它与其父级一起移动或调整大小。

要查看不同的Anchor Presets，只需在层次结构中选择Img_Header，然后单击Rect Transform组件中Anchors字段正上方的矩形。

单击后，您将看到各种锚点预设：这些是锚点的最常见设置。但是，您不限于此，您可以自定义其中任何一个。您还可以为UI元素选择不同的水平和垂直行为。

一旦你使用它，这一切都会更有意义。如果您查看下一个禁用了背景图像的图像，您将能够更好地看到画布大小的变化。

如您所见，锚点设置控制UI元素如何适应屏幕大小的变化。

锚由4个三角形手柄代表，看起来像一朵花。以下是将锚点设置为top-center预设的样子：

我确定你想尝试一些不同的设置来了解它们是如何工作的，但在你确定至少要阅读下一节之前。它会帮助您更好地理解锚点，以便您可以从实验中获得更多。

2. Custom Anchors

您可以手动将锚点移动到自定义位置，因为预设完全是可选的 - 它们只是为了您的方便。

注意：您可能会发现自己处于转换Gizmo覆盖锚图标的情况，因此无法选择锚点。

在这种情况下，只需通过选择锚点预设（例如，屏幕的左侧）来选择锚点图标。锚图标将移至屏幕的该部分，允许您随意选择和移动它。

在调整画布大小时，查看图像如何向右移动？它相对于Canvas的右边缘仅移动一点，这是因为这些锚点被设置为Canvas的25％宽度。

3. Splitting Anchors

您可以拆分锚点以使它们水平，垂直或两者都拉伸UI元素。

注意：在拖动Canvas边缘时，实际上并没有调整Canvas的大小。实际上，您不能以这种方式调整Canvas的大小。
当您尝试调整光标大小时，请在光标旁边查找“预览”一词。使用此技术进行实验，了解UI元素如何适应不同的屏幕尺寸。

Rect Transform Depends on the Current Anchors Setting

根据锚点设置，Rect Transform提供了控制UI元素大小和位置的不同方法。

如果您将锚点设置为单个点而不拉伸，您将看到Pos X，Pos Y，Width和Height属性。

但是，如果您以伸展UI元素的方式设置锚点，您将获得Left和Right而不是Pos X和Width（如果您将其设置为水平拉伸）和Top和Bottom而不是Pos Y和Height（如果您将其设置为垂直拉伸）。

在此屏幕截图中，Img_Header的Anchors设置为中间拉伸(middle-stretch)。这意味着图像垂直位于画布的中间并水平拉伸。

1. Pivot

在Rect Transform组件中有一个要讨论的最终属性，这是Pivot。

枢轴(pivot)是围绕其进行所有变换的点。换句话说，如果更改UI元素位置，还可以更改轴心点位置。如果您旋转UI元素，它将围绕该点旋转。

枢轴设置在标准化坐标中。这意味着它的高度和宽度从0变为1，其中（0,0）是左下角，（1,1）是右上角。

注意：您还可以在UI元素边界外设置Pivot。在这种情况下，Pivot将在（0,0） - （1,1）范围之外。这可能很有用。例如，您可能希望围绕场景中的某个点旋转对象。要更改pivot，您必须确保将数据Pivot/Center按钮切换为Pivot，如下所示：

您可以在Inspector中的Rect Transform组件中更改pivot，也可以使用Rect Tool。

看一下以下两个图像，它们演示了具有相同Pos X和Pos Y值的UI元素，但每个图像都显示了场景中的不同位置。

第一个图像显示枢轴的默认值（0.5,0.5），它是UI元素的中心。 Position设置为（0,0），锚点设置为top-left。

注意：了解UI元素的位置是相对于锚点设置的，这一点很重要。这就是为什么（0,0）位置意味着与锚点的距离，锚点设置在画布的左上角。

现在看一下第二张图片。如您所见，位置在（0,0）处保持不变，但由于Pivot设置为左下角（0,0），您可以看到图像的底角而不是中心现在位于画布的左上角。

使用静止图像显示枢轴如何影响旋转和大小更难，所以这里有几个动画：

观察图像如何围绕由蓝色圆圈指示的枢轴点旋转，这是一个可以自由移动的元素。

注意：按住Option / ALT键的同时缩放以围绕轴心点缩放。

如您所见，pivot也会影响UI元素的大小调整方式。

注意：要理解的另一个重要事项是，当您更改UI元素的大小时，不会更改其scale。相反，您可以使用“宽度”和“高度”或“上”，“右”，“左”和“下”填充来更改其大小。

请注意，尺寸和比例(size and scale)之间存在一些差异。例如，size不能是负数，但scale可以是。此外，使用负scale值将翻转UI元素。在大多数情况下，您只应更改UI元素的size。

Placing a Header Image

唷！这是专门用于Rect Transform，Anchors和Pivot的几个词。相信我，你会感激你花时间完成练习，因为理解它们对你游戏中令人敬畏的用户界面至关重要。

接下来，您将专注于实际创建菜单场景。其余部分将在一眨眼之间过去。

所有这些操作完全耗尽了可怜的小img_header。现在是时候把它放在应该的位置。

在继续之前，如果禁用Img_Background以查看Canvas边框，请重新启用它。

然后在层次结构中选择Img_Header并在Inspector中设置其属性，如下所示：

1）单击Set Native Size以重置大小，因为您在使用pivot时可能会弄乱它。
2）将Anchors设置为top-center。
3）将Pos X设置为0，将Pos Y设置为-100。

你应该在Scene视图中看到类似的东西：

就这些，现在，单独保留标题图像。它也有点累。

Adding the Start Button

现在，你的游戏有一个带有label亮背景，是时候添加一些按钮了。

从顶部栏中选择GameObject \ UI \ Button。这将向场景中添加一个Button对象，您应该在Hierarchy中看到它。如果在层次结构中展开它，您将看到该按钮包含一个Text子项 - 稍后您将了解这些内容。

查看Inspector中的按钮，您将看到它具有熟悉的Image组件，与您用于添加背景和标题标签的组件相同。

此外，还有一个Button组件。换句话说，按钮只是具有子Text元素和附加按钮脚本的图像。

注意：Text元素是可选的，因此如果您有一个按钮图像，文本被直接绘制到图像中，您可以删除它。在本教程中，您将这样做几次。

1. Positioning the Button

现在一切都是关于定位和调整按钮的大小。跟着这些步骤：

1）在Hierarchy视图中选择Button，并将其重命名为Btn_Start。
2）将其锚点设置为bottom-stretch，因为如果屏幕尺寸发生变化，您希望它水平拉伸。
3）将Left和Right都设置为350。
4）将Height设置为80。
5）将Pos Y设置为300。

然后选择嵌套的Text元素并将其Text设置为Start Game。将字体大小更改为32以使按钮的文本更大。

这是您应该在Scene view中看到的内容：

嗯......你现在肯定有一个按钮，这是肯定的，而且它需要美工下。要使按钮看起来很好，您将设置图像作为其背景，然后使用更高级的字体。

9-Slice Scaling

您为Button设置图像的方式与为Image设置图像的方式相同。毕竟，他们使用完全相同的组件。然而，与很少缩放的图像不同，特别是非均匀的按钮通常具有完全不同的尺寸。

当然，您可以为游戏中的每个按钮大小创建背景图像，但为什么要浪费所有空间？您将使用一种称为9切片缩放(9-Slice scaling)的技术，它允许您提供一个缩放以适合所有大小的小图像。

这种技术的工作原理是为九个区域中的每个区域创建不同的图像，所有区域的比例都不同。

这可确保图像在任何比例下都看起来很好。

Preparing Button Images

在使用切片图像之前，您需要设置这9个区域。为此，请在“项目”窗口中打开Menu文件夹，然后选择btn_9slice_normal图像。

在Inspector的Import Settings中，将Texture Type设置为Sprite (2D and UI)并应用更改。接下来，单击Sprite Editor按钮以打开Sprite Editor视图。

在Sprite Editor中，将Border值设置为L：14，R：14，B：16，T：16。记得单击Apply！

对btn_9slice_highlighted和btn_9slice_pressed图像重复相同的过程，您将用于不同的按钮状态。

Setting Button Images

准备好所有图像后，只需将它们拖动到检查器中的相应字段即可。在层次结构中选择Btn_Start，然后按照下列步骤操作：

1）将Image Type更改为图像组件中的Sliced。
2）将Button组件中的Transition属性更改为SpriteSwap。
3）将btn_9slice_normal拖动到Image组件中的Source Image。
4）将btn_9slice_highlighted拖动到Button组件中的Highlighted Sprite。
5）将btn_9slice_pressed拖动到Button组件中的Pressed Sprite。

注意：如果您遇到此错误消息，This image doesn’t have a border，那么您可能忘记在Import Settings 中的Sprite Editor 中设置边框，如上所述。

在运行场景并享受酷炫按钮之前，您需要花几秒钟时间来更改嵌套文本标签Text label使用的字体。这将使按钮变得非常棒。

Setting a Custom Font for the Button

使用自定义字体很容易。还记得您下载并添加到项目中的包中的Fonts文件夹吗？现在是时候使用其中一种字体。

选择嵌套在层次结构中Btn_Start中的Text元素。然后在“项目”窗口中打开“Fonts”文件夹，并将TitanOne-Regular字体拖到Font区中。同时将颜色设置为白色。

现在运行场景，享受你的新超级棒按钮！

Adding the Settings Button

在继续下一部分之前，还有很多事情要做，其中一个是添加Settings按钮。

你可以自己做，所以你只需要开始按钮的大小和位置。其余几乎与您创建Start Game按钮的方式相同。

注意：最简单的方法当然是复制按钮并调整一些属性，但尝试从头开始创建按钮，因为您在这里学习。

因此，以下是“设置”按钮的不同属性：

Name: Btn_Settings
Rect Transform: Left and Right are 400, Height is 70 and Pos Y is 180
Text: Settings
Fontsize: 24

如果您不能做好，请按照以下步骤操作：

1）从顶部栏中选择GameObject \ UI \ Button。这将在场景中创建一个Button对象。

2）在Hierarchy视图中选择Button，并将其重命名为Btn_Settings。

3）将按钮Anchors设置为bottom-stretch。

4）将Rect Transform中的Left和Right设置为400。

5）将Height设置为70，将Pos Y设置为180。

6）将Button组件中的Transition设置为SpriteSwap。

7）确保将图像组件中的Image Type设置为Sliced。

8）在项目浏览器中打开“菜单”文件夹，然后将btn_9slice_normal拖动到Source Image。

9）然后将btn_9slice_highlighted拖动到Highlighted Sprite。

10）最后，将btn_9slice_pressed拖动到Pressed Sprite。

11）双击图像组件内的Color，并检查A是否设置为255以删除任何透明度。

12）选择嵌套的Text标签。

13）将文本更改为Settings。

14）将Font Size设置为24。

15）将颜色更改为White。

16）在项目浏览器中打开Fonts文件夹，然后将TitanOne-Regular字体拖到Inspector视图的Font字段中。

这是您在添加Settings按钮后应在Scene view中看到的内容：

现在Save Scenes你的工作。

Starting the Game

此部分的最后一项任务是实际单击Start Game按钮并在游戏中运行第二个场景。

1. Adding Scenes to Build

在运行不同场景之前，需要将它们添加到“项目设置”(Project Settings)中的Scenes in Build中，以便它们包含在最终应用程序中。

为此，请在菜单上选择File \ Build Settings。这将打开Build Settings对话框。然后在项目浏览器中打开Scenes文件夹并首先拖动MenuScene，然后将RocketMouse场景拖动到Scenes in Build的场景。

最后，关闭Build Settings对话框。

2. Creating UIManager

向按钮添加事件处理程序时，需要指定单击按钮时要调用的方法。由于无法使用静态方法，因此需要从附加到GameObject的脚本中选择公共方法。

从顶部栏中选择GameObject \ Create Empty。然后在Hierarchy视图中选择GameObject并将其重命名为UIManager。

之后，单击“检查器”中的Add Component，然后选择New Script。将其命名为UIManagerScript。确保将语言设置为CSharp，然后单击Create and Add。

这是您应该在Hierarchy视图和Inspector视图中看到的内容：

双击Inspector中的UIManagerScript以在MonoDevelop中打开脚本。加载脚本后，删除Start（）和Update（）。

接下来在前面的using语句下面添加以下语句。

using UnityEngine.SceneManagement;

这允许您加载其他场景。接下来添加以下内容：

public void StartGame() 
{
    SceneManager.LoadScene("RocketMouse");
}

保存脚本并继续下一步：

3. Calling the StartGame method when the Player Clicks the Button

切换回Unity并按照以下步骤操作：

1）在层次结构中选择Btn_Start，然后在Inspector中向下滚动到On Click（）列表。
2）单击+按钮添加新项目。
3）然后将UIManager从层次结构拖动到列表中新添加的项目。
4）单击下拉列表以选择该功能。现在，它被设置为No Function。
5）在打开的菜单中选择UIManagerScript，然后在下一个打开的菜单中选择StartGame（）。

Save Scenes您的工作，然后Run the scene并单击开始游戏按钮，这将打开游戏场景。

在最后一部分中你可能觉得你做得不多，但事实并非如此。您可以设置UI，添加图像和按钮，甚至可以在单击按钮时编写启动游戏的代码！

在许多游戏中，这就是UI的全部内容。

你还学到了很多关于Rect Transform，Anchors，Pivot等的知识。现在您了解它们很酷，当您将这些新技能应用到您自己的项目中时，您将能够更快地移动。

在本系列的下一部分中，您将学习如何为UI元素设置动画，创建对话框以及使用Slider和Toggle等控件。到最后，你将有一个工作菜单场景。

后记

本篇主要讲述了Unity UI简介，感兴趣的给个赞或者关注~~~