在工作室中實現設計

*此內容是使用 AI（Beta 測試版）翻譯，可能含有錯誤。若要以英文檢視此頁面，請按一下這裡。

實施您的設計 是在 Studio 中使用內建和自訂介面元素創建您的原型的過程,並使用觸發您的介面上下文的腳本。教學的這個令人興奮的步驟是你可以看到所有設計和辛苦工作結合在一套完整且適合玩家互動的工作流程中。

使用 樣本雷射標籤體驗.rbxl 檔案作為參考，本用戶介面設計課程的此部分向您展示如何將您的 UI 規劃付之實踐，包括指引：

  • 從使用者介面資產圖庫取得資產ID，以便您重新創建樣本雷射標籤體驗的使用者介面組件。
  • 在 Studio 直接模擬各種裝置，以查看您的介面在不同屏幕和比例率上如何顯示。
  • 創建 ScreenGui 、 SurfaceGui 和 BillboardGui 對象,以在玩家的螢幕、零件表面和3D空間中顯示您的介面,分別。

在這一節查看技巧後，您可以將它們應用到自己的項目中，創建令玩家熱切期待的介面元素，幫助他們瀏覽您的體驗中可以執行的操作。

取得資產圖庫

資產庫是您可以將其添加到庫存中供快速存取和重複使用的資產集合。你在 創作者商店 使用的項目資產圖庫包括九個2D個別用戶介面元素資產，以及你在本教學部分創建的目標、爆破選擇器和玩家資訊組件的最終版本。

MultiBlaster 圖示 rbxassetid://14309094777
>

單一爆破器圖示 rbxassetid://14309094641
>

粉紅色團隊圖示 rbxassetid://14309678581
>

橢圓形 rbxassetid://14304828203
>

上下鏡形陷阱 rbxassetid://14304827304
>

綠色團隊圖示 rbxassetid://14309678701
>

褪色 rbxassetid://14304826876
>

多向淡化 rbxassetid://14304827147
>

爆破按鈕圖示 - 預設 rbxassetid://18308375067
>

爆炸按鈕圖示 - 已按下 rbxassetid://18308372597
>

十字線圖示 rbxassetid://14400935532
>

命中標記圖示 rbxassetid://14401148777
>

六邊形 rbxassetid://14462567943
>

選擇箭頭圖示 rbxassetid://14309187282
>

邊緣淡化 rbxassetid://14309518632
>

您可以在 Studio 內通過單擊下列組件中的 添加到庫存 鏈接將圖書館大部分添加到庫存中。一旦資產位於您的道具欄中，您就可以在平台上的任何項目中重複使用它們。

Final Screen UI Components

Reference the completed version of the UI designs with these 2D assets.


要將資產圖庫從你的庫存帳戶移至你的體驗：

  1. 在工具欄中，選擇 查看 標籤。

  2. 點擊 工具箱。工具箱窗口顯示。

  3. 在 工具箱 窗口中，單擊 庫存 標籤。顯示 我的模型 排序。

  4. 點擊下拉選單，然後選擇 我的包裹 排序。

  5. 點擊 最終屏幕用戶介面組件 瓷磚塊，然後在 Explorer 窗口中選擇 已完成的組件 ，然後將它們拖入 StarterGui 服務。您現在可以啟用任何最終組件來參考其設計。

模擬裝置

Studio 的 裝置模擬器 允許您測試玩家在各種裝置上如何查看和與您的介面互動。這個工具是實施過程中不可或缺的一部分，因為 Studio 中視窗的比率不一定會反映出玩家使用來存取您體驗的屏幕比率，並且您的介面必須在每個裝置上都清晰可見且可使用。

例如，如果你沒有在一系列屏幕尺寸上測試你的用戶介面，那麼大螢幕的玩家可能無法讀取你的文字或解碼你的圖示，小螢幕的玩家可能無法看到 3D 空間，因為你的用戶介面佔用了太多空間在顯示上。

要將您的畫面縮小到最小畫面尺寸：

  1. 在工具欄中，選擇 測試 標籤。

  2. 點擊 裝置 。視窗會變更以反映平均筆記型電腦的比率。

    Device button indicated in Test tab

  3. 在解析下拉選單中，選擇 實際解析度 。這樣可以讓你在模擬的裝置上查看你的 UI 元素的真實解析度。

  4. 在裝置下拉選單中，選擇具有最小畫面尺寸，玩家可以使用來存取您的體驗的裝置。雖然最好的選擇會根據您體驗支持的設備來變化，但樣本雷射標籤體驗測試使用 iPhone 4S 來驗證界面在有限屏幕空間下的外觀。

創建屏幕介面對象

要在每個玩家的畫面上顯示 UI 元素，您可以在 ScreenGui 服務中創建一個 StarterGui 對象。ScreenGui物件是屏幕上的用戶介面的主要容器，而StarterGui服務將其內容複製到每個玩家的PlayerGui容器，當他們進入體驗時。

您可以創建多個 ScreenGui 對象來組織和顯示遊玩過程中的 UI 元素群集。例如，樣本雷射標籤體驗包括五個獨立的 ScreenGui 對象，最初在玩家在體驗主要 使用者流程 期間遇到不同條件時被禁用：

  • HUDGui - 在玩家活躍於一回合時顯示體驗遊戲的關鍵信息，例如目標和每支團隊伍的總分。
  • PickABlasterGui - 當玩家開始或重新加入回合時，顯示所有爆破器選擇。
  • ForceFieldGui - 當玩家選擇爆破器時顯示六邊形網格,並且他們暫時無敵時。
  • OutStateGui - 在玩家被標記退出時，在屏幕周圍顯示黑暗邊緣。
  • 回合結果GUI - 在畫面上顯示一個黑暗覆蓋層，包含哪個團隊贏得回合的信息。

在創建 ScreenGui 物件之後，您可以根據每個容器的目的創建和自定義其子 GuiObjects 對象。為了展示，在接下追蹤的即時部分中，您將學習如何為 三類資訊 玩家實裝介面元素，以便在樣本雷射標籤體驗中取得成功。 您可以調整過程的任何部分來滿足自己體驗的規格 。

要創建一個 ScreenGui 對物件：

  1. 在 檢索器 窗口中，將鼠標懸停在 StarterGui 服務上，然後單擊 ⊕ 圖示。一個上下文菜單顯示。

  2. 插入 ScreenGui 。

  3. 根據其子 UI 元素的上下文重命名 螢幕介面 。

  4. 重複此過程以顯示每個需要在每個玩家的屏幕上顯示的 UI 元素群組。

目標用戶介面

從 設計你的布局 中採用視覺階層最佳做法後，本節教你如何實現與體驗目標相關的所有屏幕上的使用者介面元素。這組UI元素的排列位於畫面頂部，因為目標和每個團隊的點數對於如何贏得遊戲來說最具重要性。

例如，樣本提供一個客觀的使用者介面組件，玩家可以參考以了解他們需要做什麼才能在回合中取得成功。隨著玩家標記出敵方隊員並賺取分數，此組件會在標題提示中跟蹤每個團隊伍對整體目標的得分。要對所有用於追蹤點數的客戶端和伺服器腳本進行高級評論，請參閱追蹤點數在遊戲腳本編程課程中。

要準確重創樣本 雷射標籤 體驗中的目標用戶介面：

  1. 為整個組件創建一個容器。

    1. 將 框架 插入 HUDGui 對物件。

      1. 在 檢索器 窗口中，導航到 StarterGui 服務。
      2. 將鼠標懸停在其兒童 HUDGui 對物件上，然後單擊⊕圖示。一個上下文菜單顯示。
      3. 從上下文選單中插入 框架 。

    2. 選擇新的 框架 , 然後在 屬性 視窗中，

      1. 將 錨點 設置為 0.5, 0 以在框架的最中部設置框架的起點（左到右框架的 50% 和右到左框架的 0%）。
      2. 將 背景透明度 設為 1 以使框架的背景完全透明。
      3. 將 位置 設置為 {0.5, 0},{0.03, 0} 以設置屏幕頂部中央的框架(屏幕左至右的 50% 和屏幕頂部至底部的 3%，以便有一點緩沖)
      4. 將 尺寸 設為 {0.5, 0},{0.13, 0} 以便框架的元素佔用屏幕頂部的大部分（水平 50%、垂直 13%）來吸引玩家注意力。
      5. 將 名稱 設為 目標 。

    3. (可選) 將 UIAspectRatioConstraint 插入 目標 以確保標籤的比例不論玩家的畫面尺寸如何都保持相同。樣本將其 UIAspectRatioConstraint.AspectRatio 屬性設為 7 。

  2. 創建一個容器來容納目標的快捷對象。

    1. 將 框架 插入 目標 。

    2. 選擇新的 框架 , 然後在 屬性 視窗中，

      1. 將 錨點 設置為 0.5, 0 以在框架的最中部設置框架的起點（左到右框架的 50% 和右到左框架的 0%）。
      2. 將 背景透明度 設為 1 以使框架的背景完全透明。
      3. 將 位置 設為 {0.5, 0},{0, 0} 以設置容器中間的框架(50% 從左到右的父框，和 0% 從上到下的父框)。
      4. 將 尺寸 設為 {1, 0},{0.67, 0} 以便選擇的用戶介面元素佔用容器的約過半（100% 水平和 67% 垂直的父框）
      5. 將 名稱 設為 目標顯示 。

  3. 創建標題元素。

    1. 將 圖像標籤 插入 目標顯示 。

    2. 選擇 圖像標籤 ，然後在 屬性 視窗中，

      1. 將 錨點 設置為 0.5, 1 以在標籤底部中設置標籤的起點 (標籤左側到右側的 50% 和標籤頂部到底的 100%)。
      2. 將 背景透明度 設為 1 以使標籤的背景完全透明。
      3. 將 布局順序 設為 -1。
      4. 將 位置 設為 {0.5, 0},{0.34, 0} 以設置標籤靠近框架頂部中央（與父框左右的父框左右的 50% 和父框頂部到底的 34% 相同）。
      5. 將 尺寸 設為 {0.46, 0},{0.34, 0} 以擴大提示區到幾乎是父框的一半（水平上 46% 和垂直上 34% 的父框）。
      6. 將 名稱 設為標題。
      7. 將 圖像 設為 rbxassetid://14304828123 以顯示楔形。
      8. 將 圖像透明度 設為 0.15 以使標題半透明。

    3. (可選) 將 UIAspectRatioConstraint 插入 圖像標籤 以確保標籤的比例率不論玩家的畫面尺寸如何都保持相同。樣本將其 UIAspectRatioConstraint.AspectRatio 屬性設為 13.781 。

    4. 將 文字標籤 插入 標題 以顯示標題。

    5. 選擇新標籤，然後在 屬性 視窗中，

      1. 將 錨點 設置為 0.5, 0.5 以在標籤中間設置新標籤的起點（標籤左右的 50% 和標籤頂部到底的 50%）。
      2. 將 背景透明度 設為 1 以使標籤的背景完全透明。
      3. 將 位置 設為 {0.5, 0},{0.5, 0} 以將標籤移至父標籤的中間(父標籤左側到右側 50%，父標籤頂部到底部 50%)。
      4. 將 尺寸 設為 {0.62, 0},{0.55, 0} 以擴大文字空間到父標籤的一半以上（62% 水平和 55% 垂直的父標籤）。
      5. 將 名稱 設為 HeaderTextLabel 。
      6. 將 字體面 設為 蒙特塞拉特 以配合未來主義的美感。
      7. 將 重量 設為 中等 以加粗字體。
      8. 將 文字 設為 目標 。
      9. 啟用 文字縮放 。

  4. 創建提示元素。

    1. 將 圖像標籤 插入 目標顯示 。

    2. 選擇 圖像標籤 ，然後在 屬性 視窗中，

      1. 將 錨點 設置為 0.5, 1 以在標籤底部中設置標籤的起點 (標籤左側到右側的 50% 和標籤頂部到底的 100%)。
      2. 將 背景透明度 設為 1 以使標籤的背景完全透明。
      3. 將 位置 設為 {0.5, 0},{1, 0} 以將標籤移至父畫面的底部中央（父畫面左側到右側的 50% 和父畫面頂部到底的 100%）。
      4. 將 尺寸 設為 {0.89, 0},{0.66, 0} 以擴大文字空間到幾乎滿足父框的全寬度(89% 水平和 66% 垂直的父框)。
      5. 將 名稱 設為 身體 。
      6. 將 圖像 設為 rbxassetid://14304827265 以顯示上下顛倒的三角形。
      7. 將 圖像顏色3 設為 0, 0, 0 以淡化圖像為黑色。
      8. 將 圖像透明度 設為 0.3 以使標題半透明。

    3. (可選) 將 UIAspectRatioConstraint 插入 圖像標籤 以確保標籤的比例率不論玩家的畫面尺寸如何都保持相同。樣本將其 UIAspectRatioConstraint.AspectRatio 屬性設為 13.781 。

    4. 將 文字標籤 插入 身體 以顯示提示。

    5. 選擇新標籤，然後在 屬性 視窗中，

      1. 將 錨點 設置為 0.5, 0.5 以在標籤中間設置新標籤的起點（標籤左右的 50% 和標籤頂部到底的 50%）。
      2. 將 背景透明度 設為 1 以使標籤的背景完全透明。
      3. 將 位置 設為 {0.5, 0},{0.5, 0} 以將標籤移至父標籤的中間(父標籤左側到右側 50%，父標籤頂部到底部 50%)。
      4. 將 尺寸 設為 {0.85, 0},{0.39, 0} 以擴大文字空間至父標籤的一半以上（85% 水平和 39% 垂直的父標籤）。
      5. 將 名稱 設為 BodyTextLabel 。
      6. 將 字體面 設為 蒙特塞拉特 以配合未來主義的美感。
      7. 將 重量 設為 中等 以加粗字體。
      8. 將 文字顏色3 設為 255, 255, 255 以使文字對黑暗背景變白。
      9. 將 文字 設為 標籤反對玩家得分！第一支得到 %d 分的隊伍獲勝。 .
      10. 啟用 文字縮放 。

  5. 創建一個容器來容納目標的團隊計數器。

    1. 將 框架 插入 目標 。

    2. 選擇新的 框架 , 然後在 屬性 視窗中，

      1. 將 錨點 設置為 0.5, 1 以在自身底部中設置標籤的起點（左到右框架的 50% 和右到左框架的 100%）。
      2. 將 背景透明度 設為 1 以使框架的背景完全透明。
      3. 將 位置 設置為 {0.5, 0},{1, 0} 以設置容器的底部中央框架(左至右的父框架 50%，右至左的父框架 100%)。
      4. 將 尺寸 設為 {0.44, 0},{0.27, 0} ，以便選擇的用戶介面元素佔用左至右容器的約一半（水平 44% 和垂直 27% 的父框）。
      5. 將 名稱 設為 TeamPointCounter 。

  6. 為團隊計數器創建墊片。

    1. 從步驟 5 將 UIListLayout 對象插入到框中。
    2. 選擇 UI列表布局 物件，然後在 屬性窗口 中，
      1. 將 填充 設為 0.025, 0，以在未來的團隊計數器之間提供空間。
      2. 將 填充方向 設為 水平 ，以便每個團隊計數器旁邊顯示 дру дру。
      3. 將 水平校正 設為 中心 ，因此每個團隊的計數器都會對齊對方的中間。

  7. 創建綠色隊伍反擊元素。

    1. 將 圖像標籤 插入 團隊點數計數器 。

    2. 選擇 圖像標籤 ，然後在 屬性 視窗中，

      1. 將 背景透明度 設為 1 以使標籤的背景完全透明。
      2. 將 位置 設為 {0.5, 0},{1, 0} 以將標籤移至父畫面的底部中央（父畫面左側到右側的 50% 和父畫面頂部到底的 100%）。
      3. 將 尺寸 設為 {0.5, 0},{1, 0} 以擴展標籤至父框的寬度的一半（50% 水平和 100% 垂直的父框）。
      4. 將 名稱 設為 TeamACounter 。
      5. 將 圖像 設為 rbxassetid://14304826831 以顯示方向模糊。
      6. 將 圖像顏色3 設為 88, 218, 171 來染色圖像藍綠色。

    3. 配置一個自訂特性來跟蹤此標籤是綠團隊的。

      1. 在 屬性 窗口中，導航到 特性 部分，然後單擊加號圖示。一個彈出對話框顯示。
      2. 在 名稱 欄位中，輸入 團隊顏色 。
      3. 在 類型 下拉選單中，選擇 磚塊顏色 。
      4. 點擊 儲存 按鈕。
      5. 將新的 團隊顏色 屬性設為 薄荷 。

    4. 將 文字標籤 插入 團隊計數器 以顯示提示。

    5. 選擇新標籤，然後在 屬性 視窗中，

      1. 將 錨點 設置為 1, 0.5 以在右中設置新標籤的起點（標籤左到右的 100% 和標籤頂到底的 50%）。
      2. 將 背景透明度 設為 1 以使標籤的背景完全透明。
      3. 將 位置 設為 {0.95, 0},{0.5, 0} 以將標籤移至父標籤右側(從左到右的父標籤95%，從上到下的父標籤50%)。
      4. 將 尺寸 設為 {0.85, 0},{0.39, 0} 以擴大文字空間至父標籤的一半以上（85% 水平和 39% 垂直的父標籤）。
      5. 將 字體面 設為 蒙特塞拉特 以配合未來主義的美感。
      6. 將 重量 設為 粗體 以加粗字體。
      7. 將 文字顏色3 設為 255, 255, 255 以使文字對黑暗背景變白。
      8. 將 文字 設置為 - 。
      9. 啟用 文字縮放 。
      10. 將 TextXAlignment 設為 向右 。

    6. 將 UIStroke 對象插入到 文字標籤 中，然後在 屬性 窗口中，將 顏色 設為 8, 78, 52 以用深綠色輪廓描述斑點。

  8. 創建粉紅色隊伍計數元素。

    1. 複製 團隊AICounter 和其子女。

    2. 選擇重複的 團隊計數器 ，然後在 屬性 視窗中，

      1. 將 名稱 設為 TeamBCounter 。
      2. 將 圖像 設為 rbxassetid://14305849451 以在相反方向顯示方向淡化。
      3. 將 圖像顏色3 設為 255, 170, 255 來染色圖像玫瑰粉紅色。
      4. 將 團隊顏色 屬性設為 玫瑰粉紅色 。

    3. 選擇 TeamBCounter 的重複 文字標籤 兒，然後在 屬性窗口 中，

      1. 將 錨點 設置為 0, 0.5 以在左中設置新標籤的起點（標籤左側至右側的 0%，標籤頂部至底部的 50%）。
      2. 將 位置 設為 {0.05, 0},{0.5, 0} 以將標籤向其父標籤左側移動(從父標籤左側到右側 5%，從父標籤頂部到底部 50%)。
      3. 將 TextXAlignment 設為 左 。

    4. 選擇 TeamBCounter 的重複 UIStroke 兒，然後在 屬性窗口 中設置 顏色 為 158, 18, 94 來繪製衝線以深粉紅色輪廓。

  9. 在樣本 ReplicatedStorage 位置檔案中參考以下 腳本，它們會程式地更新目標提示並跟蹤團隊點數。

下列腳本需要一組模組腳本，共同設置主頭部顯示 (HUD)，包括 setObjective 和 startSyncingTeamPoints 。一旦玩家加入回合並選擇他們的爆破器，此腳本會確保所有 HUD 用戶介面元素適當顯示玩家的狀態、裝置和團隊狀態。

local Players = game:GetService("Players")



local setPlayerPortrait = require(script.setPlayerPortrait)

local setPlayerName = require(script.setPlayerName)

local startSyncingTeamColor = require(script.startSyncingTeamColor)

local setObjective = require(script.setObjective)

local setupTouchButtonAsync = require(script.setupTouchButtonAsync)

local startSyncingTeamPoints = require(script.startSyncingTeamPoints)

local disableMouseWhileGuiEnabled = require(script.disableMouseWhileGuiEnabled)

local setupHitmarker = require(script.setupHitmarker)



local localPlayer = Players.LocalPlayer

local gui = localPlayer.PlayerGui:WaitForChild("HUDGui")



setPlayerPortrait(gui)

setPlayerName(gui)

startSyncingTeamColor(gui)

setObjective(gui)

startSyncingTeamPoints(gui)

disableMouseWhileGuiEnabled(gui)

setupHitmarker(gui)

setupTouchButtonAsync(gui)

爆破器介面

從 設計你的布局 中採用視覺階層最佳做法後，本節教你如何實現與玩家發射器相關的所有屏幕上的使用者介面元素。這組化的用戶介面元素佔用屏幕空間的大部分，因為它作為聚焦點吸引玩家注意3D空間的行動，並且對於玩遊戲來說最具有重要性。

十字線

十字線是一個向玩家通知他們武器爆炸時將產生衝擊的 UI 元素。這個介面元素是第一人稱射擊體驗中不可或缺的游戏需求，因為玩家需要能夠準確瞄準他們的爆破器並標記敵方隊伍成員。

與第一人稱射擊遊戲類別中的其他體驗一樣，樣本雷射標籤體驗將瞄準線放置在屏幕中央，因此玩家在他們的虛擬人偶移動通過 3D 空間時有一個靜態物體可以專注。除了減少運動災難外，這種放置還可以讓十字線在融入整體環境的同時被感知。

要準確重創樣本 雷射標籤 體驗中的十字線：

  1. 將 圖像標籤 插入 HUDGui 對物件。

    1. 在 檢索器 窗口中，導航到 StarterGui 服務。

    2. 將鼠標懸停在其兒子 HUDGui 物件象上，然後單擊 ⊕ 圖示。一個上下文菜單顯示。

    3. 從上下文選單中插入 圖像標籤 。

  2. 選擇新的 圖像標籤 ，然後在 屬性 窗口中，

    1. 將 圖像 設置為 rbxassetid://14400935446。
    2. 將 錨點 設置為 0.5, 0.5 以在標籤中設置標籤的起點（標籤左右的 50% 和標籤頂部到底部的 50%）。
    3. 將 背景透明度 設為 1 以使標籤的背景完全透明。
    4. 將 名稱 設為 十字線 。
    5. 將 位置 設置為 {0.5,0},{0.5,0} 以設置屏幕中央的標籤。
    6. 將 縮放類型 設為 適合 以便圖像能在容器內縮放且不會在各種畫面尺寸上伸展。

  3. (可選) 將 UIAspectRatioConstraint 插入 十字線 以確保標籤的比例依然不變，無論玩家的螢幕尺寸如何。樣本將其 UIAspectRatioConstraint.AspectRatio 屬性設為 0.895 。

命中標記

命中標記是一個只有在爆炸對敵方團隊上的另一名玩家造成影響時才顯示的 UI 元素。像十字線一樣，這個用戶介面元素對第一人稱射擊體驗至關重要，因為它提供玩家標記敵人成功時的視覺反饋。

要準確重創樣本 雷射標籤 體驗中的命中標記：

  1. 將 圖像標籤 插入 十字線 對物件中。

    1. 在 檢索器 窗口中，導航到 StarterGui 服務。

    2. 將物件標懸停在其子對象 十字線 上，然後單擊 ⊕ 圖示。一個上下文菜單顯示。

    3. 從上下文選單中插入 圖像標籤 。

  2. 選擇新的 圖像標籤 ，然後在 屬性 窗口中，

    1. 將 圖像 設為 rbxassetid://14401148736 以顯示長方形命中標記圖示。
    2. 將 錨點 設為 0.5, 0.5 以在標籤中設置標籤的起點在標籤中央。
    3. 將 背景透明度 設為 1 以使標籤的背景完全透明。
    4. 將 位置 設置為 {0.5,0},{0.5,0} 以設置屏幕中央的標籤。
    5. 將 名稱 設為 命中標記 。
    6. 將 尺寸 設為 {0.6, 0},{0.06, 0} 以減少十字線周圍的長方形的尺寸。
    7. 將 圖像透明度 設置為 1，使命中標記完全透明。在下一步中的腳本每次玩家的爆炸與敵方團隊伍上的另一名玩家發生衝突時，將透明度回到 0。

  3. 在樣本 雷射標籤 位置檔案中參考以下 ReplicatedStorage 腳本，當爆炸與敵團隊玩家發生衝突時，程式性地顯示命中標記。

下列腳本需要一組模組腳本，共同設置主頭部顯示 (HUD)，包括 setupHitmarker 。一旦玩家加入回合並選擇他們的爆破器，此腳本會確保所有 HUD 用戶介面元素適當顯示玩家的狀態、裝置和團隊狀態。

local Players = game:GetService("Players")



local setPlayerPortrait = require(script.setPlayerPortrait)

local setPlayerName = require(script.setPlayerName)

local startSyncingTeamColor = require(script.startSyncingTeamColor)

local setObjective = require(script.setObjective)

local setupTouchButtonAsync = require(script.setupTouchButtonAsync)

local startSyncingTeamPoints = require(script.startSyncingTeamPoints)

local disableMouseWhileGuiEnabled = require(script.disableMouseWhileGuiEnabled)

local setupHitmarker = require(script.setupHitmarker)



local localPlayer = Players.LocalPlayer

local gui = localPlayer.PlayerGui:WaitForChild("HUDGui")



setPlayerPortrait(gui)

setPlayerName(gui)

startSyncingTeamColor(gui)

setObjective(gui)

startSyncingTeamPoints(gui)

disableMouseWhileGuiEnabled(gui)

setupHitmarker(gui)

setupTouchButtonAsync(gui)

爆破器選擇器

爆破器選擇器是玩家使用的界面元素，用於在加入或重新加入回合之前選擇爆破器類型。樣本雷射標籤體驗提供兩種類型的爆破器：一種生產寬、水平分布的多個光束，另一種生產單一光束。玩家選擇的爆破器類型會在回合期間影響他們的戰略，使此 UI 組件成為整體體驗的必要工作流程。

以下步驟詳細說明如何創建多個容器以對應不同的使用者介面元素群組、提示標題、導航和選擇按鈕以及爆破按鈕預製件。對整個組件的腳本邏輯會將不同的視覺特性填充到爆破按鈕預製中，根據 Configuration 代表每種爆破類輸入的案例。

這個設定允許您創建額外的 Configuration 實例，用於更多爆破類型，自動在爆破選擇器中正確顯示，而無需在 StarterGui.PickABlasterGui 內創建個別按鈕。

要準確重創樣本 雷射標籤 體驗中的爆破器選擇器：

  1. 為整個組件創建一個容器。

    1. 將 框架 插入 PickABlaster 物件中。

      1. 在 檢索器 窗口中，導航到 StarterGui 服務。
      2. 將物件標懸停在其子對象 PickABlaster 上，然後單擊 ⊕ 圖示。一個上下文菜單顯示。
      3. 從上下文選單中插入 框架 。

    2. 選擇新框架，然後在 屬性 窗口中，

      1. 將 錨點 設置為 0.5, 1 以在框架的底部中設置框架的起點（左到右框架的 50%，右到左框架的 100%）。
      2. 將 背景透明度 設為 1 以使框架的背景完全透明。
      3. 將 位置 設置為 {0.5, 0},{0.9, 0} 以設置屏幕的底部中央附近的框架(屏幕左側至右側的 50% 和屏幕頂部至底部的 92.4%)。
      4. 將 尺寸 設為 {0.8, 0},{0.25, 0}，以便爆破器選擇器的使用者介面元素佔用大部分屏幕，吸引玩家注意力（垂直方向 80%、水平方向 25%）。
      5. 將 名稱 設為 組件 。

    3. (可選) 將 UIAspectRatioConstraint 插入 元件 以確保框架和其子元素的UI比例不會因玩家的屏幕尺寸而變化。樣本將其 UIAspectRatioConstraint.AspectRatio 屬性設為 5 。

  2. 創建一個容器來容納 UI 元素群組。

    1. 將 框架 插入 組件 。

    2. 選擇新框架，然後在 屬性 窗口中，

      1. 將 錨點 設置為 0.5, 0.5 以在框架中間設置框架的起點（左到右框架的 50% 和右到左框架的 50%，以及框架的頂部到底部的 50%）。
      2. 將 背景透明度 設為 1 以使框架的背景完全透明。
      3. 將 位置 設為 {0.5, 0},{0.375, 0} 以設置容器頂部附近的框架(50% 從左到右的父框，和 37.5% 從上到下的父框)。
      4. 將 尺寸 設為 {1, 0},{0.75, 0} 以便選擇的 UI 元件佔用容器的 3/4 （100% 水平和 75% 垂直的父框）。
      5. 將 名稱 設為 選擇框 。

  3. 為爆破器選擇器創建提示。

    1. 將 圖像標籤 插入 選擇框 。

    2. 選擇新標籤，然後在 屬性 視窗中，

      1. 將 錨點 設置為 0.5, 1 以在標籤底部中設置標籤的起點 (標籤左側到右側的 50% 和標籤頂部到底的 100%)。
      2. 將 背景透明度 設為 1 以使標籤的背景完全透明。
      3. 將 布局順序 設為 -1。
      4. 將 位置 設為 {0.5, 0},{0.22, 0} 以設置標籤靠近框架頂部中央（與父框左右的父框左右的 50% 和父框頂部到底的 22% 相同）。
      5. 將 尺寸 設為 {0.45, 0},{0.22, 0} 以擴大提示區到幾乎是父框的一半（水平上 45% 和垂直上 22%）。
      6. 將 名稱 設為 標題 。
      7. 將 圖像 設為 rbxassetid://14304828123 以顯示楔形。
      8. 將 圖像透明度 設為 0.15 以使標題半透明。

    3. (可選) 將 UIAspectRatioConstraint 插入標籤以確保標籤的比例不論玩家的畫面尺寸如何都保持相同。樣本將其 UIAspectRatioConstraint.AspectRatio 屬性設為 13.78 。

    4. 將 文字標籤 插入 標題 以顯示提示。

    5. 選擇新標籤，然後在 屬性 視窗中，

      1. 將 錨點 設置為 0.5, 0.5 以在標籤中間設置新標籤的起點（標籤左右的 50% 和標籤頂部到底的 50%）。
      2. 將 背景透明度 設為 1 以使標籤的背景完全透明。
      3. 將 位置 設為 {0.5, 0},{0.5, 0} 以將標籤移至父標籤的中間(父標籤左側到右側 50%，父標籤頂部到底部 50%)。
      4. 將 尺寸 設為 {0.6, 0},{0.55, 0} 以擴大文字空間至父標籤的一半以上（60% 水平和 55% 垂直的父標籤）。
      5. 將 名稱 設為 HeaderTextLabel 。
      6. 將 字體面 設為 蒙特塞拉特 以配合未來主義的美感。
      7. 將 重量 設為 中等 以加粗字體。
      8. 將 文字 設為 選擇一個爆破器 。
      9. 啟用 文字縮放 。

  4. 創建容器以容納你的爆破按鈕容器和選擇箭頭。

    1. 將 圖像標籤 插入 選擇框 。

    2. 選擇新標籤，然後在 屬性 視窗中，

      1. 移除預設 圖像 值。
      2. 將 錨點 設置為 0.5, 1 以在標籤底部中設置標籤的起點 (標籤左側到右側的 50% 和標籤頂部到底的 100%)。
      3. 將 背景顏色 設為 0, 0, 0 以使標籤變黑。
      4. 將 背景透明度 設為 0.3 以減少標籤的不透明度 30%，並與體驗中的所有黑色使用者介面元素匹配。
      5. 將 位置 設置為 {0.5, 0},{1, 0} 以將標籤設置為框架的底部中間（父框左至右的 50% 和父框上至下的 100%）。
      6. 將 尺寸 設為 {1, 0},{0.77, 0} 以擴展標籤區到提示下方的空間 (100% 水平和 77% 垂直於父框)。

    3. 回合容器的角。

      1. 將 UICorner 對象插入標籤。
      2. 選擇新的角對物件，然後在 屬性 窗口中，將 角度半徑 設為 0.075, 0 來圓化角落。

  5. 創建用於您的爆破按鈕的容器。

    1. 從步驟 4 插入 框架 到標籤。

    2. 選擇新框架，然後在 屬性 窗口中，

      1. 將 錨點 設置為 0.5, 0.5 以在新框架中設置中間的起點（左到右框架的 50% 和框架頂部到底的 50%）。
      2. 將 背景透明度 設為 1 以使框架的背景完全透明。
      3. 將 位置 設為 {0.5, 0},{0.5, 0} 以設置父標籤中間的框架(50%從左到右的父框架，和50%從上到下的父框架)。
      4. 將 尺寸 設為 {0.85, 0},{0.77, 0} 以擴大框架區域到標籤的大部分（85% 水平和 77% 垂直的父標籤）。
      5. 將 名稱 設為 容器 。

  6. 為所有未來爆破按鈕創建墊片。

    1. 從步驟 5 將 UIListLayout 對象插入到框中。
    2. 選擇新布局對物件，然後在 屬性 窗口中，
      1. 將 墊子 設為 0.035, 0 來提供所有未來按鈕之間的空間。
      2. 將 填充方向 設為 水平 ，以便每個按鈕旁邊顯示。
      3. 將 水平對齊 和 垂直對齊 設為 中心 ，每個按鈕都會對另一個按鈕的中心進行對齊。

  7. 創建左側導航按鈕。

    1. 從步驟 4 插入 圖像按鈕 對象到 圖像標籤 。

    2. 選擇新按鈕，然後在 屬性 窗口中，

      1. 移除預設 圖像 值。
      2. 將 錨點 設置為 0, 0.5 以在左中設置新按鈕的起點 (從左到右按鈕的 0% 和按鈕頂部到底的 50%)。
      3. 將 背景透明度 設為 0.15，以提供按鈕可選擇的視覺反饋在漂浮時。
      4. 將 位置 設為 {0.02, 0},{0.5, 0} ，為按鈕的左側提供墊片，從其父容器左側到右側為 2%，從父標籤頂部到底部為 50%。
      5. 將 尺寸 設為 {0.04, 0},{0.33, 0} 以使選擇按鈕比爆破器按鈕小得多（水平為 4% 和垂直為 33% 的父框）。
      6. 將 名稱 設為 導航按鈕左 。

    3. 回合按鈕的角落。

      1. 將 UICorner 物件插入按鈕中。
      2. 選擇新的角對物件，然後在 屬性 窗口中，將 角度半徑 設為 0.1, 0 來圓化角落。

    4. 將 圖像標籤 對象插入按鈕。

    5. 選擇新標籤，然後在 屬性 視窗中，

      1. 將 錨點 設置為 0.5, 0.5 以在標籤中間設置新標籤的起點（標籤左右的 50% 和標籤頂部到底的 50%）。
      2. 將 位置 設置為 {0.45, 0},{0.5, 0} 以設置標籤靠近其父按鈕的中間（從左到右父按鈕的 45% 和父按鈕的頂部到底的 50%）。此值不在中間，因為箭頭不會視覺上看起來在按鈕的中間{0.5, 0},{0.5, 0}。
      3. 將 尺寸 設為 {0.8, 0},{0.8, 0} 以擴展標籤區到提示下方的空間(80% 水平和 80% 垂直的父框)。
      4. 將 背景透明度 設為 1 以使圖像的背景完全透明。
      5. 將 圖像 設置為 rbxassetid://14309187238。
      6. 將 縮放類型 設為 合適 。

  8. 創建正確的導航按鈕。

    1. 複製 導航按鈕左 。

    2. 選擇重複按鈕，然後在 屬性 視窗中，

      1. 將 錨點 設置為 1, 0.5 以在右中設置新按鈕的起點（按鈕左到右的 100% 和按鈕頂到底的 50%）。
      2. 將 位置 設為 {0.98, 0},{0.5, 0} ，為按鈕的右側提供墊片，從其父容器左側到右側為 98%，從父標籤頂部到底部為 50%。
      3. 將 名稱 設為 NavigationButtonRight 。

    3. 選擇其 圖像標籤 兒童對物件。

      1. 將 旋轉 設為 180 以翻轉圖像。
      2. 將 位置 設為 {0.55, 0},{0.5, 0} 以設置標籤靠近其父按鈕的中間（從左到右父按鈕的 55%，從上到下父按鈕的 50%）。此值不在中間，因為箭頭不會視覺上看起來在按鈕的中間{0.5, 0},{0.5, 0}。

  9. 創建 選擇 按鈕。

    1. 將 圖像按鈕 插入 組件 。注意這個過程會將選擇按鈕與 選擇框 分開，這樣您就可以在選擇按鈕與主部件之間加入墊片。

    2. 選擇新按鈕，然後在 屬性 窗口中，

      1. 移除預設 圖像 值。
      2. 將 錨點 設置為 0.5, 1 以在自身底部中設置新按鈕的起點（按鈕左側到右側的 50% 和按鈕頂部到底的 100%）。
      3. 將 背景透明度 設為 0.15，以提供按鈕可選擇的視覺反饋在漂浮時。
      4. 將 位置 設置為 {0.5, 0},{0.99, 0} 以設置容器的底部中央附近的按鈕(從左到右父畫面的左側到右側 50%，從上到下父畫面的左側到右側 99%)。
      5. 將 尺寸 設為 {0.17, 0},{0.18, 0} 以延長爆破器按鈕下方的按鈕長度(17% 水平和 18% 垂直於父框)。
      6. 將 名稱 設為 選擇按鈕 。

    3. 回合按鈕的角落。

      1. 將 UICorner 物件插入按鈕中。
      2. 選擇新的角對物件，然後在 屬性 窗口中，將 角度半徑 設為 0.2, 0 來圓化角落。

    4. 將 文字標籤 對象插入按鈕，以便您可以顯示行動呼動作。

    5. 選擇新標籤，然後在 屬性 視窗中，

      1. 將 錨點 設置為 0.5, 0.5 以在標籤中間設置新標籤的起點（標籤左右的 50% 和標籤頂部到底的 50%）。
      2. 將 背景透明度 設為 1 以使標籤的背景完全透明。
      3. 將 位置 設為 {0.5, 0},{0.5, 0} 以將標籤移至按鈕中央(從左到右父按鈕的 50%，從上到下父按鈕的 50%)。
      4. 將 尺寸 設為 {0.9, 0},{0.55, 0} 以擴展文字空間到父標籤的寬度幾乎全部（90% 水平和 55% 垂直的父標籤）。
      5. 將 名稱 設為 SelectTextLabel 。
      6. 將 字體面 設為 蒙特塞拉特 以配合未來主義的美感。
      7. 將 重量 設為 中等 以加粗字體。
      8. 將 文字 設為 選擇 。
      9. 啟用 文字縮放 。

  10. 創建一個爆破按鈕預製件。

    1. 在 複製儲存服務 中，創建文件夾結構來組織您的使用者介面對象。樣本使用兒童 Guis 文件夾的 Instances 文件夾。
    2. 將 圖像按鈕 對象插入 Guis 文件夾。
    3. 選擇新按鈕，然後在 屬性 窗口中，
      1. 移除預設 圖像 值。
      2. 將 錨點 設置為 0.5, 0.5 以在按鈕中間設置新按鈕的起點（按鈕左右的 50% 和按鈕頂部到底的 50%）。
      3. 將 背景透明度 設為 0.65，提供視覺反饋說明按鈕未在焦點上。步驟 12 中的腳本提供程序化視覺反饋，當按鈕處於焦點時。
      4. 將 布局順序 設為 2。
      5. 將 名稱 設為 BlasterButtonPrefab 。
      6. 將 尺寸 設為 {0.8, 0},{0.8, 0}。
      7. 將 圖像透明度 設為 1 以使圖像完全透明。
    4. 將 UIAspectRatioConstraint 插入 BlasterButtonPrefab 以確保按鈕的比例維持不變，無論玩家的螢幕尺寸如何，都不會影響組件內的按鈕比例。
    5. 回合按鈕的角落。
      1. 將 UICorner 物件插入 BlasterButtonPrefab 中。
      2. 選擇 UICorner ，然後在 屬性 視窗中，將 角度半徑 設為0.05, 0來回合角落。
    6. 將 圖像標籤 插入 BlasterButtonPrefab 。
    7. 選擇新標籤，然後在 屬性 視窗中，
      1. 移除預設 圖像 值。
      2. 將 錨點 設置為 0.5, 0.5 以在標籤中間設置新標籤的起點（標籤左右的 50% 和標籤頂部到底的 50%）。
      3. 將 背景透明度 設為 1 以使標籤的背景完全透明。
      4. 將 位置 設置為 {0.52, 0},{0.497, 0} 以設置標籤靠近其父按鈕的中間（從左到右父按鈕的 52%，從上到下父按鈕的 49.7%）。這個值不在中間，因為爆破器不會視覺上看起來在按鈕的中間{0.5, 0},{0.5, 0}。
      5. 將 尺寸 設為 {1.20, 0},{0.9, 0} 以擴大按鈕外的標籤區域(120% 水平和 90% 垂直於父按鈕)。
      6. 將 縮放類型 設為 合適 。

  11. 參考以下 ReplicatedStorage 腳本在樣本 雷射標籤 位置檔案中，程式動態顯示每個發射器的按鈕，當玩家選擇一個未在焦點上的按鈕時，縮放按鈕，並將玩家的發射器選擇附加到他們的虛擬人偶上。

下面的腳本需要一組互相工作的腳本來創建爆破選擇器。當玩家加入體驗或在生命值達到零後重生到回合中時，此腳本會啟用所有爆破器選擇器的使用者介面元素，直到玩家做出選擇為止。

local Players = game:GetService("Players")

local ReplicatedStorage = game:GetService("ReplicatedStorage")



local GuiAttribute = require(ReplicatedStorage.GuiAttribute)

local setupBlasterButtons = require(script.setupBlasterButtons)

local connectResetSelectionOnEnabled = require(script.connectResetSelectionOnEnabled)



local localPlayer = Players.LocalPlayer

local gui = localPlayer.PlayerGui:WaitForChild("PickABlasterGui")



setupBlasterButtons(gui)

connectResetSelectionOnEnabled(gui)

gui:SetAttribute(GuiAttribute.selectedIndex, 1)

爆破按鈕

爆破按鈕是玩家使用來爆破他們的爆破器的界面元件，如果他們通過手機或平板電裝置存取體驗。樣本雷射標籤體驗使用具有瞄準線和爆炸圖示的啟動按鈕來傳達按鈕的功能，而不需要文字。

要準確重創樣本 雷射標籤 體驗中的爆破按鈕：

  1. 將 圖像按鈕 插入 HUDGui 對物件。

    1. 在 檢索器 窗口中，導航到 StarterGui 服務。

    2. 將鼠標懸停在其兒子 HUDGui 物件象上，然後單擊 ⊕ 圖示。一個上下文菜單顯示。

    3. 從上下文選單中插入 圖像按鈕 。

  2. 在視角中，將按鈕移動到玩家的拇指自然停止的位置，然後在 屬性 視窗中，

    1. 將 圖像 設置為 rbxassetid://18308375035 以顯示爆炸按鈕圖示。
    2. 將 壓縮圖像 設置為 rbxassetid://18308372558 顯示玩家按下按鈕時反轉爆炸按鈕圖示的版本。
    3. 將 背景透明度 設為 1 以使標籤的背景完全透明。
    4. 將 名稱 設為 爆破按鈕 。
    5. 將 縮放類型 設為 適合 以便圖像能在容器內縮放且不會在各種畫面尺寸上伸展。
    6. 將 圖像透明度 設置為 0.3 以減少標籤的不透明度，使其與體驗中所有的黑色用戶介面元素匹配。

  3. 將 UIAspectRatioConstraint 插入 爆破按鈕 以確保按鈕的比例不論玩家的畫面尺寸如何都保持相同。

  4. 在樣本 雷射標籤 位置檔案中參考以下 ReplicatedStorage 腳本，當玩家使用裝置上的觸控輸入時顯示爆破按鈕。

下列腳本需要一組模組腳本，共同設置主頭部顯示 (HUD)，包括 setupTouchButtonAsync 。一旦玩家加入回合並選擇他們的爆破器，此腳本會確保所有 HUD 用戶介面元素適當顯示玩家的狀態、裝置和團隊狀態。

local Players = game:GetService("Players")



local setPlayerPortrait = require(script.setPlayerPortrait)

local setPlayerName = require(script.setPlayerName)

local startSyncingTeamColor = require(script.startSyncingTeamColor)

local setObjective = require(script.setObjective)

local setupTouchButtonAsync = require(script.setupTouchButtonAsync)

local startSyncingTeamPoints = require(script.startSyncingTeamPoints)

local disableMouseWhileGuiEnabled = require(script.disableMouseWhileGuiEnabled)

local setupHitmarker = require(script.setupHitmarker)



local localPlayer = Players.LocalPlayer

local gui = localPlayer.PlayerGui:WaitForChild("HUDGui")



setPlayerPortrait(gui)

setPlayerName(gui)

startSyncingTeamColor(gui)

setObjective(gui)

startSyncingTeamPoints(gui)

disableMouseWhileGuiEnabled(gui)

setupHitmarker(gui)

setupTouchButtonAsync(gui)

玩家介面

從 設計你的布局 中採用視覺階層最佳做法後，本節教你如何實現與玩家狀態相關的所有在屏幕上的使用者介面元素。這組UI元素的排列處於屏幕側邊，因為玩家可以在沒有分散注意力的情況下理解這些 peripheral信息。

玩家指示器

玩家指示器是一個用戶介面組件，玩家可以快速解釋他們屬於哪個團隊，只要他們生成在自己團隊的生成區域。樣本雷射標籤體驗提供兩種版本的玩家指示器，取決於玩家是在 綠色 或 粉紅色 團隊上。

綠隊
>

粉紅隊
>

根據 選擇顏色主題 的指導，玩家指示器的兩個版本都會將團隊顏色與獨特、簡單的圖示結合，以便在小型螢幕上保持可讀性。提供兩種視覺反饋形式很重要，因為它有助於保持對患有色盲症的玩家設計的可訪問性。

要準確重創樣本 雷射標籤 體驗中的玩家指示器組件：

  1. 將 框架 插入 HUDGui 對物件。

    1. 在 檢索器 窗口中，導航到 StarterGui 服務。
    2. 將鼠標懸停在其兒童 HUDGui 對物件上，然後單擊⊕圖示。一個上下文菜單顯示。
    3. 從上下文選單中插入 框架 。

  2. 選擇新的 框架 , 然後在 屬性 視窗中，

    1. 將 錨點 設置為 0, 1 以在框架的底部中設置框架的起點 (從左到右框架的左到右 0%，從上到下框架的上到下 100%)。

    2. 將 背景透明度 設為 1 以使標籤的背景完全透明。

    3. 將 名稱 設為 PlayerDisplay 。

    4. 將 位置 設置為 {0.02, 0},{0.97, 0} 以設置屏幕左下角的框架。

    5. 將 尺寸 設為 {0.23, 0},{0.08, 0} 以縮短和擴大框架。

    6. 啟用 ClipsDescendants 以修剪超出框架的兒童 GuiObject。

  3. 創建多邊形狀。

    1. 將 圖像標籤 插入 玩家顯示 。

    2. 選擇新標籤，然後在 屬性 視窗中，

      1. 將 圖像 設為 rbxassetid://14304828123 以顯示楔形圖示。
      2. 將 錨點 設置為 1, 1 以在右下角設置標籤的起點（標籤左至右的 100%，右至左的 100%，標籤頂部至底部的 100%）。
      3. 將 背景透明度 設為 1 以使標籤的背景完全透明。
      4. 將 名稱 設為 區塊 。
      5. 將 位置 設置為 {1,0},{1,0} 以將標籤設置為框架右側。
      6. 將 尺寸 設為 {1.858, 0},{0.581, 0} 以擴大標籤在框架之外，並將其縮短到框架長度的一半以下。
      7. 將 圖像透明度 設為 0.15 以使標籤稍微透明。
      8. 將 縮放類型 設為 適合 以便圖像能在容器內縮放且不會在各種畫面尺寸上伸展。
      1. 將 UIAspectRatioConstraint 插入 區塊 以確保標籤和其子標籤的 UI 元素之間的比例維持不變，無論玩家的螢幕尺寸如何。
      2. 選擇新限制式，然後在 屬性 窗口中，將 側面比率 設為 13.78。

  4. 創建玩家的直放像盒。

    1. 將 圖像標籤 插入 玩家顯示 。

    2. 選擇新標籤，然後在 屬性 視窗中，

      1. 移除 圖像 屬性內的暫時資產ID。在步驟 7 中，腳本會程式atically將玩家的肖像插入圖像標籤。
      2. 將 錨點 設置為 0, 1 以在左下角設置標籤的起點 (從左到右標籤的 0%，從上到下標籤的 100%)。
      3. 將 背景顏色3 設為 0, 0, 0 以將標籤的背景顏色設為黑色。
      4. 將 背景透明度 設為 0.3 以減少標籤的不透明度 30%，並與體驗中的所有黑色使用者介面元素匹配。
      5. 將 名稱 設為 PlayerPortrait 。
      6. 將 位置 設為 {0.11, 0},{1, 0} 以將標籤設為多邊形狀的左側。
      7. 將 尺寸 設為 {0.23, 0},{1, 0} 以縮小標籤。
      8. 將 圖像透明度 設為 0.15 以使標籤稍微透明。
      9. 將 縮放類型 設為 適合 以便圖像能在容器內縮放且不會在各種畫面尺寸上伸展。
      1. 將 UI視角比例限制 插入 玩家肖像 以確保標籤和其子介面元素的比例維持不變，無論玩家的螢幕尺寸如何。
      2. 將 UICorner 插入 PlayerPortrait ，然後在 屬性 窗口中設置 角度半徑 為 0.05, 0 稍微圓化角落。

  5. 創建玩家名稱的文字標籤。

    1. 將 文字標籤 對象插入 玩家顯示 。

    2. 選擇新標籤，然後在 屬性 視窗中，

      1. 將 錨點 設置為 0, 0.5 以在左中設置新按鈕的起點 (從左到右按鈕的 0% 和按鈕頂部到底的 50%)。
      2. 將 背景透明度 設為 1 以使標籤的背景完全透明。
      3. 將 名稱 設為 PlayerNameTextLabel 。
      4. 將 位置 設為 {0.35, 0},{0.72, 0} 以將標籤設為容器右側(從左到右的父標籤的 35%，從上到下的父標籤的 72%)。
      5. 將 尺寸 設為 {0.52, 0},{0.3, 0} 以便文字佔用大部分的多邊形狀區域（52% 水平和 30% 垂直於父框）。
      6. 將 字體面 設為 蒙特塞拉特 以配合未來主義的美感。
      7. 將 重量 設為 粗體 以加粗字體。
      8. 在 文字 屬性內移除暫時文字。第 7 步的腳本會程式atically將玩家的名稱插入文字標籤。
      9. 啟用 文字縮放 。
      10. 將 TextXAlignment 設為 左 。

  6. 創建顯示在玩家直放像左側的團隊圖示和顏色。

    1. 將 文件夾 插入 PlayerDisplay ，然後重命名為 團隊圖示 。

    2. 創建 綠色 團隊圖示和顏色。

      1. 將 圖像標籤 插入 團隊圖示 。
      2. 選擇新標籤，然後在 屬性 視窗中，
        1. 將 錨點 設置為 0, 1 以在左下角設置標籤的起點 (從左到右標籤的 0%，從上到下標籤的 100%)。
        2. 將 背景顏色3 設為 88, 218, 171 以設置標籤的背景顏色為薄荷綠。
        3. 將 名稱 設為 TeamAIcon 。
        4. 將 位置 設置為 {0, 0},{1, 0} 以將標籤設置為框架左側。
        5. 將 尺寸 設為 {0.135, 0},{0.58, 0} 以將標籤縮小到玩家直放像左側
        6. 將 圖像透明度 設為 1 以使標籤透明。
      1. 配置一個自訂特性來跟蹤此標籤是綠團隊的。這一步對於步驟 7 中的腳本非常重要。
        1. 在 屬性 窗口中，導航到 特性 部分，然後單擊加號圖示。一個彈出對話框顯示。
        2. 在 名稱 欄位中，輸入 團隊顏色 。
        3. 在 類型 下拉選單中，選擇 磚塊顏色 。
        4. 點擊 儲存 按鈕。
        5. 將新的 團隊顏色 屬性設為 薄荷 。
      2. 將 UIAspectRatioConstraint 插入 TeamAIcon 以確保標籤和其子介面元素的比例仍然不變，無論玩家的螢幕尺寸如何。
      3. 創建圖示。
        1. 將 圖像標籤 插入 團隊A圖示 。
        2. 選擇新標籤，然後在 屬性 視窗中，
          1. 將 圖像 設置為 rbxassetid://14309678670 以顯示綠色隊伍圖示。
          2. 將 錨點 設置為 0.5, 0.5 以在標籤中間設置標籤的起點 (標籤左右的 50% 到右，標籤頂部到底的 50%)。
          3. 將 背景透明度 設為 1 以使標籤的背景完全透明。
          4. 將 名稱 設為 圖示 。
          5. 將 位置 設為 {0.5, 0},{0.5, 0} 以將標籤設為其父標籤的中間。
          6. 將 尺寸 設為 {0.7, 0},{0.6, 0} 以縮小標籤。
          7. 將 縮放類型 設為 適合 以便圖像能在容器內縮放且不會在各種畫面尺寸上伸展。

    3. 創建 粉色 團隊圖示和顏色。

      1. 複製 團隊AIcon 和其子女。
      2. 選擇重複的 團隊AIcon ，然後在 屬性 視窗中，
        1. 將 背景顏色3 設為 255, 170, 255 將標籤的背景顏色設為玫瑰粉紅色。
        2. 將 名稱 設為 TeamBIcon 。
        3. 將 團隊顏色 屬性設為 玫瑰粉紅色 。
        4. 選擇 團隊圖示 重複的子 TeamBIcon ，然後在 屬性 視窗中，將 圖像 設置為 rbxassetid://14309678549。

  7. 在樣本 激光標籤 位置檔案中參考以下 腳本，顯示程式動態顯示玩家指示器與適當的團隊顏色和圖示，當玩家在回合中活動時。

下列腳本需要一組模組腳本，共同設置主頭部顯示 (HUD)，包括 startSyncingTeamColor、setPlayerName 和 setPlayerPortrait。一旦玩家加入回合並選擇他們的爆破器，此腳本會確保所有 HUD 用戶介面元素適當顯示玩家的狀態、裝置和團隊狀態。

local Players = game:GetService("Players")



local setPlayerPortrait = require(script.setPlayerPortrait)

local setPlayerName = require(script.setPlayerName)

local startSyncingTeamColor = require(script.startSyncingTeamColor)

local setObjective = require(script.setObjective)

local setupTouchButtonAsync = require(script.setupTouchButtonAsync)

local startSyncingTeamPoints = require(script.startSyncingTeamPoints)

local disableMouseWhileGuiEnabled = require(script.disableMouseWhileGuiEnabled)

local setupHitmarker = require(script.setupHitmarker)



local localPlayer = Players.LocalPlayer

local gui = localPlayer.PlayerGui:WaitForChild("HUDGui")



setPlayerPortrait(gui)

setPlayerName(gui)

startSyncingTeamColor(gui)

setObjective(gui)

startSyncingTeamPoints(gui)

disableMouseWhileGuiEnabled(gui)

setupHitmarker(gui)

setupTouchButtonAsync(gui)

力場畫面

力場畫面是一個用於覆蓋視區以通知玩家他們在加入或重新加入回合時安全免於敵方團體射擊的用戶介面元素。遵循 從選擇一種藝術風格 的圖示美感指南後，樣本激光標籤體驗使用半透明的六邊形模式來象徵力場。這個設計決定不僅強化體驗中所有介面的未來風藝術風格，還會無文字或額外指引地傳達玩家的狀態。

要準確重創樣本 雷射標籤 體驗中的力場螢幕：

  1. 將 圖像標籤 插入 ForceFieldGui 對物件。

    1. 在 檢索器 窗口中，導航到 StarterGui 服務。

    2. 將物件標懸停在其子對象 ForceFieldGui 上，然後單擊 ⊕ 圖示。一個上下文菜單顯示。

    3. 從上下文選單中插入 圖像標籤 。

  2. 選擇新標籤，然後在 屬性 視窗中，

    1. 將 圖像 設置為 rbxassetid://14462567888。

    2. 將 背景透明度 設為 0.8 以使力場變得透明。

    3. 將 尺寸 設為 {1, 0},{1, 0} 以使圖像填滿整個屏幕(100%水平和100%垂直的父屏幕GUI)。

    4. 將 縮放類型 設為 瓷磚 ，將六邊形瓷磚擴展到整個畫面。

    5. 將 磚格尺寸 設置為 {0, 104},{0, 180}。

  3. 將 UIGradient 對象插入標籤。

  4. 選擇新的傾斜對物件，然後在 屬性 視窗中，

    1. 將 顏色 設為從藍色開始的顏色順序，然後變白，再變藍色。

      1. 將 顏色 設為 120, 192, 250 以應用淺藍色色調給所有六邊形。

      2. 點擊 顏色 屬性，然後點擊 ⋯ 按鈕。一個顏色順序彈出窗口顯示。

        顏色順序底軸上的每個三角形是決定圖像左到右那一點的顏色值的關鍵點。

      3. 按一下並拖曳顏色順序，直到您達到 時間 值的 ，然後單擊顏色旁邊的小正方形以開啟 顏色 彈出窗口。

      4. 選擇明亮的白色，然後關閉彈出窗口。

      5. 點擊並拖動顏色順序，直到你達到 時間 值的 0.95 ，然後再次打開 顏色 彈出窗口，選擇與之前相同的白色。

    2. 將 旋轉 設為 225，以在左上角和右下角顯示您色順序的藍色部分。

    3. 將 透明度 設為一個數字順序，讓力場看起來像在閃爍。

      1. 點擊 透明 屬性，然後點擊 ⋯ 按鈕。數字順序彈出顯示。數字順序的開始和結束每個方塊是決定在那一點圖像從左到右透明值的資產的關鍵點。

      2. 在數字順序中設置以下時間和值屬性：

      • 時間 = 0， 值 = 0.25
      • 時間 = .101， 值 = 0.875
      • 時間 = .183， 值 = 0
      • 時間 = .3， 值 = 1
      • 時間 = .7， 值 = 1
      • 時間 = 1， 值 = 0.9

  5. 從第 2 步複製 圖像標籤 。

  6. 在重複標籤內選擇 UIGradient 對象，然後在 屬性 視窗中，

    1. 將 旋轉 設為 -45 以翻轉圖像，使其幾乎鏡像地沿 Y 軸移動。

    2. 修改 透明度 以使閃光看起來更有機。

      1. 點擊 透明 屬性，然後點擊 ⋯ 按鈕。數字順序彈出顯示。
      2. 選擇第三個關鍵格,然後點擊 刪除 按鈕。

  7. 在樣本 激光標籤 位置檔案中參考以下 ReplicatedStorage 腳本，在玩家加入或重新加入一回合時顯示力場屏幕。

下列 ReplicatedStorage.ForceFieldClientVisuals 客戶端腳本會將預設 ForceField 視覺替換為 StarterGui.ForceFieldGui 。當玩家載入體驗並在SpawnLocation上生成擁有大於0的Duration屬性時，每個體驗的預設行為是為每個玩家提供一個保護藍色球體，暫時防止他們失去生命值。

這個腳本首先聆聽當 被添加到角色時，停用預設第一人稱力場視覺效果，然後啟用 ForceFieldGui 對物件。請注意，這不會在玩家看到其他玩家重生回體驗時影響第三人稱視覺效果。

First-person force field visuals include a futuristic hexagonal grid on the perimeter of the screen.

第一人稱力場視覺
>

Third-person force field visuals include a blue sparkling orb around the player spawning into the experience.

第三人稱力場視覺
>

local Players = game:GetService("Players")



local localPlayer = Players.LocalPlayer



local function onCharacterAddedAsync(character: Model)

	local forceField = character:WaitForChild("ForceField", 3)

	if not forceField then

		-- 如果玩家在啟用了力場的生成點重生時，力場被禁用

		return

	end



	forceField.Visible = false

	localPlayer.PlayerGui:WaitForChild("ForceFieldGui").Enabled = true

	forceField.Destroying:Wait()

	localPlayer.PlayerGui.ForceFieldGui.Enabled = false

end



if localPlayer.Character then

	onCharacterAddedAsync(localPlayer.Character)

end



localPlayer.CharacterAdded:Connect(onCharacterAddedAsync)

重生螢幕

重生畫面是一個用於降低視窗亮度通知玩家他們已被標記出來，並且伺服器正在嘗試將他們重新帶回到他們的生成區的 UI 元素。這個介面元素很重要，因為它給玩家時間來處理他們被標籤退出的情況，並在他們重新加入活動回合之前策劃下一步。

有關樣本雷射標籤體驗中自訂重生行為的更多資訊，請參閱重生角色從遊戲腳本編程課程。

要準確重新創建樣本 雷射標籤 體驗中的重生屏幕：

  1. 創建中心資訊橫幅。

    1. 將 圖像標籤 插入 OutStateGui 對物件。

      1. 在 檢索器 窗口中，導航到 StarterGui 服務。

      2. 將物件標懸停在其子對象 OutStateGui 上，然後單擊 ⊕ 圖示。一個上下文菜單顯示。

      3. 從上下文選單中插入 圖像標籤 。

    2. 選擇新標籤，然後在 屬性 視窗中，

      1. 將 錨點 設置為 0.5, 0.5 以在自身中間設置新按鈕的起點（標籤左右的 50% 和標籤頂部到底的 50%）。

      2. 將 背景透明度 設為 1 以使標籤的背景完全透明。

      3. 將 位置 設置為 {0.5, 0},{0.5, 0} 以設置容器中間的標籤(來自父畫面的左到右50%，來自父畫面的上到下50%)。

      4. 將 尺寸 設為 {0.48, 0},{0.06, 0} 以擴展標籤(48% 水平和 6% 垂直的父 ScreenGui)

      5. 將 名稱 設為 區塊 。

      6. 將 圖像 設為 rbxassetid://14304827265 以使圖像變為橢圓形。

      7. 將 圖像顏色 設為 0,0,0 以使三角形變黑。

      8. 將 圖像透明度 設置為 0.3，以減少標籤的不透明度 30%，並與體驗中的所有黑色使用者介面元素匹配。

    3. 將 UIAspectRatioConstraint 插入 區塊 以確保標籤和其子標籤的 UI 元素之間的比例維持不變，無論玩家的螢幕尺寸如何。

    4. 選擇新限制式，然後在 屬性 窗口中，將 側面比率 設為 13.78。

    5. 將 文字標籤 插入 方塊 以獲得資訊文字。

    6. 選擇新標籤，然後在 屬性 視窗中，

      1. 將 錨點 設置為 0.5, 0.5 以在標籤中間設置標籤的起點 (標籤左右的 50% 到右，標籤頂部到底的 50%)。

      2. 將 背景透明度 設為 1 以使標籤的背景完全透明。

      3. 將 位置 設為 {0.5, 0},{0.5, 0} 以設置標籤在其父標籤中間(從左到右父標籤的50%，從上到下父標籤的50%)。

      4. 將 尺寸 設為 {.85, 0},{0.55, 0} 以便文字佔用大部分的橢圓區域（85% 水平和 55% 垂直於父標籤）。

      5. 將 名稱 設為 BodyTextLabel 。

      6. 將 字體面 設為 蒙特塞拉特 以配合未來主義的美感。

      7. 將 重量 設為 粗體 以加粗字體。

      8. 將 文字 設為 重生… 。

      9. 將 文字顏色3 設為 255, 255, 255 以使文字變白。

      10. 啟用 文字縮放 。

  2. 創建標題。

    1. 將 圖像標籤 插入 區塊 。

    2. 選擇新標籤，然後在 屬性 視窗中，

      1. 將 錨點 設置為 0.5, 1 以在標籤底部中設置標籤的起點 (標籤左側到右側的 50% 和標籤頂部到底的 100%)。

      2. 將 背景透明度 設為 1 以使標籤的背景完全透明。

      3. 將 位置 設為 {0.5, 0},{0, 0} 以在父標籤的顶中設置標籤(父標籤左至右的50%，父標籤頂至底的0%)。

      4. 將 尺寸 設為 {0.46, 0},{0.56, 0} 以擴大標籤(水平上46%和垂直上56%的父標籤)

      5. 將 名稱 設為 標題 。

      6. 將 圖像 設為 rbxassetid://14304826985，使圖像成為多向淡化。

      7. 將 圖像顏色 設置為 245, 46, 46 以將淡化的紅色變成代表玩家暫時不活躍的標誌。

    3. 將 文字標籤 插入 標題 以獲得資訊文字。

    4. 選擇新標籤，然後在 屬性 視窗中，

      1. 將 錨點 設置為 0.5, 0.5 以在標籤中間設置標籤的起點 (標籤左右的 50% 到右，標籤頂部到底的 50%)。

      2. 將 背景透明度 設為 1 以使標籤的背景完全透明。

      3. 將 位置 設為 {0.5, 0},{0.5, 0} 以設置標籤在其父標籤中間(從左到右父標籤的50%，從上到下父標籤的50%)。

      4. 將 尺寸 設為 》，以便文字佔用大部分淡化區域（85% 水平和 55% 垂直於父標籤）。

      5. 將 名稱 設為 HeaderTextLabel 。

      6. 將 字體面 設為 蒙特塞拉特 以配合未來主義的美感。

      7. 將 重量 設為 黑色 以加粗字體。

      8. 將 文字 設為 標記 - 你被淘汰了！ 9. 將 文字顏色3 設為 255, 255, 255 以使文字變白。

      9. 啟用 文字縮放 。

  3. 創建屏幕邊緣的淡化效果。

    1. 將 圖像標籤 插入 OutStateGui 。
    2. 選擇新標籤，然後在 屬性 視窗中，
      1. 將 錨點 設置為 0.5, 0.5 以在標籤中間設置標籤的起點 (標籤左右的 50% 到右，標籤頂部到底的 50%)。
      2. 將 背景顏色3 設為 0,0,0 以將標籤的背景顏色設為黑色。
      3. 將 背景透明度 設為 0.5，使標籤的背景透明一半。
      4. 將 位置 設為 {0.5, 0},{0.5, 0} 以在容器中設置標籤(50% 從左到右的父 ScreenGui 和 50% 從上到下的父 ScreenGui)。
      5. 將 尺寸 設為 {1, 0},{1, 0} 以擴展標籤到整個屏幕(100% 水平和 100% 垂直於父 ScreenGui)。
      6. 將 ZIndex 設為 -1 以顯示其他介面元素後方的淡化效果。
      7. 將 名稱 設為 標題 。
      8. 將 圖像 設為 rbxassetid://14309518613 以使圖像變為淡化邊緣。
      9. 將 圖像透明度 設為 0.1 以使淡化稍微透明。

  4. 在樣本 Laser Tag 位置檔案中參考以下 腳本，當玩家的生命值達到零時，程式性地顯示重生屏幕，他們正在回到團隊的重生區域。

下列 ReplicatedStorage.PlayerStateHandler 客戶端腳本包含能夠根據 playerState 屬性觸發不同類型行為的功能。所有事件回應在此腳本中被邏輯地組合在一起，因為它們需要啟用或禁用玩家控制、相機移動和哪個使用者介面層是可見的相同行為。

當玩家的生命值達到零時,他們的playerState變成TaggedOut,這會觸發onTaggedOut()功能。onTaggedOut() 立即啟動以下行為：

  • 玩家無法在競技場移動。
  • 玩家無法移動相攝影機。
  • 玩家無法使用他們的爆破器。
  • StarterGui.OutStateGui 變得獨家啟用。

當玩家重生時,其playerState變成SelectingBlaster,這會觸發onSelectingBlaster()功能。onSelectingBlaster() 然後獨家啟用 StarterGui.PickABlasterGui，這會自動禁用重生屏幕。有關這些條件的更多信息，請參閱 處理客戶端狀態 從遊戲腳本教學課程中。

local ReplicatedStorage = game:GetService("ReplicatedStorage")

local Players = game:GetService("Players")



local PlayerState = require(ReplicatedStorage.PlayerState)

local PlayerAttribute = require(ReplicatedStorage.PlayerAttribute)

local BlasterState = require(ReplicatedStorage.Blaster.BlasterState)

local togglePlayerMovement = require(script.togglePlayerMovement)

local togglePlayerCamera = require(script.togglePlayerCamera)

local scheduleDestroyForceField = require(ReplicatedStorage.scheduleDestroyForceField)



local localPlayer = Players.LocalPlayer



local playerGui = localPlayer.PlayerGui

local guiLayers = {

	playerGui:WaitForChild("HUDGui"),

	playerGui:WaitForChild("OutStateGui"),

	playerGui:WaitForChild("PickABlasterGui"),

}



-- 停用所有 UI 層，除了指定的例外

local function setGuiExclusivelyEnabled(enabledGui: ScreenGui?)

	-- GUI層包含一個列表，列出應專屬設置的GUI。

	for _, screenGui in guiLayers do

		screenGui.Enabled = screenGui == enabledGui

	end

end



local function onSelectingBlaster()

	-- 啟用相機，讓玩家在選擇爆破器時可以四處看看

	togglePlayerCamera(true)

	togglePlayerMovement(false)

	setGuiExclusivelyEnabled(playerGui.PickABlasterGui)



	-- 在選擇爆破器時停用爆破器

	localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Disabled)

end



local function onPlaying()

	-- 在選擇爆破器之後啟用玩家移動

	togglePlayerMovement(true)

	setGuiExclusivelyEnabled(playerGui.HUDGui)



	-- 在遊戲期間啟用爆破器

	localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Ready)



	-- 當玩家開始遊戲時，預定摧毀力場邏輯

	scheduleDestroyForceField()

end



local function onTaggedOut()

	-- 在標記時停用控件

	togglePlayerMovement(false)

	togglePlayerCamera(false)

	setGuiExclusivelyEnabled(playerGui.OutStateGui)



	-- 在標記時停用爆破器

	localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Disabled)

end



local function onInLobby()

	-- 在大廳中啟用控件

	togglePlayerMovement(true)

	togglePlayerCamera(true)



	-- 在大廳期間隱藏所有 HUD

	setGuiExclusivelyEnabled(nil)



	-- 在大廳中停用爆破器

	localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Disabled)

end



local function onPlayerStateChanged(newPlayerState: string)

	if newPlayerState == PlayerState.SelectingBlaster then

		onSelectingBlaster()

	elseif newPlayerState == PlayerState.Playing then

		onPlaying()

	elseif newPlayerState == PlayerState.TaggedOut then

		onTaggedOut()

	elseif newPlayerState == PlayerState.InLobby then

		onInLobby()

	else

		warn(`Invalid player state ({newPlayerState})`)

	end

end



-- 如果設定，處理初始玩家狀態

local initialPlayerState = localPlayer:GetAttribute(PlayerAttribute.playerState)

onPlayerStateChanged(initialPlayerState)



local function updateFromPlayerState()

	onPlayerStateChanged(localPlayer:GetAttribute(PlayerAttribute.playerState))

end



-- 處理未來玩家狀態更新

localPlayer:GetAttributeChangedSignal(PlayerAttribute.playerState):Connect(updateFromPlayerState)



-- 確保變更在重生後仍然適用

localPlayer.CharacterAdded:Connect(updateFromPlayerState)

創建SurfaceGui對象

若要在 3D 空間上顯示介面對應每個個人玩家的腳本邏輯的部分表面，你可以將 對象傳送到你想在 服務中顯示介面的部分。這種技術確保您的介面和其腳本邏輯對服務器和每個玩家的客戶端都可用。

SurfaceGui 物件包含所有顯示在零件表面的 3D 空間上的 GuiObjects 內容。樣本雷射標籤體驗只包含一個 SurfaceGui 對象的實例：顯示在每個玩家的發射器上的冷卻時間計數器。這個對象需要每個玩家的腳本邏輯，因為它會主動回應每個玩家的輸入，並提供視覺反饋，當他們可以再次爆炸他們的爆炸器時。

要創建一個 SurfaceGui 對物件：

  1. 在 檢索器 窗口中，將鼠標懸停在 ReplicatedStorage 服務上，然後單擊 ⊕ 圖示。一個上下文菜單顯示。

  2. 從上下文選單中插入 零件 對物件。

  3. 插入 ScreenGui 對象到零件中。

  4. 根據其子 UI 元素的上下文重命名 面板控件 。

  5. 重複此過程以顯示在零件表面的 3D 空間上需要顯示的每個介面元素。

冷卻計時器

冷卻計是一個向玩家通知他們必須等待多久才能再次爆破他們的爆破器的 UI 組件。這短暫的暫停會讓玩家無法像點擊或按下按鈕那樣快速爆炸，這對於雷射標籤遊玩來說是不切實際的。

要準確重創樣本 雷射標籤 體驗中的冷卻計時器：

  1. 創建零件以容納您的 SurfaceGui 對物件。

    1. 在 檢索器 窗口中，將鼠標懸停在 工作區 上，然後單擊 ⊕ 圖示。一個上下文菜單顯示。
    2. 從上下文選單中插入 方塊 部分。這是零件的暫時位置，因此您可以在過程的每一步中視覺化變更。

  2. 位置和定向零件，以玩家角色將持有爆破器的位置為中心，然後在 屬性 視窗中，

    1. 將 透明度 設為 1 以使零件完全透明。

    2. 將 名稱 設為 冷卻條預製 。

    3. 將 尺寸 設為 0.169, 0.027, 2.537 以將零件縮放到與發射器長度相近的尺寸。

    4. 停用 可碰撞 和 可查詢 。

  3. 將 SurfaceGui 插入 冷卻條預製 中。

  4. 選擇新的 SurfaceGui ，然後在 屬性 窗口中，

    1. 將 面 設為 頂部 ，因此 UI 會顯示朝上。

    2. 將 光影響 和 最大距離 設置為 0 。

    3. 將 每個學生的像素數 設為 200。

  5. 創建黑色條。

    1. 將 圖像標籤 插入 表面GUI 。

    2. 選擇新標籤，然後在 屬性 視窗中，

      1. 移除預設 圖像 值。
      2. 將 錨點 設置為 0.5, 0.5 以在標籤中間設置標籤的起點 (標籤左右的 50% 到右，標籤頂部到底的 50%)。
      3. 將 背景顏色3 設為 0,0,0 以將標籤的背景顏色設為黑色。
      4. 將 背景透明度 設為 0.4 以使標籤的背景半透明。
      5. 將 位置 設為 {0.5, 0},{0.5, 0} 以在容器中設置標籤(50% 從左到右的父 SurfaceGui 和 50% 從上到下的父 SurfaceGui)。
      6. 將 尺寸 設為 {1, 0},{1, 0} 以擴展標籤到整個部分 (100% 水平和 100% 垂直的父 SurfaceGui)
      7. 將 名稱 設為 容器 。

  6. 回合容器的角。

    1. 將 UICorner 物件插入 容器 。

    2. 選擇 UICorner ，然後在 屬性 窗口中，將 角度半徑 設為0.15, 0，以稍微圓化角落。

  7. 創建紅色條。

    1. 將 圖像標籤 插入 容器 。
    2. 選擇新標籤，然後在 屬性 視窗中，
      1. 移除預設 圖像 值。
      2. 將 錨點 設置為 1, 0.5 以在右中設置標籤的起點 (標籤左至右的 100%，標籤頂至底的 50%)。
      3. 將 背景顏色3 設為 172, 13, 13 以將標籤的背景顏色設為深紅色。
      4. 將 背景透明度 設為 0.2 以使標籤的背景稍微透明。
      5. 將 名稱 設為 條 。
      6. 將 位置 設為 {1, 0},{0.5, 0} 以在容器右中設置標籤(從左到右的父標籤的 100%，從上到下的父標籤的 50%)。
      7. 將 尺寸 設為 {0, 0},{1, 0} 以將標籤延長到父標籤頂部(0% 水平和 100% 垂直的父標籤)。這一步也對在步驟 8 中發生的青少年行為有好處。

  8. 回合標籤的角。

    1. 將 UICorner 物件插入 條 。
    2. 選擇 UICorner ，然後在 屬性 窗口中，將 角度半徑 設為0.15, 0，以稍微圓化角落。

  9. 將 冷卻條預製 移動到 複製儲存 。

    1. 創建一個文件夾結構來組織您的 UI 對象。樣本使用一個子文件夾 Instances 和一個兒子 Guis 文件夾。

    2. 將 冷卻條預製 移動到 使用者介面 。

  10. 在樣本 激光標籤 位置檔案中參考以下 腳本，將冷卻計程序動態地附加到玩家的爆破器上，然後在玩家爆破他們的爆破器之後動畫紅色條。

下列 ReplicatedStorage.FirstPersonBlasterVisuals 客戶端腳本處理玩家的第一人稱爆破器的所有視覺邏輯。它需要一組模組腳本，共同設置雷射標籤遊遊玩中感覺更具現實性的視覺效果，包括 FirstPersonBlasterVisuals.addCooldownBar 和 FirstPersonBlasterVisuals.runCooldownBarEffect 。

local Players = game:GetService("Players")

local ReplicatedStorage = game:GetService("ReplicatedStorage")

local Workspace = game:GetService("Workspace")

local RunService = game:GetService("RunService")



local BlastData = require(ReplicatedStorage.Blaster.BlastData)

local PlayerAttribute = require(ReplicatedStorage.PlayerAttribute)

local PlayerState = require(ReplicatedStorage.PlayerState)

local getBlasterConfig = require(ReplicatedStorage.Blaster.getBlasterConfig)



local runBlastVisuals = require(script.runBlastVisuals)

local setupAnimations = require(script.setupAnimations)

local addCooldownBar = require(script.addCooldownBar)

local runCooldownBarEffect = require(script.runCooldownBarEffect)



local laserBlastedBindableEvent = ReplicatedStorage.Instances.LaserBlastedBindableEvent



local RIG_OFFSET_FROM_CAMERA = CFrame.new(2, -2, -3) * CFrame.Angles(math.rad(0.25), math.rad(95.25), 0)



local localPlayer = Players.LocalPlayer

local currentCamera = Workspace.CurrentCamera



local rigModel = nil

local cooldownBar = nil

local animations = {}



local function addFirstPersonVisuals()

	local blasterConfig = getBlasterConfig()



	-- 添加第一個人物骨架

	rigModel = blasterConfig.RigModel:Clone()

	rigModel.Parent = Workspace



	-- 添加冷卻條

	cooldownBar = addCooldownBar(rigModel.PrimaryPart.CooldownBarAttachment)



	animations = setupAnimations(blasterConfig, rigModel)

end



local function removeFirstPersonVisuals()

	for _, animation in animations do

		animation:Stop()

		animation:Destroy()

		animation = nil

	end

	if rigModel then

		-- 這也會破壞冷卻條，因為它與裝骨架相關

		rigModel:Destroy()

		rigModel = nil

	end

end



-- 在爆炸發生時執行第一人稱視覺效果

laserBlastedBindableEvent.Event:Connect(function(blastData: BlastData.Type)

	runBlastVisuals(rigModel.PrimaryPart.TipAttachment, blastData, animations.blastAnimation)

	runCooldownBarEffect(cooldownBar)

end)



-- 如果存在，將模型綁定到攝影機

RunService.RenderStepped:Connect(function()

	if rigModel then

		-- 更新到骨架的 CFrame 相對於相攝影機的位置和 RIG_OFFSET_FROM_CAMERA

		rigModel:PivotTo(currentCamera.CFrame * RIG_OFFSET_FROM_CAMERA)

	end

end)



-- 在播放時變更爆破器類型時，處理視覺變更

localPlayer:GetAttributeChangedSignal(PlayerAttribute.blasterType):Connect(function()

	local playerState = localPlayer:GetAttribute(PlayerAttribute.playerState)

	if playerState == PlayerState.Playing then

		removeFirstPersonVisuals()

		addFirstPersonVisuals()

	end

end)



-- 當玩家狀態變更時，處理視覺變更

localPlayer:GetAttributeChangedSignal(PlayerAttribute.playerState):Connect(function()

	local newPlayerState = localPlayer:GetAttribute(PlayerAttribute.playerState)

	-- 當玩家選擇爆破器或正在大廳時，移除視覺效果

	if newPlayerState == PlayerState.SelectingBlaster or newPlayerState == PlayerState.InLobby then

		removeFirstPersonVisuals()

	-- 當玩家完成選擇爆破器時，添加視覺效果回來。

	elseif newPlayerState == PlayerState.Playing then

		addFirstPersonVisuals()

	end

end)

創建廣告牌GUI對象

為了在 3D 空間中顯示回應給腳本邏輯並始終面向每個玩家的攝影機的用戶介面元素，例如玩家名稱或地圖標記，您可以在 3D 空間中創建一個 BillboardGui 對象作為其子對象，如 BasePart 或 Attachment 中的一個。

樣本雷射標籤體驗包括兩個獨立的 BillboardGui 對象在 ReplicatedStorage 服務中：

  • 其他玩家指示器GUI預製 - 在玩家在回合中活躍時，在他們的頭上顯示粉紅色或綠色圓圈。
  • 標籤出指示器GUI預製 - 在玩家被標籤退出回合時，在他們的頭上顯示。

在創建 BillboardGui 對物件之後，您可以根據每個容器的目的創建和自定義其子 GuiObjects 對象。為了展示，在即將跟隨的直接部分中，您將學習如何在樣本雷射標籤體驗中實現兩種指標類型的用戶介面元素。 您可以調整過程的任何部分來滿足自己體驗的規格 。

要創建一個 BillboardGui 對物件：

  1. 在 檢索器 窗口中，將鼠標懸停在 BasePart 或 Attachment 上，然後單擊 ⊕ 圖示。一個上下文菜單顯示。
  2. 從上下文選單中插入 BillboardGui 物件。
  3. 根據其子 UI 元素的上下文重命名 BillboardGui 。
  4. 重複此過程以顯示每個您需要在玩家頭上上下文顯示的 UI 元素。

團隊指標

團隊指標是一個用於通知玩家團隊其他玩家在回合中屬於哪個團隊的 UI 元素，以便他們可以輕鬆區分他們的盟友和敵方隊伍成員。這項資訊很重要，因為第一人稱射擊體驗的遊戲需要玩家在戰鬥區域內做出快速的戰略決定，以免被標記並失去比相符。

要準確重創樣本 雷射標籤 體驗中的團隊指標：

  1. 將 BillboardGui 對象插入暫時骨架。

    1. 從工具欄的 頭像 標籤，單擊 螢幕建立器 。

    2. 從可用選項中選擇。樣本使用 R15 儀器類輸入、 女性 身體形狀和 Rthro 虛擬人偶。模型在 3D 視窗和 探索器 視窗中顯示兩個名稱： 模型 。

    3. 在 勘探者 窗口中，導航到骨架的子 頭 網格，然後單擊 ⊕ 圖示。一個上下文菜單顯示。

    4. 從上下文選單中插入 BillboardGui 。

  2. 選擇新的 BillboardGui ，然後在 屬性 窗口中，

    1. 將 光影響 設為 0 以防環境光影響指示器的顏色。

    2. 將 名稱 設為 OtherPlayerIndicatorPrefab 。

    3. 將 尺寸 設為 {0, 10},{0, 10} 以使標籤變得更小。

    4. 將 StudsOffsetWorldSpace 設為 0, 4, 0 以將它放置在機骨架頭上。

  3. 將 框架 對象插入 OtherPlayerIndicatorPrefab 。

  4. 選擇新框架，然後在 屬性 窗口中，

    1. 將 錨點 設置為 0.5, 0.5 以在框架中設置框架的起點在自身中間（標籤左右的 50% 和標籤頂部到底的 50%）。

    2. 將 背景顏色3 設為 255, 3, 0 將框架的背景顏色設為紅色作為暫時顏色。

    3. 將 位置 設置為 {0.5, 0},{0.5, 0} 以將框架設置為容器的中心(50%從左到右的父廣告GUI，和50%從上到下的父廣告GUI)。

    4. 將 尺寸 設為 {1, -2},{1, -2} 以縮短框架到 BillboardGui 的表面區域。

  5. 將 UICorner 物件插入 框架 以完全圓化角落。

  6. 將 UIStroke 對象插入 框架 來繪製指示器的圓圈。

  7. 將 其他玩家指標預製 移動到 複製儲存 。

  8. 在樣本 ReplicatedStorage 位置檔案中參考以下 腳本,除非它們在敵方隊伍上且被隱藏,否則會程式atically顯示團隊指標給每個在活動回合中的玩家。

當玩家生成到競技場進行有效回合時，下列 ReplicatedStorage.OtherPlayerIndicatorGuiSetup 腳本會運行。它通過呼叫 addIndicatorToCharacter() 函數來附加團隊指標，該函數會找到每個參加回合的玩家角色的 Head 對象。如果他們尚未擁有團隊指標，則腳本會複製並添加 其他玩家指標預製 UI 到角色的 Head 中，並將團隊指標顏色設為他們的團隊顏色。

如果其他玩家都在同一隊伍中，團隊指標總是會顯示，即使他們躲在 3D 空間中的物體後；如果其他玩家都在敵方隊伍中，團隊指標只會顯示，如果 3D 空間中沒有物體來遮蓋他們。

local Players = game:GetService("Players")

local ReplicatedStorage = game:GetService("ReplicatedStorage")



local localPlayer = Players.LocalPlayer

local otherPlayerIndicatorPrefab = ReplicatedStorage.Instances.Guis.OtherPlayerIndicatorPrefab



local characterSpawnConnectionsByPlayer: { [Player]: RBXScriptConnection } = {}

local playerAddedConnection: RBXScriptConnection?



local function removeIndicatorFromPlayer(player: Player)

	if not player.Character then

		return

	end



	local head = player.Character:WaitForChild("Head", 3)

	if not head then

		return

	end



	local gui = head:FindFirstChild(otherPlayerIndicatorPrefab.Name)

	if gui then

		gui:Destroy()

	end

end



local function addIndicatorToCharacter(otherCharacter: Model?)

	local otherPlayer = Players:GetPlayerFromCharacter(otherCharacter)

	if not otherPlayer then

		return

	end



	task.spawn(function()

		local otherHead = otherCharacter:WaitForChild("Head", 3)

		if not otherHead then

			return

		end



		-- 只向參加回合的玩家添加指標

		if not otherPlayer.Team then

			return

		end



		-- 避免添加重複指標，只有在它不存在時才創建新的指標

		local gui = otherHead:FindFirstChild(otherPlayerIndicatorPrefab.Name)

		if not gui then

			gui = otherPlayerIndicatorPrefab:Clone()

			gui.Frame.BackgroundColor3 = otherPlayer.TeamColor.Color

			gui.Parent = otherHead

		end



		-- 只有當玩家友好時，指示器才會始終處於頂部



		local isFriendly = otherPlayer.Team == localPlayer.Team

		gui.AlwaysOnTop = isFriendly

	end)

end



local function addIndicatorWhenCharacterSpawns(player: Player)

	if characterSpawnConnectionsByPlayer[player] then

		return

	end

	local connection = player.CharacterAdded:Connect(addIndicatorToCharacter)

	characterSpawnConnectionsByPlayer[player] = connection

end



local function stopSyncingIndicators()

	for _, connection in characterSpawnConnectionsByPlayer do

		connection:Disconnect()

	end

	table.clear(characterSpawnConnectionsByPlayer)



	if playerAddedConnection then

		playerAddedConnection:Disconnect()

		playerAddedConnection = nil

	end



	for _, player in Players:GetPlayers() do

		removeIndicatorFromPlayer(player)

	end

end



local function addIndicatorToPlayer(player: Player)

	if player == localPlayer then

		return

	end



	addIndicatorToCharacter(player.Character)

	addIndicatorWhenCharacterSpawns(player)

end



local function startSyncingIndicators()

	for _, player in Players:GetPlayers() do

		addIndicatorToPlayer(player)

	end



	if not playerAddedConnection then

		playerAddedConnection = Players.PlayerAdded:Connect(addIndicatorToPlayer)

	end

end



local function onLocalTeamChanged()

	local localTeam = localPlayer.Team

	if localTeam then

		startSyncingIndicators()

	else

		stopSyncingIndicators()

	end

end



localPlayer:GetPropertyChangedSignal("Team"):Connect(onLocalTeamChanged)

onLocalTeamChanged()

標記出指標

標記的退出指標是一個向玩家通知其他玩家不再活躍在回合中，並正在返回到他們的生成區的 UI 元素。這些資訊很重要，因為第一人稱射擊體驗的遊戲需要玩家盡快移動到下一個目標，這樣他們就不會在競技場長時間玩同一個地點，從而變得脆弱。

要準確重新創建標記的指標在樣本 雷射標籤 體驗中：

  1. 將 BillboardGui 對象插入暫時裝備，以便您可以在每個過程步驟的變更中進行視覺化。

    1. 從工具欄的 頭像 標籤，單擊 螢幕建立器 。

    2. ​從可用選項中選擇。樣本使用 R15 儀器輸入、 男性 身體形狀和 Rthro 虛擬人偶。模型在 3D 視窗和 探索器 視窗中顯示兩個名稱： 模型 。

    3. 在 勘探者 窗口中，導航到骨架的子 頭 網格，然後單擊 ⊕ 圖示。一個上下文菜單顯示。

    4. 從上下文選單中插入 BillboardGui 。

  2. 選擇新的 BillboardGui ，然後在 屬性 窗口中，

    1. 將 光影響 設為 0 以防環境光影響指示器的顏色。

    2. 將 名稱 設為 TaggedOutIndicatorGuiPrefab 。

    3. 將 尺寸 設為 {3, 0},{0.5, 0} 以擴大標籤的空間。

    4. 將 孔距離 設為 0, 3.25, 0 以將它放置在玩家的頭上。

  3. 將 圖像標籤 對象插入 標記出指示器模塊預製 。

  4. 選擇新標籤，然後在 屬性 視窗中，

    1. 將 錨點 設置為 0.5, 0.5 以在標籤中間設置標籤的起點 (標籤左右的 50% 到右，標籤頂部到底的 50%)。
    2. 將 背景透明度 設為 1 以使標籤的背景完全透明。
    3. 將 名稱 設為 框架 。
    4. 將 位置 設置為{0.5, 0},{0.5, 0}將標籤設置為容器的中間(從左到右的父廣告GUI的50%，從上到下的父廣告GUI的50%)。
    5. 將 尺寸 設為 {1, 0},{1, 0} 以擴展標籤到整個 BillboardGui (100% 水平和 100% 垂直的父 BillboardGui)。
    6. 將 圖像 設為 rbxassetid://14304826985，使圖像成為多向淡化。
    7. 將 圖像顏色 設為 245, 46, 46 以淡化標籤的紅色。

  5. 將 文字標籤 對象插入 框架 。

  6. 選擇新標籤，然後在 屬性 視窗中，

    1. 將 錨點 設置為 0.5, 0.5 以在標籤中間設置標籤的起點 (標籤左右的 50% 到右，標籤頂部到底的 50%)。

    2. 將 背景透明度 設為 1 以使標籤的背景完全透明。

    3. 將 名稱 設為 BodyTextLabel 。

    4. 將 位置 設為 {0.5, 0},{0.5, 0} 以將標籤設為容器中央(從左到右的父標籤的 50% 和從上到下的父標籤的 50%)。

    5. 將 尺寸 設為 {0.85, 0},{0.7, 0} 以便文字佔用大部分的淡化區域（85% 水平和 70% 垂直的父圖像標籤）

    6. 將 字體面 設為 蒙特塞拉特 以配合未來主義的美感。

    7. 將 重量 設為 粗體 以加粗字體。

    8. 將 文字 設為 標籤 。

    9. 將 文字顏色3 設為 255, 255, 255 以使文字變白。

    10. 啟用 文字縮放 。

  7. 將 標記退出指示器GUI預製 移動到 複製儲存 。

  8. 在樣本 ServerScriptService 位置檔案中參考以下 腳本，在玩家重生到他們團隊伍的生成區時顯示標記的指標。

下列 ServerScriptService.SetupHumanoid 服務器腳本會在玩家載入體驗時立即運行。它確保每當玩家的角色被添加到數據模型時，setupHumanoidAsync 將被稱為他們的Humanoid。

local Players = game:GetService("Players")



local setupHumanoidAsync = require(script.setupHumanoidAsync)



local function onCharacterAdded(player: Player, character: Model)

	local humanoid = character:WaitForChild("Humanoid")

	setupHumanoidAsync(player, humanoid)

end



local function onPlayerAdded(player: Player)

	-- 如果玩家已經有角色，請呼叫 onCharacterAdded

	if player.Character then

		onCharacterAdded(player, player.Character)

	end

	-- 為此玩家的所有未來角色生成呼叫 onCharacterAdded

	player.CharacterAdded:Connect(function(character: Model)

		onCharacterAdded(player, character)

	end)

end



-- 為已在遊戲中的任何玩家呼叫 onPlayerAdded

for _, player in Players:GetPlayers() do

	onPlayerAdded(player)

end

-- 為所有未來玩家呼叫 onPlayerAdded

Players.PlayerAdded:Connect(onPlayerAdded)

恭喜您完成使用者介面設計課程！現在您已經習慣創建藝術風格、設計佈局並在 Studio 中實現設計從頭到尾，您可以擴展您的項目以新增新的使用者介面和功能，或跟隨額外的教學課程，例如 遊戲腳本教學課程 教您關於樣本激光標籤體驗的一般組織和關鍵實作細節。創作愉快！

上一個