正在創建分數條 | 文件 - Roblox 創作者中心

分數條是玩家在遊遊玩體驗中重要的資訊顯示元素，例如他們的升級統數據、貨幣數量或在其道具欄中的強化道具項目。通過直接顯示分數條在玩家的螢幕上，您可以讓他們專注在達成各種目標的過程中所需的內容。

使用黃金搶劫者 .rbxl 文件作為參考，這個教學會顯示您如何創建追蹤金色玩家收集的金量的評分條，包括以下指示：

與所有 2D 作品相同，您可以通過多種方式達到任何特定目標。您可以在第三方 UI 工具中創建自己的 2D 資產，並跟隨自己的設計。

建立框架

要在每個玩家的螢幕上顯示 UI 元素，您可以在 ScreenGui 服務中創建一個 StarterGui 對象。 ScreenGui 對象是綽動 UI 的主要容器，並且服務中的 1> Class.St

在你創建了 ScreenGui 對物件之後，你可以根據每個容器的目的來創建並自訂其子對象 GuiObjects 。要示範此概念，這個區域教學你如何在 ScreenGui 對象上創建一個子對象 2>Class.Frame2>

除了自訂框架的屬性外，此部分還提供指示在框架中添加兒童 UISizeConstraint 和 UIListLayout 對象。這種技術確保 Class.GuiObject|Gui

要重現在金色熱潮位置的框架容器：

創建一個 ScreenGui 對象來容納您在畫面上的 UI。
1. 在 Explorer 窗口中，將鼠標移動至 StarterGui 並點擊 ⊕ 圖示。一個上下文菜單顯示。
2. 插入屏幕導覽器。
創建容器為整個分數條 UI 零件。
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% 水平，8% 垂直)。
  6. 將名稱設置在 ScoreBarFrame 。
在框架上添加限制，以便小型屏幕尺寸時內容可以清晰地顯示。
1. 將 UISizeConstraint 對象插入 ScoreBarFrame 。
2. 選擇新限制式，然後在屬性窗口中，將最小尺寸設置為 0, 40 以確保框架永遠不會縮小到少於 40 像素垂直上。
將一個布局對象添加到框架中，以便其內容從左到右和垂直中心在框架的圍繞中。
1. 將 UIListLayout 對象插入 ScoreBarFrame 。
2. 選擇新的頁面對物件，然後在屬性視窗中，
  1. 將填充方向設為水平。
  2. 將垂直齊列設為中心。

圖示是代表體驗中的一個行動作、對物件或概念的符號。使用簡單、直觀的圖示可以讓玩家容易辨識您正在與用戶介面通信的內容，而不用使用文字，這可能會導致屏幕佔用和注意力不集中。

舉例來說，範例使用簡單的黃金皇冠圖示來表示玩體驗收集的黃金數量。這圖示是易於辨認的目標，並且包含最小限度的細節，以便在移動設備上的螢幕上保持可讀。

要重現金色皇冠圖示在樣本 Gold Rush 位置的文件：

將圖像標籤對象插入分數條框框架。
1. 在 Explorer 窗口中，將鼠標移動至 ScoreBarFrame 上，然後單擊 ⊕ 圖示。一個上下文菜單顯示。
2. 插入圖像標籤。
選擇新標籤，然後在屬性窗口中，
1. 將圖像設為 rbxassetid://5673786644 以使圖示成為皇冠。
2. 將背景透明度設為 1 以使標籤的背景完全透明。
3. 將 LayoutOrder 設置為 1 。這樣可以確保圖示在教學的下一個部分中從左到右移動時保持為第一個 GuiObject。
4. 將大小設為 {1.25,0},{1,0} 以擴大標籤區域的全寬。
5. 將尺寸限制設置為相對 YY 以保持圖示的外觀比例，將標籤尺寸擴展到父框高度。

分數文字在體驗中記錄玩家的分數，例如他們在比相符中獲得的分數。重要的是，所有的 UI 文字都必須清晰、明確，以便玩家能夠快速了解體驗中所需的資訊。

舉例來說，樣本上方使用大量文字，以便它不會與背景顏色交疊。這是對於可行性的重要考慮，因為它確保文字在玩家移動 3D 空間中的時候仍然可以讀取。

要重製分數文本內的分數文本位置：

將文字標籤對象插入分數條形框架。
1. 在 Explorer 窗口中，將鼠標移動至 ScoreBarFrame 上，然後單擊 ⊕ 圖示。一個上下文菜單顯示。
2. 插入文字標籤。
選擇新標籤，然後在屬性窗口中，
1. 將背景透明度設為 1 以使標籤的背景完全透明。
2. 將大小設為 {1,0},{1,0} 以將標籤擴展到整個框架 (100% 水平和 100% 垂直的父框). 標籤在框架外延伸因為圖示被抵消。
3. 將尺寸限制設置為相對 YY 以確保標籤的大小與父親框架的高度相對應，並保留圖示的外長寬比。此步驟還使標籤成為正方形，並將其保留在框架內。
4. 將字體設置為 GothamSSm 以符合環境的美感。
5. 將文字設置為 0 以從零開始得分。
6. 將文字顏色3 設置為 255, 200, 100 以顏金文字。
7. 將文字大小設置為 30 以在屏幕上提升文字大小。
8. 將 TextXAlignment 設置為左側來確保分數文字在皇冠圖示附近保持左邊，無論玩家的分數是 0、1,000 或 1,000,000。

Studio 的裝置模擬器允許您測試玩家在各種裝置上看到並與您的 UI 互動的方式。這個工具是設計 UI 的重要部分，因為 Studio 的視窗在 Studio 中不會必須反映玩家使用您的體驗的方式，而且您的 UI 需要能夠在每個裝置上都可以看到和使用。

例如，如果您在一系列屏幕尺寸上測試您的 UI，玩家擁有大型屏幕可能無法閱讀您的文字或解碼您的圖示，玩家擁有小型屏幕可能無法看到 3D 空間，因為您的 UI 元素佔用了太多顯示空間。

要在不同尺寸的螢幕上重現您的 UI：