创建计分条

A 计分条 是一个用户界面元素，显示对您体验的游戏玩法重要的玩家信息，例如他们的升级统计、货币数量或背包中的增益道具。通过直接在玩家的屏幕上显示计分条，您可以让他们关注完成体验中各种目标所需的内容。

使用 Gold Rush .rbxl 文件作为参考，本教程将向您展示如何创建一个跟踪玩家收集黄金数量的计分条，包括以下内容的指导：

• 在屏幕顶部中央创建一个框架。
• 添加一个皇冠图标，以无文字提示的方式传达计分条正在跟踪的内容。
• 插入得分文本，记录玩家收集的黄金数量。
• 在多个模拟设备上测试您的UI设计，以查看其在不同屏幕和纵横比上的外观。

创建框架

为了在每个玩家的屏幕上显示UI元素，您可以在 StarterGui 服务中创建一个 ScreenGui 对象。ScreenGui 对象是屏幕UI的主要容器，而 StarterGui 服务在玩家进入体验时会将其内容复制到每个玩家的 PlayerGui 容器中。

创建 ScreenGui 对象后，您可以根据每个容器的目的创建和自定义其子 GuiObjects。为了展示这一概念，本节将教您如何创建一个 ScreenGui 对象，以及一个包含图标和计分条文本的子 Frame 对象。

除了自定义框架的属性外，本节还提供了添加子 UISizeConstraint 和 UIListLayout 对象到框架中的说明。这种技术确保：GuiObjects 在您将其插入框架时自动水平排列，并且在较小的屏幕尺寸上始终可读。如果您不遵循此指导，则添加到框架中的每个 GuiObject 将会在框架的周边之外排列。

要在示例 Gold Rush 地方文件中重新创建框架容器：

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

   1. 在 Explorer 窗口中，将鼠标悬停在 StarterGui 上并单击 ⊕ 图标。会弹出上下文菜单。
   2. 插入一个 ScreenGui。

2. 为整个计分条UI组件创建一个容器。

   1. 在 ScreenGui 对象中插入一个 Frame。

      

   2. 选择新的 Frame，然后在 Properties 窗口中，

      1. 将 AnchorPoint 设置为 0.5, 0 以将框架的起点设置在其顶部中间（框架左到右的50%，框架顶部到底部的0%）。
      2. 将 BackgroundColor 设置为 0.6 以使框架背景变为黑色。
      3. 将 BackgroundTransparency 设置为 0.6 以使框架背景半透明。
      4. 将 Position 设置为 {0.5, 0},{0.01, 0} 以将框架设置在屏幕的顶部中央附近（离屏幕左到右的50%，距离屏幕顶部到底部的1%）。
      5. 将 Size 设置为 {0.25, 0},{0.08, 0} 以使框架占据屏幕中间的大部分，以吸引玩家的注意（横向25%，纵向8%）。
      6. 将 Name 设置为 ScoreBarFrame。

      

3. 为框架添加约束，以确保其内容在小屏幕尺寸上始终可读。

   1. 在 ScoreBarFrame 中插入一个 UISizeConstraint 对象。
   2. 选择新的约束，然后在 Properties 窗口中，将 MinSize 设置为 0, 40 以确保框架的高度永远不小于40像素。

4. 在框架中添加一个布局对象，以使其内容从左到右排列，并在框架的周边中垂直居中。

   1. 在 ScoreBarFrame 中插入一个 UIListLayout 对象。
   2. 选择新的布局对象，然后在 Properties 窗口中，

      1. 将 FillDirection 设置为 Horizontal。
      2. 将 VerticalAlignment 设置为 Center。

添加图标

图标是表示体验中某个动作、对象或概念的符号。使用简单而直观的图标可以让玩家轻松识别您通过UI传达的内容，而无需使用文本，因为文本可能会使屏幕显得杂乱，并转移对重要内容的注意力。

例如，示例中使用了一个简单的金色皇冠图标，指示玩家收集了多少黄金。这个图标很容易被识别为体验中的最重要目标，它包含了很少的细节，使其在移动设备屏幕上仍然易于识别。

要在示例 Gold Rush 地方文件中重新创建金色皇冠图标：

1. 在 ScoreBarFrame 中插入一个 ImageLabel 对象。

   1. 在 Explorer 窗口中，将鼠标悬停在 ScoreBarFrame 上并单击 ⊕ 图标。会弹出上下文菜单。

   2. 插入一个 ImageLabel。

      

2. 选择新的标签，然后在 Properties 窗口中，

   1. 将 Image 设置为 rbxassetid://5673786644 以使图标成为皇冠。

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

   3. 将 LayoutOrder 设置为 1。这确保图标在您在接下来的教程部分插入文本时始终位于框架的最左边。

   4. 将 Size 设置为 {1.25,0},{1,0} 以拉宽标签区域，使其超过框架的宽度。

   5. 将 SizeConstraint 设置为 RelativeYY 以通过框架的高度缩放标签的大小，保持图标的纵横比。

      

插入得分文本

得分文本记录玩家在体验中的分数，例如他们在比赛中获得多少分数。确保所有UI文本明确且易于阅读非常重要，这样玩家才能快速理解他们在体验中成功所需的信息。

例如，示例中使用了大文本在对比色的背景上，以确保它不会与背景的噪音混在一起。这对于无障碍性尤为重要，因为它确保文本在玩家移动通过3D空间时仍然清晰可读，3D空间中可能包含与文本颜色相同的对象。

要在示例 Gold Rush 地方文件中重新创建得分文本：

1. 在 ScoreBarFrame 中插入一个 TextLabel 对象。

   1. 在 Explorer 窗口中，将鼠标悬停在 ScoreBarFrame 上并单击 ⊕ 图标。会弹出上下文菜单。

   2. 插入一个 TextLabel。

      

2. 选择新的标签，然后在 Properties 窗口中，

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

   2. 将 Size 设置为 {1,0},{1,0} 以扩展标签到整个框架（100% 水平和 100% 竖直的父框架）。由于图标的偏移，标签超出了框架的边界。

   3. 将 SizeConstraint 设置为 RelativeYY 以确保标签的大小随父框架的高度缩放并保持图标的纵横比。这一步还使标签成为正方形，并保持在框架的边界内。

   4. 将 Font 设置为 GothamSSm 以匹配环境的美学。

   5. 将 Text 设置为 0 以使得分从零开始。

   6. 将 TextColor3 设置为 255, 200, 100 以使文本呈现金色。

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

   8. 将 TextXAlignment 设置为 Left 以确保得分文本与皇冠图标左对齐，无论玩家的得分是0，1,000还是1,000,000。

      

测试设计

Studio 的 设备模拟器 允许您测试玩家在各种设备上查看和使用您的UI的方式。这个工具是设计UI的重要组成部分，因为您在Studio中的视口的纵横比并不一定反映玩家用以访问您体验的屏幕的纵横比，并且确保您的UI在每个设备上均可读和可访问是很重要的。

例如，如果您没有在一系列屏幕尺寸上测试您的UI，使用大屏幕的玩家可能无法阅读您的文本或解读您的图标，而使用小屏幕的玩家可能无法看到3D空间，因为您的UI元素占用了显示的太多空间。

要在各种屏幕尺寸上模拟您的UI：

1. 在Studio的 Test 菜单中，切换打开 Device Emulator。

2. 在分辨率下拉菜单中，选择 Actual Resolution。这允许您看到您在模拟的设备上UI元素的真实分辨率。

   

3. 在设备下拉菜单中，选择至少一个设备在 Phone、Tablet、Desktop 和 Console 部分。