커스텀 체력 및 보호막 바 만들기

언리얼 모션 그래픽(Unreal Motion Graphics, UMG)에서 팔레트의 UI 머티리얼, UI 텍스처, 다양한 위젯을 사용해 포트나이트의 기본 유저 인터페이스(UI)를 대체할 커스텀 체력 및 보호막 바를 만들어 봅니다. HUD에서는 체력 및 보호막 바를 하나의 이름표에 추가할 수도 있고 별도로 배치할 수도 있습니다.

체력 및 보호막 바의 디자인과 배치는 게임의 유형(격투 게임, 멀티플레이어 협동 게임, 롤플레잉 게임 등)을 고려하여 게임마다 다르게 결정됩니다.

머티리얼을 수정하지 않고 머티리얼 인스턴스 구성하기

이 예시에서는 UEFN에서 만든 다양한 머티리얼을 사용하게 됩니다. 여기에는 직사각형(박스) 모양과 원형 프로그레스 바가 포함됩니다. 직사각형 프로그레스 바에는 프로그레스 바를 여러 칸으로 나눌 수 있는 옵션도 있습니다.

머티리얼은 UI Material Lab의 머티리얼 함수, 머티리얼 인스턴스에 노출된 파라미터 및 몇 가지 수학 함수를 조합하여 구성했습니다.

이러한 방식이 위젯에 머티리얼을 사용하기에 가장 좋은 방식입니다. 머티리얼은 게임플레이 데이터에 기반하여 동적으로 업데이트되므로, UI를 최적화할 수 있으며 이를 통해 특별한 이펙트를 추가할 수도 있습니다. 텍스처는 수학 함수로는 쉽게 구현할 수 없는 복잡한 디자인에만 사용됩니다.

머티리얼 인스턴스는 리컴파일하지 않고도 머티리얼의 외형을 쉽게 바꿀 수 있는 파라미터를 사용해 머티리얼의 인스턴스를 생성합니다. 머티리얼 인스턴스를 생성하려면 머티리얼(Material)을 우클릭하고 머티리얼 인스턴스 생성(Create Material Instance)을 선택합니다.

UEFN에는 몇 가지 파라미터가 노출되어 있습니다. 이 예시 머티리얼에서 프로그레스 파라미터는 바가 얼마나 채워지는지를 결정합니다. 파라미터의 범위는 포트나이트 HP 범위에 맞도록 ConstantBiasScale 노드의 M_CircleProgressBar를 통해 0~100으로 정규화됩니다.

그레이디언트인 배경 컬러(Background Color, BGColor) 및 리퀴드 컬러(LiquidColor)를 변경할 수 있습니다. 그런 다음 왼쪽 프리뷰 뷰포트에서 변경 사항을 미리 확인해 봅니다.

머티리얼 인스턴스는 필요한 만큼 생성해서 다양한 목적으로 활용할 수 있습니다. 이 예시에서는 HP와 보호막, 각각을 위해 총 두 개의 머티리얼이 사용됩니다.

위젯 레이아웃 모범 사례

UMG에서는 화면상의 절대 위치를 지정해야 하거나 다양한 위젯이 배치되어 있어서 정교한 조작이 필요한 경우에만 캔버스 패널을 사용합니다.

작은 위젯에는 다음을 사용합니다.

• 오버레이(Overlay)

• 스택 박스(Stack Box)

• 크기 박스(Size Box)(위젯을 특정 크기로 제한해야 하는 경우)

• 그리드 패널(Grid Panel)(컨테이너의 크기 조절을 유지하면서 자손 위젯의 위치를 조작하고 싶은 경우)

머티리얼이 준비되면 콘텐츠 브라우저에서 위젯 블루프린트(Widget Blueprint)를 생성하고 위젯 섬네일을 더블클릭해 UMG 에디터를 엽니다.

캔버스 패널 사용하기

이 예시에서는 캔버스 패널을 사용해 위젯을 화면의 특정 영역에 고정하여 HUD 상의 절대 위치에 체력 및 보호막 바를 배치합니다.

개별 HUD 엘리먼트의 경우 다음 위젯을 조합하여 사용하는 것이 가장 좋습니다.

• 오버레이 - 위젯을 서로 겹쳐야 하는 경우

• 스택 박스 - 위젯을 수직 또는 수평으로 배치해야 하는 경우

• 크기 박스 - 위젯을 특정 크기로 제한해야 하는 경우

• 그리드 패널 - 컨테이너의 크기 조절을 유지하면서 내부에 있는 자손 위젯의 위치를 조작하고 싶은 경우

이러한 위젯을 바탕으로 체력 및 보호막 위젯을 배치하기 시작합니다.

1. HUD UI 전체가 들어갈 컨테이너를 생성합니다. 이를 위해 캔버스 패널(Canvas Panel)을 모든 개별 HUD 구성요소를 넣을 수 있는 컨테이너로 활용합니다.

   

   이 예시에서는 체력과 보호막을 화면 하단 중앙에 고정합니다.

2. 캔버스에서 스택 박스를 중첩해 체력 및 보호막을 넣을 컨테이너를 생성합니다. 이 디자인에서는 엘리먼트를 왼쪽에서 오른쪽으로 쌓아 갑니다.

   

   스택 박스에서 위젯을 수직으로 배치하고 싶으면 디테일 패널의 비헤이비어(Behavior)r > 방향(Orientation)에서 방향 세팅을 변경합니다.

3. 계층구조(Hierarchy)에 위젯을 추가할 때는 정리를 위해 위젯을 선택하고 F2를 눌러 이름을 변경합니다.

   

4. 계층구조에서 스택 박스를 선택하면 디테일(Details) 패널에 앵커(Anchors) 옵션이 보입니다. Shift + Ctrl을 눌러 옵션을 엽니다. 3행, 2열의 옵션을 선택하여 스택 박스를 HUD의 중앙 하단에 고정합니다.

   

   그러면 스택 박스가 하단에 고정됩니다. 캔버스 패널에서 위젯이 고정되는 위치에 꽃 모양 아이콘이 표시됩니다.

5. 화면의 하단을 가리지 않도록 스택 박스를 위로 이동합니다. 이는 Y 위치(Position Y) 옵션을 편집하면 됩니다.

   양수 값을 입력하면 위젯이 아래로 내려가고, 음수 값을 입력하면 위로 올라갑니다.

   

6. 항상 내부 콘텐츠에 맞춰 컨테이너 크기가 조정되도록 하려면 콘텐츠 크기에 맞춤(Size To Content) 체크 박스를 선택합니다.

   

HP 바 및 텍스트 구성하기

체력과 보호막의 컨테이너가 준비되었으니 이제 체력 및 보호막 위젯을 구성해야 합니다.

1. 스택 박스 아래에 오버레이(Overlay)를 중첩하고 이름을 HPOverlay로 변경합니다. 이렇게 하면 HP 텍스트가 원형 HP 바에 오버레이됩니다.

   

2. HPOverlay 아래에 이미지(Image)를 중첩하고 이름을 HPBar로 변경합니다. 그러면 위에서 만든 머티리얼 인스턴스를 위젯에 추가할 수 있습니다.

   

3. 계층구조에서 HPBar를 선택하고, 디테일 패널의 브러시(Brush) > 이미지에서 커스텀 체력 바에 사용할 머티리얼 인스턴스를 선택합니다.

   

   아래 이미지 크기(Image Size) 프로퍼티를 커스터마이징하여 머티리얼 인스턴스의 크기를 변경할 수 있습니다.

4. HPOverlay 아래에 텍스트 블록(Text Block)을 중첩하고 이름을 HPText로 변경합니다. 그러면 원형 체력 바 위에 텍스트를 추가할 수 있습니다.

   

5. 텍스트 블록을 선택하고 디테일 패널에서 가로 정렬(Horizontal Alignment) 및 세로 정렬(Vertical Alignment)을 가운데(Center)로 설정합니다. 그러면 텍스트가 항상 HPBar 중앙에 정렬됩니다.

   

   이미지를 클릭하면 확대됩니다.

6. 외형(Appearance) > 폰트(Font) > 크기(Size)에서 HP 바에 맞도록 폰트 크기를 변경합니다.

   

   이미지를 클릭하면 확대됩니다.

7. 컴파일(Compile)을 클릭합니다. 이것으로 HP 바 및 HP 텍스트 준비가 완료되었습니다.

   

보호막 바 및 텍스트 구성하기

보호막 바 및 텍스트도 위와 동일한 방법으로 구성할 수 있습니다. 다만 이번에는 HP 바와 보호막 바 사이에 공간을 추가해야 합니다. HPShieldsContainer는 스택 박스이기 때문에 자손 위젯이 가로로 자동 배치됩니다.

스택 박스 내부에 이미지 위젯을 사용해 체력 바와 보호막 바 사이에 공간을 추가합니다. 다음과 같이 빈 이미지 위젯을 구성합니다.

1. 스택 박스 아래에 이미지를 중첩합니다.

2. 이미지의 브러시 프로퍼티의 그리기 방식(Draw As)을 없음(None)으로 변경합니다.

   

이렇게 하면 위젯에 아무것도 표시되지는 않지만 레이아웃에서는 이미지 위젯이 공간을 차지하게 됩니다. 즉, 패딩 작업 없이도 스택 박스 엘리먼트 사이 간격을 쉽게 조정할 수 있습니다.

1. 체력 바와 동일한 방법으로 보호막 위젯을 구성합니다.

   보호막 바를 더 간단히 생성하려면 계층구조에서 HPOverlay를 우클릭한 뒤 복제(Duplicate)를 선택해 복제합니다.

   

2. Spacer 이미지 아래에 ShieldOverlay를 중첩하여 스택 박스 끝에 나타나도록 합니다.

   

   위젯에서 두 가지 타입의 바가 나란히 표시됩니다.

   

3. 아래의 위젯 계층구조 이미지와 같이 변수의 이름을 ShieldOverlay, ShieldBar, ShieldText로 변경합니다.

   

이것으로 체력 및 보호막 프로그레스 바에 기능을 추가해 주는 바인딩을 생성할 준비가 되었습니다.

뷰 바인딩

뷰모델 추가하기

또한, 뷰모델을 활용하면 장치 기능을 위젯 블루프린트에 추가할 수도 있습니다. 뷰모델은 뷰 바인딩을 통해 블루프린트의 위젯을 식별하고 해당 위젯으로 장치 기능을 연결해 줍니다.

HUD 컨트롤러 플레이어 정보 뷰모델을 사용하면 기존 HUD 엘리먼트를 커스텀 위젯으로 대체할 수 있습니다.

1. 창(Window) > 뷰모델(Viewmodels)을 선택하여 열고 위젯에 뷰모델을 추가합니다.

   

2. 뷰모델 창에서 + 뷰모델(+ Viewmodel)을 선택합니다. 현재 사용할 수 있는 모든 뷰모델을 표시해 주는 팝업 창이 열립니다.

   

3. 사용할 수 있는 HUD 컨트롤러 뷰모델에는 두 가지 유형이 있습니다.

   1. HUDPlayerInfoListViewModel 옵션에서 Device - HUD Controller Team/Squad Player Info List Viewmodel을 선택합니다. 여기서는 위 정보를 바탕으로 플레이어가 속한 팀/스쿼드가 아니라 컨트롤 플레이어의 정보만을 표시해야 합니다.

      

      

   2. 컨트롤 플레이어 및 스쿼드/팀의 위젯을 따로 생성하려면 Device - HUD Controller Player Info Viewmodel을 선택하고, 각 위젯의 Device - HUD Controller Player Info Viewmodel 프로퍼티를 활용합니다. 그런 다음 팀/스쿼드 플레이어 정보 목록 뷰모델을 해당 뷰모델에 바인딩해 주는 스쿼드 스택 위젯을 생성해야 합니다.

      

      팀/스쿼드 플레이어 정보 목록 뷰모델은 HUD 컨트롤러 플레이어 정보 뷰모델과 동일한 내용을 가지고 있지만, 활용하는 방식은 시나리오에 따라 다릅니다.

4. HUDPlayerInfoListViewModel 옵션에서 Team/Squad Player Info List Viewmodel을 선택합니다. 여기서는 위 정보를 바탕으로 플레이어가 속한 팀/스쿼드가 아니라 컨트롤 플레이어의 정보만을 표시해야 합니다.

   

이제 뷰모델의 데이터를 위젯에 연결해 주는 바인딩을 구성할 차례입니다.

ToText 뷰 바인딩 구성하기

1. 창 > 뷰 바인딩(View Bindings)을 선택하여 뷰 바인딩 창을 엽니다.

   

2. 계층구조에서 HPText를 선택하고, 현재 체력 값을 표시할 수 있도록 뷰 바인딩에 있는 위젯 추가(Add Widget)를 클릭해 HPText를 바인딩합니다. 빈 바인딩이 나타납니다.

   

3. 왼쪽 박스는 위젯 프로퍼티이고 오른쪽 박스는 위젯 프로퍼티에 바인딩해야 하는 데이터입니다. 왼쪽 박스를 클릭하면 HPText 텍스트 블록의 프로퍼티 목록이 표시됩니다. 텍스트(Text) 프로퍼티를 선택해 HP 값을 이 프로퍼티로 전달합니다.

   

4. 오른쪽 박스는 선택한 위젯 프로퍼티에 전달할 데이터입니다. 하지만 텍스트 프로퍼티는 텍스트 타입의 데이터만 받을 수 있습니다. 포트나이트의 HP 값은 Float(즉, Double) 타입이기 때문에 적절한 텍스트 타입으로 변환해야 합니다. 오른쪽 박스를 클릭하고 Conversion Functions > To Text (Double)을 선택합니다.

   

   그러면 방대한 옵션 목록이 표시됩니다. 가장 중요한 세팅은 보통 상단에 있으며, 나머지 세팅은 텍스트 프로퍼티로 전달되는 최종 값의 포맷을 설정할 수 있게 해 줍니다.

   

   이미지를 클릭하면 확대됩니다.

5. Value 옆에 있는 링크 아이콘을 클릭한 다음 HUD 컨트롤러 뷰모델에서 Health 값을 선택합니다.

   

6. 빈 필드를 클릭한 뒤 왼쪽 열의 HUDPlayerInfoListViewmodel을 선택하고, 오른쪽에서 Controlling Player Info를 펼쳐 Health를 선택합니다.

   

   이렇게 하면 Float(Double) 타입인 체력 프로퍼티가 To Text (Double) 변환 함수를 통해 전달됩니다. To Text (Double)은 체력을 텍스트 타입으로 바꿔 위젯에 표시될 수 있게 해 줍니다. 변환된 체력은 HPText 위젯의 텍스트 프로퍼티로 전달됩니다.

   

7. 위 단계를 반복해 ShieldText 위젯을 구성합니다. 동일한 바인딩을 통해 보호막 값을 볼 수 있습니다.

   

머티리얼 파라미터 설정하기

머티리얼 파라미터의 작동 방식에 대한 자세한 내용은 언리얼 엔진 문서의 머티리얼 파라미터 설정하기를 참고하세요.

이제 원형 프로그레스 바를 구성할 차례입니다. 프로그레스 바는 플레이어의 체력 및 보호막 수준에 따라 달라집니다.

1. 원형 HPBar에 빈 바인딩을 구성합니다.

   

2. 왼쪽 박스에서 HPBar > 브러시를 선택합니다. 브러시에는 원형 HP 바의 머티리얼 인스턴스가 포함되어 있습니다.

   

3. 오른쪽 박스에서 Conversion Functions > Set Scalar Parameter를 선택합니다.

   

4. 파라미터 이름(Parameter Name)에 프로그레스 바의 진행률을 변경하는 파라미터의 이름을 입력합니다.

   파라미터 이름을 찾으려면 HP 바의 머티리얼 인스턴스를 열고 오른쪽 파라미터 값을 살펴봅니다.

   

5. 프로그레스 바를 제어하는 파라미터의 이름은 Progress입니다. 이 이름을 파라미터 이름 필드에 입력합니다.

   

   파라미터 이름은 머티리얼 인스턴스의 파라미터 이름과 동일해야 합니다. 이름이 다르면 게임 내에서 머티리얼이 작동하지 않습니다.

6. Value 옆에 있는 링크 아이콘을 선택합니다. ToText와 유사하게 플레이어의 Health를 Value에 바인딩합니다.

   

뷰모델에서 체력 및 보호막 스탯을 바인딩한 최종 결과는 이렇게 표시됩니다. 이제 플레이어의 체력에 변화가 생기면 체력 프로퍼티가 HP 바의 머티리얼 인스턴스로 전달되고, 진행률 스칼라 파라미터가 업데이트됩니다.

ShieldBar에 대해서도 같은 과정을 반복합니다. 이번에는 Health 프로퍼티가 아닌 Shield 프로퍼티에 바인딩해야 합니다.

이것으로 HP 및 보호막 바인딩이 모두 구성되었습니다! 이제 HUD에 위젯을 표시해야 합니다.

HUD 컨트롤러 장치 구성

1. 레벨에 HUD 컨트롤러 장치를 배치합니다.

2. 컨트롤러 장치의 디테일 패널에서 다음과 같이 설정합니다.

   1. HUD 표시(Show HUD) = 예(Yes)

3. 플레이어 정보 위젯 오버라이드(Player Info Widget Override) 필드에서 커스텀 체력 및 보호막이 포함된 위젯을 사용합니다.

   

   이미지를 클릭하면 확대됩니다.

4. 세션 시작(Launch Session)을 선택하면 HUD에서 체력 및 보호막 위젯을 볼 수 있습니다! 피해를 입었을 때 HUD의 스탯이 업데이트되는지 UI를 테스트해 보세요.

   

다른 프로그레스 바 예시

Fortnite > UI > Materials에서 찾을 수 있는 직사각형 머티리얼을 사용하면, 어떤 위젯에서든 기본 박스를 커스터마이징해 다양한 형태의 배경으로 활용할 수 있습니다.

이를 바탕으로 머티리얼 인스턴스를 생성하고 UMG로 활용해 보세요!

이 문서의 정보와 제공된 머티리얼을 활용해 아래와 같이 프로그레스 바를 만들어 보세요.

• 텍스처를 배경으로 사용해 플레이어 아바타, 표시명, HP 바 프레이밍하기

  

• Fortnite > UI > Materials의 텍스처, 아이콘, 프로그레스 바 머티리얼, 직사각형 머티리얼을 조합해 기본 프로그레스 바 스타일 지정하기

  

• 섹션으로 나눈 HP 및 보호막 바와 함께 플레이어 아바타와 표시명 구현하기

  

다음 순서

• 

  커스텀 스쿼드 뷰 만들기

  커스텀 백플레이트에 대한 지식을 바탕으로 프로젝트에 커스텀 스쿼드 뷰를 만들어 봅니다.