사용자 위젯은 위젯 에디터에서 UMG 위젯으로 디자인합니다.
사용자 위젯은 UMG 위젯과 장치 기능 사이의 경로를 추적한다는 점에서 맵과 비슷하며, 사용자 위젯을 읽을 줄 알면 UI 구성을 이해하는 데 도움이 됩니다. 위젯 에디터에서는 다음 요소를 살펴볼 수 있습니다.
기능 템플릿에서 HUD Controller 폴더를 열고 UW_HCD01 위젯을 더블클릭하면 해당 위젯이 어떻게 만들어져 HUD 컨트롤러 장치에 바인딩되었는지 자세히 알아볼 수 있습니다.
위젯 레이아웃
위젯 레이아웃은 커스텀 UI 제작에서 디자인 단계에 해당합니다. 위젯 에디터의 팔레트(Palette) 패널에서 UMG 위젯을 사용하여 룩을 만들고 UI의 기능을 계획할 수 있으며, UMG 위젯을 사용하는 순서에 따라 UI의 룩이 결정됩니다.
UMG 위젯의 역할에 대해 자세히 알아보려면 위젯 에디터 문서의 팔레트 섹션을 참고하세요.
UW_HCD01 위젯을 연 상태에서 계층구조(Hierarchy) 패널을 살펴보세요. 계층구조 패널에는 사용된 UMG 위젯과 뷰포트에 추가된 순서가 표시되어 있습니다.
UMG 위젯을 뷰포트에 추가한 후 계층구조 패널에서 이름을 변경할 수 있습니다.
모든 위젯 디자인에는 화면 역할을 하는 루트 위젯이 있어야 합니다. Root로 명명된 오버레이(Overlay) 위젯이 디자인의 루트에 위치하며 화면 역할을 합니다. 뷰포트는 화면 채우기(Fill Screen)로 설정되어 있어 루트로 지정된 영역을 디자인으로 채웁니다.
그리드 패널(Grid Panel)은 체력 및 보호막 바 디자인을 넣는 데 사용합니다. 그리드 패널은 자손 위젯을 행과 열로 정리하는 유연한 그리드입니다.
그리드 패널은 행과 열의 수, 행과 열이 차지하는 공간, 디자인에서 위젯이 점유하는 레이어를 제어하는 옵션과 스텝이동(Nudge)이라는 특수한 이동 옵션까지 자손 위젯에 추가해 주므로, 행과 열을 한층 커스터마이징할 수 있습니다.
스텝이동은 자손 위젯이 공간을 차지하지 않고도 X축과 Y축으로 이동할 수 있게 해 줍니다. 즉, 컨테이너 내부의 콘텐츠만 이동하며 컨테이너의 레이아웃 내 위치와 차지하는 공간은 그대로 유지됩니다.
ShieldBarContainer로 명명된 오버레이 위젯은 그리드 패널의 첫 번째 자손 위젯입니다. 이 위젯은 행 1, 열 0에 위치하며 행 스팬 1, 열 스팬 0에 걸쳐 표시됩니다. ShieldBarContainer 위젯은 Layer1에 표시됩니다.
즉, ShieldContainer의 모든 자손 위젯은 레이어 1에 있기 때문에 디자인의 앞쪽에 표시되지만, 행 1에 배치되어 있으므로 뒤에 있는 위젯들의 오른쪽에 위치하게 됩니다. 보호막 바는 2개의 행(행 0, 행 1)에 걸쳐 있으며, 이는 보호막 바의 길이를 결정합니다.
스텝이동 > Y 옵션을 사용하여 ShieldBarContainer 위젯을 기본 위치에서 -25.0 슬레이트 유닛만큼 아래로 이동하여 뒤의 체력 컨테이너를 살짝 가리도록 할 수 있습니다.
HealthBarContainer로 명명된 오버레이 위젯은 그리드 패널의 두 번째 자손 위젯입니다. 이 위젯은 행 1, 열 0에 위치하며 행 스팬 1, 열 스팬 0에 걸쳐 표시됩니다. HealthBarContainer 위젯은 Layer0에 표시됩니다.
즉, HealthBarContainer의 모든 자손 위젯은 레이어 0에 있기 때문에 디자인의 뒤쪽에 표시됩니다. 체력 바는 행 0에 위치하므로 보호막 바의 왼쪽에 표시됩니다. HealthBarContainer 역시 행 0과 행 1에 걸쳐 있으며, 이는 체력 바의 길이를 결정합니다.
아래에는 보호막 및 체력 바를 구성하는 세부 UMG 위젯과 전체 디자인에서의 용도가 나와 있습니다.
ShieldBarContainer
ShieldBarContainer에는 보호막 바 디자인을 구성하는 모든 UMG 위젯이 포함되어 있습니다. 보호막 바를 구성하는 요소는 다음과 같습니다.
| UMG 위젯 | 위젯 이름 | 용도 |
|---|---|---|
Image | ShieldBar_backing | 전체 보호막 바 디자인을 감싸는 컨테이너로 사용되며, MI_HCD01_Backplate로 명명된 머티리얼 인스턴스입니다. |
스택 박스 | ShieldContent | ShieldBar_Backing 머티리얼 및 ShieldBarContainer 내부에서 자손 위젯(보호막 바 아이콘 및 보호막 바 머티리얼)을 왼쪽에서 오른쪽으로 정리합니다. |
Image | ShieldIcon | 정면 레이어로 사용되는 보호막 아이콘 머티리얼입니다. |
오버레이 | ShieldBarContainer | ShieldContent 스택 박스의 두 번째 열에서 자손 위젯을 레이어링하는 데 사용됩니다. 이 위젯으로 보호막 바 머티리얼을 구성합니다. |
Image | ShieldBarStroke | 보호막 바를 감싸는 컨테이너로 사용되며, MI_HCD01_BarStroke로 명명된 머티리얼 인스턴스입니다. |
이미지 | 보호막 바 | M_ProgressBar_Basic 머티리얼은 다이내믹 투톤 머티리얼로, 머티리얼 함수를 사용하여 위젯이 HUD 컨트롤러 장치에서 수신하는 정보에 따라 보호막 바에서 왼쪽과 오른쪽으로 이동합니다. |
HealthBarContainer
HealthContainer에는 체력 바 디자인을 구성하는 모든 UMG 위젯이 포함되어 있습니다. 체력 바는 다음과 같은 위젯으로 구성되어 있습니다.
| UMG 위젯 | 위젯 이름 | 용도 |
|---|---|---|
스택 박스 | Health Content | HealthContainer 내부에서 자손 위젯(체력 바 아이콘 디자인 및 체력 바 머티리얼)을 왼쪽에서 오른쪽으로 정리합니다. 이 스택 박스는 ShieldContainer 오버레이 위젯 주변을 감싸며, 보호막 바를 전체 UI 디자인의 중앙에 배치합니다. 이는 HealthContent 스택 박스가 ShieldContent 스택 박스보다 X축 치수가 더 크기 때문입니다. |
Image | HPIcon | 정면 레이어로 사용되는 체력 아이콘 머티리얼입니다. |
오버레이 | HPBarContainer | HealthContent 스택 박스의 두 번째 열에서 자손 위젯을 레이어링하는 데 사용됩니다. 이 위젯으로 체력 바 머티리얼을 구성합니다. |
Image | HPBarStroke | 체력 바를 감싸는 컨테이너로 사용됩니다. MI_HCD01_BarStroke로 명명된 머티리얼 인스턴스입니다. |
Image | HPBar | 다이내믹 투톤 머티리얼로, 머티리얼 함수를 사용하여 위젯이 HUD 컨트롤러 장치에서 수신하는 정보에 따라 체력 바에서 왼쪽과 오른쪽으로 이동합니다. |
다음으로, 뷰모델을 선택하고 UI 머티리얼을 업데이트하여 게임 내 플레이어의 현재 체력 및 보호막 상태를 표시하는 방법을 알아봅니다.
뷰모델
뷰모델은 기능 목록을 통해 플레이어 정보를 제어하며, 기능은 UMG 위젯 및 장치 기능을 통해 플레이어 정보를 제어할 수 있게 합니다. 뷰모델을 통해 UMG 위젯을 포크리 장치에 특정 방식으로 바인딩할 수 있습니다.
뷰모델은 사용자 위젯을 통해 장치에서 실행되는 기능을 수신하여 기본 유저 인터페이스를 대체합니다. 그런 다음 뷰모델은 장치 기능을 사용하여 뷰 바인딩을 통해 UI를 업데이트합니다.
예를 들어, 보호막 및 체력 바 뷰모델은 HUD 컨트롤러의 보호막 및 체력 기능을 수신합니다. HUD 컨트롤러 기능이 플레이어 보호막 및 체력에 실행되면, 뷰모델은 이 기능을 수신하고 뷰 바인딩을 통해 정보를 전달하여 UI를 업데이트합니다.
다양한 뷰모델 중에서 선택할 수 있으며, 아래의 뷰모델 목록을 보면 장치별 뷰모델도 있다는 것을 알 수 있습니다. 여기에는 해당 장치 전용 기능이 포함되어 있습니다.
다음 뷰모델은 기능 목록의 장치 기능을 통해 UI에서 두 부분 이상을 제어합니다.
Device - HUD Controller Team/Squad Player Info List는 UW_HCD01 위젯에서 사용됩니다. 이 뷰모델은 한 명의 플레이어, 즉 본인이 플레이하는 것을 전제로 하므로, HUD 컨트롤러에서 본인의 정보를 수집하기 위해 Controlling Player Info를 사용합니다.
이 UI 샘플에서 Health 및 Shield는 HUD 컨트롤러의 기능을 수신하여 이 뷰모델을 통해 제어됩니다.
다음으로, 뷰 바인딩에서 체력 및 보호막 UI 머티리얼을 HUD 컨트롤러 기능에 바인딩하는 방법을 알아봅니다.
뷰 바인딩
뷰 바인딩은 UMG 위젯 기능을 바인딩된 장치의 기능에 매핑하고 HUD의 UI를 업데이트합니다. UW_HCD01 위젯에서 ShieldBar 및 HPBar 머티리얼은 HUD 컨트롤러의 보호막(Shield) 및 체력(Health) 기능에 바인딩됩니다. 이러한 기능은 게임 내에서 보호막과 체력을 모니터링하고, 보유한 보호막과 체력의 양에 따라 바 머티리얼을 업데이트합니다.
보호막 및 체력 UI가 작동하도록 하려면, 먼저 UMG 위젯을 선택하고 위젯 프로퍼티를 특정 장치 기능에 바인딩합니다. 바인딩은 뷰 바인딩(View Bindings) 패널에서 생성해야 합니다.
UMG 위젯 추가하기
계층구조(Hierarchy) 패널에서 이미지 위젯(ShieldBar 및 HPBar)을 먼저 선택한 다음, 뷰 바인딩 패널에서 선택합니다. +위젯 추가(+Add Widget) 버튼을 클릭하면 뷰모델 기능 목록을 열 수 있으며, 기능을 위젯에 추가하면 위젯의 프로퍼티 정보를 제어할 수 있습니다. 이 경우에는 브러시 기능이 ShieldBar 및 HPBar 머티리얼을 제어합니다.
장치 바인딩 추가하기
바인딩할 위젯을 결정한 후에는 장치 바인딩 타입을 선택해야 합니다. 위젯 필드 옆에는 빈 필드가 있으며, 빈 필드를 클릭하면 사용할 수 있는 장치 바인딩 목록이 열립니다. 위젯 및 장치 바인딩 필드 아래에 장치 바인딩 옵션이 자동으로 표시되며, 이 옵션이 장치에서 수신하는 정보에 따라 위젯을 업데이트할 방식을 결정합니다.
UW_HCD01 위젯은 Set Scalar Parameter를 사용하여 브러시(Brush) 프로퍼티를 업데이트합니다.
뷰 바인딩
| ShieldBar 브러시 프로퍼티 | HealthBar 프로퍼티 체력 바 |
|---|---|
 |  |
디테일 패널
| ShieldBar 머티리얼 | HealthBar 머티리얼 |
|---|---|
 |  |
UW_HCD01 위젯에서, 이미지 위젯(ShieldBar 및 HPBar)의 브러시 프로퍼티에 다이내믹 머티리얼이 있습니다(디테일 패널에서 찾을 수 있음).
장치 파라미터 설정하기
머티리얼에 플레이어 보호막 및 체력의 현재 상태가 반영되도록 하기 위해, 장치 바인딩에는 UMG 위젯에 장치 정보를 전송하려면 설정해야 하는 파라미터가 있습니다.
이 샘플에서는 이미지 위젯과 그 브러시 기능을 HUD 컨트롤러의 브러시 파라미터에 추가합니다. 이 바인딩이 어떤 이미지 위젯의 브러시 프로퍼티를 업데이트할지 결정합니다.
그런 다음 파라미터 이름(Parameter Name)에서는 브러시 머티리얼에서 업데이트할 파라미터를 지정합니다. 여기에서는 필드에 Progress가 입력되어 있습니다.
마지막으로, 바인딩의 값이 뷰모델에 의해 결정됩니다. 바인딩의 값 필드에서 HUDPlayerInfoListViewmodel > Controlling Player Info > Shield 및 Health 기능을 설정합니다.
이제 HUD 컨트롤러 기능이 진행률(Progress) 프로퍼티를 확인하고 체력 및 보호막 값을 전달하여 스칼라 파라미터 변환 함수를 통해 이미지 위젯의 브러시 프로퍼티를 업데이트합니다.
진행률은 ProgressStart와 ProgressEnd 값 사이에서 앞뒤로 바를 이동하는 값이므로, 진행률 값은 0과 1 사이로 제한됩니다.
| ShieldBar 머티리얼 파라미터 그룹 | HealthBar 머티리얼 파라미터 그룹 |
|---|---|
 |  |
체력과 보호막이 꽉 찬 상태로 게임을 시작하는 경우, 피해를 받으면 바가 진행률 및 진행률 정규화(Normalize Progress) 프로퍼티에 따라 왼쪽으로 이동합니다. 이러한 프로퍼티는 플레이어가 피해를 받을 때 머티리얼이 얼마나 왼쪽으로 이동할지 결정합니다.
체력과 보호막이 복구되면 머티리얼은 바의 오른쪽으로 이동하며, 진행률 및 진행률 정규화 프로퍼티를 사용하여 피해받는 경우와 같은 비율로 움직입니다.
다른 사용자 위젯을 열고, 위젯을 읽을 수 있는지, 그리고 UMG 위젯이 계층구조에 추가된 순서, 사용자 위젯에 선택된 뷰모델 타입, UMG 위젯 파라미터와 장치 기능이 뷰 바인딩에 바인딩된 방식을 이해할 수 있는지 확인해 보세요.
장착한 아이템 뷰모델
이 뷰모델을 HUD 컨트롤러 장치와 함께 사용하면 장착한 아이템 정보 위젯 오버라이드(Equipped Item Info Widget Override) 위젯 슬롯을 사용하여 장착한 아이템의 통계를 추적할 수 있습니다. 모든 UI 샘플은 WID_Assault_AutoHigh_Athena_C_Ore_T03 돌격소총을 장착한 아이템으로 사용합니다.
Devices > HUD Controller > Widgets 폴더를 열고 UW_HCD03_SelectedItem 위젯을 더블클릭합니다. 이 뷰모델을 통해 다양한 무기 정보와 통계를 다음 UI에서 추적할 수 있습니다.
아이템 아이콘
아이템 이름
탄약 아이콘
탄약 수
여분의 탄약
탄창 유형 무기인지 여부
