使用移动服务排行榜
在游戏中使用排行榜。
Unreal Match 3 示例游戏的 UI 通过 UMG UI Designer 和 蓝图 - 可视化脚本 构建。此示例中包含数个不同的 UI 元素,从前端菜单到游戏中的 HUD。每种 UI 的构件方法也充分考虑到了移动设备。
此页面将重点讲述每种菜单并指出构建中进行的考量、讨论生成 UI 美术时需要注意的事项、如何设置 UI 匹配不同移动设备和高宽比、UI 的优化步骤,以及帮助并加速工作流程的提示和技巧。
标题画面使用按钮的设置在此示例中使用颇为频繁。
此处我们使用缩放框选中按钮,即可对整体内容进行线性缩放。按钮自身的被选中、普通和被按下状态指定使用绿色按钮背景。然后我们使用包含图像(图标)的一个覆层包裹缩放框,以便在整体按钮中单独缩放图标的尺寸。
我们选择不将图标直接烘焙到背景中,以便在必要时进行相互交换;或使用不同背景,使它们更便于交换。
该画面的设计决定之一是顶部和底部按钮的布局方式。
决定为使用 均匀网格面板(Uniform Grid Panel) 代替 水平框 保存每个按钮(可轻松完成)。这样我们便能在 Details 面板中指定槽填充的量,添加到每个添加的子项(不在每个单独添加的按钮上进行操作)。需要在按键上执行的全部操作是将它们居中,它们便会在网格面板中均匀分布。
在游戏的 Options 菜单中执行特定操作时会出现确认画面。通常而言,最佳的做法是创建 UI 画面时(退出游戏、购买物品、删除物品等)为“销毁”操作设置确认,以防用户无意选中某项或执行不需要的操作。
此画面在项目中的使用频率较高,我们已创建一个名为 ConfirmationScreen 的单独控件蓝图(保存在 Content/UI 文件夹中),以便在玩家需要取消选择的操作时调用显示。下图是 OptionsMenu 控件蓝图中使用的脚本,可创建/显示控件并绑定 Accept 和 Back 按钮执行需要对 Options 菜单进行的操作。
计分板控件蓝图显示游戏的重要信息,如当前分数、剩余时间、最高分和获得奖牌需要的分数。游戏进程中时间和分数值经常发生变化(与最高分或奖牌分数不同)。在时间显示方面,缩放框 用于匹配固定位置的标题文本和时间数值。同样,分数显示使用 水平框,标题设为 Auto,数值设为 Fill。水平框自身也被设为水平填充,为显示的各种分数提供固定布局。
关于计分板的另一个决定是将信息的更新变为 基于事件 更新,避免频繁地通过 Tick 进行更新。这可省下大量开销,因为无需每帧检查分数是否已更新或定时器数值已发生变化。我们还使用 失效框 缓存木头背景块。将这些块绘制一次并缓存即可,无需每帧再次绘制(再次节约开销)。
在炸弹能量条显示(PowerBarHorz 控件蓝图)方面,使用缩放框进行覆盖并使用自定义宽度/高度数值。材质用作进度条的填充图像(Content/Materials 文件夹中的 M_JaggedRockFire_MeshEmit_Lit)
和计分板相同,进度条随事件更新(不随 Tick 更新),开销更低。
Set Percent 函数负责进度条的填充,增量设为 20%(从 Match 3 游戏模式中获得)。
得分时显示的漂浮文本由数个不同的蓝图进行处理。第一个是 FloatingScore 控件蓝图(也位于 Content/UI 文件夹中),负责处理显示的文本。第二个是 Content/Blueprints 文件夹中的 FloatingScoreBP。这是一个生成的 Actor,包含基于 FloatingScore 控件蓝图的 3D 控件组件 。此 Actor 生成后,调用动画前将执行延迟,淡出文本并销毁生成的 Actor(如下图所示)。
决定漂浮分数生成位置的是 GameLevel_GM 蓝图(Content/Blueprints 文件夹)和 Tile_BP 蓝图(Content/Blueprints/Tiles 文件夹)的组合。在 Tile_BP 中,事件用于决定尝试比赛的时机,如出现奖励分数的结果,比赛位置将传送到 GameLevel_GM,在比赛位置生成漂浮文字之前处理奖励分数的量。
屏幕底部显示的按钮保存在 GameOverButtons 控件蓝图中。它们与 Game Over Screen 控件分离,以便进行重设并用于其他画面,而无需在每次显示这些选项时重建设置。
关卡选择控件创建后,即可将所有信息保存到带完全公开变量的单个源中,以便之后添加关卡。以此设置后便无需在关卡选择控件蓝图中寻找资源的使用之处或进行格式设置,提供控件蓝图 Details 面板中的信息即可。
照此设置后,即可以不同方式使用。可为每个关卡添加关卡选择控件,定义用于显示每个关卡信息的默认值,并在浏览菜单时开关每个关卡选择控件的可视性。另一种方法是设置一个关卡选择控件,然后通过脚本更新控件传递的信息(这是 Unreal Match 3 中的实现)。
安卓应用程序要求实现在每个画面按下设备 back 按钮即可退出画面的功能。控件蓝图无法直接访问通常保存在蓝图中的输入函数(如玩家控制器、角色、甚至 Actor)。因此我们使用 Match3PC 玩家控制器(Content/Blueprints 文件夹中),此处安卓 Back 命令调用事件调度器,然后将其绑定到需要提供此功能的每个菜单中。
如需在游戏暂停时执行输入操作,须将 Execute when Paused 设为 true。
下图是在 How To 画面设置安卓 Back 按钮功能的脚本。
此处我们将把一个事件绑定到事件调度器,安卓键按下时将从 Match 3 PC 蓝图调用此调度器。将主菜单控件设为可见、How To 画面设为隐藏之前,需要确定能通过 Branch 节点查看 How To 画面。
请查阅下方的延展阅读主题:
查阅如何 针对不同设备缩放 UI ,了解 UI 元素缩放的更多内容。
查阅如何 通过事件驱动 UI 更新 ,了解事件优化的更多内容。
查阅 UMG 最佳方法 页面中的更多内容,了解最佳方法、提示和技巧。