HUD 미터 만들기

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

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

위험한 우주 정거장을 시작점으로 사용하고 UI 기본 사항 - HUD 미터를 완료된 참조로 사용하여, 이 튜토리얼에서는 다음을 설명합니다:

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

디바이스 에뮬레이터 활성화

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

플랫폼 간 UI 디자인을 테스트하는 가장 좋은 방법은 Studio의 디바이스 에뮬레이터입니다. 이 도구는 장치의 사전 설정된 선택을 제공하고 사용자 정의 프리셋을 추가할 수 있게 해줍니다.

1. Studio에서 위험한 우주 정거장 템플릿을 엽니다.

2. Studio의 테스트 메뉴에서 디바이스 에뮬레이터를 활성화합니다.

3. 메인 뷰포트 바로 위의 바에서 iPhone X 또는 Samsung Galaxy A51과 같은 전화 에뮬레이션을 선택합니다. 그런 다음, 최대 화면 공간을 활용하기 위해 보기 크기를 창에 맞춰 조정하도록 설정합니다.

   

화면 컨테이너 만들기

ScreenGui 컨테이너는 UI 객체(GuiObjects)를 보유하여 플레이어의 화면에 표시합니다(이 튜토리얼에서는 체력 미터 전체를 포함합니다). 모든 플레이어에게 ScreenGui와 그 자식 객체를 경험에 참여할 때 표시하려면, StarterGui 컨테이너 안에 배치해야 합니다. 플레이어가 참여하고 그들의 캐릭터가 처음 스폰될 때, ScreenGui와 그 내용물은 해당 플레이어의 PlayerGui 컨테이너로 복제됩니다. 이 컨테이너는 Players 컨테이너 내에 있습니다.

빈 ScreenGui를 삽입하려면:

1. 탐색기 창에서 StarterGui 컨테이너를 찾습니다.

   

2. 컨테이너 위에 마우스를 올려 ⊕ 버튼을 클릭하고 ScreenGui를 삽입합니다.

   

3. 새로운 컨테이너의 이름을 HUDContainer로 변경하여 그 목적을 반영합니다.

   

안전 영역 사용하기

최신 전화는 화면의 전체를 활용하지만 일반적으로 화면 공간을 차지하는 노치, 컷아웃 및 기타 요소가 포함되어 있습니다. 모든 Roblox 경험에는 주요 메뉴에 빠르게 접근할 수 있는 상단 바 컨트롤, 채팅, 리더보드 등이 포함되어 있습니다.

플레이어가 모든 UI를 방해받지 않고 보고 접근할 수 있도록 보장하기 위해, Roblox는 ScreenInsets 속성을 제공합니다. 이는 ScreenGui의 내용에 대한 안전 영역 인셋을 제어합니다. ScreenGui 안에 위치한 모든 UI 객체는 인셋 경계에 상대적입니다.

기본적으로 CoreUISafeInsets는 모든 UI 객체가 Roblox UI 및 장치 컷아웃과 분리되어 있도록 보장하지만, 제한된 화면 공간을 활용하기 위해서는 아래와 같이 DeviceSafeInsets가 더 나은 옵션이 될 수 있습니다.

1. 탐색기 창에서 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 뷰포트의 오른쪽 상단 모서리에서 시각화 옵션 위젯에서 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. 탐색기 창에서 이전에 삽입한 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. 너비 35% 및 높이 5%로 설정하고 픽셀 오프셋을 추가하지 않도록 하기 위해 0.35, 0, 0.05, 0 값을 입력합니다.

   

프레임 스타일 지정

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

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

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로 설정합니다. 픽셀 값이 아닌 스케일 값을 사용하는 것이 미터 바와 같은 경우에 특히 편리합니다. 이렇게 하면 컨테이너의 높이나 너비와 관계없이 완전히 둥근 커브가 보장됩니다.

   

내부 채우기 생성

이제 체력 미터의 컨테이너 프레임이 완성되었으므로, 캐릭터의 가변 체력을 나타내기 위한 내부 채우기 부분을 추가할 수 있습니다. 이는 단색으로 채워진 영역만 필요하기 때문에, 부모 프레임 안에 하위 Frame이 적합합니다.

1. MeterBar 프레임 안에 자식 Frame을 삽입합니다.

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

   

3. InnerFill이 선택된 상태에서 다음 속성을 설정합니다:

   • AnchorPoint = 0, 0.5 (왼쪽 가장자리 및 수직 중앙)
   • Position = 0, 0, 0.5, 0
   • Size = 1, 0, 1, 0

   프레임의 자식은 부모에 상대적으로 위치하고 크기가 조정되기 때문에, 스케일을 사용하면 내부 프레임이 부모의 전체 너비와 높이를 채우도록 할 수 있습니다.

   

4. 부모 프레임의 "알약" 모양과 일치시키기 위해 추가적인 UICorner를 InnerFill에 삽입합니다.

   

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 7th Generation과 같은 태블릿을 에뮬레이트하여 이를 확인할 수 있습니다.

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

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

   

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

   

이제 미터 바는 더 넓고 긴 화면 사이에서 보다 일관된 높이를 유지합니다.

기본 체력 미터 교체

Roblox 경험에는 기본 체력 미터가 포함되어 있으며, 이는 캐릭터가 피해를 입을 때 표시됩니다. 기본 미터를 보이게 유지하면, 커스텀 미터와 겹치거나 중복될 수 있습니다.

기본 미터 비활성화

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

1. 탐색기 창에서 StarterPlayer 컨테이너를 확장하고 그 안에 있는 StarterPlayerScripts 컨테이너를 찾습니다.

   

2. 컨테이너에 새로운 LocalScript를 삽입하고, 그 목적을 설명하기 위해 이름을 HideDefaultHealthMeter로 변경합니다. StarterPlayerScripts 내의 스크립트는 로컬 플레이어가 경험에 참여할 때 자동으로 실행되므로, 기본 미터를 영구적으로 숨기기 위한 스크립트를 실행하기 위한 이상적 컨테이너입니다.

   

3. 새 스크립트를 삽입하면, 자동으로 새로운 스크립트 편집기 탭에서 열립니다(열리지 않는 경우, 탐색기 창에서 스크립트를 더블 클릭하십시오).

   다음 코드를 HideDefaultHealthMeter 스크립트에 붙여넣습니다:

   HideDefaultHealthMeter
   local StarterGui = game:GetService("StarterGui")
   
   -- 기본 체력 미터 숨기기
   StarterGui:SetCoreGuiEnabled(Enum.CoreGuiType.Health, false)

   코드 설명

   Line	목적
   1	호출되는 코어 서비스인 StarterGui에 대한 참조를 가져옵니다. 이는 커스텀 체력 미터를 만든 동일한 컨테이너를 나타내며, 해당 콘텐츠는 경험에 참여하는 각 플레이어의 PlayerGui 컨테이너로 복제됩니다.
   4	서비스의 SetCoreGuiEnabled() 메서드를 호출하고, 기본 체력 미터를 비활성화(false)하도록 지시합니다.

지금 경험을 플레이 테스트하면, 기본 미터가 비활성화되고 숨겨진 것을 알 수 있습니다(다음 섹션에서는 커스텀 미터가 체력 변경 사항을 반영하도록 스크립팅할 것입니다).

체력 변경 사항 리스닝

모든 기본 Roblox 캐릭터 모델은 Humanoid 클래스를 포함하고 있으며, 이는 캐릭터에 걷기/달리기 속도를 설정하고 건강을 관리하는 특수 동작 및 기능을 제공합니다. Health는 서버에서 복제되어 각 플레이어의 클라이언트로 전송되며, 이러한 변경 사항을 감지하여 커스텀 체력 미터의 크기 및 색상을 업데이트할 수 있습니다.

1. 탐색기 창에서 StarterCharacterScripts 컨테이너를 StarterPlayer 내에서 찾습니다.

   

2. 컨테이너에 새로운 LocalScript를 삽입하고 목적을 설명하기 위해 이름을 UpdateCustomMeter로 변경합니다. StarterCharacterScripts 내의 스크립트는 플레이어의 캐릭터가 스폰될 때마다 자동으로 실행되므로, 각 respawn 시 체력 미터를 완전히 재설정하기 위한 스크립트를 실행하기에 이상적인 컨테이너입니다.

   

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()

   코드 설명

   Lines	목적
   4‑6	로컬 Player, 플레어의 Character 모델 및 그 안의 Humanoid 클래스에 대한 참조를 가져옵니다.
   9‑10	미터의 InnerFill 객체에 대한 참조를 가져오며, 이는 캐릭터의 체력이 변할 때 크기 및 색상을 조정해야 합니다.
   13‑19	체력 미터를 다양한 지점에서 재색칠하기 위해 다섯 가지 색상(빨간색, 주황색, 노란색, 라임, 초록색)을 선언합니다. 예를 들어, 100% 체력에 대해 녹색, 50%에 대해 노란색, 0%에 대해 빨간색 및 주요 포인트 사이의 블렌드를 나타냅니다.
   22‑41	비율 색상 키포인트 간의 색상 블렌드를 반환하는 헬퍼 함수입니다.
   43‑50	체력 변경을 처리하는 함수입니다. 여기서는 캐릭터의 MaxHealth에 대한 비율로 새로운 체력을 계산한 후, InnerFill을 해당 스케일 비율로 크기를 조정하고, getColorFromSequence() 함수로부터 반환된 색상으로 재염색합니다.
   53	서버로부터 복제된 Health 변화 을 감지하여 onHealthChanged() 함수를 호출하는 주요 이벤트 연결입니다.
   56	처음에는 (캐릭터가 생성되거나 respawn할 때) onHealthChanged() 함수를 호출하여 InnerFill의 크기와 색상을 올바른 비율로 설정합니다. 일반적으로 이는 전체 너비와 녹색이 될 것입니다.

지금 경험을 테스트하면, 커스텀 미터가 캐릭터가 피해를 받을 때 올바르게 크기와 색상을 업데이트합니다:

미터 바 애니메이션화

커스텀 미터에 추가적인 세련미를 더하기 위해, 트위닝을 통해 체력 변경 사항을 애니메이션화할 수 있으며, 미터 바의 크기와 색상이 ½초에 걸쳐 서서히 변경됩니다.

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()

   주요 추가/변경 사항

   Lines	목적
   2	TweenService에 대한 참조를 얻어 스크립트 내에서 트위닝 기능을 implementar하는 역할을 합니다.
   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()

   주요 추가/변경 사항

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

지금 경험을 플레이 테스트하면, 캐릭터가 피해를 입을 때마다 화면이 잠시 빨갛게 깜박이는 것을 알 수 있습니다: