创建主菜单

在本指南中，你将了解如何为游戏创建主菜单并编写脚本。

若你从UMG UI快速入门指南开始操作，则可以使用与此指南相同的项目。

第一步是要创建主菜单视觉布局，创建过程如下。

打开 MainMenu 控件蓝图。

如果你在创建主菜单蓝图时遇到了困难，你可以参照UMG UI 快速入门指南寻找帮助。
在 设计器（Designer） 选项卡中，将控件从 控制板（Palette） 拖放到 层级（Hierarchy） 上，实现以下设置。

作为参考，我们使用一个 图像（Image）、一个带 文本（Text） 的 垂直框（Vertical Box），和3个在 画布面板（Canvas Panel） 上有 文本（Text） 的按钮。

在 层级（Hierarchy） 窗格中，你可以根据控件类或命名来搜索，以便快速查找UI元素。
在 层级（Hierarchy） 中选择 垂直框（Vertical Box），然后 右键单击 并 复制（Copy）。
右键单击 画布面板（Canvas Panel） 并选择 粘贴（Paste），粘贴 垂直框（Vertical Box） 的第二个副本。
在新的 垂直框（Vertical Box） 中，右键单击 复制一个 按钮（Button） 并粘贴它，创建第四个按钮/文本控件。
在 细节（Details） 面板中选择第一个 垂直框（Vertical Box），将其重命名为 MainMenu，选中 isVariable 选项并将 ZOrder 设为 1。

为便于识别，我们将对控件进行命名，并将其设为一个变量，以便进行访问；同时，我们还将设置 ZOrder，以便它出现在稍后将设置的图像的顶部。
选择另一个 垂直框（Vertical Box），在 细节（Details） 面板中将其重命名为 Options，选中 isVariable 选项并将 ZOrder 设为 1。
如下图所示，重命名各个 按钮（Button）。

更新按钮的命名，我们便能了解每个按钮的功能，这样更易于为这些按钮编写脚本功能。
在 细节（Details） 面板中 内容（Content） 下的 文本（Text） 部分中，更新各个 文本（Text） 控件，如下所示。

现在我们来更新每个按钮上显示的文本以及菜单标题。
按住 Ctrl，选择各个 按钮（Button），然后在 细节（Details） 面板中设置 悬停（Hovered） 的 Tint（着色） 颜色，并逐个设为按 尺寸（Size） 进行 填充（Fill）。

在此，我们对所有按钮的尺寸进行调整，并定义鼠标悬停时按钮的颜色。
在 层级（Hierarchy） 中选择 图像（Image），然后在 细节（Details） 的 外观（Appearance） 和 笔刷（Brush） 下，选择一个要使用的 纹理（Texture）、Sprite 或 材质（Material）。

如你希望使用与此指南相同的设置，可于此处下载：示例背景将示例背景拖放导入 虚幻引擎 （在确认提示上点击 是（Yes））。
在 设计器（Designer） 窗口中调整图像尺寸，使其将整个布局占满。
在 图像（Image） 的 细节（Details） 面板中，单击 锚（Anchor） 按钮并选择填充屏幕选项。你还可以使用Scalebox来保存图像，这将确保图像的尺寸适当缩放，以匹配高宽比。
选择两个 垂直框（Vertical Box） 并将它们的 锚（Anchor） 定在中间偏左位置。
选择 选项（Options） 垂直框，并将其 可视性（Visibility） 设为 隐藏（Hidden）。

我们不需要在默认情况下显示选项，只需通过脚本使其显示即可。
选择 主菜单（MainMenu） 垂直框，在 设计器（Designer） 窗口中按需要调整尺寸和位置。
可从各个 Text 控件的 细节（Details） 面板中调整 字体（Font）、尺寸（Size） 和 对齐（Alignment）。

可对这些设置进行实验，以获得预期效果。
根据你的需要设置 选项（Options） 垂直框，然后将其直接移至你的 主菜单（Main Menu） 垂直框的后面。

因为一次只会显示其中一项，所以它们可以相互重叠。

菜单的视觉布局完成后，下一步我们将编写菜单功能的脚本。

编写主菜单脚本

下面我们来编写主菜单的功能脚本。在该步骤完成后，我们将能够使游戏启动并到达主菜单、开始游戏以及在选项菜单中更改分辨率。

打开 主菜单（MainMenu） 控件蓝图并单击 图表（Graph） 选项卡。
在 我的蓝图（MyBlueprint） 窗口中选择 运行按钮（PlayButton），然后在 细节（Details） 面板中单击 点击时执行（On Clicked） 旁的加号。

此举会将一个节点添加至图表，一旦点击按钮便执行功能。
为各个按钮添加 点击时执行（On Clicked） 事件。

我们已经在图表中排好按钮，清晰地模拟出菜单的布局。
离开 点击时执行（运行按钮）（OnClicked(PlayButton)），添加一个 OpenLevel（设为 FirstPersonExampleMap）节点和一个 Remove from Parent 节点。

关卡命名（Level Name） 将指出要加载的关卡的命名（在本例中是First Person Example地图）。Remove from Parent 节点将从视口中移除目标控件蓝图。它被设为目标本身（即加载关卡后要从视图中移除的主菜单控件蓝图）。
按住 Ctrl 并拖入 MainMenu 和 OptionsMenu 变量。
从 MainMenu 连出引线并添加一个 Set Visibility 节点。将 不可视性（In Visibility） 设为隐藏（Hidden）。
连出引线并添加一个 Set Visibility 节点。将 不可视性（Invisibility） 设为可见（Visible）。
将目标附加到 OptionsMenu 变量。

在选项按钮（Options Button）被点击时，我们将关闭主菜单（Main Menu），并打开选项菜单（Options Menu）。
在每个 设置（Settings） 按钮后连出引线，添加一个 Execute Console Command 节点。
针对每项的 命令（Command），使用 r.setRes XxY，其中X和Y是要使用的尺寸。

在以上步骤中，我们使用了以下设置：640x480、1280x720 和 1920x1080。
对于 返回按钮（Return Button） 重复步骤6，但进行相反的设置，使主菜单（Main Menu）可见，选项菜单（Options Menu）隐藏。
在 点击时执行（退出按钮）（OnClicked (QuitButton)） 后连出引线，添加一个 Execute Console Command 节点并设为命令 退出（Quit）。
编译（Compile） 并 保存（Save），然后关闭控件蓝图。
在 内容浏览器（Content Browser） 中，打开 主（Main） 关卡，然后打开 关卡蓝图（Level Blueprint）。
右键单击 图表，添加一个 Event Begin Play 节点，并连接一个 Create Widget 节点（将 类（Class） 设为 主菜单（Main Menu））。
连接一个 Add to Viewport 节点，并添加一个 Get Player Controller 节点。
从 Get Player Controller 连出引线，添加 Set Show Mouse Cursor 节点并将其设为 True，然后 编译（Compile） 并关闭蓝图。
打开 Content/FirstPersonBP/Blueprints 文件夹内的 第一人称角色（First Person Character） 蓝图。
在 Event Begin Play 脚本之后添加一个 Get Player Controller 节点，然后添加一个 Set Input Mode Game Only 节点。

此举将关闭光标，并将玩家的输入设为仅限游戏（Game Only）。
将 Set Input Mode Game Only 节点的输出引脚连接到 Branch 节点。
编译（Compile） 并关闭蓝图，然后打开 世界设置（World Settings）。
在 游戏模式（Game Mode），将 游戏模式覆盖（GameMode Override） 设为 第一人称游戏模式（FirstPersonGameMode） 并将 默认Pawn类（Default Pawn Class） 更改为 角色（Character）。

因为我们不希望玩家能够在主菜单（Main Menu）后四处奔跑和射击，所以我们现在要为这张地图分配一个游戏模式，并更改玩家的角色，使其使用可玩的 第一人称角色（FirstPersonCharacter） 蓝图中的引擎默认角色。
单击主工具栏中的 运行（Play） 按钮，在编辑器中运行。如需测试分辨率选项，请从 在编辑器中运行（Play-in-Editor） 下拉菜单中选择 新建编辑器窗口（New Editor Window）。

我们现在已经创建了功能齐全的主菜单，使玩家可以退出游戏、变更分辨率选项，或进行游戏（这将加载特定关卡并将玩家转到游戏进程中）。