HUD 미터 만들기

HUD 또는 Heads-Up Display는 점수 표시, 체력 미터 및 메뉴 버튼과 같이 게임 플레이 중 항상 보이거나 접근할 수 있는 UI 요소의 집합입니다. HUD를 포함하는 것은 대부분의 게임에서 필수적입니다. 왜냐하면 HUD는 플레이어가 게임 목표를 성공적으로 달성하는 데 도움이 되는 정보를 표시하기 때문입니다.

일반적인 HUD 요소는 왼쪽에 아이콘이 있는 체력 미터로, 타이머 바, 진행 바 또는 유사한 형태로 조정할 수 있습니다.

Hazardous Space Station을 시작점으로 하고 UI Fundamentals - HUD Meter를 완성된 참조로 사용하여, 이 튜토리얼에서는 다음을 설명합니다:

• 여러 에뮬레이트된 화면에서 디자인을 테스트하기 위한 Device Emulator의 설정 및 사용.
• 디자인 및 저장 컨테이너로서의 StarterGui 사용.
• 현대 전화의 카메라 노치와 같은 내장 Roblox 컨트롤 및 장치 노치/섬 주위에 UI 요소를 배치/크기 조정하는 방법.
• 기본 Roblox 체력 미터를 자신의 미터로 교체하고 캐릭터의 체력 수준에 연결하는 방법.
• 체력 미터의 중앙 부분을 애니메이션화하고 다섯 가지 색상 그라디언트 키포인트(빨강, 주황, 노랑, 라임, 초록) 사이에서 색상을 설정하는 방법.

Device Emulator 활성화

Roblox는 본질적으로 크로스 플랫폼입니다. 플레이어는 전화나 태블릿에서 게임을 발견하고 참여한 후, 나중에 PC나 콘솔에서 중단한 지점에서 계속할 수 있습니다. 모바일 장치(전화 및 태블릿)는 화면 공간이 가장 적기 때문에 UI 요소가 더 작은 화면에 맞고 플레이어에게 명확하게 보이도록 하는 것이 중요합니다.

플랫폼 간 UI 디자인을 테스트하는 가장 좋은 방법은 Studio의 Device Emulator입니다. 이 도구는 미리 설정된 장치 선택을 제공하며, 사용자 정의 프리셋을 추가할 수 있습니다.

1. Studio에서 Hazardous Space Station 템플릿을 엽니다.

2. Studio의 Test 메뉴에서 Device Emulator를 켭니다.

3. 메인 뷰포트 바로 위의 바에서 iPhone X 또는 Samsung Galaxy A51과 같은 전화 에뮬레이션을 선택합니다. 그런 다음, 뷰 크기를 Fit to Window로 설정하여 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 객체가 선택된 상태에서, 컨테이너의 모든 가장자리에 대해 0, 16 값을 입력합니다(PaddingBottom, PaddingLeft, PaddingRight, PaddingTop). 이렇게 하면 화면 해상도에 관계없이 컨테이너 주위에 16픽셀의 패딩이 적용됩니다.

   

체력 미터 구성

화면 컨테이너가 구성된 후, Roblox UI 객체인 프레임과 이미지 레이블을 사용하여 체력 미터를 구성할 수 있습니다.

부모 프레임 만들기

Figma 및 Photoshop과 같은 디자인 애플리케이션과 유사하게, Roblox의 Frame은 다른 UI 객체를 위한 컨테이너 역할을 합니다. 이 튜토리얼에서는 전체 체력 미터가 단일 부모 프레임에 포함되어 다양한 HUD 레이아웃에서 쉽게 재배치할 수 있습니다.

1. HUDContainer에 Frame을 삽입합니다. 새 프레임은 빈 흰색 정사각형으로 왼쪽 상단 모서리에 나타납니다.

   

   새 프레임이 뷰포트에 나타나지 않으면, 3D 뷰포트의 오른쪽 상단 모서리에 있는 Visualization Options 위젯에서 GUI overlay가 켜져 있는지 확인하세요.

2. 새 프레임 인스턴스의 이름을 MeterBar로 변경합니다.

   

프레임 위치 설정

Roblox에서 UI 객체의 위치는 X 및 Y 축에 대한 UDim2 좌표 세트로 표현됩니다. 이 세트는 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는 X 및 Y 축에 대한 UDim2 좌표 세트로 표현됩니다.

기본적으로 새 프레임의 크기는 {0, 100},{0, 100}입니다. 이는 너비(X)와 높이(Y)가 각각 100 픽셀임을 의미합니다. 엄격한 픽셀 값은 특정 경우에 유용하지만, 많은 UI 요소는 전체 화면 컨테이너 크기의 백분율로 설정할 때 여러 화면에서 더 반응적으로 크기가 조정됩니다.

1. MeterBar 프레임이 선택된 상태에서 속성 창에 접근하고 Size 속성으로 이동합니다.

2. 너비가 35%이고 높이가 5%이며 추가 픽셀 오프셋이 없는 비율 크기를 설정하기 위해 0.35, 0, 0.05, 0 값을 입력합니다.

   

프레임 스타일 지정

기본적으로 Frames는 단색 흰색으로 채워집니다. 최종 체력 미터는 더 어두운 색상과 약간 불투명한 채우기, 그리고 어두운 윤곽선을 가져야 하며, 이는 밝은 배경과 어두운 배경 모두에서 더 잘 돋보이게 합니다.

1. MeterBar 프레임이 선택된 상태에서 BackgroundColor3 속성에 0을 입력합니다. Studio는 이를 자동으로 [0, 0, 0]의 RGB 값으로 변환합니다.

2. BackgroundTransparency 속성에 0.75를 입력합니다. Roblox에서 투명도는 0이 완전히 불투명하고 1이 완전히 투명하므로, 0.75는 다른 애플리케이션(예: Figma 또는 Photoshop)에서 25% 불투명도와 같습니다.

   

3. 프레임에 사용자 정의 스트로크를 추가하는 강력한 UI 수정자인 UIStroke 객체를 삽입합니다.

   

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 비율 이상의 현대 전화 화면 및 게임 모니터에서 보기 좋지만, 미터는 태블릿 화면 및 구형 전화에서 약간 너무 높아 보일 수 있습니다. Device Emulator에서 iPad 7th Generation과 같은 태블릿을 에뮬레이션하여 확인할 수 있습니다.

미터 바의 높이를 더 넓은 화면과 일관되게 유지하려면, 최대 픽셀 높이를 제한하기 위해 UISizeConstraint를 적용할 수 있습니다.

1. MeterBar 프레임에 UISizeConstraint를 삽입합니다.

   

2. 새 제약 조건이 선택된 상태에서 MaxSize 속성을 inf, 20로 설정하여 높이를 20픽셀로 제한하고 너비 제한은 적용하지 않습니다.

   

이제 미터 바는 더 넓고 더 높은 화면 간에 더 일관된 높이를 유지합니다.

기본 체력 미터 교체

Roblox 게임에는 캐릭터가 피해를 입을 때 표시되는 기본 체력 미터가 포함되어 있습니다. 기본 미터를 표시하면 사용자 정의 미터와 중복되거나 겹칠 수 있습니다.

기본 미터 비활성화

기본 체력 미터를 비활성화하려면, StarterPlayerScripts 내에서 StarterGui:SetCoreGuiEnabled()를 호출하는 클라이언트 스크립트(LocalScript)를 사용합니다.

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
   
   	-- 정규화된 분수에 따라 시작과 끝 사이를 보간합니다.
   	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.HealthChanged:Connect(onHealthChanged)
   
   -- 초기 체력에 따라 바의 크기/색상을 설정(또는 재설정)합니다.
   onHealthChanged()

   코드 설명

   라인	목적
   4‑6	로컬 Player, 그들의 Character 모델 및 그 안의 Humanoid 클래스에 대한 참조를 가져옵니다.
   9‑10	미터의 InnerFill 객체에 대한 참조를 가져옵니다. 이 객체는 체력 변화에 따라 크기와 색상을 조정해야 합니다.
   13‑19	다섯 가지 색상(빨강, 주황, 노랑, 라임, 초록)의 배열을 선언하여 미터를 다양한 지점에서 다시 색칠합니다. 예를 들어, 100% 체력에 대해 초록색, 50%에 대해 노란색, 0%에 대해 빨간색, 또는 키포인트 사이의 어떤 분수에서도 혼합된 색상입니다.
   22‑41	어떤 그라디언트 색상 키포인트 사이의 색상 혼합을 반환하는 도우미 함수입니다.
   43‑50	체력 변화에 대한 처리를 담당하는 함수입니다. 여기서 캐릭터의 MaxHealth에 대한 비율로 새로운 체력을 계산하고, InnerFill의 크기를 해당 비율로 조정하며, getColorFromSequence() 함수에서 반환된 색상으로 다시 색칠합니다.
   53	서버에서 복제된 Health 변화 감지를 위한 주요 이벤트 연결로, onHealthChanged() 함수를 호출합니다.
   56	초기화(캐릭터 생성 또는 리스폰 시) 시 onHealthChanged() 함수를 호출하여 InnerFill의 크기와 색상을 올바른 비율로 설정합니다. 일반적으로 이는 전체 너비와 초록색이 됩니다.

이제 게임을 플레이 테스트하면 캐릭터가 피해를 입을 때 사용자 정의 미터가 크기와 색상을 올바르게 업데이트하는 것을 알 수 있습니다:

미터 바 애니메이션 추가

사용자 정의 미터에 추가적인 세련미를 더하기 위해, 트윈을 통해 체력 변화를 애니메이션화하여 미터 바의 크기와 색상을 0.5초에 걸쳐 점진적으로 변경할 수 있습니다.

1. 이전에 편집한 UpdateCustomMeter 스크립트의 스크립트 편집기 탭에 접근합니다.

2. 모든 줄을 선택(CtrlA 또는 ⌘A)한 다음, 다음 코드로 붙여넣습니다(CtrlV 또는 ⌘V):

   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
   
   	-- 정규화된 분수에 따라 시작과 끝 사이를 보간합니다.
   	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.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
   
   	-- 정규화된 분수에 따라 시작과 끝 사이를 보간합니다.
   	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.HealthChanged:Connect(onHealthChanged)
   
   -- 초기 체력에 따라 바의 크기/색상을 설정(또는 재설정)합니다.
   onHealthChanged()

   주요 추가/변경 사항

   라인	목적
   14	체력 변화 간의 비교를 위해 캐릭터의 체력 양을 추적하는 자리 표시자 참조(cachedHealth)를 설정합니다. 이를 통해 변화가 낮은지(피해)를 비교할 수 있습니다.
   17‑18	초기 캐릭터 생성 시 플레이어의 현재 Camera 내부에 새로운 ColorCorrectionEffect를 생성하거나, 이후 리스폰 시 동일한 인스턴스에 대한 참조를 가져옵니다. 이 후처리 효과를 플레이어의 카메라에 부모로 설정하면, 모든 플레이어의 화면이 아닌 로컬 화면에만 적용됩니다.
   68‑83	먼저 체력 변화가 cachedHealth 값보다 낮은지 확인하는 조건부 검사를 수행하여 피해를 나타냅니다. 그렇다면 cachedHealth를 새로운 값으로 설정합니다. 그런 다음, ColorCorrectionEffect 색조를 [255, 25, 25](빨간색)으로 설정하고 더 높은 채도를 부여한 후, 색조를 기본 중립 흰색([255, 255, 255])으로 트윈하여 채도를 0으로 설정합니다.

이제 게임을 플레이 테스트하면 캐릭터가 피해를 입을 때마다 화면이 잠시 빨갛게 깜빡이는 것을 알 수 있습니다: