커스텀 스쿼드 뷰 만들기는 싱글 플레이어 이름표 위젯 디자인을 바탕으로 진행됩니다. 스택 박스 위젯은 뷰모델로 싱글 플레이어 정보 위젯을 재현하여 플레이어 뷰를 싱글 플레이어에서 스쿼드로 전환합니다.
스택 박스는 싱글 플레이어 위젯의 사본을 왼쪽에서 오른쪽으로, 또는 위에서 아래로 배열하는 선형적인 컨테이너입니다. 이렇게 하면 스쿼드 디자인을 일관성 있게 유지할 수 있습니다.
이 예시에서는 스쿼드 뷰를 위아래로 쌓습니다.
왼쪽에서 오른쪽으로 스쿼드를 쌓은 예시는 닌자터틀 문서의 커스텀 UI: 플레이어 정보를 참고하세요.
플레이어 정보 위젯
게임 중에 팀 멤버의 플레이어 정보를 사용하려면 Device - HUD Controller Player Info Viewmodel을 사용해 Player_Info 위젯을 설정해야 합니다. 이 세팅을 사용하면 각 위젯의 장치 - HUD 컨트롤러 플레이어 정보 뷰모델 프로퍼티를 활용해 컨트롤 플레이어와 스쿼드/팀의 위젯을 따로 생성할 수 있습니다.
백플레이트 및 체력 및 보호막 튜토리얼의 바인딩 구성 세팅을 활용해 필요한 플레이어 정보를 바인딩할 수 있습니다.
Player_Info 위젯을 올바르게 구성하지 않으면 컴파일러에서 오류 메시지가 표시됩니다.
아래에서는 팀/스쿼드 플레이어 정보 목록 뷰모델을 플레이어 아이콘, 플레이어 이름, 체력, 보호막에 바인딩하는 스쿼드 스택 위젯을 만드는 단계를 설명합니다.
사용자 위젯 생성하기
UI 팝업의 단계를 따라 사용자 위젯을 생성합니다.
사용자 위젯을 Squad_View로 명명합니다.
사용자 위젯 섬네일을 더블클릭해 언리얼 모션 그래픽(UMG)에서 이벤트 에디터를 엽니다.
위젯 에디터에서는 스쿼드 뷰의 UI 디자인을 계획하고 레이아웃을 구성할 수 있습니다. 레이아웃을 결정했다면 머티리얼을 추가해 UI에 커스텀 룩을 적용합니다.
이제 콘텐츠 브라우저에 Player_Info와 Squad_View라는 두 개의 사용자 위젯이 준비되었습니다.
스쿼드 레이아웃 만들기
스택 박스를 컨테이너로 사용하여 Squad_View 위젯에 완벽하게 작동하는 하나의 Player_Info 위젯을 적용하는 것이 가장 좋은 방식입니다. 이렇게 하면 스택 박스 안에서 싱글 플레이어 디자인을 재현하고 이 디자인을 위에서 아래로, 혹은 왼쪽에서 오른쪽으로 반복 배열함으로써 디자인을 일관성 있게 유지할 수 있습니다.
먼저 싱글 플레이어 위젯을 뷰모델에 추가한 다음, 이벤트 그래프에서 스택 박스를 통해 레이아웃을 정리해 보겠습니다.
과정은 다음과 같습니다.
Squad_Info 아래에 오버레이(Overlay)를 드래그하고 Container_Overlay로 명명합니다.
Container_Overlay의 크기를 2560 x 1440으로 변경합니다. 모든 화면에 맞는 최적의 크기입니다.
Container_Overlay 아래에 스택 박스(Stack Box)를 중첩합니다.
디테일(Details) 패널에서 다음과 같이 스택 박스 세팅을 변경합니다.
패딩(Padding) = 25
방향(Orientation) = 세로(Vertical)
그러면 스택 박스에 화면 가장자리로부터 25px의 패딩이 적용됩니다.
메인 메뉴 바에서 창(Window) > 뷰모델(Viewmodels)을 선택해 뷰모델 패널을 엽니다.
+뷰모델(+Viewmodel)을 클릭한 다음 Device - HUD Controller Team/Squad Player Info List > 선택(Select)을 클릭합니다. 그러면 HUD 컨트롤러 장치를 위한 뷰모델이 생성됩니다.
디테일 패널에서 +뷰모델 익스텐션 추가(+Add Viewmodel Extension)를 클릭합니다. 그러면 Squad_View 위젯 안에서 팀/스쿼드의 플레이어 수에 따라 스쿼드 위젯을 다이내믹하게 생성할 수 있는 옵션이 열립니다.
+ 뷰모델 익스텐션 추가 전+ 뷰모델 익스텐션 추가 후엔트리 위젯 클래스(Entry Widget Class) 세팅의 드롭다운에서 Player_Info 위젯을 선택하고, 엔트리 뷰모델(Entry ViewModel)을 HUDPlayerInfoListViewModel로 설정합니다.
슬롯 템플릿(Slot Template) 옵션을 펼치고 각 플레이어 위젯 사이의 여백을 조정합니다. 위젯을 추가하거나 삭제하고 배열을 변경합니다. 이러한 옵션은 게임 내에서 보이는 위젯의 외형을 시각화하는 데 사용합니다.
UI 엘리먼트가 사용 가능한 공간에 비해 너무 크면 Player_Info 위젯으로 돌아가 이미지 위젯의 크기를 Squad_View 위젯에 맞게 조정합니다.
다음으로는 바인딩을 추가해 스쿼드의 UI가 작동하도록 합니다.
스쿼드 바인딩
스쿼드 정보를 Squad_View 위젯에 바인딩하려면 새로운 바인딩을 통해 스쿼드원 정보를 참조해야 합니다. 바인딩은 바인딩된 장치가 어떤 플레이어의 어떤 정보를 필요로 하는지 위젯에게 알려줍니다. 그럼 각 플레이어의 정보가 HUD 컨트롤러 장치를 통해 UI에 채워집니다.
계층구조 패널에서 스택 박스를 선택한 뒤 뷰 바인딩(View Bindings)을 열고 +위젯 추가(+Add Widget)를 클릭합니다. 이렇게 하면 스택 박스가 뷰 바인딩 패널에 위젯으로 추가됩니다.
위젯 드롭다운에서 Squad_View > 선택을 클릭합니다. 그러면 스쿼드 위젯과 내부의 모든 위젯을 선택해 바인딩할 수 있습니다.
왼쪽의 Squad_View 필드에서 Squad_View > StackBox > StackBox Viewmodel > Set Items > 선택을 클릭합니다. 그러면 플레이어 정보 뷰모델의 배열이 Set Items 함수로 새로 구성한 익스텐션에 전달됩니다.
이 단계에서 Set Items 함수가 보이지 않는다면 위젯을 컴파일하고 다시 시도해 보세요.
PlayerInfoStack_Viewmodel_Extension이 목록에 표시되지 않는 경우, **컴파일(Compile)** 을 누르면 표시됩니다.
오른쪽 빈 필드에서 Squad_View > HUDPlayerInfoListViewModel > Team/Squad Players Info Array > 선택을 클릭합니다. 그러면 플레이어 정보 뷰모델의 배열이 Set Items 함수로 새로 구성한 익스텐션에 전달됩니다.
컴파일을 클릭합니다. 이제 위젯을 HUD 컨트롤러 장치에 추가할 준비가 되었습니다.
위젯을 HUD 컨트롤러에 추가하고 프로젝트를 플레이테스트해 봅니다.
HUD 컨트롤러 장치 구성
HID 컨트롤러에는 바꿔야 하는 몇 가지 필수 세팅이 있습니다. 이제 포트나이트의 디폴트 HUD 엘리먼트를 자신만의 위젯 디자인으로 바꿔 보겠습니다.
HUD 컨트롤러 장치를 프로젝트로 드래그하고, 장치가 선택된 상태로 디테일 패널에서 세팅을 살펴봅니다.
디테일 패널에서 다음 옵션을 설정합니다.
HUD 표시(Show HUD) = 예(Yes)
플레이어 정보 위젯 오버라이드(Player Info Widget Override) = 위젯 이름
저장 아이콘을 클릭하여 변경사항을 저장합니다.
세션 시작(Launch Session)을 선택해 커스텀 UI를 플레이테스트합니다.
두 명 이상의 플레이어가 플레이테스트에 참여하면 레이아웃과 디자인이 여러분이 만든 섬에 잘 어울리는지 확인할 수 있습니다.
