创建得分栏

*此内容使用人工智能（Beta）翻译，可能包含错误。若要查看英文页面，请点按 此处。

score bar 是一个 UI 元素，显示玩家在游戏中的重要信息，例如其升级统数据、货币计数或在其库存中的能力提升项目。通过直接显示 score bar 在玩家的屏幕上，您可以让其在体验中完成各个目标。

使用 金色潮水 .rbxl 文件作为参考，本教程向您显示如何创建一个跟踪金玩家收集数量的金币的评分条，包括以下指示：

  • 创建屏幕中心上角的框架。
  • 添加一个皇冠图标，用于通知得分条不受任何文本指示。
  • 插入记录玩家收集的金币数量的得分文本。
  • 在多个模拟设备上测试您的 UI 设计，以评论其在不同屏幕和角度比例上的外观。

创建框架

要在每个玩家的屏幕上显示 UI 元素，您可以在 ScreenGui 服务中创建一个 StarterGui 对象。 ScreenGui 对象是体验 UI 的主要容器，而 2>Class.PlayerGui2> 服务复制其内容到每个玩家的 <

在创建一个 ScreenGui 对象后，您可以根据每个容器的目的来创建和自定义其子 GuiObjects 。 要示例此概念，这个部分教您如何创建一个 ScreenGui 对象，其子 2>Class.Frame2> 对象包含图标和文本的得分条。

除了自定义框架的属性外，此部分还提供添加子 UISizeConstraint 和子 UIListLayout 对象到框架。 此技术确保 GuiObjects 在插入

要重现在样本 黄金 Rush 位置文件中的框架容器：

  1. 创建一个 ScreenGui 对象来容纳您在屏幕上的 UI。

    1. 在 Explorer 窗口中，将鼠标悬停在 StarterGui 上，然后单击 ⊕ 图标。一个上下文菜单显示。
    2. 插入一个 屏幕游戏用户界面 。

  2. 创建一个容器为整个评分栏用户界面组件。

    1. 在 屏幕GUI 对象中插入一个 框架 。

    2. 选择新的 框架 ，然后在 属性 窗口中，

      1. 将 AnchorPoint 设置为 0.5, 0 以将框架的起始点设置在框架的中间顶部（从左到右框架的边缘 50%，从上到下框架的边缘 0%）。
      2. 将 背景颜色 设置为 0.6 使框架的背景为黑色。
      3. 将 背景透明度 设置为 0.6 以使框架的背景半透明。
      4. 将位置设置为{0.5, 0},{0.01, 0} 以将屏幕顶部中间的框架设置为50%从左到右屏幕左，1%从上到下屏幕右。
      5. 将大小设置为{0.25, 0},{0.08, 0}，以便框架占用屏幕中央的大部分以吸引玩家的注意（25% horizontal，8% vertical）。
      6. 将 名称 设置为 ScoreBarFrame 。

  3. 将框架中的限制添加到框架上，以便小屏幕尺寸总是可以清晰地显示其内容。

    1. 将 UISizeConstraint 对象插入 ScoreBarFrame 。
    2. 选择新约束，然后在 属性 窗口中，将 最小尺寸 设置为 0, 40 以确保框架永远不会缩小到少于 40 像素垂直。

  4. 将布局对象添加到框中，以便其内容从左到右和垂直中心在框中的长度方向。

    1. 将 UIListLayout 对象插入 ScoreBarFrame 。
    2. 选择新的布局对象，然后在 属性 窗口中，
      1. 将 填充方向 设置为 水平 .
      2. 将 垂直对齐 设置为 中心 。

添加图标

图标是代表体验中的一些动作、对象或概念的符号。使用简单易于理解的图标可以让玩家轻松识别与您通过 UI 交流的内容，而不会使用文本，这可能会占用屏幕并从重要内容中引起注意。

例如，样本使用简单的金冠图标来表示玩家收集了多少金币。 此图标是易于识别的，因为它是体验中的重要目标，并且包含最小限度的细节，以便在移动设备屏幕上保持可读。

要重现样本 黄金矿洞淘金机 位置文件中的金皇冠图标：

  1. 将 图像标签 对象插入 ScoreBarFrame 。

    1. 在 Explorer 窗口中，将鼠标悬停在 ScoreBarFrame 上，然后单击 ⊕ 标志。一个上下文菜单显示。

    2. 插入一个 图像标签 。

  2. 选择新标签，然后在 属性 窗口中，

    1. 将 图像 设置为 rbxassetid://5673786644 使命标识成皇冠。

    2. 将 背景透明度 设置为 1 使标签的背景完全透明。

    3. 将 布局顺序 设置为 1 。这确保当您在下一部分教程中插入文本时，图标仍然是第一个 GuiObject 从左到右从左到右。

    4. 将 大小 设置为 {1.25,0},{1,0} 以宽润标签区域以超过框架的完整宽度。

    5. 将 大小限制 设置为 相对yy 以保持标志的外观比例，通过将标签高度缩放为父框高度来缩放标签的大小。

插入得分文本

分数文本记录玩家在体验中的分数，例如在比匹配中获得的积分。 重要的是，所有的 UI 文本都必须清晰、明确，以便玩家可以快速了解体验中需要成功的信息。

例如，样本使用大文本在顶部的对立颜色上，以便它不会与背景的噪声混合。 这对于无障性至关重要，因为它确保文本在玩家移动 3D 空间中保持可读性，这可能包括与文本相同颜色的对象。

要在样本黄金时代的文件中重制得分文本：

  1. 将 文本标签 对象插入 ScoreBarFrame 。

    1. 在 Explorer 窗口中，将鼠标悬停在 ScoreBarFrame 上，然后单击 ⊕ 标志。一个上下文菜单显示。

    2. 插入一个 文本标签 。

  2. 选择新标签，然后在 属性 窗口中，

    1. 将 背景透明度 设置为 1 使标签的背景完全透明。

    2. 将大小设置为{1,0},{1,0} 以宽涵标签到整个框架（100% 垂直于父框，100% 横向于父框）。标签将从框架的边界之外延伸，因为标签被图标 Offset。

    3. 将 Size限制 设置为 相对 YY 以确保标签的大小与父框的高度匹配，并保留标志的外长宽比。此步骤还使标签成为一个方块，并将其保留在框架的边界内。

    4. 将 字体 设置为 GothamSSm 来匹配环境的美感。

    5. 将 文本 设置为 0 以从零开始评分。

    6. 将 TextColor3 设置为 255, 200, 100 来为文本金色。

    7. 将 文本大小 设置为 30 以在屏幕上让文本更大。

    8. 将 TextXAlignment 设置为 Left 以确保得分文本在皇冠图标附近保持左齐，无论玩家的得分是 0、1000 或 1,000,000。

测试设计

Studio 的 设备模拟器 允许您测试玩家在各个设备上看到和与您的 UI 交互的方式。 此工具是设计 UI 的重要部分，因为 Studio 的视窗在 Studio 中不 necessarily反映屏幕玩家使用您的体验，并且您的 UI 必须在每个设备上都可以看到和访问。

例如，如果您不在多个屏幕尺寸上测试您的 UI，玩家可能无法读取您的文本或解码您的图标，并且小屏幕玩家可能无法看到 3D 空间，因为您的 UI 元素在显示上占用了太多空间。

要在不同屏幕尺寸上 emulate 您的 UI：

  1. 在菜单栏中，选择 测试 标签。

  2. 在 模拟 部分中，单击 设备 。视窗更改为反映平均笔记本电脑外观比例的方面。

    Device button indicated in Test tab

  3. 在解析下拉菜单中，选择 实际分辨率 。这允许您在您模拟的设备上查看您的UI元素的真实分辨率。

  4. 在设备下拉列表中，选择至少一个设备在 电话 、 平板电脑 、 桌面 和 1> 控制器1> 部分。