怎样在 Unity 中创建 UI

UI-Unity

在现在每一个软件应用中，用户界面（UI）都是核心的特征。游戏也没有抛弃这一规则。有非常多的游戏都使用 UI 来显示一些信息，比如生命值，技能，地图，武器的弹药，等等。 Unity 3D 提供了许多 UI 组件，你都可以在你的游戏中使用它们。在这篇文章中，我会指导你在 unity 的菜单中如何创建一个简单的暂停菜单。这个暂停菜单将显示一个内容为『Paused』的 text 组件和三个按钮组件：分别是复位按钮『Resume』，重新开始按钮『Restart』，退出按钮『Quit』，并且还是显示游戏从场景加载到现在的时间。在这篇文章的最后，你应该创建出了类似下面的界面：

U1-I

在 unity 如何创建一个简单的暂停菜单

让我们开始吧，打开 unity 并且创建一个空的工程，选择 2D 或者 3D 都可以。一旦项目创建了之后，保存你当前的场景并且给它命名一个你想要的名字。我命名我的场景为『Test』。现在让我们来做用户界面『UI』吧。

• 在层级视图『Hierarchy』右键然后选择 UI -> Canvas。

UI-2

在 unity 中对于所有的 UI 组件都需要 Canvas 。本质上，canvas 是你放置 UI 组件的容器。任意你创建的 UI 组件都必须是 canvas 的子对象。当你创建 Canvas 的时候，你会注意到在层级视图中也创建了一个名为『EventSystem』的对象。这个对象用来确定诸如鼠标输入的事件，这对 UI 组件来说也至关重要，比如按钮。

恰当地设置你的 Canvas 的小提示：

• 在层级视图中选择 Canvas。
• 在检视视图中，找到『Render Mode』然后选择『Screen Space – Camera』。
• 从层级视图中拖拽主摄像机到检视视图中 Canvas 的『Render Mode』上。

UI-3

关于 Canvas 的渲染模式『render modes』更详细的介绍请看这里。在本文中，我们将仅仅使用『Screen Space – Camera』来做一些简单的事情。这就确保我们的 UI 会一直显示在摄像机视图上。

现在我们想要在 canvas 上添加一个面板『Panel』。面板是 UI 组件中的一个基本组件。我之所以喜欢面板是因为你可以很容易地通过脚本打开或关闭而不影响一整个 Canvas。这就允许你创建更多基于游戏状态动态改变的 UI 组件了。例如，你有一个多玩家的游戏，可以让一个玩家加入另一个玩家的工会，你想要一个菜单显示其他成员在工会里的名字以及他们的血量『HP』到用户界面上。但是，你还是想把所有普通的 UI 组件（地图，技能，血量，法力）显示在玩家的屏幕上。你可以使用一个面板组件，然后把玩家的名字和血量放到他们自己的菜单上，并且你可以基于玩家是否在工会中来切换菜单打开或是关闭。

如何创建你自己的面板

• 在层级视图的 Canvas 上右键然后选择 UI -> Panel

UI-4

你将会看到你的游戏场景变成了白色半透明。这是因为每一个 Panel 组件里都连接着一个 Image 组件。你可以在检视视图中 在Color属性下面改变Panel 组件的颜色和透明度。在本文中，我保持默认选项。

现在，让我们添加一个内容为『Paused』的 text 组件。在层级视图的 Canvas 上右键然后选择 UI -> Text。

当 text 组件被创建的时候，你会注意到你可以移动它，就像在 unity 中其他任何游戏对象一样。一般来说，当处理 UI 组件的时候，我更喜欢使用矩形转换工具来移动和调整组件的大小：

UI-5

把 text 组件放到任何你想放的位置。我把它放到了 Panel 组件的水平和竖直中心。你会注意到当你使用矩形转换工具的时候，你可以看到面板组件的矩形在 x 轴和 y 轴上的中心线。如果你喜欢，这可以让你更容易地把 UI 组件放到 Panel 组件的中心。

修改 text 组件的说明

• 鼠标左键点击刚刚在层级视图中创建的 Text 对象。
• 首先，在你的场景视图中调整 Text 对象到一个合适的尺寸。
• 我们要让文本更大，所以我们的文本区域需要有空间来显示文本的内容。
• 在检视视图中，定位到 Text (Script) 属性然后设置内容为 <color=red>Paused 。
• 找到 Text (Script) 属性里的『Font Size』，讲鼠标悬于它的上面，然后按住不放，左右移动，你就会看到它的值会变大或是变小，设置一个你喜欢的字体大小。
• 找到『Paragraph』属性选择对齐『Alignment』方式为居中。然后，选择右边垂直居中。

UI-6

我的界面如下：

UI-7

你可能最先注意到我们在文本框中使用的 tag。Unity 中可以使用富文本，它允许你使用标记 tag 值来修改文本的外观。在本例中，我们指定粗体，红色字体。为了让所做的修改显示，你必须关闭一个 tag 。你可以在 这里 了解更多。

『Font Size』可以调整字体的大小。如果你觉得在你的游戏中字体看上去不太好，你可以使用前面介绍的矩形转换工具来调整 Text 组件的矩形框。矩形框需要足够大来适应字体的大小。

对齐设置是对齐文本在水平（第一个设置）和垂直（二次设置）中心。你会注意到可以为文本设置颜色，这可以被用来改变文本的颜色。但是，在游戏中可能有的时候会有 UI 组件需要依赖于它所发生的事情而动态改变。有时你仅仅需要一个 Text 组件来显示很多依赖于游戏状态的事件。在这种情况下，我发现使用 tag 来改变颜色比用脚本来动态地改变颜色组件更容易。我主要是想用这个 tag 来展示这个教程的富文本功能。

如何创建你的按钮：

下面我门将会创建三个按钮。uinty 中已经内建了按钮组件，这可以让你在游戏中当按钮被按下的时候来响应某些事件。例如，我们将会创建一个退出按钮『Quit』，当被按下的时候，会调用一个脚本来执行退出游戏的功能。

• 在层级视图中的 Panel 对象下右键
• 选择 UI –> Button
• 重复操作两次（或拷贝粘贴刚刚创建的按钮）
• 直到三个按钮都创建，把后一个按钮移到前一个按钮的下面就像下面这样：

UI-8

• 为了改变每一个按钮的标题，在层级视图中点击按钮的的小箭头，然后你会注意到每一个按钮下面都有一个『Text』子对象。

UI-9

• 在 text 对象上左键点击，然后改变每一个按钮的标题分别为『Resume』，『Restart』，『Quit』像上面的截图一样。

在让这些按钮起作用之前，让我们在菜单中添加最后一个组件

• 在层级视图中右键点击『Panel』对象
• 选择 UI –> Text
• 左键点击这个新文本对象并且改变文本内容为『Time Since Startup:』
• 调整 text 组件的字体大小，可能也要调整矩形框的大小为了让它看起来合适。
• 水平和垂直居中文本

最后你的游戏视图看上去应该像下面这样：

UI-10

现在我们正处于我们香味用户界面创建一些功能的位置。首先要做的就是让玩家可以按下『esc』键来暂停游戏，随后打开这个菜单。

• 在你的场景中创建一个空的游戏物体，命名为『_GM』
• 在层级视图中选中『_GM』然后在检视视图中选择『Add Component』
• 向下滚动并且选择『New Script』。命名脚本为『Manager』 并且确保它是 C# 脚本
• 打开脚本

拷贝和粘贴下面的代码到你的脚本中

using UnityEngine;
using System.Collections;
using UnityEngine.UI; //Need this for calling UI scripts

public class Manager : MonoBehaviour {

[SerializeField]
Transform UIPanel; //Will assign our panel to this variable so we can enable/disable it

[SerializeField]
Text timeText; //Will assign our Time Text to this variable so we can modify the text it displays.

bool isPaused; //Used to determine paused state

void Start ()
{
UIPanel.gameObject.SetActive(false); //make sure our pause menu is disabled when scene starts
isPaused = false; //make sure isPaused is always false when our scene opens
}

void Update ()
{

timeText.text = "Time Since Startup: " + Time.timeSinceLevelLoad; //Tells us the time since the scene loaded

//If player presses escape and game is not paused. Pause game. If game is paused and player presses escape, unpause.
if(Input.GetKeyDown(KeyCode.Escape) && !isPaused)
Pause();
else if(Input.GetKeyDown(KeyCode.Escape) && isPaused)
UnPause();
}

public void Pause()
{
isPaused = true;
UIPanel.gameObject.SetActive(true); //turn on the pause menu
Time.timeScale = 0f; //pause the game
}

public void UnPause()
{
isPaused = false;
UIPanel.gameObject.SetActive(false); //turn off pause menu
Time.timeScale = 1f; //resume game
}

public void QuitGame()
{
Application.Quit();
}

public void Restart()
{
Application.LoadLevel(0);
}
}

保存脚本返回到 unity 编辑器中

• 在层级视图中的『_GM』对象上左键点击
• 拖拽『Panel』对象和『Time Text』对象到检视视图中『Manager』脚本的合适的位置。

108du4

108du4

如果你想在这个时候玩一下游戏，只需要按下『esc』键，你的 UI 组件就会显示到 Panel 上。你也会看到 Time Text 也会显示从游戏加载到现在的时间。

但是，你会注意到点击按钮没有反应，我们下面就要解决这个问题

在层级视图中选中『Resume』按钮，然后在检视视图中找到『Button (Script)』组件，你会注意到有一个『On Click()』。这就是我们要给按钮添加功能的地方。在右侧菜单底部点击『+』图标，将会出现一个列表，拖拽『_GM』对象到这个位置。 点击『No Function』下拉菜单，然后选择『Manager  UnPause()』

你刚刚所做的操作就是给按钮添加了一些功能。现在，当点击按钮的时候，UnPause()函数就会在运行的时候从『Manager』脚本连接到『_GM』游戏对象。为了让你通过一个按钮来调用一个函数，那么这个函数需要声明为 public，这就是为什么我在『Manager』脚本中把所有函数设置为public。

如果你现在运行游戏，按下『esc』键，就会出现暂停菜单，然后点击『Resume』按钮。菜单将会消失，游戏将恢复。这就意味着按钮的功能起作用了。

那么，让我们其他的按钮也变得起作用吧：

• 在层级视图中选中重试按钮并且找到『OnClick()
• 点击『+』图标，添加一个新的项
• 拖拽『_GM』对象到游戏物体区域
• 点击显示『No Function』的下拉菜单
• 选择 Manager > Restart()
• 最后，在层级视图中点击退出按钮也在检视视图中找到『OnClick()』
• 点击『+』图标，添加一个新的项
• 拖拽『_GM』对象到游戏物体区域
• 点击显示『No Function』的下拉菜单
• 选择 Manager > QuitGame()

在我们完成最后一件事前。为了让『Restart』功能能够起作用，我们需要添加我们的场景到场景的索引列表中。

File > Build Settings… > 点击 “Add Open Scenes” 按钮.

这就把当前场景分配到了场景列表里了。因为这是名单中唯一的一个，它的索引就是 0，所以『Restart()』函数才会调用『Application.LoadLevel(0)』。现在，如果你运行游戏并且按下『esc』键，你可以使用所有的按钮。除非你建立程序并运行它，否则退出按钮不会被注意到。Unity 编辑器无法退出应用程序，所以『Application.Quit()』函数不会做太多。但是如果点击 File > Build & Run 然后选择你想做的设置，这个项目将会运行到一个独立的窗口，然后点击退出就会看到程序退出了。下面是关于本次教程的总结：希望你能更好地理解如何在 Unity 中创建用户界面。还有很多其他更复杂的 UI 组件，我没有在本文中讨论，我鼓励你去尝试使用它们，并且经历所有你觉得很酷的东西。一定要在 Facebook， Twitter，LinkedIn，和 YouTube 找到 Studica，谢谢！

原文地址