포트나이트 언리얼 에디터에서 커스텀 백플레이트 만들기 | Fortnite 문서

백플레이트는 플레이어의 아바타 그림, 게이머 태그, 체력, 보호막 등 다양한 유형의 정보를 HUD에 표시해 줍니다.

백플레이트는 여러 기능을 수행합니다. 백플레이트가 있으면 멀티플레이어 협동 게임에서 팀원을 구별할 수도 있고, 체력과 보호막 스탯이 낮을 때 이를 파악할 수도 있습니다.

포트나이트 언리얼 에디터(Unreal Editor for Fortnite, UEFN)에서는 백플레이트를 만들 때 머티리얼을 이용하거나, 텍스처와 머티리얼을 함께 사용합니다. 텍스처는 백플레이트를 풍성하게 장식하고 머티리얼로는 구현할 수 없는 디테일을 추가하는 컨테이너로 사용됩니다.

하지만 텍스처는 메모리를 많이 사용합니다. 따라서 메모리 예산에 부담을 주고 섬 퍼포먼스가 낮아질 수 있습니다. 머티리얼의 텍스처와 Texture Sample 노드는 메모리에서 상당한 비중을 차지합니다.

머티리얼은 평면 디자인을 생성하고 백플레이트에 애니메이션 이펙트를 추가할 때 가장 효과적으로 활용할 수 있습니다. 머티리얼은 GPU로 간단한 대수 연산을 실행하므로 메모리를 덜 사용합니다. 따라서 단순한 셰이프를 만드는 것부터 머티리얼에 복잡한 상호작용 애니메이션을 적용하는 것까지 다양한 작업을 할 수 있습니다.



머티리얼을 사용한 평면 UI 디자인	텍스처를 사용한 UI 디자인

텍스처를 사용하기로 한 경우에도 조금만 사용해야 하며, UI 텍스처는 256 x 256px을 초과하지 않는 것이 좋습니다.

머티리얼은 GPU를 사용해 렌더링하므로 메모리를 적게 사용합니다.

아바타 백플레이트 생성 방식은 아래와 같은 다양한 요인에 따라 결정됩니다.

개인적으로 선호하는 UI 디자인
제작 중인 섬 경험을 보완해 줄 수 있는 UI 스타일과 디자인
절약하고 싶은 메모리의 양

이 튜토리얼에서는 아바타 백플레이트의 기본 디자인에 세 개의 머티리얼 인스턴스를 사용합니다. 아래의 백플레이트 디자인은 M_UI_Shape_Rectangle 머티리얼을 활용해 다음과 같은 항목을 포함하도록 제작되었습니다.

반투명한 분홍색 배경
이름 텍스트를 둘러싼 분홍색 컨테이너와 반투명 배경
플레이어의 아바타가 들어갈 청록색 원
머티리얼로 자신만의 UI를 만들어 보세요! 머티리얼 인스턴스로 커스텀 UI 제작하기를 참고하세요.

UI 팝업 문서의 사용자 위젯 워크플로를 사용해 다음 단계를 수행합니다.

사용자 위젯을 생성합니다.
섬네일 이름을 Player_Info로 변경합니다.
섬네일을 더블클릭하여 UMG 위젯 에디터를 엽니다.

위젯 에디터에서 백플레이트 디자인을 위해 외형과 화면 배치를 조정할 수 있습니다. 그런 다음 뷰모델을 추가해 바인딩 기능을 생성하면 기존 플레이어의 정보를 캡처해 백플레이트 디자인에 바인딩할 수 있습니다.

이벤트 그래프에서 다음을 수행합니다.

우측 상단의 Fill Screen 세팅을 선택하고 Desired로 변경합니다.
이 세팅을 사용하면 게임플레이 도중에 UI가 매끄럽게 보이도록 위젯을 지정된 크기로 바꿀 수 있습니다.
커스텀 HUD를 위해 UI 디자인을 구성할 때에는 먼저 이벤트 그래프에 패널을 추가합니다.
팔레트(Palette) 패널에서 패널(Panel) 섹션으로 이동한 다음 캔버스 패널(Canvas panel)을 이벤트로 드래그하거나, 계층구조(Hierarchy) 패널로 직접 드래그합니다. 그런 다음, 패널 이름을 HUD_Canvas로 변경합니다.
캔버스 패널을 사용하면 다양한 UI 엘리먼트를 화면의 특정 위치에 고정할 수 있습니다. 디자인 레이아웃을 캔버스 패널에 올바르게 반영하려면 캔버스에 패널을 추가하기 전에 UI 디자인을 계획해 두어야 합니다.
캔버스 패널은 특정 UI 엘리먼트를 디자인의 일부로 사용할 때만 사용합니다. 예를 들어 HUD를 빌드하는 데 여러 자손 위젯을 화면의 특정 위치에 배치해야 하는 경우 이를 사용합니다.
Fill Screen 세팅을 Desired로 변경하는 대신, 캔버스 패널의 크기를 가장 흔히 사용되는 화면비(16:9)인 1920 X 1080 또는 2560 X 1440으로 변경할 수 있습니다.
팔레트 패널의 패널 섹션에서 스택 박스(Stack Box)를 계층구조의 HUD_Canvas에 중첩시키고 이름을 Backplate_StackBox로 변경합니다. 이 박스는 UI 변수를 구성하는 위젯을 담는 백플레이트 UI의 컨테이너 역할을 합니다.
스택 박스에 변수를 추가하면 패널 왼쪽에서 오른쪽 방향으로 자동 정리됩니다.
스택 박스를 사용해 UI 엘리먼트를 위에서 아래로 쌓을 수도 있습니다.
팔레트 패널의 일반(Common) 섹션에서 이미지(Image)를 계층구조의 Backplate_StackBox 아래에 중첩시킵니다. 그리고 이미지의 이름을 Avatar_Image로 변경합니다. 여기에 아바타 테두리가 들어갑니다.
팔레트 패널의 패널 섹션에서 오버레이(Overlay)를 Backplate_StackBox 아래에 중첩시키고 이름을 Nameplate_Overlay로 변경합니다. 오버레이를 활용하면 위젯을 여러 레이어로 겹쳐서 배치할 수 있습니다.
팔레트 패널에서 Nameplate_Overlay 아래에 두 개의 이미지를 드래그해 중첩합니다.
머티리얼에 따라 이미지의 이름을 Background 및 Border로 변경하세요.
Nameplate_Overlay 아래에 크기 박스(Size Box)를 드래그해 중첩합니다.
크기 박스를 사용해 중첩된 자손의 프로퍼티를 설정합니다. 이렇게 하면 크기 박스 내부 요소가 밖으로 빠져나와 다른 UI 엘리먼트나 게임플레이를 가리는 경우를 방지할 수 있습니다.
크기 박스 아래에 오버레이를 드래그해 중첩하고 이름을 Text_Overlay로 변경합니다.
오버레이가 없으면 크기 박스 아래에서 하나의 위젯만 자손으로 지정할 수 있습니다.
팔레트 패널의 일반 섹션에서 두 개의 텍스트 블록(Text Block)을 Text_Overlay 아래로 드래그해 중첩합니다. 텍스트 블록의 이름을 Active 및 Inactive로 변경합니다.

이것으로 UI 레이아웃이 완성되었습니다. 이제 위젯의 프로퍼티를 설정해 화면 크기를 기준으로 백플레이트 UI 엘리먼트의 크기를 구성할 차례입니다.

컨테이너 패널은 포함된 가장 큰 위젯의 크기에 맞춰 자동으로 크기가 조정됩니다. 프로퍼티를 수정하려면 먼저 부모 패널에 모든 자손이 포함되어 있어야 합니다. 그렇지 않으면 계층구조 탭에 자손 UI 엘리먼트를 추가할 때 부모 엘리먼트의 비율이 바뀔 수 있습니다.

이제 Backplate_StackBox 패널의 프로퍼티를 설정해 백플레이트의 화면 배치와 바운더리를 결정합니다.

이 백플레이트 디자인에서는 아래 프로퍼티를 수정했습니다.

스택 박스가 앵커와 더 가까워지도록 이벤트 그래프 내 적절한 위치로 이동합니다.

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

세팅	값
앵커(Anchors)	좌측 하단 모서리
정렬(Alignment)	위젯과 화면 가장자리 사이에 간격을 두고 좌표쌍을 설정해야 함
콘텐츠 크기에 맞춤(Size to Content)	True
방향(Orientation)	가로(Horizontal)(모든 자손 위젯이 왼쪽에서 오른쪽으로 표시됨)
비틀기(Shear) X	-20.0(스택 박스를 오른쪽 음수 방향으로 왜곡함)

Shift + Control을 누른 상태로 좌측 하단을 클릭하면 위젯의 위치와 배열이 자동으로 업데이트됩니다.

이렇게 해서 기본 백플레이트 레이아웃 엘리먼트를 배치했습니다. 이제 생성한 머티리얼을 추가하고 이름표의 텍스트 블록을 수정할 차례입니다.

백플레이트 에셋 추가 및 편집하기

위젯 에디터에는 선택한 위젯에 머티리얼과 텍스트를 추가하고 브러시(Brush) 세팅에 사용되는 에셋 프로퍼티를 수정할 수 있는 세팅이 있습니다.

계층구조 패널에 있는 머티리얼 배열 순서에 주의해야 합니다. 에셋을 추가할 때에는 에셋이 올바르게 표시되는지 확인해야 합니다. 백그라운드 에셋을 맨 아래에 두고, 다른 에셋을 그 위에 레이어처럼 쌓아야 합니다.

머티리얼 인스턴스 편집하기

계층구조 패널에서 위젯을 선택하고 머티리얼과 텍스트를 추가합니다.

스택 박스 아래의 아바타 이미지를 선택하면 위젯이 강조 표시되고 디테일(Details) 패널에 프로퍼티가 나타납니다.
디테일 패널의 브러시 세팅에 AvatarBorder 머티리얼을 추가합니다. 이미지 위젯과 머티리얼의 크기가 맞도록 이미지 크기(Image Size) 세팅을 조정합니다.
이미지를 클릭하면 확대됩니다.
머티리얼은 페인트와 같습니다. 브러시 세팅에 추가하면 머티리얼이 이미지 위젯의 공간을 채웁니다.
경험에 사용하고 싶은 특정 아바타가 있다면 다음 단계를 따릅니다.
* 오버레이를 생성해 아바타 이미지를 테두리 머티리얼 아래에 레이어링합니다.
임포트한 아바타 이미지를 이미지 배경 레이어에 추가합니다.
* 맨 위에 있는 레이어에 테두리 머티리얼을 사용합니다.
계층구조 패널에서 Background 이미지를 선택하여 디테일 패널에서 오버레이 옵션을 엽니다.
디테일 패널에서 가로 정렬(Horizontal Alignment) 및 세로 정렬(Vertical Alignment) 세팅을 가운데 정렬로 설정하고 Background Material을 브러시 세팅에 추가합니다. 이미지 위젯과 배경 머티리얼 컬러가 맞도록 이미지 크기 세팅을 조정합니다.
이미지를 클릭하면 확대됩니다.
Nameplate_Overlay 아래 Border 이미지를 선택하면 위젯이 강조 표시되고 디테일 패널에 프로퍼티가 나타납니다.
디테일 패널에서 가로 정렬 및 세로 정렬 세팅을 가운데 정렬로 설정하고 Border Material을 브러시 세팅에 추가합니다. 테두리가 배경 컬러를 감싸도록 이미지 크기 세팅을 조정합니다.
이미지를 클릭하면 확대됩니다.

백플레이트의 기본적인 모양을 잡았으니 이제 텍스트 블록을 편집해 보겠습니다.

이름표 편집하기

이름표는 플레이어의 게이머 태그를 보여줍니다. 위의 백플레이트 디자인에는 크기 박스와 텍스트 블록이 모두 포함되어 있습니다.

크기 박스의 프로퍼티를 편집하면 텍스트가 바운더리 밖으로 튀어나와 다른 UI 엘리먼트와 겹치거나 플레이어 시야를 가리는 경우를 방지할 수 있습니다.

계층구조에서 크기 박스를 선택하면 디테일 패널에서 프로퍼티가 열립니다.
디테일 패널에서 가로 정렬 및 세로 정렬 세팅을 가운데 정렬로 설정합니다. 이렇게 하면 텍스트 블록이 자동으로 이름표 이미지의 중앙에 정렬됩니다. 크기 박스의 너비 오버라이드(Width Override) 및 높이 오버라이드(Height Override) 옵션을 True로 설정하고 Nameplate_Overlay를 원하는 크기로 설정합니다.
녹색 박스는 크기 박스의 테두리를 나타냅니다.
이미지를 클릭하면 확대됩니다.
계층구조 패널에서 크기 박스를 우클릭하고 다음으로 래핑...(Wrap With…) > 크기 박스를 선택해 텍스트 블록이 크기 박스의 프로퍼티에 따라 사용자 텍스트를 감싸도록 합니다.

이것으로 이름표 UI의 기본 구성이 완료되었습니다. 모든 자손 엘리먼트는 부모의 프로퍼티를 가져오므로 위젯을 편집해야 하는 작업량을 최소화할 수 있습니다.

이제 디테일 패널에서 정렬과 폰트 크기, 컬러, 스트로크 등을 설정하여 활성 텍스트 블록 및 비활성 텍스트 블록을 수정합니다.

활성 텍스트의 컬러는 비활성 텍스트와 구별되어야 합니다. 이 예시에서는 활성 텍스트 블록 폰트를 크기 145, 흰색, 스트로크 6으로 설정하고, 비활성 텍스트 블록의 폰트는 크기 145, SlateGrey 컬러, 스트로크 6으로 설정했습니다.

활성 플레이어 이름

비활성 플레이어 이름

비활성 텍스트 박스의 비저빌리티(Visibility) 세팅을 숨김(Hidden)으로 설정합니다. 이렇게 하면 게임 내에서 위젯 바인딩이 트리거되기 전까지 텍스트가 표시되지 않도록 가릴 수 있습니다.

이제 이름표와 아바타 백플레이트 등 모든 엘리먼트가 한데 모였습니다.

뷰 바인딩 추가하기

UI 디자인이 완성되었으니 이제 라이브 세션 도중 텍스트 박스와 Avatar_Image가 수신해야 하는 데이터를 바탕으로 바인딩을 추가해야 합니다.

HUD Controller Player Info Viewmodel을 사용하면 HUD 부분을 커스텀 위젯으로 대체할 수 있습니다. 이 세팅을 활용하려면 백플레이트의 뷰모델을 생성해야 합니다.

플레이어 이름 텍스트

플레이어 이름을 올바른 필드에 표시하려면 다음 단계를 따르세요.

창(Window) > 뷰 바인딩(View Bindings)을 클릭하거나 화면 하단에서 뷰 바인딩을 선택하고 도킹하여 뷰 바인딩 탭을 엽니다.
다음과 같이 뷰 바인딩의 HUDPlayerInfoViewModelBase 목록을 확인합니다.
1. 창 > 뷰모델(Viewmodels)을 선택하여 뷰모델 창을 엽니다.
1. + 뷰모델(+ Viewmodel)로 이동한 뒤 HUD Controller Team/Squad Player Info Viewmodel Base를 선택합니다.
HUD Controller Team/Squad Player Info List를 사용하면 스쿼드나 팀 없이 컨트롤 플레이어의 정보만을 볼 수 있습니다.
1. 선택(Select)을 클릭합니다.
계층구조 목록에서 선택하거나 UI 프리뷰 화면의 플레이어 이름 영역을 클릭하여 텍스트 블록을 선택합니다.
뷰 바인딩 탭에서 +Active_Name 위젯 추가(+Add Widget Active_Name)를 클릭합니다.
활성 'PlayerName' 필드를 선택하고 텍스트(Text) > 선택(Select)을 클릭합니다.
오른쪽 빈 필드의 드롭다운에서 HUDPlayerInfoViewModel > Controlling Player Info > Player Name > 선택을 클릭합니다.
최종적으로 다음과 같이 바인딩되어야 합니다.
Inactive_Name 엘리먼트에 대해서도 2~3단계를 반복합니다.
비활성 이름의 비저빌리티 세팅을 수정하려면 Inactive_Name에 새로운 위젯을 추가합니다. 첫 번째 필드를 선택하고 드롭다운에서 비저빌리티 > 선택을 클릭합니다.
오른쪽에서 빈 필드를 클릭하고 Conversion Functions > To Visibility (Boolean) > 선택을 클릭합니다.
이 옵션을 선택하면 3개의 새로운 필드가 표시됩니다. Is Visible 옆에 있는 링크 아이콘을 클릭합니다. 메뉴에서 HUDPlayerInfoViewModel > Controlling Player Info > Is Eliminated > 선택을 클릭합니다.
아래에서 True Visibility를 히트 테스트 불가(자체만)(Not Hit-Testable (Self Only))로 설정합니다. False Visibility를 Collapsed로 둡니다. 플레이어가 처치되거나 연결 해제되면 이름이 Active_Name를 대체하지만, 플레이어가 생존해 있으면 접힌 상태로 남아 있습니다.
최종적인 Inactive_Name 바인딩은 다음과 같습니다.
이미지를 클릭하면 확대됩니다.
컴파일(Compile)을 클릭해 변경사항을 제출하면 플레이어 이름 작업이 완료됩니다!

플레이어 아바타 아이콘

계층구조에서 Avatar_Image를 선택하거나 UI 프리뷰 화면에서 플레이어 아이콘 영역을 클릭합니다.
+ 위젯 Profile_Image 추가(+ Add Widget Profile_Image)를 클릭합니다.
Avatar_Image > 브러시(Brush)로 이동하고 선택을 누릅니다. 이 바인딩은 기본적으로 Avatar_Image의 디테일 패널에서 선택한 브러시 세팅을 확인합니다.
오른쪽 빈 필드를 클릭하고 Conversion Functions> Make Image Brush from Material > 선택을 클릭합니다.
빈 이미지 크기 필드를 위젯의 아이콘 테두리 머티리얼 크기로 설정합니다. 이 예시에서 테두리 머티리얼의 크기는 X=50, Y=45입니다.
최종적으로 다음과 같이 바인딩되어야 합니다.
이미지를 클릭하면 확대됩니다.
컴파일을 클릭하여 위젯을 저장합니다.