實現您的設計 是 Studio 中使用預先建立的和自訂 UI 元素以及與程式碼結合的方法來創建您的線框的過程。這個教學的重要性是幫助您看到您的設計和努力工作結合成一個完整的工作流程，以便準備玩家交互。
使用 示例雷射標籤體驗.rbxl 文件作為參考，這個用戶界面設計教程的這個部分展示您如何將您的 UI 計劃帶來生命，包括指南：
- 從資產資料庫中取得資產 ID 來讓您可以重新創建示例雷射標籤體驗的 UI 零件。
- 在 Studio 中直接模擬各種設備來看看您的 UI 在不同的螢幕和畫面比例上顯示。
在這個部分審查技術後，您可以將它們應用到您自己的項目上，以創造玩家在您的體驗中發揮作用的令人興奮的使用者介面元件。
這個教學的其他部分包含使用 UI 設計資產庫來重新創建 UI 元件的正確方法。 此過程需要大約 90 分鐘，從開始到結束。 如果您不想使用提供的值，您可以調整每個 UI 元素來符合自己的體驗特點或使用示例自身為剩餘部分的教學。
取得資產資料庫
資產圖鑑是您可以添加到您的道具欄以獲得簡單存取和重用的資產集。 資產圖鑑 你將使用的項目來自 創作者商店 的資產庫包含九個 2D 個個別 UI 元素資產，以及您正在此教學部分中創建的目標、雷射選擇器和玩家信息元素。
您可以在 Studio 中的 添加到庫存 連結在您的道具欄中添加大多數資產。當資產在您的道具欄中時，您可以在平台上的任何項目中重用它們。
要將資產資料庫從您的資產欄中移動到您的體驗：
在選單欄中，選擇 檢視 標籤。
在 顯示 區域中，單擊 工具箱 。 工具箱 窗口顯示。
在 工具箱 窗口中，單擊 庫存 標籤。顯示 我的模型 排序顯示。
點擊下拉菜單，然後選擇 我的包裹 排序。
單擊最終使用者介面磚塊，然後在Explorer窗口中，選擇完成的零件，然後拖曳它們到2>StarterGui2>服務中。現在您可以啟用任何最終零件來參考其設計。
模擬設備
Studio 的 裝置模擬器 允許您測試玩家在各種裝置上玩您的 UI 是如何看到和互動的。這個工具是實現過程中的重要部分，因為 Studio 視窗的外觀比例不必一定反映玩家使用您的體驗的外觀比例，而且您的 UI 必須能夠在每個裝置上都是可讀的並且可以被存取的。
例如，如果您在一系列屏幕尺寸上測試您的 UI，玩家擁有大型屏幕可能無法閱讀您的文字或解碼您的圖示，玩家擁有小型屏幕可能無法看到 3D 空間，因為您的 UI 元素佔用了太多顯示空間。
要將您的屏幕尺寸變更至最小：
在菜單欄中，選擇 測試 標籤。
在 模擬 區域，單擊 裝置 。視窗將改變，以反映平均筆記型電腦的外觀比例。
在解析選擇框中選擇 實際解析度 。這允許您在您正在模擬的設備上查看您的 UI 元素的真實解析度。
在裝置撥動列表中，選擇最小屏幕尺寸，玩家可以使用來存取您的體驗的裝置。雖然最佳選擇會根據您的體驗支援的裝置而變更，但示例雷射標籤體驗使用 iPhone 4S 來確認體驗是否有足夠的屏幕空間。
創建屏幕GUI對象
要在每個玩家的螢幕上顯示 UI 元素，您可以在 ScreenGui 服務中創建一個 StarterGui 對象。 ScreenGui 對象是綽動 UI 的主要容器，並且服務中的 1> Class.St
您可以擁有多個 ScreenGui 對象來組織和顯示遊戲中的 UI 元素群組，以在遊戲中的主要 ScreenGui 中碰到不同的條件時，啟用不同的 Class.ScreenGui 對象 直到玩家達到不同的條件直到玩家達到不同的條件直到玩家達到不同
- HUDGui 顯示玩家在回合中啟用時的體驗遊戲內容，例如目標和每個團隊的總分。
- PickABlasterGui － 顯示玩家開始或重新加入回合時所有的爆炸選擇。
- ForceFieldGui - 顯示玩家選擇噴射器時的六邊形網格。ForceFieldGui 是暫時無敵的。
- OutStateGui - 顯示玩家標出時會顯示在屏幕上的黑暗邊框。
- RoundResultsGui - 顯示在屏幕上方的黑暗層，包含哪個團隊獲勝的資訊。
在你創建 Class.ScreenGui 對物件之後，你可以根據每個容器的目的來創建並自訂其子 GuiObjects 。 要在即將到來的部分中展示的示例中展示，你必須先學會實現 三類資訊 玩家
要創建 ScreenGui 物件：
在 Explorer 窗口中，將鼠標擺動到 StarterGui 服務上，然後按一下 ⊕ 圖示。一個上下文菜單顯示。
插入 屏幕導覽器 。
根據兒童 UI 元素的上下文重新命名 ScreenGui 。
重複此過程每個需要顯示在每個玩家的屏幕上的 UI 元素。
目標 UI
按照Wireframe Your Layouts的視覺階層最佳練習，這個區域教您如何實現所有關於體驗目標的視覺界面元素。這個界面元素的組合位於屏幕頂部，因為目標和每個團隊的點有最大意義在於如何贏得遊戲。
舉例來說，範例提供玩家參考回合中成功的標準 UI 元件。隨著玩家標記敵方隊伍成員並獲得點數，這個元件會記錄每個團隊伍的得分對總目標的提示。為了對所有的客戶端和伺服器指令碼進行高級評估，請參閱「追蹤點數」在遊
要正確重現示例 雷射標籤 體驗內的目標介面：
為整個零件建立容器。
將 框架 插入 HUDGui 對物件。
- 在 Explorer 窗口中，導航至 StarterGui 服務。
- 將物件標指针指向其子對象 HUDGui ，然後按一下⊕圖示。一個上下文菜單顯示。
- 從上下文菜單中，插入 框架 。
選擇新的 框架 ，然後在 屬性 窗口中，
- 將 AnchorPoint 設為 0.5, 0 以設定框架的起始點在框架上方中央 (50% 從左到右，0% 從上到下)。
- 將 背景透明度 設為 1 以使框架的背景完全透明。
- 將 位置 設為 {0.5, 0},{0.03, 0} 以將畫框放置在屏幕上方中央 (50% 從左到右, 3% 從上到下) 為了設置屏幕上方的畫框 (有一點儲存)。
- 將 大小 設為 {0.5, 0},{0.13, 0} 以便框架的元素佔據屏幕上方的大部分位置來吸引玩家的注意 (50% 水平, 13% 垂直).
- 將 名稱 設為 目標 。
(可選) 插入 UIAspectRatioConstraint 到 目標 以確保標籤的外觀比例保持不變，無論玩家的螢幕尺寸。 範例設定其 0> Class.UIAspectRatioRatio.AspectRatio0> 屬性為 3>7 3>。
為目標提示對象建立容器。
將 框子 插入 目標 。
選擇新的 框架 ，然後在 屬性 窗口中，
- 將 AnchorPoint 設為 0.5, 0 以設定框架的起始點在框架上方中央 (50% 從左到右，0% 從上到下)。
- 將 背景透明度 設為 1 以使框架的背景完全透明。
- 將 位置 設置為 {0.5, 0},{0, 0} 以將容器中央設置在容器的中間 (50% 從左到右的父容器, 0% 從上到下的父容器)。
- 將 大小 設為 {1, 0},{0.67, 0} 以便選擇 UI 零件佔用容器的大部分 (100% 水平和 67% 垂直的父親框架)。
- 將 名稱 設置在 目標顯示器 。
創建標題元素。
將 圖像標籤 插入 目標顯示 。
選擇 圖像標籤 ，然後在 屬性 視窗中，
- 將 AnchorPoint 設為 0.5, 1 以在標籤底部中心設定標籤的起始點 (由左到右標籤 50% 和由右到左 100%)。
- 將 背景透明度 設為 1 以使標籤的背景完全透明。
- 將 頁面設計順序 設置為 -1。
- 將 位置 設為 {0.5, 0},{0.34, 0} 以設置標籤位於框架上方的中間 (50% 從左到右 的父 框, 和 34% 從上到下 的父 框) 。
- 將 大小 設為 {0.46, 0},{0.34, 0} 以擴大提示區域的提示區域，為框架的近半（46% 水平，34% 垂直）。
- 將 名稱 設為標題。
- 將 圖像 設置為 rbxassetid://14304828123 以顯示三角形。
- 將 圖像透明度 設為 0.15 以使標題半透明。
(可選) 插入 UIAspectRatioConstraint 到 圖像標籤 以確保標籤的外觀比例保持相同，無論玩家的螢幕尺寸。 樣本設定其0> Class.UIAspectRatioConstraint.AspectRatio0>屬性為 3> 13.781 3>。
將 TextLabel 插入 標題 以顯示標題。
選擇新標籤，然後在 屬性 窗口中，
- 將 錨定點 設為 0.5, 0.5 以設定新標籤的起始點在標籤中央 (50% 從左到右標籤, 50% 從上到下標籖)。
- 將 背景透明度 設為 1 以使標籤的背景完全透明。
- 將 位置 設置為 {0.5, 0},{0.5, 0} 以將標籤移動到標籤的中心 (50% 從左到右 的父標籤, 50% 從上到下 的父標籤)。
- 將 大小 設為 {0.62, 0},{0.55, 0} 以擴大文字空間至父標籤的一半以上 (62% 為上下文平移，55% 為上下文垂直)。
- 將 名稱 設為 標題文字標籤 。
- 將 FontFace 設置為 Montserrat 以符合未來風格的美感。
- 將 重量 設為 中等 以增加字體厚度。
- 將 文字 設置為 目標 。
- 啟用 文字縮放 。
建立提示元素。
將 圖像標籤 插入 目標顯示 。
選擇 圖像標籤 ，然後在 屬性 視窗中，
- 將 AnchorPoint 設為 0.5, 1 以在標籤底部中心設定標籤的起始點 (由左到右標籤 50% 和由右到左 100%)。
- 將 背景透明度 設為 1 以使標籤的背景完全透明。
- 將 位置 設為 {0.5, 0},{1, 0} 以將標籤移動到其父框的底部中央 (50% 從左到右，從右到左)，並且在父框的頂部 (100% 從左到右) 設為無效。
- 將 大小 設為 {0.89, 0},{0.66, 0} 以擴大文字區域到父框的寬度接近父框的全寬度的 89% (由 2% 水平和 6% 垂直的父框).
- 將 名稱 設為 身體 。
- 將 圖像 設置為 rbxassetid://14304827265 以顯示反向三角形。
- 將 圖像顏色3 設為 0, 0, 0 以黑色漆抹圖像。
- 將 圖像透明度 設為 0.3 以使標題半透明。
(可選) 插入 UIAspectRatioConstraint 到 圖像標籤 以確保標籤的外觀比例保持相同，無論玩家的螢幕尺寸。 樣本設定其0> Class.UIAspectRatioConstraint.AspectRatio0>屬性為 3> 13.781 3>。
將 文字標籤 插入 身體 以顯示提示。
選擇新標籤，然後在 屬性 窗口中，
- 將 錨定點 設為 0.5, 0.5 以設定新標籤的起始點在標籤中央 (50% 從左到右標籤, 50% 從上到下標籖)。
- 將 背景透明度 設為 1 以使標籤的背景完全透明。
- 將 位置 設置為 {0.5, 0},{0.5, 0} 以將標籤移動到標籤的中心 (50% 從左到右 的父標籤, 50% 從上到下 的父標籤)。
- 將 大小 設為 {0.85, 0},{0.39, 0} 以擴大文字空間至父標籤的一半以上 (85% 為上層，39% 為下層)。
- 將 名稱 設為 BodyTextLabel 。
- 將 FontFace 設置為 Montserrat 以符合未來風格的美感。
- 將 重量 設為 中等 以增加字體厚度。
- 將 TextColor3 設置為 255, 255, 255 以使文字在黑暗背景上與白色背景相同。
- 將 文字 設置為 標記玩家得分！最先得到 %d 分的隊伍獲勝。 。
- 啟用 文字縮放 。
為目標團隊建立容器。
將 框子 插入 目標 。
選擇新的 框架 ，然後在 屬性 窗口中，
- 將 AnchorPoint 設為 0.5, 1 以在標籤的原始點在底部中央 (50% 從左到右框, 並且 100% 從右到框) 設為底部中央 (100% 從左到右框, 並且 100% 從右到框).
- 將 背景透明度 設為 1 以使框架的背景完全透明。
- 將 位置 設置為 {0.5, 0},{1, 0} 以將框架設置在容器底部中央 (50% 從左到右的父框, 並且 100% 從容器上到下的父框)。
- 將 大小 設為 {0.44, 0},{0.27, 0} 以便選擇 UI 零件佔用容器左右兩側的大部分 (44% 水平上和 27% 垂直上的父親框架) 。
- 將 名稱 設置在 TeamPointCounter 。
創建團隊計數器的墊片。
- 將 UIListLayout 對象插入步驟 5 中的框架。
- 選擇 UIListLayout 對物件，然後在 屬性 窗口中，
- 將 墊片 設為 0.025, 0 以提供未來團隊計數器之間的空間。
- 將 FillDirection 設置為 水平 ，以便每個團隊的計數器靠近 друг來顯示。
- 將 水平齊整 設置為 中心 ，讓每個團隊的櫃檯對稱地擺放在一起。
建立綠色團隊反對元素。
將 圖像標籤 插入 團隊點數計量器 .
選擇 圖像標籤 ，然後在 屬性 視窗中，
- 將 背景透明度 設為 1 以使標籤的背景完全透明。
- 將 位置 設為 {0.5, 0},{1, 0} 以將標籤移動到其父框的底部中央 (50% 從左到右，從右到左)，並且在父框的頂部 (100% 從左到右) 設為無效。
- 將 大小 設為 {0.5, 0},{1, 0} 以擴大標籤的父框尺寸 (50% 水平和 100% 垂直)。
- 將 名稱 設置在 TeamACount 。
- 將 圖像 設為 rbxassetid://14304826831 以顯示方向盤漸漸消失。
- 將 圖像顏色3 設為 88, 218, 171 以調色圖像藍綠色。
配置自訂屬性來跟蹤這個標籤是綠團隊的。
- 在 屬性 窗口中，移動至 屬性 區，然後按一下 plus 圖示。一個 pop-up 對話框顯示。
- 在 名稱 字段中，輸入 teamColor 。
- 在 Type 拖曳菜單中，選擇 BrickColor 。
- 點擊 儲存 按鈕。
- 將新 團隊顏色 屬性設置為 薄荷色 。
將 文字標籤 插入 團隊帳戶 以顯示提示。
選擇新標籤，然後在 屬性 窗口中，
- 將 錨定點 設為 1, 0.5 以在新標籤的起始點在右中間設置 (100% 從左到右標籤，50% 從上到下標籖)。
- 將 背景透明度 設為 1 以使標籤的背景完全透明。
- 將 位置 設置為 {0.95, 0},{0.5, 0} 以將標籤移動到標籤的右邊 (從左到右的親標籤 95% ，從上到下的親標籤 50%)。
- 將 大小 設為 {0.85, 0},{0.39, 0} 以擴大文字空間至父標籤的一半以上 (85% 為上層，39% 為下層)。
- 將 FontFace 設置為 Montserrat 以符合未來風格的美感。
- 將 重量 設為 bold 以增加字體的厚度。
- 將 TextColor3 設置為 255, 255, 255 以使文字在黑暗背景上與白色背景相同。
- 將 文字 設置為 - 。
- 啟用 文字縮放 。
- 將 TextXAlignment 設置為 右 。
將 UIStroke 對象插入 文字標籤 ，然後在 屬性 窗口中設置 1>顏色1> 為 4> 8, 78, 524> 以綠色筆記標出衝擊。
建立粉紅色團隊對象。
Duplicate TeamAICount 和它的子孫。
選擇重複的 TeamACount ，然後在 屬性 視窗中，
- 將 名稱 設置在 TeamBCountor 。
- 將 圖像 設置為 rbxassetid://14305849451 以顯示向前漸漸消失的方向。
- 將 圖像顏色3 設為 255, 170, 255 以調整圖像顏色粉紅色。
- 將 teamColor 屬性設為 Carnation Pink 。
選擇 TextLabel 重複的兒子，然後在 TeamBCounter 的 屬性 窗口中，
- 將 AnchorPoint 設為 0, 0.5 以在左中間的新標籤原點 (0% 從左到右標籤, 50% 從上到下標籖) 。
- 將 位置 設置為 {0.05, 0},{0.5, 0} 以將標籤移動到標籤的父親標籤的左邊 (5% 從左邊到右邊的父親標籤, 50% 從上到下的父親標籤)。
- 將 TextXAlignment 設置為 左 。
選擇 TeamBCounter 的重複 UIStroke 兒，然後在 積分 窗口中，將 2>顏色2> 設置為 5> 158, 18, 945> 以縮略黑色粉紅色衝擊。
在範例 ReplicatedStorage 位置 file 中參考以下 Class.ReplicatedStorage 指令碼，以程式碼更新目標提示和跟蹤團隊點。
下列指令碼需要一組模組指令碼，這些指令碼可以合作以設置主要的頭顯示（HUD），包括 setObjective 和 startSyncingTeamPoints 。 在玩家加入回合並選擇他們的 Blaster 後，這些指令碼確保所有 HUD 用戶界面元素正確顯示給玩家狀態、裝置和團隊狀態。
現在，玩家選擇他們的衝擊槍後，目標 UI 會在他們的屏幕上顯示，並記錄每個團隊的點數。
雷射介面
按照 Wireframe Your Layouts 的視覺階層最佳練習，這個區域教您如何實現所有關於玩家的衝擊器的 on-screen 用戶界面元素。這個集合UI元素的空間佔用率大部分位於屏幕中央附近，因為它作為吸引玩家注意3D空間行動的焦點，並且對遊戲的重要性很
十字鏡
十字鏡是一個 UI 元素，可以告訴玩家他們將在爆炸武器時造成哪些影響。這個 UI 元素是第一人稱射擊體驗的重要遊戲玩法需求，因為玩家需要能夠準確瞄準他們的武器並標記敵方隊友。
與其他第一人稱射擊遊戲類別驗相同，樣本雷射標籤體驗會將瞄準器放置在屏幕中央，讓玩家有一個靜態的焦點，而不會因為虛擬人偶在 3D 空間中移動時，讓瞄準器隱藏在樣本中。 除了減少運動痛苦外，這個放置允許瞄準器與環境融
要正確重現 雷射標籤 體驗中的十字鎬：
將 圖像標籤 插入 HUDGui 對物件的 ScreenGui 。
在 Explorer 窗口中，導航至 StarterGui 服務。
將物件標擺放在其子對象 HUDGui 上，然後單擊 ⊕ 圖示。一個上下文菜單顯示。
從上下文菜單中，插入 圖像標籤 。
選擇新的 圖像標籤 ，然後在 屬性窗口 中，
- 將 圖像 設置為 rbxassetid://14400935446。
- 將 AnchorPoint 設為 0.5, 0.5 以設定標籤的起始點在標籤中央 (50% 從左到右標籤, 50% 從上到下標籖)。
- 將 背景透明度 設為 1 以使標籤的背景完全透明。
- 將 名稱 設為 十字矢量 。
- 將 位置 設置為 {0.5,0},{0.5,0} 以設置標籤在畫面中央。
- 將 ScaleType 設置為 Fit ，以便圖像能夠盡可能地盡粘在容器內，而不會在各種屏幕尺寸上擴展。
(可選) 插入 UIAspectRatioConstraint 到 Crosshair 以確保標籤的外觀比例保持不變，無論玩家的螢幕尺寸。 範例設定其 0>Class.UIAspectRatioRatio.AspectRatio0> 屬性為 3>0.895 3>。
命中提示
命中標記是一個 UI 元素，只會在爆炸與其他玩家在敵團隊中造成影響時顯示。 像箭頭一樣，這個 UI 元素是第一人稱射擊體驗的重要遊戲玩法需求，因為它提供視覺反饋，當玩家成功標記出對手時提供視覺反饋。
要正確重現樣本 雷射標籤 體驗內的擊中標記：
將 圖像標籤 插入 十字矢量 對物件 ImageLabel 。
在 Explorer 窗口中，導航至 StarterGui 服務。
將鼠標擺放在其子對象 彎道箭頭 上，然後按一下 ⊕ 圖示。一個上下文菜單顯示。
從上下文菜單中，插入 圖像標籤 。
選擇新的 圖像標籤 ，然後在 屬性窗口 中，
- 將 圖像 設置為 rbxassetid://14401148736 以顯示長方形命中標記圖示。
- 將 AnchorPoint 設為 0.5, 0.5 以在標籤中央設定標籤的起始點。
- 將 背景透明度 設為 1 以使標籤的背景完全透明。
- 將 位置 設置為 {0.5,0},{0.5,0} 以設置標籤在畫面中央。
- 將 名稱 設為 命中提示器 。
- 將 大小 設置為 {0.6, 0},{0.06, 0} 以減少矢量中央的長方形大小。
- 將 圖像透明度 設置為 1 以使命標記完全透明。在下一步中的腳本將每次玩家的爆炸與另一名玩家在敵方團隊上造成影響時，將透明度設置為 0。
參考以下 ReplicatedStorage 指令碼內的 雷射標籤 位置文件，以程式方式顯示當雷射與玩家對敵團隊發生爆炸時，會顯示命中標記。
下列指令碼需要一組模組指令碼，這些指令碼能夠合作來設置主要的頭顯示（HUD），包括 setupHitmarker 。當玩家加入回合並選擇他們的激光器後，這些指令碼確保所有的 HUD 使用者介面元素正確顯示給玩家的狀態、裝置和團隊狀態。
現在，每次玩家發射他們的衝擊波時，爆炸會對其他玩家造成影響，且擊中標記將會暫時顯示。
雷射選擇器
選擇器是玩家使用來選擇他們的雷射類型前使用的 UI 元件。 範例雷射標籤體驗提供兩種雷射類型：一個生成多個光束並且寬涵垂直穿射的雷型，另一個則生成單個光束。 玩家選擇雷型會在回合中影響他們的戰略，因此這個 UI 元件是整個體驗的關鍵工作流程。
下列步驟詳細說明如何為各個 UI 元素群組建立多個容器，一個含有提示、導航和選擇按鈕的頭銜，以及一個預製按鈕按鈕。 指令碼對於整個組件的基礎部分會在 Configuration 實例中代表每個基礎部輸入。
這個設置允許您為更多的噴氣型建立額外的 Configuration 實例，以便在噴氣選擇器內自動正確顯示，而不需要在 StarterGui.PickABlasterGui 內建立個別按鈕。
要正確重現示範 Laser Tag 體驗內的雷射選擇器：
為整個零件建立容器。
將 框架 插入 PickABlaster 對物件。
- 在 Explorer 窗口中，導航至 StarterGui 服務。
- 將物件標擺放在其子對象 PickABlaster 上，然後單擊 ⊕ 圖示。一個上下文菜單顯示。
- 從上下文菜單中，插入 框架 。
選擇新框架，然後在 屬性 視窗中，
- 將 錨定點 設為 0.5, 1 以在框架底部中設定框架的起始點 (從左到右框架的左邊至右邊的 50% 和從右到左邊至框架的 100%)。
- 將 背景透明度 設為 1 以使框架的背景完全透明。
- 將 位置 設為 {0.5, 0},{0.9, 0} 以設置屏幕頂部中間的框架 (50% 從左到右屏幕, 和 92.4% 從上到下屏幕)。
- 將 大小 設為 {0.8, 0},{0.25, 0} 以便 blaster 選擇器的 UI 零件佔據大部分屏幕，以吸引玩家的注意 (80% 由下向佔用，25% 由上向佔用)。
- 將 名稱 設為 零件 。
(可選) 插入 UIAspectRatioConstraint 到 Component 以確保框架和其子元素的 UI 元素的外觀比例保持相同，無論玩家的螢幕尺寸。 範例設定其 0>Class.UIAspectRatioConstraint.AspectRatio0> 屬性為 3>5 3>。
創建容器來持有 UI 元素群組。
將 框子 插入 零件 。
選擇新框架，然後在 屬性 視窗中，
- 將 AnchorPoint 設為 0.5, 0.5 以設定框架的起始點在框架中央 (50% 從左到右，50% 從上到下)。
- 將 背景透明度 設為 1 以使框架的背景完全透明。
- 將 位置 設為 {0.5, 0},{0.375, 0} 以將容器上方的框架設置在容器上方的框架的中間 (50% 從左 到 右 的父 框, 和 37.5% 從上 到 下 的父 框)。
- 將 大小 設為 {1, 0},{0.75, 0} 以便選擇 UI 零件佔用容器的 3/4 (100% 水平並 75% 垂直) 。
- 將 名稱 設為 選擇框 。
為雷射選擇器建立提示。
將 圖像標籤 插入 選擇框架 。
選擇新標籤，然後在 屬性 窗口中，
- 將 AnchorPoint 設為 0.5, 1 以在標籤底部中心設定標籤的起始點 (由左到右標籤 50% 和由右到左 100%)。
- 將 背景透明度 設為 1 以使標籤的背景完全透明。
- 將 頁面設計順序 設置為 -1。
- 將 位置 設置為 {0.5, 0},{0.22, 0} 以設置標籤位於框架上方的中間 (50% 從左到右 的父 框, 22% 從上到下 的父 框) 。
- 將 大小 設為 {0.45, 0},{0.22, 0} 以擴大提示區域的提示區域，為框架的近半（45% 水平和 22% 垂直）。
- 將 名稱 設為 標題 。
- 將 圖像 設置為 rbxassetid://14304828123 以顯示三角形。
- 將 圖像透明度 設為 0.15 以使標題半透明。
(可選) 插入一個 UIAspectRatioConstraint 在標籤上確保標籤的外觀比例保持不變，即使玩家的屏幕尺寸如何。 範例將其 UIAspectRatioConstraint.AspectRatio 屬性設為 0>13.780>。
將 文字標籤 插入 標題 以顯示提示。
選擇新標籤，然後在 屬性 窗口中，
- 將 錨定點 設為 0.5, 0.5 以設定新標籤的起始點在標籤中央 (50% 從左到右標籤, 50% 從上到下標籖)。
- 將 背景透明度 設為 1 以使標籤的背景完全透明。
- 將 位置 設置為 {0.5, 0},{0.5, 0} 以將標籤移動到標籤的中心 (50% 從左到右 的父標籤, 50% 從上到下 的父標籤)。
- 將 大小 設為 {0.6, 0},{0.55, 0} 以擴大文字空間至父標籤的一半以上 (60% 在水平上和 55% 在垂直上)。
- 將 名稱 設為 標題文字標籤 。
- 將 FontFace 設置為 Montserrat 以符合未來風格的美感。
- 將 重量 設為 中等 以增加字體厚度。
- 將 文字 設置為 撿起一個爆破器 。
- 啟用 文字縮放 。
創建容器為你的衝擊按鈕容器和選擇箭頭。
將 圖像標籤 插入 選擇框架 。
選擇新標籤，然後在 屬性 窗口中，
- 移除預設值 圖像 值。
- 將 AnchorPoint 設為 0.5, 1 以在標籤底部中心設定標籤的起始點 (由左到右標籤 50% 和由右到左 100%)。
- 將 背景顏色 設為 0, 0, 0 以使標籤變黑。
- 將 背景透明度 設為 0.3 來減少標籤的不透明度，並且在體驗中找到所有的黑色 UI 元素。
- 將 位置 設置為 {0.5, 0},{1, 0} 以將標籤設置在框架的底部中央 (從左到右框架的左邊到右邊的 50% 和從上到下框架的父親)。
- 將 大小 設為 {1, 0},{0.77, 0} 以擴大標籤區域到提示下方的空間（100% 水平並 77% 垂直）。
包裝容器的角落。
- 將 UICorner 對象插入標籤。
- 選擇新的角對物件，然後在 屬性 窗口中，將 角徑 設置為 0.075, 0 以圍繞角落。
為您的衝擊按鈕創建容器。
將 框架 插入步驟 4 的標籤。
選擇新框架，然後在 屬性 視窗中，
- 將 AnchorPoint 設為 0.5, 0.5 以中間設定新框架的起始點 (從左到右框架的左邊到右邊，50% 從上到下框架的邊緣)。
- 將 背景透明度 設為 1 以使框架的背景完全透明。
- 將 位置 設置為 {0.5, 0},{0.5, 0} 以將框架放置在其父標籤中央 (50% 從左到右，父標籖的頂部到底部有 50%)。
- 將 大小 設為 {0.85, 0},{0.77, 0} 以擴大框架區域至標籤的大多數 (85% 水平和 77% 垂直的父標籤)。
- 將 名稱 設為 容器 。
為所有未來的衝擊按鈕創建墊。
- 將 UIListLayout 對象插入步驟 5 中的框架。
- 選擇新的頁面對物件，然後在 屬性 視窗中，
- 將 墊貼 設為 0.035, 0 以提供所有未來按鈕之間的空間。
- 將 FillDirection 設置為 水平 ，以便每個按鈕靠近 друг друга。
- 將 水平齊整 和 垂直齊整 設置為 中心 ，讓每個按鈕都齊整在一起。
創建左側的導航按鈕。
從步驟 4 插入 圖像按鈕 對象。
選擇新按鈕，然後在 屬性 窗口，
- 移除預設值 圖像 值。
- 將 錨定點 設為 0, 0.5 以在左中間的新按鈕原點設置 (0% 從左邊至右邊，50% 從上邊至下邊)。
- 將 背景透明度 設為 0.15 以提供按鈕選擇時視覺反饋。
- 將 位置 設為 {0.02, 0},{0.5, 0} 提供墊芙位置在按鈕的左邊 (2% 從左邊到右邊的父容器，50% 從上到下的父容標籤)。
- 將 大小 設置為 {0.04, 0},{0.33, 0} 使選擇按鈕比較小於輻射按鈕 (4% 在水平上和 33% 在垂直上)。
- 將 名稱 設置為 導航按鈕左邊 。
圍繞按鈕的角落。
- 將 UICorner 對象插入按鈕。
- 選擇新的角對物件，然後在 屬性 窗口中，將 彎角徑 設置為 0.1, 0 以圍繞角落。
將 圖像標籤 對象插入按鈕。
選擇新標籤，然後在 屬性 窗口中，
- 將 錨定點 設為 0.5, 0.5 以設定新標籤的起始點在標籤中央 (50% 從左到右標籤, 50% 從上到下標籖)。
- 將 位置 設置為 {0.45, 0},{0.5, 0} 以在標籤位於其父按鈕中央 (45% 從左到右的父按鈕, 和 50% 從上到下的父按鈕) 。此值不
- 將 大小 設為 {0.8, 0},{0.8, 0} 以擴大標籤區域，在提示下方的空白位置 (80% 水平和 80% 垂直) 。
- 將 背景透明度 設為 1 以使圖像的背景完全透明。
- 將 圖像 設置為 rbxassetid://14309187238。
- 將 ScaleType 設置為 適合 。
創建正確的導航按鈕。
Duplicate 導航按鈕左邊 .
選擇重複按鈕，然後在 屬性 窗口中，
- 將 錨定點 設為 1, 0.5 以設定新按鈕的起始點在右中間（100% 從左到右按鈕，50% 從上到下按鈕）。
- 將 位置 設置為 {0.98, 0},{0.5, 0} 提供墊芙位置在按鈕的右邊 (從左邊到右標籤的親容器的 98% 從上到下) 。
- 將 名稱 設置為 導航按鈕右邊 。
選擇其 圖像標籤 子對物件。
- 將 旋轉 設為 180 以翻轉圖像。
- 將 位置 設置為 {0.55, 0},{0.5, 0} 以在標籤位於其父按鈕中央 (55% 從左到右的父按鈕, 50% 從上到下的父按鈕) 。此值不在中
創建 選擇 按鈕。
將 圖像按鈕 插入 零件 。注意這個過程會將選擇按鈕從 選擇框 分開，讓您可以在選擇按鈕的主部分從選擇框添加墊養。
選擇新按鈕，然後在 屬性 窗口，
- 移除預設值 圖像 值。
- 將 錨定點 設為 0.5, 1 以在自身底部中心設定新按鈕的起始點 (50% 從左到右按鈕, 並且 100% 從上到下按鈕)。
- 將 背景透明度 設為 0.15 以提供按鈕選擇時視覺反饋。
- 將 位置 設置為 {0.5, 0},{0.99, 0} 以在容器底部中心設置按鈕 (50% 從左到右 父 框 的左邊, 99% 從上到下 父 框 的頂部)。
- 將 大小 設為 {0.17, 0},{0.18, 0} 以延伸按鈕下方的按鈕 (17% 水平和 18% 垂直的父親框架).
- 將 名稱 設置在 選擇按鈕 。
圍繞按鈕的角落。
- 將 UICorner 對象插入按鈕。
- 選擇新的角對物件，然後在 屬性 窗口中，將 彎角徑 設置為 0.2, 0 以圍繞角落。
將 文字標籤 對象插入按鈕，以便您可以顯示要求行動作。
選擇新標籤，然後在 屬性 窗口中，
- 將 錨定點 設為 0.5, 0.5 以設定新標籤的起始點在標籤中央 (50% 從左到右標籤, 50% 從上到下標籖)。
- 將 背景透明度 設為 1 以使標籤的背景完全透明。
- 將 位置 設置為 {0.5, 0},{0.5, 0} 以將標籤移動到按鈕中央 (50% 從左 到右 的親按鈕左邊, 50% 從上 到下 的親按鈕右邊)。
- 將 大小 設為 {0.9, 0},{0.55, 0} 以擴大文字區域的寬度，達到將文字區域擴大至親標籤的大部分寬度的 90% 或 55% 。
- 將 名稱 設置在 SelectTextLabel 。
- 將 FontFace 設置為 Montserrat 以符合未來風格的美感。
- 將 重量 設為 中等 以增加字體厚度。
- 將 文字 設置為 選擇 。
- 啟用 文字縮放 。
建立一個槍械按鈕預製。
- 在 ReplicatedStorage 服務中，創建一個資料樣本 存檔 資料樣本以整理您的 UI 對象。樣本使用 Instances 資料樣本，並且有一個子資料樣本 1>Guis1>。
- 將 圖像按鈕 對象插入 Guis 文件夾。
- 選擇新按鈕，然後在 屬性 窗口，
- 移除預設值 圖像 值。
- 將 錨定點 設為 0.5, 0.5 以中間的新按鈕原點設置新按鈕的起始點 (50% 從左到右按鈕, 50% 從上到下按鈕)。
- 將 背景透明度 設為 0.65 提供視覺反饋，讓按鈕不是在焦點上。在步驟 12 中的程式碼提供程式碼視覺反饋，當按鈕在焦點上時提供程式碼視覺反饋。
- 將 頁面設計程序 設置為 2。
- 將 名稱 設置為 BlasterButtonPrefab 。
- 將 大小 設為 {0.8, 0},{0.8, 0}。
- 將 圖像透明度 設為 1 以完全透明化圖像。
- 將 UIAspectRatioConstraint 插入 BlasterButtonPrefab 以確保按鈕的外觀比例在零件內無論玩家的屏幕尺寸如何保持一致。
- 圍繞按鈕的角落。
- 將 UICorner 對象插入 BlasterButtonPrefab 。
- 選擇 UICorner ，然後在 屬性 窗口中設置 CornerRadius 為 1> 0.05, 01> 以圍繞角落。
- 將 圖像標籤 插入 BlasterButtonPrefab 中。
- 選擇新標籤，然後在 屬性 窗口中，
- 移除預設值 圖像 值。
- 將 錨定點 設為 0.5, 0.5 以設定新標籤的起始點在標籤中央 (50% 從左到右標籤, 50% 從上到下標籖)。
- 將 背景透明度 設為 1 以使標籤的背景完全透明。
- 將 位置 設置為 {0.52, 0},{0.497, 0} 以將標籤放置在父按鈕的中間 (52% 從左到右的父按鈕, 49.7% 從上到下的父按
- 將 大小 設為 {1.20, 0},{0.9, 0} 以擴大標籤區域外的按鈕區域 (120% 水平和 90% 垂直的父按鈕)。
- 將 ScaleType 設置為 適合 。
參考以下 ReplicatedStorage 腳本內的示例 Laser Tag 位置文件，以程式顯示按鈕對於每個噴射器，並在玩家選擇不專注的按鈕時對按鈕進行擴大/縮放，並將玩家的腳色選擇鍵綁定到他們的虛擬人偶。
下列指令碼需要一組工作 together 的指令碼，以創建屠刀選擇器。當玩家加入體驗或重生後，他們的生命值達到零時，這些指令碼將啟動所有的屠刀選擇器的 UI 元素，直到玩家做出選擇。
現在，每次玩家加入體驗或重生回到回合後，玩家的生命值達到零時，會顯示砲選擇器 UI，他們可以作出選擇，每個按鈕按鈕按鈕按鈕按鈕按鈕按鈕按鈕按鈕按鈕按鈕按鈕按鈕按鈕按鈕按鈕按鈕按鈕按鈕按鈕按鈕按鈕按鈕按鈕按鈕按鈕按鈕按鈕按鈕按鈕按鈕按鈕按
爆破按鈕
爆炸按鈕是玩家使用體驗通過移動或平板電腦設裝置來爆炸他們的爆炸器，如果他們使用體驗通過無線網路連接到體驗，則會使用一個圖示表示箭頭和爆炸按鈕以傳送通訊無文字。
要正確重現示範 Laser Tag 體驗內的爆炸按鈕：
將 圖像按鈕 插入 HUDGui ScreenGui 對物件。
在 Explorer 窗口中，導航至 StarterGui 服務。
將物件標擺放在其子對象 HUDGui 上，然後單擊 ⊕ 圖示。一個上下文菜單顯示。
從上下文菜單中，插入 圖像按鈕 。
在視角中，將按鈕移動到玩家的讚嘆按鈕會自然放置的位置，然後在 屬性 窗裝置中，
- 將 圖像 設置為 rbxassetid://18308375035 以顯示爆炸按鈕圖示。
- 將 按下圖像 設置為 rbxassetid://18308372558 顯示玩家按下按鈕時的倒轉版本圖示。
- 將 背景透明度 設為 1 以使標籤的背景完全透明。
- 將 名稱 設置為 爆破按鈕 。
- 將 ScaleType 設置為 Fit ，以便圖像能夠盡可能地盡粘在容器內，而不會在各種屏幕尺寸上擴展。
- 將 圖像透明度 設為 0.3 以減少標籤的不透明度，以便與體驗中的所有黑色 UI 元素匹配。
將 UIAspectRatioConstraint 插入 爆破按鈕 來確保按鈕的外觀比例保持不變，無論玩家的屏幕尺寸如何。
參考以下 ReplicatedStorage 指令碼內的 雷射標籤 位置，以程式碼顯示雷射按鈕，當玩家使用裝置上的觸摸輸入功控制。
下列指令碼需要一組模組指令碼，這些指令碼可以相互作用，以設置主要的頭顯示器 (HUD)，包括 setupTouchButtonAsync 。當玩家加入回合並選擇他們的激光器後，這些 HUD 用戶界面元素將確保所有 HUD 用戶界面元素正確顯示給玩家狀態、裝置和團隊狀態。
現在，當玩家加入體驗並使用裝置上的觸摸輸控制時，按鈕按鈕會顯示在跳躍按鈕的右上角。
玩家介面
按照 Wireframe Your Layouts 的視覺階層最佳練習，這個區域教你如何實現所有關於玩家狀態的UI元素。這個集合UI元素是靠近玩家注意力的方式，因為玩家可以理解這個隱藏信息，而不會從遊遊玩中分散注意力。
玩家指示器
玩家指示器是玩家參考到快速解碼屬性的 UI 零件，玩家在他們重生到他們的團隊伍生成區域時會參考到它。 範例雷射標籤體驗提供兩個版本的玩家指示器，取決於玩家是否在 綠色 或 粉紅色 團隊。
按照選擇一個顏色主題的指示，玩家指示器的兩個版本結合團隊顏色以一種簡單、獨特的圖示與最小限度的細節，以便在小型屏幕上保持可讀。提供兩種視覺回饋形式是重要的，因為這會幫助保持設計對玩家盲紅色的設計。
要正確重現玩家指標項目內的 雷射標籤 體驗：
將 框架 插入 HUDGui 對物件。
- 在 Explorer 窗口中，導航至 StarterGui 服務。
- 將物件標指针指向其子對象 HUDGui ，然後按一下⊕圖示。一個上下文菜單顯示。
- 從上下文菜單中，插入 框架 。
選擇新的 框架 ，然後在 屬性 窗口中，
將 AnchorPoint 設為 0, 1 以在框架底部中設定框架的起始點 (從左到右框架的左邊到右邊的 0% 從左邊到右邊的框架, 100% 從右邊到框架的底部)。
將 背景透明度 設為 1 以使標籤的背景完全透明。
將 名稱 設置在 PlayerDisplay 。
將 位置 設置為 {0.02, 0},{0.97, 0} 以設置屏幕頂左邊的框。
將 大小 設為 {0.23, 0},{0.08, 0} 以縮短和擴大框架。
啟用 ClipsDescendants 以彈出框架外的子孫 GuiObjects。
建立方形形狀。
將 圖像標籤 插入 玩家顯示器 。
選擇新標籤，然後在 屬性 窗口中，
- 將 圖像 設置為 rbxassetid://14304828123 以顯示三角形圖示。
- 將 AnchorPoint 設為 1, 1 以在標籤底右角設定標籤的起始點 (100% 從左到右標籤, 100% 從右到左標籖)。
- 將 背景透明度 設為 1 以使標籤的背景完全透明。
- 將 名稱 設置為 區塊 。
- 將 位置 設置為 {1,0},{1,0} 以將標籤設置在框架的右側。
- 將 大小 設為 {1.858, 0},{0.581, 0} 以擴大標籤在框架外的標籤，並將其縮小至 {1.858, 0},{0.581, 0} 以縮短框架的長度。
- 將 圖像透明度 設為 0.15 以使標籤稍微透明。
- 將 ScaleType 設置為 Fit ，以便圖像能夠盡可能地盡粘在容器內，而不會在各種屏幕尺寸上擴展。
- 將 UIAspectRatioConstraint 插入 Block 以確保標籤和其子元素的 UI 元素的外觀比例保持不變，無論玩家的屏幕尺寸。
- 選擇新限制式，然後在 屬性 窗口中設置 外觀比例 為 13.78。
為玩家創建盒直放。
將 圖像標籤 插入 玩家顯示器 。
選擇新標籤，然後在 屬性 窗口中，
- 移除 圖像 屬性中的預設資產ID。 步驟 7 的腳本程式會程式上插入玩家的頭像到圖像標籤。
- 將 AnchorPoint 設為 0, 1 以在標籤的左下角設定標籤的起始點 (0% 從左到右標籤, 100% 從上到下標籖)。
- 將 背景顏色3 設為 0, 0, 0 以設定標籤的背景顏色為黑色。
- 將 背景透明度 設為 0.3 來減少標籤的不透明度，並且在體驗中找到所有的黑色 UI 元素。
- 將 名稱 設為 玩家攝影機 。
- 將 位置 設置為 {0.11, 0},{1, 0} 以將標籤設置在 多邊形狀 的左側。
- 將 大小 設為 {0.23, 0},{1, 0} 以縮小標籤。
- 將 圖像透明度 設為 0.15 以使標籤稍微透明。
- 將 ScaleType 設置為 Fit ，以便圖像能夠盡可能地盡粘在容器內，而不會在各種屏幕尺寸上擴展。
- 將 UIAspectRatioConstraint 插入 PlayerPortrait 來確保標籤和其子的 UI 元素的外觀比例保持相同，無論玩家的屏幕尺寸。
- 將 UICorner 插入 PlayerPortrait ，然後在 屬性 窗口中設置 1>CornerRadius1> 為 4> 0.05, 04> 以稍微圓潤角落。
為玩家的名稱建立文字標籤。
將 文字標籤 對象插入 玩家顯示器 。
選擇新標籤，然後在 屬性 窗口中，
- 將 錨定點 設為 0, 0.5 以在左中間的新按鈕原點設置 (0% 從左邊至右邊，50% 從上邊至下邊)。
- 將 背景透明度 設為 1 以使標籤的背景完全透明。
- 將 名稱 設置為 PlayerNameTextLabel 。
- 將 位置 設為 {0.35, 0},{0.72, 0} 以將標籤放在容器的右側 (35% 從左到右的父標籤，72% 從上到下的父標籤)。
- 將 大小 設為 {0.52, 0},{0.3, 0} 以便文字可以佔據大多數方形形狀區域 (52% 在水平上和 30% 在垂直上的父親框架).
- 將 FontFace 設置為 Montserrat 以符合未來風格的美感。
- 將 重量 設為 bold 以增加字體的厚度。
- 移除 文字 屬性內的預置文字。步驟 7 中的腳本程式會程式上玩家的名標籤。
- 啟用 文字縮放 。
- 將 TextXAlignment 設置為 左 。
創建左邊玩家直放像的團隊圖示和顏色。
將 文件夹 插入 玩家顯示 ，然後重命名為 團隊圖示 。
創建 綠色 團隊圖示和顏色。
- 將 圖像標籤 插入 團隊圖示 。
- 選擇新標籤，然後在 屬性 窗口中，
- 將 AnchorPoint 設為 0, 1 以在標籤的左下角設定標籤的起始點 (0% 從左到右標籤, 100% 從上到下標籖)。
- 將 背景顏色3 設為 88, 218, 171 以設定標籤的背景顏色為薄荷綠。
- 將 名稱 設為 TeamAIcon 。
- 將 位置 設置為 {0, 0},{1, 0} 以將標籤設置在框架的左側。
- 將 大小 設為 {0.135, 0},{0.58, 0} 以縮小標籤放在玩家直放像的左邊。
- 將 圖像透明度 設為 1 以使標籤透明。
- 設定一個自訂屬性來跟蹤這個標籤是綠團隊的。這個步驟對於步驟 7 中的腳本非常重要。
- 在 屬性 窗口中，移動至 屬性 區，然後按一下 plus 圖示。一個 pop-up 對話框顯示。
- 在 名稱 字段中，輸入 teamColor 。
- 在 Type 拖曳菜單中，選擇 BrickColor 。
- 點擊 儲存 按鈕。
- 將新 團隊顏色 屬性設置為 薄荷色 。
- 將 UIAspectRatioConstraint 插入 TeamAIcon 以確保標籤和其子的 UI 元素的外觀比例保持相同，無論玩家的屏幕尺寸。
- 創建圖示。
- 將 圖像標籤 插入 團隊圖示 .
- 選擇新標籤，然後在 屬性 窗口中，
- 將 圖像 設為 rbxassetid://14309678670 以顯示綠色團隊圖示。
- 將 AnchorPoint 設為 0.5, 0.5 以中間的標籤原點設置標籤的起始點 (來自左到右標籤的左邊至右邊的 50% 和自上到下標籤的底部的 50%)。
- 將 背景透明度 設為 1 以使標籤的背景完全透明。
- 將 名稱 設為 圖示 。
- 將 位置 設置為 {0.5, 0},{0.5, 0} 以將標籤設置在其父標籤中的中間。
- 將 大小 設為 {0.7, 0},{0.6, 0} 以縮小標籤。
- 將 ScaleType 設置為 Fit ，以便圖像能夠盡可能地盡粘在容器內，而不會在各種屏幕尺寸上擴展。
創建 粉紅色 團隊圖示和顏色。
- Duplicate 團隊圖示 和它的子孫。
- 選擇重複的 團隊圖示 ，然後在 屬性 視窗中，
- 將 背景顏色3 設為 255, 170, 255 以設定標籤的背景顏色為棕櫚粉。
- 將 名稱 設定為 TeamBIcon 。
- 將 teamColor 屬性設為 Carnation Pink 。
- 選擇 圖示 子 TeamBIcon ，然後在 屬性 窗口中將 1> 圖像1> 設置為 4> rbxassetid://14309678549 4> 以顯示粉紅色團隊圖示。
參考以下 ReplicatedStorage 指令碼內的 雷射標籤 位置文件，以程式設計的方式顯示玩家指標並在回合中玩家正在活動時顯示相應的團隊顏色和圖示。
下列指令碼需要一組模組指令碼，這些指令碼可以相互作用，以設定主要的頭顯示(HUD)，包括 startSyncingTeamColor、setPlayerName 和 setPlayerPortrait。 當玩家加入回合並選擇他們的武器後，這些指令碼確保所有的HUD UI元素正確顯示於玩家狀態、
現在，每次玩家重新加入或重新加入後，玩家指示器會在他們的屏幕左下角顯示。
Force Field 螢幕
力場螢幕是一個使用視區覆蓋視窗來告知玩家他們在加入或重新加入回合時，以及敵方團隊火力的安全性時，是安全的 force 場。 按照 選擇一種藝術風格 的美學指針，這個示例雷射標籤體驗使用半透明的六
要正確重現示例 雷射標籤 體驗內的力場畫面：
將 圖像標籤 插入 ForceFieldGui 對物件的 ScreenGui 。
在 Explorer 窗口中，導航至 StarterGui 服務。
將物件標擺放在其子對象 ForceFieldGui 上，然後單擊 ⊕ 圖示。一個上下文菜單顯示。
從上下文菜單中，插入 圖像標籤 。
選擇新標籤，然後在 屬性 窗口中，
將 圖像 設置為 rbxassetid://14462567888。
將 背景透明度 設為 0.8 以使強力護盾變成半透明。
將 大小 設為 {1, 0},{1, 0} 以填滿圖像全尺寸 (100% 水平和 100% 垂直的父親 ScreenGUI)。
將 ScaleType 設置為 Tile 以在整個屏幕上展示六邊形瓷磚。
將 磚塊尺寸 設為 {0, 104},{0, 180}。
將 UIGradient 對象插入標籤。
選擇新的傾斜度對物件，然後在 屬性 窗口中，
將 顏色 設置為開始為藍色的顏色順序，然後再次變為白色。
將 顏色 設置為 120, 192, 250 以應用淺藍色色調到所有六邊形。
單擊 顏色 屬性，然後單擊 ⋯ 按鈕。一個顏色順序會顯示。
每個三角形都是由三角形階級決定的鍵盤點，用於決定顏色值在圖像的左右兩側。
按一下並拖曳顏色順序直到您達到 時間 值的 0.05 ，然後點擊 顏色 旁邊的小方塊來開啟 2>顏色2> 畫面。
選擇一個白色的亮，然後關閉 pop-up 窗口。
按一下並拖曳顏色順序直到您達到<a href="/reference/engine/datatypes">0.95</a>，然後再次打開<a href=\"#Colors\">顏色頁面</a>，然後選擇您之前的顏色<a href=\"#ホワイト\">白色</a>。
將 旋轉 設為 225 以在左上角和右下角的藍色區域顯示您的顏色順序。
將 透明度 設為一個數字順序，讓力場看起來像是漂亮的。
單擊透明度屬性，然後單擊⋯按鈕。一個數字順序會顯示。每個開始和結束數字順序的方塊是一個關鍵，它將在圖像從左到右的圖像中的每個方塊的透明值決定。
設定數字順序中的時間和值屬性：
- 時間 = 0， 值 = 0> 0.250>
- 時間 = .101， 值 = 0> 0.8750>
- 時間 = .183 , 值 = 0> 00>
- 時間 = .3， 值 = 0> 10>
- 時間 = .7 , 值 = 0> 10>
- 時間 = 1， 值 = 0> 0.90>
從步驟 2 複製 圖像標籤 。
選擇 UIGradient 對象在重複標籤內，然後在 屬性 窗口中，
將 旋轉 設為 -45 以反射圖像，以便它們在 Y 軸上呈鏡像。
修改 透明度 以讓閃光更有機會。
- 單擊 透明度 屬性，然後單擊 ⋯ 按鈕。一個數字順序會顯示。
- 選擇第三關鍵格 keyframe，然後按一下 刪除 按鈕。
參考以下 ReplicatedStorage 指令碼內的 Laser Tag 位置文件，以程式碼顯示玩家加入或重新加入回合時顯示的力場畫面。
下列 ReplicatedStorage.ForceFieldClientVisuals 客戶腳本會以 ForceField 視覺的默認替換品來替換玩家載入體驗並在 StarterGui.ForceFieldGui 上生成。當玩家載入體驗並
這個指令從聆聽當 ForceField 添加到角色時開始，停用預設第一人稱視角下的力場視圖，然後啟用 ForceFieldGui ScreenGui 對物件。注意，這會導致玩家在重新加入體驗時影響第三人稱視角。
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)
現在，當玩家重生或重新加入回合後，新的力量護盾畫面將顯示，而不是預設的第一人稱 ForceField 視覺。
重生屏幕
重生屏幕是一個 UI 元素，使視窗模糊，以便告知玩家他們已被標記，並且伺服器正在將他們重生回到他們的重生區。這個 UI 元素很重要，因為它讓玩家有時間處理他們被標記出來的事實，並在進行遊戲後再次加入積分回合。
有關在示例雷射標籤體驗中自訂重生行為的更多資訊，請參閱 重生角色 從遊戲程式學術教學。
要正確重製樣本 雷射標籤 體驗內的重生屏幕：
創建中央資訊欄。
將 圖像標籤 插入 狀態檢視器 對物件 ScreenGui 。
在 Explorer 窗口中，導航至 StarterGui 服務。
將鼠標擺放在其子 OutStateGui 物件象上，然後單擊 ⊕ 圖示。一個上下文菜單顯示。
從上下文菜單中，插入 圖像標籤 。
選擇新標籤，然後在 屬性 窗口中，
將 錨定點 設為 0.5, 0.5 以中間的新按鈕原點設置新按鈕的起始點 (50% 從左到右標籤, 50% 從上到下標籖)。
將 背景透明度 設為 1 以使標籤的背景完全透明。
將 位置 設置為 {0.5, 0},{0.5, 0} 以在容器中央設置標籤(從左到右親屏GUI的左邊到右親屏GUI的右邊50%)。
將 大小 設為 {0.48, 0},{0.06, 0} 以擴大標籤 (48% 水平上和 6% 垂直上的 parent ScreenGUI)。
將 名稱 設置為 區塊 。
將 圖像 設置為 rbxassetid://14304827265 以使圖像成為三角形。
將 圖像顏色 設置為 0,0,0 以使三角形黑。
將 圖像透明度 設為 0.3 來減少標籤的不透明度 30%，並且在體驗中匹配所有黑色 UI 元素。
將 UIAspectRatioConstraint 插入 Block 以確保標籤和其子元素的 UI 元素的外觀比例保持不變，無論玩家的屏幕尺寸。
選擇新限制式，然後在 屬性 窗口中設置 外觀比例 為 13.78。
將 文字標籤 插入 區塊 以獲取資訊文字。
選擇新標籤，然後在 屬性 窗口中，
將 AnchorPoint 設為 0.5, 0.5 以中間的標籤原點設置標籤的起始點 (來自左到右標籤的左邊至右邊的 50% 和自上到下標籤的底部的 50%)。
將 背景透明度 設為 1 以使標籤的背景完全透明。
將 位置 設置為 {0.5, 0},{0.5, 0} 以在標籤位於其父標籤中央 (50% 從左到右，父標籤的頂部到底部) 設置標籤。
將 大小 設為 {.85, 0},{0.55, 0} ，以便文字可以佔據大多數三角形標籤域 (85% 在水平上，55% 在垂直上)。
將 名稱 設為 BodyTextLabel 。
將 FontFace 設置為 Montserrat 以符合未來風格的美感。
將 重量 設為 bold 以增加字體的厚度。
將 文字 設置為 重生… 。
將 TextColor3 設為 255, 255, 255 以使文字變白。
啟用 文字縮放 。
創建標題。
將 圖像標籤 插入 區塊 。
選擇新標籤，然後在 屬性 窗口中，
將 AnchorPoint 設為 0.5, 1 以在標籤底部中心設定標籤的起始點 (由左到右標籤 50% 和由右到左 100%)。
將 背景透明度 設為 1 以使標籤的背景完全透明。
將 位置 設置為 {0.5, 0},{0, 0} 以在標籤位於其父標籤中央上方設置標籤 (50% 從左到右，父標籤的右邊至左邊)。
將 大小 設為 {0.46, 0},{0.56, 0} 以擴大標籤 (46% 水平，56% 垂直的父標籤).
將 名稱 設為 標題 。
將 圖像 設置為 rbxassetid://14304826985 以使圖像成為多向漸漸消失。
將 圖像顏色 設為 245, 46, 46 以使紅色漸漸消失，表示玩家暫時離開遊戲。
將 文字標籤 插入 標題 為了提供資訊文字。
選擇新標籤，然後在 屬性 窗口中，
將 AnchorPoint 設為 0.5, 0.5 以中間的標籤原點設置標籤的起始點 (來自左到右標籤的左邊至右邊的 50% 和自上到下標籤的底部的 50%)。
將 背景透明度 設為 1 以使標籤的背景完全透明。
將 位置 設置為 {0.5, 0},{0.5, 0} 以在標籤位於其父標籤中央 (50% 從左到右，父標籤的頂部到底部) 設置標籤。
將 大小 設為 {.85, 0},{0.55, 0} 以便文字可以佔據大部分漸漸區域 (85% 水平和 55% 垂直的父標籤)。
將 名稱 設為 標題文字標籤 。
將 FontFace 設置為 Montserrat 以符合未來風格的美感。
將 重量 設為 黑色 以增加字體。
將 文字 設置為 標記 - 你退出了！ 9. 將 TextColor3 設為 255, 255, 255 以使文字變白。
啟用 文字縮放 。
在屏幕邊緣創建漸漸消失的層次。
- 將 圖像標籤 插入 OutstateGui 。
- 選擇新標籤，然後在 屬性 窗口中，
- 將 AnchorPoint 設為 0.5, 0.5 以中間的標籤原點設置標籤的起始點 (來自左到右標籤的左邊至右邊的 50% 和自上到下標籤的底部的 50%)。
- 將 背景顏色3 設為 0,0,0 以將標籤的背景顏色設為黑色。
- 將 背景透明度 設為 0.5 以使標籤的背景半透明。
- 將 位置 設置為 {0.5, 0},{0.5, 0} 以在容器中央設置標籤 (從左到右容器屏幕側面 50% ，從上到下容器屏幕側面 50%)。
- 將 大小 設為 {1, 0},{1, 0} 以擴大標籤到整個屏幕 (100% 水平和 100% 垂直的父親 ScreenGUI)。
- 將 ZIndex 設為 -1 以顯示漸漸在其他 UI 元素後面的漸漸。
- 將 名稱 設為 標題 。
- 將 圖像 設為 rbxassetid://14309518613 以使圖像漸漸消失。
- 將 圖像透明度 設為 0.1 以使漸漸淡出。
為了提高履約，您可以跳過圖像資產，並且使用 UIGradient 對象，以自訂透明度數據順序。要了解更多關於此漸移技術的內容，請參閱 UI 外觀模組化器 - 漸移。
參考以下 ReplicatedStorage 指令碼內的 Laser Tag 位置文件，程式顯示玩家生命值達到零時，並在重生過程中返回到他們的團隊重生區。
下列 ReplicatedStorage.PlayerStateHandler 客戶端腳本包含啟動不同類型的行為，根據 playerState 屬性。所有事件回應都是在此腳本中按照類似的行為啟動或關閉玩家控制、攝影機移動和哪個 UI 層可以顯示。
玩家的生命值達到零時，他們的 playerState 變成 TaggedOut，這會啟動 onTaggedOut() 功能。 1> onTaggedOut1> 會立即啟動以下行為：
- 玩家不能在競技場中移動。
- 玩家無法移動相攝影機。
- 玩家無法使用他們的激光槍。
- StarterGui.OutStateGui 變成專用。
當玩家重生時，他們的 playerState 變成 SelectingBlaster , 這會導致 onSelectingBlaster() 功能。 1> onSelectingBlaster1> 然後僅能啟用 4> StarterGui.P
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 的所有 guis。
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)
現在，當玩家的生命值達到零時，重生屏幕會顯示，直到玩家重生回到他們的重生區。
現在您對熱門 GuiObjects 對於屏幕上的 UI 熟悉了，嘗試重新創建 RoundResultsGui ScreenGui 對象和所有其子對於屏幕上顯示時玩家勝相符或失敗的時候。
創建表面GUI 對象
要在 3D 空間中顯示 UI 的表面，您可以將 每個個人玩家 的指令碼結合到一個 SurfaceGui 對象上，或將 ReplicatedStorage 服務中的 1> Class.SurfaceGui1> 對象作為您的 UI 的客戶端。這種方法可以確保您的 UI 和其指令碼都
SurfaceGui 物件本雷射標籤體驗只包含一個 Class.SurfaceGui 對象：冷卻計時器，它會在每個玩家的 Blaster 上顯示。
要創建 SurfaceGui 物件：
在 Explorer 窗口中，將鼠標擺動到 ReplicatedStorage 服務 上，然後按一下 ⊕ 圖示 。一個上下文菜單顯示。
從上下文菜單中，插入 零件 對物件。
將 ScreenGui 對象插入零件。
根據其子 表面導航 元素的上下文重新命名 表面導航 元素。
重複此過程，每個需要在零件表面上顯示的 UI 元素。
冷卻表
冷卻計時器是一個 UI 元件，可以告訴玩家他們能否爆炸他們的迪拜砲彈再次。這個稍微的暫停會讓玩家無法像點擊或按下按鈕一樣快地爆炸，這是雷射標籤遊遊玩的現實。
要正確重製冷卻時間計量器內 Laser Tag 體驗的冷卻時間：
創建零件來持有您的 SurfaceGui 對物件。
- 在 Explorer 窗口中，將鼠標擺動到 工作區 上，然後單擊 ⊕ 圖示。一個上下文菜單顯示。
- 從上下文菜單中，插入 區塊 零件。這是一個暫時位置，讓您可以在過程的每個步驟中查看變更。
將零件放置在玩家的角色會持有其 Blaster 的位置，然後在 屬性 窗口中，
將 透明度 設為 1 以完全透明化零件。
將 名稱 設置在 CooldownBarPrefab 。
將 大小 設為 0.169, 0.027, 2.537 以調整零件大小。
停用 可碰撞 和 可查詢 。
將 地面導航 插入 CooldownBarPrefab 中。
選擇新的 地面導航 ，然後在 屬性 視窗中
將 面 設為 上方 ，以便顯示面朝上方。
設置 LightInfluence 和 最大距離 至 0。
將 每平方呎徵集數量 設為 200。
創建黑色條。
將 圖像標籤 插入 地面導覽器 .
選擇新標籤，然後在 屬性 窗口中，
- 移除預設值 圖像 值。
- 將 AnchorPoint 設為 0.5, 0.5 以中間的標籤原點設置標籤的起始點 (來自左到右標籤的左邊至右邊的 50% 和自上到下標籤的底部的 50%)。
- 將 背景顏色3 設為 0,0,0 以將標籤的背景顏色設為黑色。
- 將 背景透明度 設為 0.4 以使標籤的背景半透明。
- 將 位置 設為 {0.5, 0},{0.5, 0} 以在容器中央設定標籤 (從左到右容器邊緣 50% 和從上到下容器邊緣 50%)。
- 將 大小 設為 {1, 0},{1, 0} 以擴大標籤到整個零件 (100% 水平和 100% 垂直的父親表面導覽).
- 將 名稱 設為 容器 。
包裝容器的角落。
將 UICorner 對象插入 Container 。
選擇 UICorner ，然後在 屬性 窗口中設置 CornerRadius 為 1> 0.15, 01> 以稍微圓潤角落。
創建紅色條。
- 將 圖像標籤 插入 容器 中。
- 選擇新標籤，然後在 屬性 窗口中，
- 移除預設值 圖像 值。
- 將 AnchorPoint 設為 1, 0.5 以在標籤的原始點 (標籤左邊至右邊 100% 從左邊至右邊, 標籤頂部至底部 50%) 設置標籤的起始點。
- 將 背景顏色3 設為 172, 13, 13 以設定標籤的背景顏色為深紅色。
- 將 背景透明度 設為 0.2 以使標籤的背景稍微透明。
- 將 名稱 設為 條狀態 。
- 將 位置 設置為 {1, 0},{0.5, 0} 以在容器的右中間設置標籤（100% 從左到右 的親標籤，50% 從上到下 的親標籤）。
- 將 大小 設為 {0, 0},{1, 0} 以延長標籤到其父標籤的頂部 (0% 水平和 100% 垂直)。這個步驟對於發生在步驟 8 中的梯形行為也有益。
包住標籤的角落。
- 將 UICorner 對象插入 Bar 。
- 選擇 UICorner ，然後在 屬性 窗口中設置 CornerRadius 為 1> 0.15, 01> 以稍微圓潤角落。
將 CooldownBarPrefab 移動到 ReplicatedStorage 。
創建資料結構來整理您的 UI 對象。樣例使用 資料樣本 資料樣本，並且有一個子資料樣本 Guis 資料樣本。
將 冷卻棒預製表演 移動到 Guis 中。
參考以下 ReplicatedStorage 指令碼內的 Laser Tag 位置的範例，Laser Tag 位置的程式碼會程式性地將冷卻計時器附加到玩家的雷射器，然後在玩家的雷射器爆炸後的紅色條狀動畫。
下列 ReplicatedStorage.FirstPersonBlasterVisuals 客戶端腳本處理所有視覺逻辑為玩家的第一人稱射擊機。需要一套模組腳本工作 together 設置射擊機視覺感更實際的為雷射標籤遊遊玩，包括 FirstPersonBlasterVisuals.addCoold
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
-- 更新相骨架位置和 RIG_OFFSET_FROM_CAMERA 對鏡攝影機的相對位置
rigModel:PivotTo(currentCamera.CFrame * RIG_OFFSET_FROM_CAMERA)
end
end)
-- 手柄在 blasterType 變更時變更視覺
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)
現在，當玩家發射他們的激光時，冷卻條會動畫來通知玩家，當玩家可以再次發射時。
創建 BillboardGui 對象
為了在 3D 空間中顯示遊戲程式碼，並且總是面向每個玩家的相機，例如玩家名稱或地圖標記，您可以作為 BillboardGui 對象兒童一個 BasePart 或 Attachment ，這些對象在 3D 空間中存在。
示例雷射標籤體驗包括 BillboardGui 服務內的兩個獨立 ReplicatedStorage 對象：
- 其他玩家指示器GUIPrefab - 顯示玩家在回合中啟用時，每個玩家頭上的粉紅色或綠色圓圈。
- TaggedOutIndicatorGuiPrefab 顯示在玩家被標記為退出回合時，他們的頭上。
在你創建了 BillboardGui 物件之後，你可以根據每個容器的目的來創建並自訂其子 GuiObjects 。 要在即將到來的部分中追蹤示的示例中展示，你可以學會在示例雷射標籤體驗中實現用戶界面元素的方式。 你可以調整
要創建 BillboardGui 物件：
- 在 Explorer 窗口中，將鼠標擺動到 Class.BasePart 或 Class.Attachment 上，然後單擊 1> ⊕1> 圖示。一個上下文菜單顯示。
- 從上下文菜單中，插入 BillboardGui 物件。
- 根據兒童 UI 元素的上下文重新命名 BillboardGui 。
- 重複此過程，每個玩家的頭上需要顯示上下文。
團隊指標
團隊指示是一個 UI 元素，可以告訴玩家哪個團隊的其他玩家屬於回合，讓他們可以容易地分別與自己的盟友和敵方團隊成員。這個資訊很重要，因為第一人稱射擊體驗的戰鬥區域需要玩家做出快速的戰略決定，而不會被標籤出局並且失去比相符。
要正確重現 雷射標籤 體驗內的團隊指標：
將 BillboardGui 對象插入暫時骨架。
在選單欄中，導航至頭像標籤，然後按一下建造機器。
從可用選項中選擇。 樣本使用 R15 裝備類輸入、 女性 身體形狀和 Rthro 虛擬人偶。 裝備顯示在 3D 視窗和 2> 探險家2> 窗口下的名稱為 5>Rig5> 。
在 Explorer 窗口中，導航至子機器 頭部 網格，然後單擊 ⊕ 圖示。一個上下文菜單顯示。
從上下文菜單中，插入 廣告牌GUI 。
選擇新的 廣告牌GUI ，然後在 屬性 視窗中
將 LightInfluence 設置為 0 以防止環境燈光影響指標的顏色。
將 名稱 設置為 其他玩家指示器預製碼 。
將 大小 設為 {0, 10},{0, 10} 以使標籤變得更小。
將 StudsOffsetWorldSpace 設為 0, 4, 0 以將它放置在骨架的針對器上。
將 框架 對象插入 OtherPlayerIndicatorPrefab 。
選擇新框架，然後在 屬性 視窗中，
將 AnchorPoint 設為 0.5, 0.5 以設定框架的起始點在標籤中央 (標籤左邊至右邊 50% ，標籤右邊至底部 50%)。
將 背景顏色3 設為 255, 3, 0 以將框架的背景顏色設為紅色預設顏色。
將 位置 設為 {0.5, 0},{0.5, 0} 以將框架放置在容器中央 (50% 從左到右的 parent BillboardGui 的左邊, 50% 從上到下的 parent BillboardGui 的上邊)。
將 大小 設為 {1, -2},{1, -2} 以縮短BillboardGui 的表面區域。
將 UICorner 對象插入 框架 以完全圍滿角落。
將 UIStroke 對象插入 框架 以繪製指標的圓形。
將 其他玩家指示器預製 移動到 ReplicatedStorage 。
參考以下 ReplicatedStorage 指令碼內的示例 Laser Tag 1A 位置文件，以程式顯示每個玩家在進行中的回合中屬於哪個隊伍，除非他們在敵方隊伍中並且遮蔽。
下列 ReplicatedStorage.OtherPlayerIndicatorGuiSetup 指令會在玩家重生到競技場參加活動時執行。它會通過呼叫 addIndicatorToCharacter() 函數來調用每個玩家角色參加活動的頭部位
如果其他玩家在同一個團隊，隊伍指示器總是會顯示，即使他們躲在 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 元素，該元素會告訴玩家在其他玩家不再活躍在回合中，並正在進行重生回到他們的重生區域。這些資訊對玩家來說很重要，因為第一人稱射擊體驗的遊戲方式需要玩家移動到下一個目標，以便在競技場中玩得安全，並且不會在競技場中玩得
要正確重現標記為止的指標內的示例雷射標籤體驗：
將 BillboardGui 對象插入暫時機器，讓您可以在每個過程步驟中查看變化。
在選單欄中，導航至頭像標籤，然後按一下建造機器。
從可用選項中選擇。樣本使用 R15 裝備類輸入、男性 身體形狀和 Rthro 虛擬人偶。裝備在 3D 視窗和 2> Explorer2> 窗戶下的名稱為 5>Rig5>。
在 Explorer 窗口中，導航至子機器 頭部 網格，然後單擊 ⊕ 圖示。一個上下文菜單顯示。
從上下文菜單中，插入 廣告牌GUI 。
選擇新的 廣告牌GUI ，然後在 屬性 視窗中
將 LightInfluence 設置為 0 以防止環境燈光影響指標的顏色。
將 名稱 設置為 TaggedOutIndicatorGuiPrefab 。
將 大小 設為 {3, 0},{0.5, 0} 以擴大標籤的空間。
將 StudsOffset 設為 0, 3.25, 0 以將它放置在玩家的頭上。
將 圖像標籤 對象插入 TaggedOutIndicatorGuiPrefab 。
選擇新標籤，然後在 屬性 窗口中，
- 將 AnchorPoint 設為 0.5, 0.5 以中間的標籤原點設置標籤的起始點 (來自左到右標籤的左邊至右邊的 50% 和自上到下標籤的底部的 50%)。
- 將 背景透明度 設為 1 以使標籤的背景完全透明。
- 將 名稱 設為 框架 。
- 將 位置 設為 {0.5, 0},{0.5, 0} 以將標籤設置在容器中央 (50% 從左到右的 parent BillboardGui 的左邊, 50% 從上到下的 parent BillboardGui 的上邊)。
- 將 大小 設為 {1, 0},{1, 0} 以擴大標籤到整個 BillboardGui (100% 水平和 100% 垂直的父親 BillboardGui)。
- 將 圖像 設置為 rbxassetid://14304826985 以使圖像成為多向漸漸消失。
- 將 圖像顏色 設為 245, 46, 46 以紅色漆標標籤。
為了提高履約，您可以跳過圖像資產，並且使用 UIGradient 對象，以自訂透明度數據順序。要了解更多關於此漸移技術的內容，請參閱 UI 外觀模組化器 - 漸移。
將 文字標籤 對象插入 框架 。
選擇新標籤，然後在 屬性 窗口中，
將 AnchorPoint 設為 0.5, 0.5 以中間的標籤原點設置標籤的起始點 (來自左到右標籤的左邊至右邊的 50% 和自上到下標籤的底部的 50%)。
將 背景透明度 設為 1 以使標籤的背景完全透明。
將 名稱 設為 BodyTextLabel 。
將 位置 設置為 {0.5, 0},{0.5, 0} 以將標籤設置在容器中央 (50% 從左到右的父標籤，50% 從上到下的父標籤)。
將 大小 設為 {0.85, 0},{0.7, 0} 以便文字可以佔據大部分漸漸區域 (85% 水平和 70% 垂直的父圖示標籤).
將 FontFace 設置為 Montserrat 以符合未來風格的美感。
將 重量 設為 bold 以增加字體的厚度。
將 文字 設置為 標記 。
將 TextColor3 設為 255, 255, 255 以使文字變白。
啟用 文字縮放 。
將 TaggedOutIndicatorGuiPrefab 移動到 ReplicatedStorage 。
參考以下 ServerScriptService 指令碼內的 Laser Tag 1A 位置文件，以程式方式顯示標記為退出提示的位置，而玩家正在重生回到他們的團隊生成區。
下列 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
-- 為此玩家所有的角色生成添加字符串
player.CharacterAdded:Connect(function(character: Model)
onCharacterAdded(player, character)
end)
end
-- 呼叫已有玩家在遊戲中
for _, player in Players:GetPlayers() do
onPlayerAdded(player)
end
-- 為所有未來玩家呼叫 onPlayerAdded
Players.PlayerAdded:Connect(onPlayerAdded)
現在，每當玩家的生命值達到零時，標記的提示將在他們重生時顯示在他們頭上。
恭喜您完成「用戶界面設計課程」！您現在擁有創作一種藝術風格的經驗，從設計配色到設計師在 Studio 的實現，您可以跟隨新的 UI 和功能性來延伸您的項目，或跟隨額外的教學課程，例如 遊戲程式碼課程 教您關於示範雷射