虚幻引擎5文档已被迁移至 Epic开发者社区

创建 Unreal Match 3 的 UI

Unreal Match 3 示例游戏 UI 的构建流程描述。

Choose your operating system:

Windows

macOS

Linux

Unreal Match 3 示例游戏的 UI 通过 UMG UI设计器 和 蓝图可视化脚本 构建。此示例中包含数个不同的 UI 元素，从前端菜单到游戏中的 HUD。每种 UI 的构件方法也充分考虑到了移动设备。

此页面将重点讲述每种菜单并指出构建中进行的考量、讨论生成 UI 美术时需要注意的事项、如何设置 UI 匹配不同移动设备和高宽比、UI 的优化步骤，以及帮助并加速工作流程的提示和技巧。

标题画面

TitleScreen.png

标题画面作为 TitleScreen 控件蓝图保存在 Content/UI 文件夹中。它的主要内容时一些文字控件和一个拥有动画的按钮。玩家点击或按下按钮时将前往游戏的主菜单。在图表中，我们使用计时器每 5 秒调用并播放跳动动画。点击按钮后，移除标题画面之前，主菜单控件蓝图将被创建并添加到视口。

标题画面使用按钮的设置在此示例中使用颇为频繁。

ButtonSetup.png

此处我们使用缩放框选中按钮，即可对整体内容进行线性缩放。按钮自身的被选中、普通和被按下状态指定使用绿色按钮背景。然后我们使用包含图像（图标）的一个覆层包裹缩放框，以便在整体按钮中单独缩放图标的尺寸。

我们选择不将图标直接烘焙到背景中，以便在必要时进行相互交换；或使用不同背景，使它们更便于交换。

主菜单

MainMenu.png

主菜单作为 MainMenu 控件蓝图保存在 Content/UI 文件夹中。此画面是玩家进行数个不同操作的中心，包含 10 个不同按钮，以便玩家访问设置、访问游戏商店、进行游戏、选择关卡等。在移动设备上进行游戏时，玩家可基于不同平台（安卓或 iOS）访问特定排行榜和成就。

此控件蓝图的图表已设置，因此玩家点击切换至新菜单画面（设置、关卡选择、商店等）的按钮时，我们首先检查确定玩家之前是否已经访问过此画面，如未曾访问，则创建相应的控件蓝图进行显示并将其保存为一个变量，以便下次访问该画面。这样便可避免在玩家访问时创建/销毁每个画面。

该画面的设计决定之一是顶部和底部按钮的布局方式。

UniformGridPanelUsage.png

决定为使用 均匀网格面板（Uniform Grid Panel） 代替 水平框 保存每个按钮（可轻松完成）。这样我们便能在 Details 面板中指定槽填充的量，添加到每个添加的子项（不在每个单独添加的按钮上进行操作）。需要在按键上执行的全部操作是将它们居中，它们便会在网格面板中均匀分布。

选项菜单

Options1.png Options2.png

选项菜单作为 OptionsMenu 控件蓝图保存在 Content/UI 文件夹中。如左图所示，选项菜单已重设，用于主菜单和按下选项按钮出现的游戏显示中。内容将基于上下文出现些许变化，将出现额外选项，使用风格化处理方式。

此控件蓝图的图表包含发生变更的选项的加载/保存逻辑，由 Global Game Instance 蓝图处理。 还将检查玩家在游戏或主菜单中访问选项，换出显示在下方的按钮，或启用/禁用背景色彩。

在游戏的选项菜单中执行特定操作时会出现确认画面。通常而言，最佳的做法是创建 UI 画面时（退出游戏、购买物品、删除物品等）为"销毁"操作设置确认，以防用户无意选中某项或执行不需要的操作。

此画面在项目中的使用频率较高，我们已创建一个名为 ConfirmationScreen 的单独控件蓝图（保存在 Content/UI 文件夹中），以便在玩家需要取消选择的操作时调用显示。下图是 OptionsMenu 控件蓝图中使用的脚本，可创建/显示控件并绑定应用和返回按钮执行需要对选项菜单进行的操作。

ConfirmationMenu.png

点击查看全图。

游戏显示

InGameDisplay.png

主要的游戏 HUD 包含在 Content/UI 文件夹的 GameScreen 控件蓝图中。控件蓝图定义组成整体显示的单独块的布局：计分板（ ScoreBoardWB 控件蓝图）、炸弹能量（ PowerBarHorz 控件蓝图）和设置按钮（显示 OptionsMenu 控件蓝图）。

GameScreen 控件蓝图的图表只包含显示 Options 菜单的逻辑。计分板和炸弹能量条的更新逻辑由其各自的控件蓝图处理，使内容更模块化，易于解密（而不将所有内容放置在一个控件蓝图中）。

计分板显示

计分板控件蓝图显示游戏的重要信息，如当前分数、剩余时间、最高分和获得奖牌需要的分数。游戏进程中时间和分数值经常发生变化（与最高分或奖牌分数不同）。在时间显示方面， 缩放框 用于匹配固定位置的标题文本和时间数值。同样，分数显示使用 水平框 ，标题设为 Auto ，数值设为 Fill 。水平框自身也被设为水平填充，为显示的各种分数提供固定布局。

ScoreBoardWidget.png

关于计分板的另一个决定是将信息的更新变为 基于事件 更新，避免频繁地通过 Tick 进行更新。这可省下大量开销，因为无需每帧检查分数是否已更新或定时器数值已发生变化。我们还使用 无效化方框 缓存木头背景块。将这些块绘制一次并缓存即可，无需每帧再次绘制（再次节约开销）。

炸弹条显示

在炸弹能量条显示（ PowerBarHorz 控件蓝图）方面，使用缩放框进行覆盖并使用自定义宽度/高度数值。材质用作进度条的填充图像（ Content/Materials 文件夹中的 M_JaggedRockFire_MeshEmit_Lit ）

BombMaterial.png

和计分板相同，进度条随事件更新（不随 Tick 更新），开销更低。

SetProgressValue.png

Set Percent 函数负责进度条的填充，增量设为 20%（从 Match 3 游戏模式中获得）。

漂浮文本显示

得分时显示的漂浮文本由数个不同的蓝图进行处理。第一个是 FloatingScore 控件蓝图（也位于 Content/UI 文件夹中），负责处理显示的文本。第二个是 Content/Blueprints 文件夹中的 FloatingScoreBP 。这是一个生成的 Actor，包含基于 FloatingScore 控件蓝图的 3D 控件组件。此 Actor 生成后，调用动画前将执行延迟，淡出文本并销毁生成的 Actor（如下图所示）。

FloatingScoreBP.png

决定漂浮分数生成位置的是 GameLevel_GM 蓝图（ Content/Blueprints 文件夹）和 Tile_BP 蓝图（ Content/Blueprints/Tiles 文件夹）的组合。在 Tile_BP 中，事件用于决定尝试比赛的时机，如出现奖励分数的结果，比赛位置将传送到 GameLevel_GM，在比赛位置生成漂浮文字之前处理奖励分数的量。

FloatingScore.png

在上图的 GameLevel_GM 中，分数已定义，在比赛位置生成漂浮文字的进程已开始。

游戏结束显示

YouWinScreen.png YouLoseScreen.png

游戏结束画面（You Win 和 You Lose）作为 VictoryScreen 控件蓝图保存在 Content/UI 文件夹中。游戏结束时将调用相同的控件蓝图，但将基于会话结果进行更新。

如游戏胜利，将显示蓝色背景和赢得的奖牌。如游戏失败，将显示红色背景，文字内容由"you lose"所替代。

无论胜负，均会显示获得的分数和一系列按钮，可返回主菜单、显示特定平台的排行榜或成就、或重新游玩关卡。

屏幕底部显示的按钮保存在 GameOverButtons 控件蓝图中。它们与 Game Over Screen 控件分离，以便进行重设并用于其他画面，而无需在每次显示这些选项时重建设置。

排行榜/成就

topic.png

使用移动服务排行榜

在游戏中使用排行榜。

topic.png

使用移动服务成就

通过移动平台成就提升玩家粘着度。

关卡选择（Level Select）

LevelSelect.png LevelSelect2.png

关卡选择菜单作为 LevelSelect 控件蓝图保存在 Content/UI 文件夹中。玩家可在该画面中切换游戏关卡以及赢得每块奖牌所需的关卡分数。

导航此画面的核心功能保存在 Level Select 控件蓝图中，而信息则通过另一个名为 LevelSelectWidget 的控件蓝图（也保存在 Content/UI 文件夹中）进行传递。

如用户尚未购买关卡，则换出带商店链接的 Accept 按钮，使用户直接跳至商店菜单进行购买。

关卡选择控件

关卡选择控件创建后，即可将所有信息保存到带完全公开变量的单个源中，以便之后添加关卡。以此设置后便无需在关卡选择控件蓝图中寻找资源的使用之处或进行格式设置，提供控件蓝图 Details 面板中的信息即可。

LevelSelectDesigner.png

在上述 Details 面板中，可对关卡相关方面的数值进行设置。

照此设置后，即可以不同方式使用。可为每个关卡添加关卡选择控件，定义用于显示每个关卡信息的默认值，并在浏览菜单时开关每个关卡选择控件的可视性。另一种方法是设置一个关卡选择控件，然后通过脚本更新控件传递的信息（这是 Unreal Match 3 中的实现）。

SetLevelFunction.png

上图中创建的函数可通过数值进行显示（此处使用宏获取排行榜分数）。

How To Play

HowToPlayScreen.png

How To Play 菜单作为 HowToScreen 控件蓝图保存在 Content/UI 文件夹中。此画面说明如何进行游戏，布局十分简洁。它包含数个文本控件，画面的布局和格式与主菜单相同，确保一致。

和其他几个画面相同，How to Play 画面中包含 Google Play 商店认证必需的特殊功能：通过设备的"back"按钮退出画面。

安卓 Back 按钮

安卓应用程序要求实现在每个画面按下设备 back 按钮即可退出画面的功能。控件蓝图无法直接访问通常保存在蓝图中的输入函数（如玩家控制器、角色、甚至 Actor）。因此我们使用 Match3PC 玩家控制器（ Content/Blueprints 文件夹中），此处安卓 Back 命令调用事件调度器，然后将其绑定到需要提供此功能的每个菜单中。

AndroidBackButton.png

如需在游戏暂停时执行输入操作，须将 Execute when Paused 设为 true。

下图是在 How To 画面设置安卓 Back 按钮功能的脚本。

BackButtonHowTo.png

此处我们将把一个事件绑定到事件调度器，安卓键按下时将从 Match 3 PC 蓝图调用此调度器。将主菜单控件设为可见、How To 画面设为隐藏之前，需要确定能通过 Branch 节点查看 How To 画面。

商店菜单

StoreMenu.png

商店画面作为 StoreScreen 控件蓝图保存在 Content/UI 文件夹中。此画面的布局被刻意设为与关卡选择画面布局相似，玩家解锁新关卡之后即可在关卡选择菜单中进行选择。

从主菜单进入此画面时，玩家将首先看到一个确认消息（ConfirmationScreen 控件蓝图），说明可从此画面购买物品，并允许玩家退出此画面。接受此确认消息后，玩家将前往主商店菜单。

此画面中的内容主要由边框、覆层、文本控件、图片和垂直框构成，以便对齐。可基于该布局结构复制/粘贴在关卡到此菜单之间切换的菜单导航，并在商店更多"页面"中添加可进行购买的物品。

从商店进行购买

iap_topic.png

使用应用程序内购买

使用应用程序内购买，为您的游戏提供额外的付费内容。

延展阅读

请查阅下方的延展阅读主题：

欢迎帮助改进虚幻引擎文档！请告诉我们该如何更好地为您服务。
填写问卷调查
取消