創建得分條 | 文件 - Roblox 創作者中心

一個得分條是一個用於顯示對你的遊戲體驗重要的玩家信息的 UI 元素，例如他們的升級統計數據、貨幣數量或在其庫存中的增強物品。通過直接在玩家的屏幕上顯示得分條，你可以讓他們的注意力集中在完成你設計的各種目標所需的內容上。

使用金礦熱的 .rbxl 文件作為參考，本教程將向你展示如何創建一個跟踪玩家所收集的金幣數量的得分條，包括以下指導：

在屏幕的上中部創建一個框架。
添加一個皇冠圖標，傳達得分條正在跟踪的內容，而不需要任何文本指導。
插入得分文本，記錄玩家所收集的金幣數量。
在多個模擬設備上測試你的 UI 設計，以檢查它在不同屏幕和寬高比上的外觀。

與所有 2D 創建一樣，有很多方法可以達到任何特定的目標。你可以在第三方 UI 工具中創建自己的 2D 資產，並按照自己的設計進行創作。

創建框架

要在每個玩家的屏幕上顯示 UI 元素，你可以在 StarterGui 服務中創建一個 ScreenGui 對象。 ScreenGui 對象是屏幕 UI 的主要容器，而 StarterGui 服務會將其內容複製到每個玩家的 PlayerGui 容器中，隨著他們進入體驗。

在創建 ScreenGui 對象後，你可以根據每個容器的目的創建和自定義其子 GuiObjects。為了演示這個概念，本節將教你如何創建一個包含得分條圖標和文本的 Frame 對象的 ScreenGui 對象。

除了自定義框架的屬性外，本節還提供有關向框架添加子 UISizeConstraint 和 UIListLayout 對象的說明。這種技術確保 GuiObjects 在插入到框架時自動水平排列，並在較小的屏幕上始終可讀。如果不遵循這個指導，你添加到框架中的每個 GuiObject 都會在框架的周圍排列。

要在示例金礦熱地方文件中重建框架容器：

創建一個 ScreenGui 對象來包含你的屏幕 UI。
1. 在資源管理器窗口中，將滑鼠懸停在 StarterGui 上並單擊 ⊕ 圖標。將顯示上下文選單。
2. 插入一個 ScreenGui。
創建一個容器來包含整個得分條 UI 元件。
1. 在 ScreenGui 對象中插入一個 Frame。
2. 選擇新的 Frame，然後在屬性窗口中，
  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。
為框架添加約束，以便其內容在小屏幕上始終清晰可見。
1. 在 ScoreBarFrame 中插入一個 UISizeConstraint 對象。
2. 選擇新的約束，然後在屬性窗口中，將 MinSize 設置為 0, 40 以確保框架的高度不會縮小到低於40像素。
為框架添加一個佈局對象，以便其內容從左到右排列並在框架的周圍垂直居中。
1. 在 ScoreBarFrame 中插入一個 UIListLayout 對象。
2. 選擇新的佈局對象，然後在屬性窗口中，
  1. 將 FillDirection 設置為 Horizontal。
  2. 將 VerticalAlignment 設置為 Center。

添加圖標

圖標是代表動作、物體或概念的符號。在體驗中使用簡單直觀的圖標，讓玩家能夠輕鬆識別你通過 UI 所傳達的信息，而不需要使用文本，因為文本可能會使屏幕變得混亂，並讓注意力從重要內容上分散。

例如，示例使用一個簡單的金色皇冠圖標來表示玩家收集到的金幣數量。這個圖標容易識別，是整個體驗中最重要的目標，並且包含最少的細節，以便在移動設備的屏幕上保持可讀性。

要在示例金礦熱地方文件中重建金色皇冠圖標：

在 ScoreBarFrame 中插入一個 ImageLabel 對象。
1. 在資源管理器窗口中，將滑鼠懸停在 ScoreBarFrame 上並單擊 ⊕ 圖標。將顯示上下文選單。
2. 插入一個 ImageLabel。
選擇新的標籤，然後在屬性窗口中，
1. 將 Image 設置為 rbxassetid://5673786644 以將圖標設置為皇冠。
2. 將 BackgroundTransparency 設置為 1 以使標籤的背景完全透明。
3. 將 LayoutOrder 設置為 1。這確保圖標在你在教學的下一部分中插入文本時，始終在框架的左到右的第一個 GuiObject。
4. 將 Size 設置為 {1.25,0},{1,0} 以擴大標籤區域超過框架的總寬度。
5. 將 SizeConstraint 設置為 RelativeYY 以使圖標的長寬比得以保持，通過隨框架的高度調整標籤的大小。

插入得分文本

得分文本記錄玩家在體驗中的分數，例如他們在比賽中獲得的點數。所有 UI 文本都必須清晰易讀，以便玩家能夠迅速理解他們在體驗中取得成功所需的信息。

例如，示例使用大文本在對比色的背景上，使其不會與背景的噪音融為一體。這對於無障礙性特別重要，因為它確保了文本在玩家穿過三維空間時仍然清晰可見，該空間可能包含與文本顏色相同的物體。

要在示例金礦熱地方文件中重建得分文本：

在 ScoreBarFrame 中插入一個 TextLabel 對象。
1. 在資源管理器窗口中，將滑鼠懸停在 ScoreBarFrame 上並單擊 ⊕ 圖標。將顯示上下文選單。
2. 插入一個 TextLabel。
選擇新的標籤，然後在屬性窗口中，
1. 將 BackgroundTransparency 設置為 1 以使標籤的背景完全透明。
2. 將 Size 設置為 {1,0},{1,0} 以將標籤擴展到整個框架（在父框架的水平和垂直方向上各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，擁有大屏幕的玩家可能無法閱讀文本或辨別圖標，而擁有小屏幕的玩家可能無法看到三維空間，因為你的 UI 元素在顯示上佔用了太多空間。

要在各種螢幕尺寸上模擬你的 UI：

在 Studio 的測試菜單中，打開設備模擬器。
在解析度下拉菜單中，選擇實際解析度。這使你能夠看到模擬設備上 UI 元素的真實解析度。
在設備下拉菜單中，從手機、平板電腦、桌面和控制台部分選擇至少一個設備。