3.创建主菜单


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

  1. 打开 主菜单 控件蓝图。

  2. 设计器 标签上,从 调色板 上将控件拖放到 层级 上,完成如下设置。

    Hierarchy1.png

    作为参考,我们的 画布面板 上有一个 图像、一个带 文本垂直框 和 3 个拥有 文本按钮

  3. 层级 中选择 垂直框,然后 右击复制

  4. 画布面板右击 并选择 粘贴,粘贴出 垂直框 的另一个副本。

    Hierarchy2.png

  5. 在新的 垂直框 中,右击 复制一个 按钮 并粘贴,创建第 4 个按钮/文本控件。

    Hierarchy3.png

  6. 选择 细节 面板中的第一个 垂直框,将其重命名为 主菜单,选择 为变量 选项并将 ZOrder 设为 1

    Hierarchy4.png

    我们对控件命名以便识别,并将其设置为变量以便访问;然后对 ZOrder 进行设置,使其显示于图像的上方,稍后我们将会对图像进行设置。

  7. 选择 细节 面板中的另一个 垂直框,将其重命名为 选项,选择 为变量 选项并将 ZOrder 设为 1

  8. 照下图所示对每个 按钮 进行重命名。

    Hierarchy5.png

    通过更新按钮的名称来区分它们的不同功能,以便对其功能进行脚本编辑。

  9. 按以下所示,通过 细节 面板中 内容 下的 文本 部分更新每个 文本 控件。

    Hierarchy6.png

    在此,我们对显示在每个按钮上的文本和菜单标题进行更新。

  10. 按住 Ctrl 选择每个 按钮,然后在 细节 面板中设置 悬停着色 颜色并逐个设置为按 尺寸 进行 填充

    Hierarchy7.png

    在此,我们对所有按钮的尺寸进行调整,并定义鼠标悬停时按钮的颜色。

  11. 选择 层级 中的 图像,然后在 外观画刷 下的 细节 中选择使用的 纹理材质

    Hierarchy8.png

    如您希望使用与此指南相同的设置,可于此处下载:范例背景

    将范例背景拖放导入 虚幻引擎 中(在确认提示上点击 )。

  12. 设计器 窗口中,重新设置图像大小,使其将整个布局占满。

    Hierarchy9.png

  13. 图像细节 面板中,点击 按钮并选择填充屏幕选项。

    Hierarchy10.png

  14. 选择两个 垂直框 并将它们 定在中间偏左的位置。

    Hierarchy11.png

  15. 选择 选项 垂直框并将其 可见性 设为 隐藏

    Hierarchy12.png

    我们不需要在默认情况下显示选项,只需通过脚本使其显示即可。

  16. 选择 主菜单 垂直框并重新设置大小,再将它放在 设计器 窗口中的预期位置。

    Hierarchy13.png

  17. 可从每个 文本 控件的 细节 面板中调整 字体大小对齐

    Hierarchy14.png

    可对这些设置进行实验,以获得预期效果。

  18. 按预期设置 选项 垂直框,然后直接将其移动至 主菜单 垂直框后方。

    Hierarchy15.png

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

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