닌자터틀 커스텀 UI: 플레이어 정보

이 섹션에서는 다음 단계를 따라 닌자터틀 아케이드 템플릿 플레이어 UI를 다시 만들어 게임의 커스터마이징 가능한 UI 오버레이를 생성하는 방법에 대해 알아봅니다.

단계는 기본적으로 다음과 같습니다.

1. 커스텀 위젯의 외형을 구성합니다.

2. 각각의 인터랙티브 위젯 엘리먼트에 뷰 바인딩을 추가합니다.

3. 여러 동시 접속 플레이어에 대한 플레이어 정보 스택을 생성합니다.

4. HUD 컨트롤러 장치를 구성하여 커스텀 UI를 표시합니다.

UI Material Lab 텍스처 팩을 무료로 다운로드하여 나만의 UI 환경설정을 실험해 보세요!

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

바로 시작해 보겠습니다!

커스텀 위젯 구성하기

콘텐츠 브라우저에서 All > [프로젝트 이름] > UI > Widgets으로 이동하고 UW_HUD_PlayerInfoBlock 위젯 블루프린트를 엽니다.

왼쪽에 계층구조(Hierarchy) 탭이 표시됩니다. 이 탭은 메인 에디터 창의 아웃라이너처럼 작동하고 완성된 위젯의 다양한 컴포넌트를 표시합니다.

등갑

상단 섹션은 레이어가 겹쳐져 있는 UI 룩을 정의하는 세 개의 백플레이트 이미지로 구성되어 있습니다. 예시는 다음과 같습니다.

• Backplate1_Image - 회색 배경 레이어

• Backplate2_Image - 주황색 외곽선 레이어

• Backplate3_Image - 흰색 외곽선 레이어

이러한 세 이미지가 합쳐져 플레이어 정보 패널의 액자식 스타일을 만듭니다.

UI에 사용할 이미지를 임포트할 때 텍스처 그룹(Texture Group)을 UI로, 압축 세팅(Compression Settings)을 UserInterface2D(RGBA8)로 선택해야 합니다.

플레이어 이름

이 컴포넌트는 활성 플레이어 이름과 비활성 플레이어 이름이라는 두 가지 엘리먼트로 구성되어 있으며, 플레이어가 게임에서 생존, 처치 또는 연결 해제될 때 표시됩니다.

현재 팀에서 활성 상태인 플레이어와 처치된 플레이어를 알 수 있도록 두 가지 다른 색상을 선택합니다.

활성 플레이어 이름의 경우 비저빌리티(Visibility)를 표시(Visible)로, 비활성 플레이어 이름의 경우 숨김(Hidden)으로 설정합니다. 이는 특정 조건에서만 표시됩니다.

너비 오버라이드(Width Override)를 220.0으로 설정하면 긴 플레이어 이름이 플레이어 아바타 아이콘과 겹치지 않습니다.

플레이어 아바타 아이콘

이 컴포넌트는 게임에서 선택한 스킨을 기반으로 플레이어의 캐릭터 포트레이트를 보여줍니다.

컴포넌트는 UI > Material Instances 폴더에 있는 MI_UI_PlayerCard 머티리얼 인스턴스에 바인딩되어 있습니다.

디테일 패널에서 세팅을 변경하여 이 머티리얼 인스턴스를 커스터마이징할 수 있으니, 나만의 이미지를 임포트하고 윤곽선 색상도 더해 보세요!

이 예시에서 선택한 이미지는 빈 투명 이미지로, 나중에 캐릭터 스킨에 연결됩니다.

체력

이 컴포넌트에는 플레이어의 체력과 보호막 레벨을 표시하는 영역이 있습니다.

부모 레벨에서 전체 영역의 크기를 결정하는 크기 박스를 확인할 수 있습니다.

다음은 MI_UI_Health_Backplate라는 체력 백플레이트 이미지입니다. 이 UI 머티리얼은 Fortnite > UI > Materials에서도 제공됩니다. 커스터마이징 가능하고 플레이어의 체력 바를 보여줄 수 있는 여러 옵션을 제공해 줄 수 있습니다.

백플레이트 위에는 두 개의 컴포넌트로 구성된 스택 박스가 있는데, 각각 Health_Image와 Health_Shadow라고 하는 체력 바와 섀도입니다.

Health_Image는 커스터마이징 가능한 프로그레스 바 UI 머티리얼입니다. 머티리얼 인스턴스를 열면 프리뷰 크기(Preview Size)를 변경하여 확대할 수 있습니다.

디테일 패널에서 세팅 중 일부를 변경해 보고 기존 머티리얼에 어떤 영향을 미치는지 확인해 보세요.

스칼라 파라미터 값(프로그레스 바 채우기 상태) 범위는 0~1이고, 포트나이트의 체력과 보호막 값은 일반적으로 0~100이므로, 플레이어에게 체력과 보호막 값이 올바르게 표시되도록 배수(Multiplier)를 0.01로 설정하는 것이 중요합니다.

Health_Shadow 바는 미적인 목적으로 추가된 단순한 셰이드 오버레이입니다.

보호막

보호막 컴포넌트는 진회색의 빈 보호막 영역을 보여주는 Shields_Container 배경과 프로그레스 바 UI 머티리얼이 포함된 Shields_Image로 구성되어 있습니다.

Shield_Image는 기본 프로그레스 바 머티리얼 인스턴스를 사용하며, Health_Image 머티리얼의 단순화된 버전입니다.

뷰 바인딩 추가하기

게임의 UI 핵심 컴포넌트를 만들었으니 이제 라이브 세션에서 수신한 데이터를 기반으로 각 컴포넌트의 업데이트를 허용하는 뷰 바인딩 추가를 연습해 보겠습니다.

플레이어 이름

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

1. 창(Window) > 뷰 바인딩(View Bindings)을 클릭하거나 화면 하단에서 뷰 바인딩을 선택하고 도킹하여 뷰 바인딩 탭을 엽니다.

   

   뷰 바인딩의 HUDPlayerInfoViewModel 목록을 확인하려면 다음 단계를 따르세요.

   1. 창 > 뷰모델(Viewmodels)을 선택하여 뷰모델 창을 엽니다.

   1. +뷰모델(+Viewmodel)로 이동하고 HUD-Player Info Viewmodel Base를 선택합니다.

   1. Device - HUD Controller Player Info Viewmodel을 클릭하고 선택(Select)을 클릭합니다.

   

2. 계층구조 목록에서 NameActive_Text를 선택하거나 UI 프리뷰 화면의 Playername 영역을 클릭합니다.

3. + 위젯 NameActive_Text 추가(+ Add Widget NameActive_Text)를 클릭하고 드롭다운 메뉴에서 Text를 선택합니다.

   

4. 오른쪽의 빈 필드에서 HUDPlayerInfoViewmodel을 선택하고 Player Name을 선택합니다.

   

5. 최종적으로 다음과 같이 바인딩되어야 합니다.

   

6. NameInactive_Text 엘리먼트에서 1~3단계를 반복합니다.

7. 비활성 이름의 비저빌리티 세팅을 수정하려면 NameInactive_Text에 새로운 위젯을 추가하고 드롭다운에서 비저빌리티를 선택합니다.

8. 오른쪽의 빈 필드를 클릭하고 Conversion Functions > To Visibility (Boolean)를 선택합니다.

   

9. 이 옵션을 선택하면 3개의 새로운 필드가 표시됩니다. Is Visible 옆에 있는 링크 아이콘을 클릭합니다. 메뉴에서 HUDPlayerInfoViewModel과 Is Eliminated를 선택합니다.

   

10. 아래에서 True Visibility를 히트 테스트 불가(자체만)(Not Hit-Testable (Self Only))로 설정합니다. False Visibility를 접힘(Collapsed)으로 둡니다. 플레이어가 처치되거나 연결 해제되면 이름이 NameActive_Text를 대체하지만, 플레이어가 생존해 있으면 접힌 상태로 남아 있습니다.

11. 최종적인 NameInactive_Text 바인딩은 다음과 같습니다.

    

12. 컴파일(Compile)을 눌러 변경사항을 제출하면 플레이어 이름이 완성됩니다!

플레이어 아바타 아이콘

1. 계층구조에서 Profile_Image를 선택하거나 UI 프리뷰 화면에서 플레이어 아이콘 영역을 클릭합니다.

2. + 위젯 Profile_Image 추가(+ Add Widget Profile_Image)를 클릭합니다.

3. Profile_Image > 브러시(Brush)로 이동하고 선택을 누릅니다. 이 바인딩은 기본적으로 Profile_Image 디테일 패널에서 선택한 브러시 세팅을 조회합니다.

   

4. 오른쪽의 빈 필드를 클릭하고 Conversion Functions > Set Texture Parameter를 선택합니다.

   

5. Parameter Name 필드에 Texture를 입력합니다. 이 필드의 이름을 찾으려면 플레이어 아바타 머티리얼 인스턴스를 열어야 합니다.

   Set Vector/Scalar/Texture Parameter 함수의 경우 머티리얼 인스턴스 파라미터 이름이 파라미터 이름 필드와 정확하게 일치해야 합니다.

6. 값 필드 옆의 링크 아이콘을 클릭하고 HUDPlayerInfoViewModel > Player Avatar Icon을 선택합니다.

7. 최종적으로 다음과 같이 바인딩되어야 합니다.

   

체력과 보호막

1. 계층구조에서 Health_Image를 선택하거나 UI 프리뷰 화면에서 체력 바 영역을 클릭합니다.

2. + 위젯 Health_Image 추가(+ Add Widget Health_Image)를 클릭합니다.

3. Profile_Image > 브러시(Brush)로 이동하고 선택을 누릅니다.

4. 오른쪽의 빈 필드를 클릭하고 Conversion Functions > Set Scalar Parameter를 선택합니다.

5. Parameter Name 필드에 Progress를 입력합니다. 이 필드의 이름을 찾으려면 플레이어 아바타 머티리얼 인스턴스를 열어야 합니다.

6. 값 옆에 있는 링크 아이콘을 클릭하고 HUDPlayerInfoViewModel > Health를 선택합니다.

   1. 프로그레스 바는 플레이어의 남은 체력의 퍼센티지를 나타내며, 배수가 0.01로 설정되었기 때문에 1 퍼센티지 포인트마다 프로그레스 바가 1/100씩 이동합니다. 머티리얼 인스턴스의 퍼센티지 값을 임의로 변경하여 프로그레스 바가 움직이는지 확인하는 방식으로 테스트할 수 있습니다.

      

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

7. 최종적으로 다음과 같이 바인딩되어야 합니다.

   

8. 보호막 바의 경우 1~6단계를 반복하되 Health 대신 Shield를 선택합니다.

9. 최종적으로 보호막은 다음과 같이 바인딩되어야 합니다.

   

10. 컴파일을 눌러 변경사항을 제출합니다.

전체 위젯

이 바인딩으로 플레이어가 게임에 연결된 이후에만 전체 위젯이 표시됩니다.

1. 계층구조에서 PlayerInfoBlock_Overlay를 선택합니다.

2. + 위젯 PlayerInfoBlock_Overlay 추가(+ Add Widget PlayerInfoBlock_Overlay)를 클릭한 다음, 드롭다운 메뉴에서 Visibility를 선택합니다.

3. 오른쪽의 빈 필드를 클릭하고 Conversion Functions > To Visibility (Boolean)를 선택합니다. 이 옵션을 선택하면 3개의 새로운 필드가 표시됩니다.

4. Is Visible 옆에 있는 링크 아이콘을 클릭합니다. 메뉴에서 HUDPlayerInfoViewModel과 Is Disconnected를 선택합니다.

5. True Visibility를 접힘(Collapsed)으로 설정하고 False Visibility를 히트 테스트 불가(자체만)(Not Hit-Testable (Self Only))로 설정합니다.

6. 최종적으로 다음과 같이 바인딩되어야 합니다. 컴파일을 눌러 변경사항을 저장합니다.

   

모두 완료되었습니다. 이것으로 게임 내 정보를 표시하는 UI 위젯을 전부 구성했습니다!

플레이어 스택 생성하기

이 섹션에서는 컨트롤 플레이어와 함께 추가 스쿼드 플레이어를 표시하는 사용자 위젯 생성 방법을 보여줍니다.

1. 시작하려면 콘텐츠 브라우저에서 우클릭하고 유저 인터페이스(User Interface) > 위젯 블루프린트(Widget Blueprint)를 선택하여 새로운 위젯 블루프린트를 생성합니다.

   

2. 대화창에서 사용자 위젯(User Widget)을 선택하고, 이름을 HUDInfoStack으로 변경합니다.

3. 사용자 위젯을 더블클릭하면 새로운 에디터 창이 열립니다.

4. 팔레트(Palette) 패널에서 Overlay 엘리먼트를 계층구조 패널로 드래그하여 시작합니다.

5. Stack Box를 Overlay 하위 수준으로 드래그하고, 이름을 PlayerInfoStack으로 변경합니다.

   

6. 뷰모델 패널에서 +뷰모델(+Viewmodel)을 누르고 Device - HUD Controller Team/Squad Player Info List를 선택합니다.

7. 디테일(Details) 패널에서 +뷰모델 익스텐션 추가(+Add Viewmodel Extension)를 누릅니다. 그러면 PlayerInfoStack에서 엔트리 위젯 클래스를 수락합니다.

   

   옵션이 표시되지 않으면 위젯을 다시 한번 컴파일해 보세요.

8. 엔트리 위젯 클래스에서 앞서 생성한 PlayerInfoBlock 을 선택합니다. 아래에서 HUDPlayerInfoViewmodel을 엔트리 뷰모델(Entry Viewmodel)로 선택합니다.

   

9. 슬롯 템플릿(Slot Template) 섹션에서는 각 위젯 간 간격과 정렬을 조정하고, 특정 수의 위젯이 게임에서 어떻게 보일지 미리 볼 수 있습니다.

   위젯 간 간격 조정

   gif를 클릭하면 확대됩니다.

10. 뷰 바인딩 패널에서 +위젯 추가(+Add Widget)를 클릭한 다음, HUDInfoStack을 선택합니다. PlayerInfoStack_Viewmodel_Extension을 선택하고 펼쳐서 Set Items를 확인한 다음 선택합니다. PlayerInfoStack_Viewmodel_Extension이 목록에 표시되지 않는 경우, 컴파일을 누르면 표시됩니다.

    

11. 오른쪽의 빈 필드에서 HUDPlayerInfoListViewModel > Team/Squad Players Info Array를 선택합니다. 그러면 플레이어 정보 뷰모델의 배열이 Set Items 함수로 새로 구성한 익스텐션에 전달됩니다.

    

12. 컴파일을 눌러 변경사항을 저장합니다. 이제 HUD 컨트롤러 장치를 사용하여 이를 게임에 추가할 준비가 되었습니다.

나머지 스쿼드와는 별도로 컨트롤 플레이어의 위젯을 만들고자 하는 경우 다음 단계를 따르세요.

1. 컨트롤 플레이어를 위한 새로운 위젯을 생성하고 이전에 Device - HUD Controller Player Info Viewmodel을 사용하여 구성했던 것처럼 뷰 바인딩을 구성합니다.

2. 이 위젯을 Stack Box를 보유한 부모 위젯 아래로 가져옵니다.

3. 해당 위젯의 바인딩을 생성합니다. 왼쪽 필드에서 Device - HUD Controller Player Info Viewmodel을 선택합니다. 오른쪽 필드에서 Device - HUD Controller Team/Squad Player Info List > Controlling Player Info를 선택합니다.

HUD 컨트롤러 장치 구성

1. 콘텐츠 브라우저에서 HUD 컨트롤러 장치를 검색하여 씬으로 드래그합니다.

   

2. 사용자 옵션에서 플레이어에게 표시할 항목을 선택하고, HUD 표시(Show HUD)는 예(Yes)로, 팀 정보 표시(Show Team Info)는 아니요(No)로 설정해야 합니다.

3. 플레이어 정보 위젯 오버라이드(Player Info Widget Override)로 스크롤을 내리고 HUDInfoStack 위젯을 빈 필드로 드래그합니다. 이는 만들었던 원본 위젯이 아닌 새로 생성한 스택 위젯이어야 합니다.

   

4. 저장(Save)을 클릭합니다.

이제 모든 준비가 끝났습니다! 게임을 플레이테스트하면 새로운 UI가 표시됩니다!

다음 단계

다음 단계에서는 횡스크롤 게임의 카메라와 컨트롤 디바이스를 구성하는 방법을 알아봅니다.

• 

  닌자터틀 카메라 및 컨트롤

  닌자터틀 아케이드 템플릿을 사용하여 횡스크롤 게임을 위한 카메라와 컨트롤을 구성합니다.