使用移动服务排行榜
在游戏中使用排行榜。
Choose your operating system:
Windows
macOS
Linux
虚幻三消（Unreal Match 3） 示例游戏的 UI 通过 UMG UI设计器 和 蓝图可视化脚本 构建。 此示例中包含一些不同的UI元素，包括前端菜单和游戏中的HUD。在构建每种UI元素时，我们也充分考虑到了移动设备。
本页将重点介绍每一种菜单，并展示菜单构建过程中考虑到的要素、讨论生成UI美术时的注意事项、如何设置UI以匹配不同移动设备和高宽比、UI的优化步骤，以及一些提示和技巧，有助于加速工作流程。
标题画面
标题画面（Title Screen）作为 TitleScreen 控件蓝图保存在 Content/UI 文件夹中。标题画面主要由一些文字控件和一个动画按钮组成。玩家点击或按下按钮时，将前往游戏的主菜单。在图表中我们使用了计时器，每5秒调用并播放跳动动画。点击按钮后，将创建主菜单控件蓝图，并在移除标题画面之前添加到视口。
本示例中将频繁使用标题画面使用按钮的设置。
此处我们使用缩放框选中按钮，即可对整体内容进行线性缩放。按钮在悬停（Hovered）、普通（Normal）和按下（Pressed）状态时指定为绿色背景。然后，我们使用包含图像（图标）的覆层包裹缩放框，以便在整个按钮中单独缩放图标的尺寸。
我们选择不将图标直接烘焙到背景中，以便在必要时相互交换，或者使用不同背景使它们更易于交换。
主菜单
主菜单（Main Menu）作为 MainMenu 控件蓝图保存在 Content/UI 文件夹中。玩家可以在主菜单中进行多项操作，其中包含10个按钮，用于进行设置、进入游戏商店、开始游戏、选择关卡等。在移动设备上进行游戏时，玩家可基于不同平台（安卓或 iOS）访问特定排行榜和成就。
此控件蓝图的图表已经完成设置，因此玩家点击切换至新菜单画面（设置、选择关卡、商店等）的按钮时，我们首先检查玩家之前是否已经访问过此画面，如未曾访问，则创建相应的控件蓝图，显示画面并将其保存为一个变量，以便下次访问该画面。这样便可避免在玩家每次访问时创建/销毁画面。
在设计主菜单画面时，需要确定顶部和底部按钮的布局方式。
我们决定使用 均匀网格面板（Uniform Grid Panel） 代替 水平框（Horizontal Box） 来保存每个按钮（可以轻松完成）。 这样，我们便能在 细节（Details） 面板中指定槽填充的量，添加到每个添加的子项（不在每个单独添加的按钮上进行操作）。我们只需要将按钮居中，它们便会在网格面板中均匀分布。
选项菜单
选项菜单（Options Menu）作为 OptionsMenu 控件蓝图保存在 Content/UI 文件夹中。如左图所示，选项菜单已重设，用于主菜单以及在游戏内按下选项按钮时显示。菜单内容会根据上下文菜单变化，将出现额外选项，并使用风格化的处理方式。
此控件蓝图的图表包含发生变更的选项的加载/保存逻辑，由 Global Game Instance 蓝图处理。 我们还将查看玩家是否正在游戏内或主菜单中访问选项，替换在下方显示的按钮，或启用/禁用背景色。
在游戏内的选项菜单中执行特定操作时会出现确认画面。 通常来说，最好在创建UI画面时（退出游戏、购买物品、删除物品等）为"销毁"操作设置确认页面，以防用户无意选中某项内容或执行不需要的操作。
此画面在项目中的使用频率较高，我们已创建一个单独的控件蓝图，名为 确认画面（ConfirmationScreen） （保存在 Content/UI 文件夹中），在玩家需要取消选择操作时，可以调用显示该画面。 下图是 选项菜单（OptionsMenu） 控件蓝图中使用的脚本，可以创建/显示控件并绑定"应用"（Accept）和"返回"（Back）按钮，对选项菜单执行操作。
点击查看大图。
游戏显示
主要的游戏HUD包含在 Content/UI 文件夹的 GameScreen 控件蓝图中。控件蓝图定义组成整体显示的单独块布局：计分板（ ScoreBoardWB 控件蓝图）、炸弹能量（ PowerBarHorz 控件蓝图）和设置按钮（展示 OptionsMenu 控件蓝图）。
GameScreen控件蓝图的图表只包含显示选项菜单的逻辑。计分板和炸弹能量条的更新逻辑由各自的控件蓝图处理，这样可以使内容更模块化、易于理解（而不是将所有内容放置在一个控件蓝图中）。
计分板显示
计分板（Score Board）控件蓝图展示游戏的重要信息，如当前分数、剩余时间、最高分和获得奖牌所需的分数。 在游戏中，时间和分数的值经常发生变化（与最高分或奖牌分数不同）。在时间显示方面， 尺寸框（Size Box） 用于匹配固定位置的标题文本和时间数值。 同样，分数显示使用 水平框（Horizontal Box） ，标题设为 自动（Auto） ，数值设为 填充（Fill） 。水平框自身也被设为水平填充，为显示的各种分数提供固定布局。
关于计分板，另一项内容是将信息更新变为 基于事件 更新，避免频繁地通过Tick进行更新。 这样就需每帧检查分数是否已更新或查看定时器数值是否已发生变化，可以大大节省成本。我们还使用 无效化方框 缓存木头背景块。 这样，我们只需要将这些块绘制一次并缓存即可，无需每帧再次绘制（可再次节约开销）。
炸弹条显示
在炸弹能量条显示（ PowerBarHorz 控件蓝图）方面，使用尺寸框进行覆盖并使用自定义宽度/高度数值。 材质将用作进度条的填充图像（ Content/Materials 文件夹中的 M_JaggedRockFire_MeshEmit_Lit ）。
和计分板相同，进度条随事件更新（不随Tick更新），开销更低。
设置百分比（Set Percent） 函数负责进度条的填充，增量设为20%（从三消游戏模式中获得）。
漂浮文本显示
得分时显示的漂浮文本（Floating Text）由多个不同的蓝图进行处理。第一个是 FloatingScore 控件蓝图（也位于 Content/UI 文件夹中），负责处理显示的文本。第二个是 Content/Blueprints 文件夹中的 FloatingScoreBP 。这是一个生成的 Actor，包含基于 FloatingScore 控件蓝图的 3D 控件组件。此 Actor 生成后，调用动画前将执行延迟，淡出文本并销毁生成的 Actor（如下图所示）。
GameLevel_GM 蓝图（ Content/Blueprints 文件夹）和 Tile_BP 蓝图（ Content/Blueprints/Tiles 文件夹）二者共同决定漂浮分数生成的位置。在Tile_BP中，事件用于何时开始进行消除。如果消除达到了一定的奖励分数，会将消除位置传送到 GameLevel_GM，并在生成漂浮文字之前处理奖励分数。
在上图的 GameLevel_GM 中，分数已经定义，已开始在比赛位置生成漂浮文字。
游戏结束显示
游戏结束画面（You Win 和 You Lose）作为 VictoryScreen 控件蓝图保存在 Content/UI 文件夹中。游戏结束时将调用相同的控件蓝图，但将基于会话结果进行更新。
如游戏胜利，将显示蓝色背景和赢得的奖牌。如游戏失败，将显示红色背景，文字内容变为"你输了（you lose）"。
无论胜负，均会显示获得的分数和一系列按钮，你可以返回主菜单、显示特定平台的排行榜或成就，或再来一局。
屏幕底部显示的按钮保存在 GameOverButtons 控件蓝图中。它们与游戏结束画面（Game Over Screen）控件分离，以便进行重设并用于其他画面，无需在每次显示这些选项时重新设置。
排行榜/成就
关卡选择
关卡选择菜单作为 LevelSelect 控件蓝图保存在 Content/UI 文件夹中。玩家可在该画面中切换游戏关卡，并切换查看赢得每块奖牌所需的关卡分数。
导航此画面的核心功能保存在关卡选择（Level Select）控件蓝图中，而信息则通过另一个名为 LevelSelectWidget 的控件蓝图（也保存在 Content/UI 文件夹中）进行传递。
如用户尚未购买关卡，则切换显示带有商店链接的"接受"（Accept）按钮，用户可以直接跳转至商店菜单进行购买。
关卡选择控件
创建关卡选择控件（Level Select Widget）后，即可将所有信息保存到带有完全公开变量的单个源中，以便之后添加关卡。设置完这项内容后，你便无需在关卡选择控件蓝图中寻找如何使用资源或者进行格式设置，只需提供控件蓝图 细节（Details） 面板中的信息即可。
在上述 细节（Details） 面板中，可对关卡相关方面的数值进行设置。
进行此设置后，就能够以不同方式使用。你可以为每个关卡添加关卡选择控件，定义用于显示每个关卡信息的默认值，并在浏览菜单时开关每个关卡选择控件的可视性。另一种方法是设置一个关卡选择控件，然后通过脚本来更新控件传递的信息（虚幻三消中使用了这种方法）。
上图中创建的函数可通过数值进行显示（此处使用宏获取排行榜分数）。
How To Play
"如何操作"（How To Play）菜单作为 HowToScreen 控件蓝图保存在 Content/UI 文件夹中。此画面说明如何进行游戏，布局十分简洁。它包含数个文本控件，画面的布局和格式与主菜单相同，确保风格一致。
和其他几个画面相同，"如何操作"（How To Play）画面中特定功能，以通过Google Play商店认证，并且可以通过设备的"返回"（Back）按钮退出画面。
安卓返回按钮
按照安卓应用程序要求，在每个画面中按下设备的"返回"（Back）按钮即可退出画面。控件蓝图无法直接访问通常保存在蓝图中的输入函数（如玩家控制器、角色、甚至 Actor）。因此，我们使用 Match3PC 玩家控制器（ Content/Blueprints 文件夹中），此处安卓返回命令将调用事件调度器，然后将其绑定到需要提供此功能的每个菜单中。
如需在游戏暂停时执行输入操作，请确认已将 Execute when Paused 设为 true。
下图展示了在 How To 画面设置安卓 Back 按钮功能的脚本。
在这里，我们将把一个事件绑定到事件调度器，安卓键按下时将从 Match 3 PC 蓝图调用此调度器。将主菜单控件设为可见、How To画面设为隐藏之前，需要确定能通过分支节点查看How To画面。
商店菜单
商店画面作为 StoreScreen 控件蓝图保存在 Content/UI 文件夹中。此画面的布局被特意设为与关卡选择画面布局相似，玩家解锁新关卡之后即可在关卡选择菜单中进行选择。
从主菜单进入此画面时，玩家将首先看到一个确认消息（ConfirmationScreen 控件蓝图），说明可从此画面购买物品，并允许玩家退出此画面。选择接受此确认消息后，玩家将前往主商店菜单。
此画面中的内容主要由边框、覆层、文本控件、图像和垂直框构成，以便对齐。可以基于该布局结构复制/粘贴菜单导航，可以在关卡与此菜单之间进行切换，并且可以添加更多"页"可购买的物品。
从商店进行购买
延展阅读
更多阅读内容提供如下：