創建 HUD 儀表

A HUD 或 Heads-Up Display 是一組在遊戲過程中始終可見或可訪問的 UI 元素，例如得分顯示、健康儀表和菜單按鈕。對於大多數體驗來說，包含一個 HUD 是至關重要的，因為它顯示了幫助玩家在遊戲目標上取得成功的信息。

一個常見的 HUD 元素是健康儀表，左側帶有圖標，可以改編為計時器條、進度條或類似的東西。

使用 Hazardous Space Station 作為起始位置，以及 UI 基礎知識 - HUD 儀表 作為完成參考位置，本教程展示了：

• 設置和使用 設備模擬器 在多個模擬屏幕上測試您的設計。
• 使用 StarterGui 作為設計和存儲容器。
• 如何在內置 Roblox 控制和設備缺口/島嶼周圍定位/調整 UI 元素，例如在現代手機上的相機缺口。
• 如何將默認的 Roblox 健康儀表替換為您自己的儀表，並將其連接到角色的健康級別。
• 如何對健康儀表的中心部分進行動畫處理，並在五個顏色漸變關鍵點之間設置其顏色（紅色、橙色、黃色、石灰綠、綠色）。

啟用設備模擬器

Roblox 天生具備 跨平台 的特性，因為玩家可以在手機或平板電腦上發現並加入體驗，然後隨後在 PC 或控制台上繼續他們的遊戲。移動設備（手機和平板電腦）的屏幕空間最小，因此您的 UI 元素必須適合較小的屏幕，並且對玩家清晰可見。

測試不同平台的 UI 設計的最佳方法是使用 Studio 的 設備模擬器。此工具提供了一組預設設備選擇並允許您添加自己的自定義預設。

1. 在 Studio 中打開 Hazardous Space Station 模板。

2. 在 Studio 的 測試 菜單中，啟用 設備模擬器。

3. 在主視口上方的工具欄中，選擇一個手機模擬設備，例如 iPhone X 或 Samsung Galaxy A51。然後，將視圖大小設置為 適合窗口 以充分利用 Studio 中的最大空間。

   

創建屏幕容器

一個 ScreenGui 容器包含 UI 物件（GuiObjects），用於在玩家的屏幕上顯示（在本教程中，整個健康儀表）。要向每個加入體驗的玩家顯示 ScreenGui 及其子物件，請將其放置在 StarterGui 容器中。當玩家加入並且他們的角色首次生成時，ScreenGui 及其內容會克隆到該玩家的 PlayerGui 容器中，該容器位於 Players 容器內。

要插入一個空的 ScreenGui：

1. 在 Explorer 窗口中，找到 StarterGui 容器。

   

2. 將鼠標懸停在容器上，單擊 ⊕ 按鈕，插入一個 ScreenGui。

   

3. 將新容器重新命名為 HUDContainer 以反映其用途。

   

利用安全區域

現代手機充分利用整個屏幕，但通常包含佔用屏幕空間的缺口、切口和其他元素。每個 Roblox 體驗還包含 頂部工具條控制，以便快速訪問主菜單、聊天、排行榜 等等。

為了確保玩家可以看到並訪問所有 UI 而不被阻擾，Roblox 提供了 ScreenInsets 屬性，該屬性控制 ScreenGui 內容的安全區域內邊距。您在 ScreenGui 中放置的每個 UI 物件均相對於內邊距邊界。

雖然 CoreUISafeInsets 的默認設置確保所有 UI 物件不與 Roblox UI 和設備切口重疊，但 DeviceSafeInsets 對於有效利用有限的屏幕空間可能是更好的選擇，如下所示。

1. 在 Explorer 窗口中，選擇 HUDContainer。

   

2. 在 屬性 窗口中，將 ScreenInsets 屬性設置為 DeviceSafeInsets。

   

設置邊緣填充

將 ScreenInsets 設置為 DeviceSafeInsets 後，內容現在可以直接擴展到屏幕的物理頂部邊緣。然而，少量的 填充 可以幫助將健康儀表（以及容器內的其他物件）稍微遠離屏幕邊緣，以便看起來更乾淨，並防止被截斷。

向 UI 容器應用填充的其中一種方法是通過插入 UIPadding 修飾符：

1. 在 HUDContainer 中插入一個 UIPadding 修飾符。

   

2. 選中新的 UIPadding 物件，為容器的所有邊（PaddingBottom、PaddingLeft、PaddingRight、PaddingTop）輸入值 0, 16。這在容器的四周應用 16 像素的填充，無論屏幕的解析度如何。

   

構建健康儀表

配置好 屏幕容器 後，您可以開始使用 Roblox UI 物件（例如 框架 和 圖像標籤）構造健康儀表。

創建父框架

類似於設計應用程序，如 Figma 和 Photoshop，Roblox 中的 Frame 作為其他 UI 物件的容器。在本教程中，整個健康儀表將包含在一個父框架中，簡化在各種 HUD 佈局中的重新定位。

1. 在 HUDContainer 中插入一個 Frame。新的框架作為一個空的白色正方形出現在左上角。

   

   如果新框架未在視口中顯示，請確保您從 3D 視口右上角的 可視化選項 小工具中啟用了 GUI 覆蓋。

2. 將新的框架實例重命名為 MeterBar。

   

定位框架

在 Roblox 中，UI 物件的位置由包含 UDim2 坐標集表示，該集包含 X 和 Y 軸的 Scale 和 Offset 值：

• Scale 值表示相對於容器大小的 百分比，加上任何的 Offset 值。
• Offset 值表示在相對應的軸上移動物件多少 像素，加上任何的 Scale 值。

要將 UI 物件放置在屏幕容器的右上角，Scale 是最佳方法，因為 X 值為 1（100%）表示容器的右邊緣，與屏幕的物理像素大小無關。類似的，Y 值為 0（0%）表示容器的頂邊緣。

此外，您還需要設置父框架的右上 錨點 來定義其原點。可接受的值範圍在 0 和 1 之間，相對於物件的大小，因此錨點值 1, 0 將框架的錨點設置在其右上角。

1. 在 Explorer 窗口中，選擇您之前插入的 MeterBar 框架。

   

2. 在 屬性 窗口中，對 Position 輸入 1, 0, 0, 0 並按 Enter。Studio 將自動添加括號以形成 UDim2 的 {1, 0},{0, 0}。

3. 對 AnchorPoint 屬性輸入 1, 0。該框架現在應位於 設備安全區域 的右上角，由於 填充，稍微向內縮進。

   

調整框架大小

與位置相似，UI 物件的 Size 由包含 UDim2 坐標集表示，該集包含 X 和 Y 軸的 Scale 和 Offset 值。

默認情況下，新框架的尺寸為 {0, 100},{0, 100}，這意味著寬度（X）和高度（Y）皆為 100 像素。雖然在某些情況下使用嚴格的像素值很有用，但許多 UI 元件在設置為整體屏幕容器大小的 百分比 時，在多個屏幕上顯得更具響應性。

1. 選中 MeterBar 框架，訪問 屬性 窗口並導航到 Size 屬性。

2. 對其輸入值 0.35, 0, 0.05, 0，以設置 35% 寬和 5% 高，並且不增加像素偏移。

   

設計框架

默認情況下，Frames 填充為純白色。最終的健康儀表應具有較暗且稍微不透明的填充，以及深色邊框，以便在淺色和深色背景上都能更顯眼。

1. 選中 MeterBar 框架，為 BackgroundColor3 屬性輸入 0。Studio 將自動將其轉換為 RGB 值 [0, 0, 0]。

2. 輸入 0.75 作為 BackgroundTransparency 屬性。在 Roblox 中，透明度範圍從 0（完全不透明）到 1（完全透明），因此 0.75 等於在 Figma 或 Photoshop 等其他應用中的 25% 不透明度。

   

3. 插入一個 UIStroke 物件，這是一種強大的 UI 修飾符，為框架添加 可自定義的描邊。

   

4. 選中新的 UIStroke，設置以下屬性：

   • Thickness = 3
   • Transparency = 0.25（75% 不透明）

   

要完成儀表框架的設計，可以將角落圓潤化，形成 "藥丸" 形狀，而不是尖銳的矩形。

1. 在 MeterBar 框架中插入一個 UICorner 實例。

   

2. 選中新的 UICorner，將 CornerRadius 設置為 0.5, 0。使用比例值 0.5（50%）而不是像素值對於儀表條特別方便，因為這樣可確保無論容器多高或多寬，曲線都完全圓潤。

   

創建內部填充

現在健康儀表的容器框架已經完成，您可以添加一個 內部填充 部分來表示角色的可變健康。由於只需要一個實心填充區域，因此在父框架內部放置一個子 Frame 是合適的。

1. 在 MeterBar 框架中插入一個子 Frame。

2. 將新的框架實例重命名為 InnerFill。

   

3. 選中 InnerFill，設置以下屬性：

   • AnchorPoint = 0, 0.5（左邊緣和垂直中心）
   • Position = 0, 0, 0.5, 0
   • Size = 1, 0, 1, 0

   由於框架的子項根據父項的位置和大小而定，因此使用比例使內部框架填滿父項的整個寬度和高度，從父項的左邊緣開始。

   

4. 為了與父框架的 "藥丸" 形狀相匹配，在 InnerFill 中插入一個額外的 UICorner。

   

5. 選中新的 UICorner 修飾符，將其 CornerRadius 屬性設置為 0.5, 0，以與父 MeterBar 框架的 "藥丸" 形狀相匹配。

   

6. 為了更好地表示滿儀表表示良好健康，選中 InnerFill，並將其 BackgroundColor3 屬性設置為 [0, 225, 50]（稍後您將 編寫程式 以根據實際健康變化顏色）。

   

添加圖標

為了更清楚地表明儀表的用途，您可以在左側添加一個 圖像標籤，在這種情況下加入一個紅心，這通常象徵著健康或生命。

1. 在 MeterBar 框架中插入一個 ImageLabel。這個物件讓您可以應用作為圖檔上傳到 Roblox 的 2D 圖像資產。

2. 將新的標籤實例重命名為 Icon。

   

3. 選中 Icon，將其 ZIndex 屬性設置為 2。雖然新插入的 UI 物件始終層疊在先前插入的物件前面，但這一變更確保圖標總是在儀表的框架元素之上顯示。

   

4. 找到圖標的 Image 屬性，並輸入 rbxassetid://91715286435585，引用預先上傳的心形圖像（如果需要，您可以 導入 您自己的圖像並使用其資產 ID）。

   

5. 為了確保圖標的 ImageLabel 始終保持 1:1 的長寬比，插入一個 UIAspectRatioConstraint。雖然這個 約束 有可自定義的屬性來控制長寬比，但您可以保持其默認值不變。

   

6. 選中 Icon，通過改變以下屬性來最終確定其外觀和位置：

   • AnchorPoint = 0.5, 0.5（中心錨點）
   • BackgroundTransparency = 1（100% 透明）
   • Position = 0, 0, 0.5, 0（儀表的左側和垂直中心）
   • Size = 2, 0, 2, 0（相對於 MeterBar 框架的整體大小的 200%，由 UIAspectRatioConstraint 限制為 1:1）

   

約束大小

雖然 框架高度 設置為 0.05 （5%）在 16:9 的現代手機屏幕和遊戲顯示器上看起來很好，但在平板電腦和舊手機上，儀表可能看起來略高。您可以通過使用設備模擬器模擬 iPad 第七代 來檢查這一點。

為了使儀表條的高度在更寬的屏幕上保持一致，您可以應用 UISizeConstraint 來限制最大像素高度。

1. 在 MeterBar 框架中插入一個 UISizeConstraint。

   

2. 選中新的約束，將其 MaxSize 屬性設置為 inf, 20，以將其高度限制為 20 像素，同時不對寬度設置限制。

   

現在，儀表條在更寬和更高的屏幕之間保持了一致的高度。

替換默認健康儀表

Roblox 體驗包括一個默認的健康儀表，當角色受到損傷時，它會變得可見。如果您保持默認儀表可見，則它將重複並可能與自定義儀表重疊。

禁用默認儀表

要禁用默認健康儀表，您將在 StarterPlayerScripts 中使用一個 客戶端腳本（LocalScript），它調用 StarterGui:SetCoreGuiEnabled()。

1. 在 Explorer 窗口中，展開 StarterPlayer 容器，然後找到其中的 StarterPlayerScripts 容器。

   

2. 在該容器中插入一個新的 LocalScript 並將其重命名為 HideDefaultHealthMeter 以描述其目的。 StarterPlayerScripts 中的腳本在本地玩家加入體驗時自動運行，使其成為運行永久隱藏默認儀表的腳本的理想容器。

   

3. 當您插入新的腳本時，它會自動在新的腳本編輯器選項卡中打開（如果沒有，請雙擊 Explorer 窗口中的腳本）。

   在 HideDefaultHealthMeter 腳本中粘貼以下代碼：

   HideDefaultHealthMeter
   local StarterGui = game:GetService("StarterGui")
   
   -- 隱藏默認健康儀表
   StarterGui:SetCoreGuiEnabled(Enum.CoreGuiType.Health, false)

   代碼解釋

   行	目的
   1	獲取到與核心 服務 StarterGui 的參考，這代表了您創建自定義健康儀表的相同容器，其內容會克隆到加入體驗的每個玩家的 PlayerGui 容器中。
   4	調用該服務的 SetCoreGuiEnabled() 方法，指示禁用默認健康儀表 (false)。

如果您現在進行遊戲測試並受到傷害，您會注意到默認儀表被禁用並隱藏（在下一節中，您將編寫程式以 反映健康變化）。

監聽健康變化

所有默認 Roblox 角色模型都包含 Humanoid 類，該類為角色提供特殊行為和功能，例如設置其行走/奔跑速度並管理其健康。 Health 在服務器上變化會 複製 到每位玩家的客戶端，您可以檢測這些變化來更新自定義健康儀表的大小和顏色。

1. 在 Explorer 窗口中，找到 StarterCharacterScripts 容器，它位於 StarterPlayer 中。

   

2. 在該容器中插入一個新的 LocalScript，並將其重命名為 UpdateCustomMeter 以描述其目的。 StarterCharacterScripts 中的腳本在每次玩家的角色生成時自動運行，這使其成為運行每次重生時完全重置健康儀表的腳本的理想容器。

   

3. 在 UpdateCustomMeter 腳本的編輯窗口中，粘貼以下代碼：

   UpdateCustomMeter
   local Players = game:GetService("Players")
   
   -- 本地玩家、角色和人形的參考
   local player = Players.LocalPlayer
   local character = player.Character
   local humanoid = character:WaitForChild("Humanoid")
   
   -- 儀表條內部框架的參考
   local playerGui = player:WaitForChild("PlayerGui")
   local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill
   
   -- 漸變序列顏色（紅色、橙色、黃色、石灰、綠色）
   local gradient = {
   	Color3.fromRGB(225, 50, 0),
   	Color3.fromRGB(255, 100, 0),
   	Color3.fromRGB(255, 200, 0),
   	Color3.fromRGB(150, 225, 0),
   	Color3.fromRGB(0, 225, 50)
   }
   
   -- 函數以從分數點獲取漸變序列中的顏色
   local function getColorFromSequence(fraction: number): Color3
   	-- 每種顏色在漸變中定義了一個區段的開始和/或結束
   	local numSections = #gradient - 1
   
   	-- 每個區段表示 1 的一部分
   	local sectionSize = 1 / numSections
   
   	-- 確定請求的分數落入哪個區段
   	local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize
   
   	-- 獲取區段的開始和結束顏色
   	local sectionColorStart = gradient[sectionStartIndex]
   	local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart
   
   	-- 將分數標準化為在該區段內的 0 到 1 的數字
   	local fractionOfSection = math.clamp(fraction, 0, 1) % sectionSize / sectionSize
   
   	-- 基於標準化的分數從開始到結束的內插（Lerp）
   	return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)
   end
   
   local function onHealthChanged()
   	-- 計算新健康為最大健康的百分比
   	local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)
   
   	-- 設置儀表條為新大小/顏色目標
   	meterBarInner.Size = UDim2.new(healthFraction, 0, 1, 0)
   	meterBarInner.BackgroundColor3 = getColorFromSequence(healthFraction)
   end
   
   -- 監聽 humanoid 健康變化
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- 初次設置（或重置）儀表條大小/顏色為當前健康
   onHealthChanged()

   代碼解釋

   行	目的
   4‑6	獲取到本地 Player、其 Character 模型和其中的 Humanoid 類的參考。
   9‑10	獲取對儀表的 InnerFill 物件的參考，該物件隨著角色的健康變化需要調整大小和顏色。
   13‑19	聲明五種顏色的數組（紅、橙、黃、石灰、綠），以在不同點改變儀表的顏色；例如，滿血時為綠色，50% 時為黃色，0% 時為紅色，或者在關鍵點之間的任何分數處的顏色過渡。
   22‑41	輔助函數，返回任何漸變顏色關鍵點之間的顏色平滑過渡。
   43‑50	處理健康變化的函數。在這裡，它計算角色的 MaxHealth 的百分比，將 InnerFill 調整為該比例，然後將其顏色更新為來自 getColorFromSequence() 函數的顏色。
   53	主 事件 連接，檢測來自服務器的 Health 變化並調用 onHealthChanged() 函數。
   56	初次（在角色生成或重生時）調用 onHealthChanged() 函數，以根據正確的百分比調整 InnerFill 的大小和顏色。通常這將是滿寬度且為綠色。

如果您現在進行遊戲測試，您會注意到自定義儀表隨著角色受到傷害而正確更新大小和顏色：

動畫效果儀表條

為了給自定義儀表添加額外的潤色，您可以通過 補間（tweening） 動畫處理來緩慢改變儀表條的大小和顏色，持續時間為 ½ 秒。

1. 訪問您之前編輯過的 UpdateCustomMeter 腳本的腳本編輯器選項卡。

2. 選中所有行（CtrlA 或 ⌘A），然後粘貼以下代碼以替換它們：

   UpdateCustomMeter
   local Players = game:GetService("Players")
   local TweenService = game:GetService("TweenService")
   
   -- 本地玩家、角色和人形的參考
   local player = Players.LocalPlayer
   local character = player.Character
   local humanoid = character:WaitForChild("Humanoid")
   
   -- 補間屬性
   local tweenInfo = TweenInfo.new(0.5, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out)
   
   -- 儀表條內部框架的參考
   local playerGui = player:WaitForChild("PlayerGui")
   local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill
   
   -- 漸變序列顏色（紅色、橙色、黃色、石灰、綠色）
   local gradient = {
   	Color3.fromRGB(225, 50, 0),
   	Color3.fromRGB(255, 100, 0),
   	Color3.fromRGB(255, 200, 0),
   	Color3.fromRGB(150, 225, 0),
   	Color3.fromRGB(0, 225, 50)
   }
   
   -- 函數以從分數點獲取漸變序列中的顏色
   local function getColorFromSequence(fraction: number): Color3
   	-- 每種顏色在漸變中定義了一個區段的開始和/或結束
   	local numSections = #gradient - 1
   
   	-- 每個區段表示 1 的一部分
   	local sectionSize = 1 / numSections
   
   	-- 確定請求的分數落入哪個區段
   	local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize
   
   	-- 獲取區段的開始和結束顏色
   	local sectionColorStart = gradient[sectionStartIndex]
   	local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart
   
   	-- 將分數標準化為在該區段內的 0 到 1 的數字
   	local fractionOfSection = math.clamp(fraction, 0, 1) % sectionSize / sectionSize
   
   	-- 基於標準化的分數從開始到結束的內插（Lerp）
   	return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)
   end
   
   local function onHealthChanged()
   	-- 計算新健康為最大健康的百分比
   	local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)
   
   	-- 將儀表條的大小和顏色補間到新的目標
   	local tweenGoal = {
   		Size = UDim2.new(healthFraction, 0, 1, 0),
   		BackgroundColor3 = getColorFromSequence(healthFraction)
   	}
   	local meterBarTween = TweenService:Create(meterBarInner, tweenInfo, tweenGoal)
   	meterBarTween:Play()
   end
   
   -- 監聽 humanoid 健康變化
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- 初次設置（或重置）儀表條大小/顏色為當前健康
   onHealthChanged()

   關鍵的新增/變更

   行	目的
   2	獲取對 TweenService 的參考，以在腳本中實現補間功能。
   10	創建 TweenInfo 構造函數，定義所需補間的持續時間、緩和樣式 和 緩和方向。
   52‑57	而不是像前一版本那樣直接設置儀表的大小和顏色，聲明一個 tweenGoal 表，該表包含目標大小/顏色，然後使用 tweenInfo 和 tweenGoal 參數創建一個新的補間並播放它。

如果您現在進行遊戲測試，您會注意到自定義儀表在健康變化時進行平滑過渡：

添加傷害效果

默認健康儀表系統在角色受損時會在屏幕邊緣短暫顯示微弱的紅色陰影。通過 禁用默認儀表，此效果會被移除，但您可以用自己的實現代替它。

1. 訪問您之前編輯過的 UpdateCustomMeter 腳本的腳本編輯器選項卡。

2. 選中所有行並用以下代碼替換它們：

   UpdateCustomMeter
   local Workspace = game:GetService("Workspace")
   local Players = game:GetService("Players")
   local TweenService = game:GetService("TweenService")
   
   -- 本地玩家、角色和人形的參考
   local player = Players.LocalPlayer
   local character = player.Character
   local humanoid = character:WaitForChild("Humanoid")
   
   -- 補間屬性
   local tweenInfo = TweenInfo.new(0.5, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out)
   
   -- 用來存儲/緩存角色健康的變數
   local cachedHealth = humanoid.Health / humanoid.MaxHealth
   
   -- 在玩家相機中獲取（或創建新）顏色校正效果
   local colorCorrection = Workspace.CurrentCamera:FindFirstChildWhichIsA("ColorCorrectionEffect") or Instance.new("ColorCorrectionEffect", Workspace.CurrentCamera)
   colorCorrection.Name = "DamageColorEffect"
   
   -- 儀表條內部框架的參考
   local playerGui = player:WaitForChild("PlayerGui")
   local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill
   
   -- 漸變序列顏色（紅色、橙色、黃色、石灰、綠色）
   local gradient = {
   	Color3.fromRGB(225, 50, 0),
   	Color3.fromRGB(255, 100, 0),
   	Color3.fromRGB(255, 200, 0),
   	Color3.fromRGB(150, 225, 0),
   	Color3.fromRGB(0, 225, 50)
   }
   
   -- 函數以從分數點獲取漸變序列中的顏色
   local function getColorFromSequence(fraction: number): Color3
   	-- 每種顏色在漸變中定義了一個區段的開始和/或結束
   	local numSections = #gradient - 1
   
   	-- 每個區段表示 1 的一部分
   	local sectionSize = 1 / numSections
   
   	-- 確定請求的分數落入哪個區段
   	local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize
   
   	-- 獲取區段的開始和結束顏色
   	local sectionColorStart = gradient[sectionStartIndex]
   	local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart
   
   	-- 將分數標準化為在該區段內的 0 到 1 的數字
   	local fractionOfSection = math.clamp(fraction, 0, 1) % sectionSize / sectionSize
   
   	-- 基於標準化的分數從開始到結束的內插（Lerp）
   	return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)
   end
   
   local function onHealthChanged()
   	-- 計算新健康為最大健康的百分比
   	local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)
   
   	-- 將儀表條的大小和顏色補間到新的目標
   	local tweenGoal = {
   		Size = UDim2.new(healthFraction, 0, 1, 0),
   		BackgroundColor3 = getColorFromSequence(healthFraction)
   	}
   	local meterBarTween = TweenService:Create(meterBarInner, tweenInfo, tweenGoal)
   	meterBarTween:Play()
   
   	-- 如果健康值低於緩存的健康值，則顯示傷害效果
   	if healthFraction < cachedHealth then
   		-- 根據健康值變化更新緩存的健康值
   		cachedHealth = healthFraction
   
   		-- 將顏色校正設置為紅色作為初始染色，然後再進行補間
   		colorCorrection.TintColor = Color3.fromRGB(255, 25, 25)
   		colorCorrection.Saturation = 2.5
   
   		-- 將色調補間回白色（中性色，沒有色調改變）
   		local colorCorrectionTweenGoal = {
   			TintColor = Color3.fromRGB(255, 255, 255),
   			Saturation = 0
   		}
   		local colorCorrectionTween = TweenService:Create(colorCorrection, tweenInfo, colorCorrectionTweenGoal)
   		colorCorrectionTween:Play()
   	end
   end
   
   -- 監聽 humanoid 健康變化
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- 初次設置（或重置）儀表條大小/顏色為當前健康
   onHealthChanged()

   關鍵的新增/變更

   行	目的
   14	設置佔位符參考（cachedHealth），以跟踪角色的健康數量，以便您可以比較變化是否更低（受傷）。
   17‑18	在初次角色生成時，在玩家當前的 Camera 中創建新的 ColorCorrectionEffect，或者在後續重生中獲取對同一實例的參考。通過將此 後處理效果 附加到玩家的相機，它僅適用於他們的本地屏幕，而不是伺服器上每位玩家的屏幕。
   68‑83	首先執行條件檢查以確認健康變化低於 cachedHealth 值，表示受傷；如果是這樣，則將 cachedHealth 設置為新值。接下來，將 ColorCorrectionEffect 的顏色設置為 [255, 25, 25]（紅色）並提高飽和度，然後再將色調補間回中性白色（[255, 255, 255]）並降低飽和度。

如果您現在進行遊戲測試，您會注意到每當角色受到傷害時，屏幕會短暫閃爍紅光：