在 Unity 中怎样创建 UI

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

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

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

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



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

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

在层级视图中选择 Canvas。

在检视视图中，找到『Render Mode』然后选择『Screen Space – Camera』。

从层级视图中拖拽主摄像机到检视视图中 Canvas 的『Render Mode』上。



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

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

如何创建你自己的面板

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



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

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

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



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

修改 text 组件的说明

鼠标左键点击刚刚在层级视图中创建的 Text 对象。

首先，在你的场景视图中调整 Text 对象到一个合适的尺寸。

我们要让文本更大，所以我们的文本区域需要有空间来显示文本的内容。

在检视视图中，定位到 Text (Script) 属性然后设置内容为

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』脚本的合适的位置。



如果你想在这个时候玩一下游戏，只需要按下『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，谢谢！

原文地址