HUD 미터 생성

*이 콘텐츠는 AI(베타)를 사용해 번역되었으며, 오류가 있을 수 있습니다. 이 페이지를 영어로 보려면 여기를 클릭하세요.

A HUD 또는 헤드업 디스플레이 는 점수 표시, 체력 미터 및 메뉴 버튼과 같이 항상 표시되거나 액세스할 수 있는 UI 요소 세트입니다.HUD를 포함하는 것은 대부분의 경험에 필수적이며, 플레이어가 게임플레이 목표에서 성공하도록 돕는 정보를 표시하기 때문입니다.

일반적인 HUD 요소는 왼쪽에 아이콘이 있는 건강 미터로, 타이머 바, 진행률 바 또는 유사한 것으로 적응할 수 있습니다.

In-game view showing custom health meter in upper-right region.

시작 장소로 위험한 우주 정거장 을 사용하고 UI 기본 - HUD 미터 를 완료된 참조 플레이스사용하여 이 자습서는 다음을 보여줍니다:

  • 여러 가상 화면에서 디자인을 테스트하기 위해 디바이스 에뮬레이터 를 설정하고 사용하는 방법.
  • 디자인 및 저장소 컨테이너로서 StarterGui의 사용.
  • 모던 휴대폰의 카메라 노치와 같이 기본 제공 Roblox 컨트롤과 장치 노트/섬에 배치된 UI 요소를 위치/크기를 조정하는 방법.
  • 기본 Roblox 건강 미터를 자체 미터로 교체하고 캐릭터의 건강 레벨연결하는 방법.
  • 건강 미터의 중앙 부분을 애니메이션하고 다섯 가지 색상 그라데이션 키포인트(빨강, 주황, 노랑, 라임, 녹색) 사이에서 색상을 설정하는 방법.

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

플레이어가 PC나 콘솔에서 경험을 발견하고 참여할 수 있으므로 Roblox는 본질적으로 크로스 플랫폼입니다. 나중에 전화기를 집어 끄기멈춘 곳에서 계속하면 됩니다.모바일 장치(휴대폰과 태블릿)는 화면 공간이 가장 적기 때문에 UI 요소가 더 작은 화면에 맞추고 플레이어에게 명확하게 표시되는 것이 중요합니다.

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

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

  2. 테스트 탭에서 장치 도구를 토글합니다.

    Device button indicated in Test tab

  3. 메인 뷰포트 바로 위의 바에서 아이폰 X 또는 삼성 갤럭시 A51 와 같은 전화 시뮬레이션을 선택합니다.그런 다음 Studio의 최대 공간을 활용하기 위해 보기 크기를 창에 맞추기 로 설정합니다.

    Device Emulator settings options indicated at top of viewport window.

화면 컨테이너 생성

A ScreenGui 컨테이너는 플레이어의 화면(이 자습서에서는 건강 미터의 전체)에 표시할 UI 개체(GuiObjects)를 보관합니다.경험에 참여하는 모든 플레이어에게 ScreenGui 및 그 자식 개체를 표시하려면 컨테이너 StarterGui 내에 배치하십시오.플레이어가 가입하고 캐릭터가 처음 생성될 때, ScreenGui 및 그 내용이 해당 플레이어의 컨테이너인 PlayerGui 내에 복제됩니다. 이 컨테이너는 Players 컨테이너 내에 있습니다.

Diagram of how a ScreenGui clones from StarterGui to a player's PlayerGui

빈 ScreenGui를 삽입하려면:

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

    Explorer window showing the StarterGui container.

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

    ScreenGui inserted into the StarterGui container.

  3. 새 컨테이너 HUDContainer 의 목적을 반영하기 위해 이름을 바꿉니다.

    ScreenGui renamed to HUDContainer.

안전한 영역 활용

현대 휴대폰은 전체 화면을 활용하지만 일반적으로 화면 공간을 차지하는 노치, 컷아웃, 기타 요소를 포함합니다.모든 Roblox 경험에는 메인 메뉴, 채팅, 리더보드, 그리고 더 많은 것에 즉시 액세스할 수 있는 상단 표시줄 컨트롤도 포함됩니다.

Mobile device showing Roblox top bar buttons and device cutout.

플레이어가 장애물 없이 모든 UI를 볼 수 있고 액세스할 수 있도록 Roblox는 속성을 제공하여 콘텐츠의 안전 영역 삽입을 제어합니다.삽입 경계 내에 배치하는 모든 UI 개체는 삽입 경계와 상대적입니다.Every UI object that you position inside a ScreenGui is relative to the inset bounds.

Mobile device showing the core UI safe area.

기본값인 CoreUISafeInsets 은 Roblox UI와 장치 컷아웃으로부터 모든 UI 개체를 명확하게 유지하지만, DeviceSafeInsets 는 아래 그림과 같이 제한된 화면 공간을 활용하기 위한 더 나은 옵션일 수 있습니다.

ScreenInsets set to CoreUISafeInsets.

  1. 탐색기 창에서 HUDContainer를 선택합니다.

    Explorer window showing the HUDContainer selected.

  2. 속성 창에서 ScreenInsets 속성을 DeviceSafeInsets로 설정합니다.

    ScreenInsets set to DeviceSafeInsets in the Properties window.

가장자리 여백 설정

ScreenInsets 를 DeviceSafeInsets 로 설정하여 콘텐츠가 이제 화면의 물리적 상단 가장자리까지 직접 확장될 수 있습니다.그러나 소량의 패딩 이 도움이 될 수 있으며, 화면 가장자리에서 더 깨끗하게 보이고 클립되지 않도록 건강 미터(및 컨테이너 내의 다른 개체)를 약간 밀어낼 수 있습니다.

Screen container with padding around all edges.

UI 컨테이너에 패딩을 적용하는 한 가지 방법은 다음과 같은 UIPadding 모디파이어 삽입을 통해서입니다.

  1. 삽입 UIPadding 수정자를 HUDContainer 에 삽입합니다.

    HUDContainer with UIPadding modifier inserted.

  2. 새로 선택된 UIPadding 개체로 컨테이너의 모든 가장자리에 대한 값 0, 16 (PaddingBottom, PaddingLeft, PaddingRight, PaddingTop)을 입력하십시오.이는 화면의 해상도와 상관없이 컨테이너 전체에 16픽셀의 패딩을 적용합니다.

    Properties window showing the UIPadding modifier with 0, 16 set for all edges.

건강 미터 생성

화면 컨테이너가 구성되어 있으면 프레임 및 이미지 레이블과 같은 Roblox UI 개체를 사용하여 건강 미터를 구축하기 시작할 수 있습니다.

Basic components used for the health meter.

부모 프레임 생성

Figma 및 Photoshop과 같은 디자인 응용 프로그램에서는 Roblox의 Frame 가 다른 UI 개체의 컨테이너로 사용됩니다.이 자습서에서는 전체 건강 미터가 단일 부모 프레임에 포함되어 다양한 HUD 레이아웃에서 쉽게 재배치할 수 있습니다.

  1. 삽입 Frame 을 HUDContainer 에 삽입하십시오. 새 프레임은 왼쪽 상단 모서리에 빈 흰색 정사각형으로 표시됩니다.

    New frame in viewport.

  2. 새 프레임 인스턴스를 미터바 로 이름 바꾸기.

    New frame inserted and renamed to MeterBar.

프레임 위치 지정

Roblox에서 UI 개체의 위치는 두 축 X 와 Y 에 대한 Scale 및 Offset 값을 포함하는 UDim2 좌표 집합으로 나타납니다.

  • Scale 값은 해당 축을 따라 컨테이너의 크기의 백분율 을 나타내며, 모든 Offset 값의 더하기입니다.
  • Offset 값은 해당 축에서 개체를 이동하기 위해 얼마나 많은 픽셀 을 추가하고, 모든 Scale 값의 더하기입니다.

화면 컨테이너의 오른쪽 상단 모서리에 UI 개체를 배치하려면 Scale 가 최선의 방법입니다, 왜냐하면 X 의 1 (100%) 값이 화면의 실제 픽셀 크기에 관계없이 컨테이너의 오른쪽 가장자리를 나타내기 때문입니다.마찬가지로, Y 스케일 값(0%)의 0 (0%)는 컨테이너의 상단을 나타내며,

Scale ranges for the X and Y axes of a container.

또한 부모 프레임이 원점을 정의하기 위해 오른쪽 상단에 앵커 지점을 설정해야 합니다.허용 가능한 값은 0 와 1 사이이며, 개체 크기에 관련이 있으므로 1, 0 의 앵커 값은 프레임의 앵커 지점을 오른쪽 상단에 배치합니다.

Frame anchor point in its upper-right corner.

  1. 탐색기 창에서 이전에 삽입한 미터바 프레임을 선택합니다.

    Explorer window showing the MeterBar frame selected.

  2. 속성 창에서, 을 입력하고 을 누르십시오.Studio는 괄호를 자동으로 추가하여 의 을 형성합니다.

  3. 속성에 대해 입력하십시오.프레임은 이제 장치 안전 영역의 오른쪽 상단 모서리에 배치되어야 하며, 패딩의 결과로 가장자리에서 약간 들어가 있어야 합니다( 패딩 ).

    Frame repositioned in upper-right corner of container.

프레임 크기 조정

위치와 마찬가지로 UI 개체의 Size 는 두 개의 UDim2 및 Scale축에 대한 Offset 및 X 및 Y 값을 포함하는 좌표 집합으로 나타납니다.

기본적으로 새 프레임의 크기는 , 즉 너비( X )와 높이( Y )에서 100 픽셀입니다.엄격한 픽셀 값은 특정 경우에 유용하지만, 전체 화면 컨테이너 크기의 퍼센트 로 설정되면 많은 UI 요소가 여러 화면에서 더 민감하게 크기를 조정합니다.

  1. 미터바 프레임을 선택하여 속성 창에 액세스하고 Size로 이동합니다.

  2. 입력값 0.35, 0, 0.05, 0를 입력하여 픽셀 오프셋 없이 35% 너비, 5% 높이의 백분율 크기를 설정합니다.

    Frame resized to 35% wide and 5% tall.

프레임 스타일화

기본적으로, Frames 는 단단한 흰색으로 채워집니다.최종 건강 미터는 어두운 채우기와 약간 불투명한 채우기, 그리고 어두운 테두리가 있어야 하며, 밝은 배경과 어두운 배경 모두에서 더 두드러져 보입니다.

Frame styled with opacity, border, and rounded corners.

  1. 미터바 프레임을 선택하여 속성 0 에 대해 BackgroundColor3 를 입력합니다.Studio는 자동으로 RGB 값 으로 변환합니다.

  2. 0.75 속성에 대해 BackgroundTransparency 를 입력하십시오.Roblox에서 투명도는 전체적으로 불투명한 에서 전체적으로 투명한 에 이르기까지 다양하며, 따라서 Figma 또는 Photoshop과 같은 다른 응용 프로그램에서 투명도가 25%인 것과 같습니다.

    Frame restyled with dark background and 25% opacity.

  3. 프레임에 사용자 지정 스트로크를 추가하는 강력한 UI 수정자인 개체를 삽입하십시오.

    Explorer window showing the MeterBar frame with a child UIStroke modifier.

  4. 새로 선택된 UIStroke로 다음 속성을 설정하십시오:

    Frame restyled with a UIStroke modifier.

미터 프레임의 스타일링을 완료하려면 모서리를 둥글게 하여 날카로운 직사각형 대신 "약" 모양을 형성할 수 있습니다.

  1. UICorner 인스턴스를 미터바 프레임에 삽입합니다.

    Explorer window showing the MeterBar frame with a child UICorner modifier.

  2. 새로 선택된 UICorner 를 사용하여 CornerRadius 를 0.5, 0 으로 설정합니다.픽셀 값 대신 스케일 값(50%)인 (50%)을 사용하면 컨테이너가 얼마나 높거나 넓어지든 상관없이 미터 바에 완전히 둥근 곡선을 보장하므로 특히 편리합니다.

    Frame corners rounded with a UICorner modifier.

내부 채우기 생성

이제 상태 미터의 프레임 포함 부분이 완료되었으므로 문자의 변수 상태를 나타내기 위해 내부 채우기 부분을 추가할 수 있습니다.단단히 채워진 영역만 필요하기 때문에 부모 프레임 내의 하위 자식 Frame 이 적합합니다.

Inner fill frame added to parent frame to represent the character's variable health.

  1. 자식 을 메터바 프레임에 삽입합니다.

  2. 새 프레임 인스턴스를 내부 채우기 로 이름 바꾸기.

    Explorer window showing the parent MeterBar frame with a child frame named InnerFill.

  3. 내부 채우기 를 선택하여 다음 속성을 설정합니다:

    프레임의 자식이 부모에 대해 위치하고 크기가 조정되기 때문에, 저울을 사용하면 부모의 왼쪽 가장자리부터 내부 프레임이 부모의 전체 너비와 높이를 채우게 됩니다.

    Inner fill frame repositioned and resized to fill entire parent frame.

  4. 부모 프레임의 "약" 모양에 맞추기 위해, 내부 채우기 에 추가 UICorner를 삽입하십시오.

    Explorer window showing the InnerFill frame with a child UICorner modifier.

  5. 새로운 모디파이어를 선택하여 부모 MeterBar 프레임의 "pill" 모양과 일치하도록 속성을 설정합니다.

    Inner fill frame corners rounded with a UICorner modifier.

  6. 전체 미터가 좋은 상태를 나타내도록 하려면 내부 채우기 를 선택하고 속성 을 으로 설정하십시오(나중의 작업에서 실제 상태에 따라 이 색상을 변경할 것입니다).

    Inner fill frame recolored green to represent good health.

아이콘 추가

미터의 목적을 더 명확하게 나타내려면 왼쪽에 이미지 레이블을 추가하여 일반적으로 건강 또는 생명을 상징하는 빨간색 심장을 추가할 수 있습니다.

Image label of heart added to more clearly indicate a health meter.

  1. Insert an ImageLabel into the 메터바 frame. 이 개체를 사용하면 Roblox에 업로드된 2D 이미지 자산을 데칼로 적용할 수 있습니다.

  2. 새 레이블 인스턴스를 아이콘 으로 이름 바꾸기.

    Explorer window showing the MeterBar frame with a child ImageLabel.

  3. 아이콘 을 선택하여 속성 ZIndex``2 설정합니다.새로 삽입된 UI 개체가 이전에 삽입된 개체 앞에 항상 레이어되는 동안, 이 변경으로 아이콘이 항상 계기 프레임 요소 앞에 표시되도록 합니다.

    Properties window showing the ZIndex of the ImageLabel set to 2.

  4. 아이콘의 속성을 찾아 , 미리 업로드된 심장 이미지의 참조(원하는 경우 자신의 이미지를 가져와 자산 ID를 사용할 수 있음)를 입력하십시오.

    Image label of heart added to MeterBar frame.

  5. 아이콘 ImageLabel 이 항상 1:1 비율로 유지되도록 하려면 UIAspectRatioConstraint 를 삽입합니다.이 제약 조건에는 측면 비율을 제어하기 위한 사용자 지정 가능한 속성이 있지만, 기본값은 그대로 유지할 수 있습니다.

    Explorer window showing the ImageLabel with a child UIAspectRatioConstraint.

  6. 아이콘 을 선택하여 마지막으로 모양과 위치를 변경하여 완성합니다:

    • AnchorPoint = 0.5, 0.5 (센터 앵커)
    • BackgroundTransparency = 1 (100% 투명)
    • Position = 0, 0, 0.5, 0 (미터의 왼쪽과 세로 중앙)
    • = ( 메터바 프레임의 전체 크기의 200%, 제한되어 1:1로 유지됨)
    Image label of heart repositioned and resized with background fill made transparent.

크기 제한

현대 휴대폰 화면이나 게임 모니터가 16:9 비율이거나 더 넓은 비율인 경우 크기 조정 높이 (5%)가 모던 휴대폰 화면이나 게임 모니터에서 좋아 보이지만, 미터는 태블릿 화면이나 오래된 휴대폰에서 약간 높아 보일 수 있습니다.이를 확인하려면 장치 에뮬레이터에서 iPad 7세대 와 같은 태블릿을 에뮬레이션하여 장치 에뮬레이터 에서 확인할 수 있습니다.

Device Emulator set to emulate a tablet device. Emulation on tablet device with meter bar taller than desired.

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

  1. 측정 바( MeterBar ) 프레임에 UISizeConstraint를 삽입합니다.

    Explorer window showing the MeterBar frame with a child UISizeConstraint.

  2. 새로 선택된 제약 조건으로 설정하여 속성을 으로 설정하여 너비 제한 없이 높이를 20픽셀로 제한합니다.

    Properties window showing the MaxSize of the UISizeConstraint set to inf, 20.

이제 미터 바는 더 넓은 화면과 더 높은 화면 사이의 일관된 높이를 유지합니다.

Emulation on phone.

기본 상태 미터 대체

Roblox 경험에는 캐릭터가 피해를 입었을 때 표시되는 기본 체력 미터가 포함됩니다.기본 미터를 표시하도록 유지하면 사용자 지정 미터를 복제하고 겹칠 수 있습니다.

Default health meter overlapping and duplicating the custom health meter.

기본 미터 비활성화

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

  1. 탐색기 창에서 탐색기 컨테이너를 확장하고 내부의 컨테이너를 찾습니다.

    Explorer window showing the StarterPlayerScripts container inside the StarterPlayer container.

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

    Explorer window showing the new HideDefaultHealthMeter client script inside the StarterPlayerScripts container.

  3. 새 스크립트를 삽입하면 새 스크립트 편집기 탭에서 자동으로 열립니다(그렇지 않으면 탐색기 창에서 스크립트를 두 번 클릭하십시오).

    다음 코드를 HideDefaultHealthMeter 스크립트 내에 붙여넣으십시오:

    기본 상태 미터 숨기기
    local StarterGui = game:GetService("StarterGui")

    

    -- 기본 상태 미터 숨기기

    StarterGui:SetCoreGuiEnabled(Enum.CoreGuiType.Health, false)
    라인목적
    1사용자가 커스텀 상태 미터를 생성하고 경험에 참여하는 각 플레이어에 대해 컨테이너로 복제되는 동일한 컨테이너를 나타내는 StarterGui에 대한 참조를 가져옵니다. 그 내용은 경험에 참여하는 각 플레이어에 대한 PlayerGui.
    4서비스의 SetCoreGuiEnabled() 메서드를 호출하고 기본 상태 미터를 비활성화하도록 지시(false)합니다.

경험을 플레이테스트하고 손상을 입으면 기본 미터가 비활성화되고 은폐되어 있음을 알게 될 것입니다(다음 섹션에서 사용자 지정 미터를 스크립트하여 체력 변경을 반영합니다 health changes).

Default health meter disabled.

상태 변화 감지하기

모든 기본 Roblox 캐릭터 모델에는 걷기/달리기 속도를 설정하고 체력을 관리하는 등 캐릭터에 특별한 행동과 기능을 제공하는 Humanoid가 포함되어 있습니다.서버에서 변경 각 플레이어의 클라이언트에 복제하고 크기와 색상의 사용자 지정 건강 미터를 업데이트하기 위한 이러한 변경을 감지할 수 있습니다.

  1. 탐색기 창에서 검색 창 내에서 StarterCharacterScripts를 StarterPlayer.

    Explorer window showing the StarterCharacterScripts container inside the StarterPlayer container.

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

    Explorer window showing the new UpdateCustomMeter client script inside the StarterCharacterScripts container.

  3. 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.HealthChanged:Connect(onHealthChanged)

    

    -- 처음에 바 크기/색상을 현재 상태로 설정(또는 재설정)

    onHealthChanged()
    라인목적
    4 ‑ 6로컬 Player , 그들의 Character 모델, 그리고 그 내부의 Humanoid 클래스에 대한 참조를 가져옵니다.
    9 ‑ 10캐릭터의 체력이 변경됨에 따라 크기와 색상이 조정되고 참조되어야 하는 미터의 내부 채우기 개체에 대한 참조를 가져옵니다.
    13 ‑ 19다양한 지점에서 미터를 재색상하기 위해 5가지 색상(빨강, 주황, 노랑, 라임, 녹색)의 배열을 선언합니다(예: 100% 건강을 위한 녹색, 50% 건강을 위한 노랑, 0% 건강을 위한 빨강 또는 키포인트 사이의 어떤 비율이든 혼합).
    22 ‑ 41그라데이션 색 키포인트 중 하나의 색상 혼합을 반환하는 도우미 함수.
    43 ‑ 50상태에 대한 모든 변경 사항을 처리하는 함수.여기에서는 새 건강을 문자의 의 백분율로 계산하고, 내부 채우기 를 그 백분율로 재설정하고, 함수에서 반환된 색으로 다시 색칠합니다.
    53서버에서 복제된 변경 내용을 감지하고 함수를 호출하는 주요 이벤트 연결.
    56처음에 (캐릭터 스폰이나 리스폰 시) 함수를 호출하여 올바른 비율로 내부 채우기의 크기와 색상을 조정합니다.일반적으로 이것은 전체 너비와 녹색일 것입니다.

지금 경험을 플레이테스트하면 캐릭터가 피해를 입었을 때 사용자 지정 미터가 크기와 색상을 모두 올바르게 업데이트한다는 것을 알게 될 것입니다.

미터 바 애니메이션

사용자 지정 미터에 폴란드어 레벨을 추가하려면 트위닝을 통해 체력 변화를 애니메이션하여 미터 바의 크기와 색상을 점진적으로 변경할 수 있습니다.

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

  2. 모든 줄을 선택하십시오(CtrlA 또는 ⌘A ) 및 다음 코드로 붙여넣으십시오(CtrlV 또는 ⌘V ) :

    업데이트커스텀미터
    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.HealthChanged:Connect(onHealthChanged)

    

    -- 처음에 바 크기/색상을 현재 상태로 설정(또는 재설정)

    onHealthChanged()
    라인목적
    2스크립트 내에서 트위닝 기능을 구현하기 위한 참조 TweenService 를 가져옵니다.
    10의도한 청소년의 기간, 완화 스타일, 그리고 완화 방향 을 정의하는 생성자를 만듭니다.
    52 ‑ 57이전 버전의 바 크기와 색상을 단순히 설정하는 대신, 목표 크기/색상의 테이블을 선언하고, 및 매개 변수를 사용하여 새로운 트랜지션을 생성하고, 새로운 트랜지션을 재생합니다.

경험을 지금 플레이테스트하면 건강이 바뀌는 사이에 사용자 지정 미터 십대 사이를 알게 될 것입니다:

피해 효과 추가

기본 건강 미터 시스템에는 문자가 손상될 때 화면 가장자리에 짧고 미묘한 빨간색 틴트가 포함됩니다.기본 미터를 비활성화하여 이 효과가 제거되지만, 자체 구현으로 교체할 수 있습니다.

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

  2. 모든 줄을 선택하고 다음 코드로 덮어 씁니다:

    업데이트커스텀미터
    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

    

    		-- 틴트를 백으로 되돌리기(일반과 중립의 틴트 변경 없음) (Tween the tint back to white (neutral and no tint change from normal))

    		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] ).

지금 경험을 플레이테스트하면 캐릭터가 피해를 입을 때마다 화면이 잠시 빨간색으로 섬광을 켜는 것을 알게 될 것입니다.