创建得分条

一个 得分条 是一个 UI 元素，显示对您游戏的游戏玩法重要的玩家信息，例如他们的升级统计、货币数量或他们库存中的增强道具。通过直接在玩家的屏幕上显示得分条，您可以让他们的注意力集中在完成游戏中各种目标所需的内容上。

使用 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。这确保图标在您在教程的下一部分插入文本时，始终是框架中从左到右的第一个 GuiObject。

   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 部分。