베이스 머티리얼에서 UMG 위젯에 사용할 머티리얼 인스턴스를 만들어 베이스 M_UI_Shape_Rectangle 머티리얼로 커스텀 UI를 제작합니다. 셰이프 머티리얼은 또한 고유 UI 디자인을 만드는 데 사용할 수 있는 평면 셰이프를 만드는 방법을 제공합니다. M_UI_Shape_Rectangle 머티리얼은 콘텐츠 브라우저(Content Browser)의 Fortnite > UI > Materials 폴더에 있습니다.
머티리얼 인스턴스는 페인트 같은 위젯을 채우는 데 사용할 수 있습니다. 머티리얼은 임포트한 텍스처보다 적은 메모리를 사용하기 때문에 위젯에 텍스처를 추가하는 것보다 바람직하며, UEFN 및 UE에서 UI를 디자인하기 위한 더 나은 방법이기도 합니다. 특히 평면 UI 디자인의 경우 손쉽게 렌더링할 수 있어 더욱 그러하며, 3D 및 다이내믹 머티리얼을 사용하여 더 멋진 UI를 만들 수도 있습니다.
포트나이트 언리얼 에디터(UEFN)의 일부 장치에서 UMG 위젯은 특수 UI 세팅에서 참조됩니다. UMG 위젯은 HUD(heads-up display)에서 기본 포트나이트 UI를 대체합니다.
머티리얼을 사용하여 UI를 제작하는 방법에 대한 추가적인 튜토리얼은 다음을 참조하세요.
커스텀 UI 셰이프 만들기
커스텀 UI 셰이프를 만들기 전에 원하는 UI의 룩을 결정한 다음 M_UI_Shape_Rectangle 머티리얼을 사용하여 UI 위젯의 룩을 디자인합니다. 커스터마이징된 사각형처럼 단순해도 되고, 꽃 모양처럼 보다 복잡해도 됩니다. 이후 위젯을 생성할 때 함께 배치할 수 있는 여러 셰이프가 디자인에 필요할 수도 있습니다.
셰이프를 생성하려면 먼저 원본 M_UI_Shape_Rectangle 머티리얼의 머티리얼 인스턴스를 생성해야 합니다.
머티리얼 섬네일을 우클릭하고 머티리얼 인스턴스 생성(Create Material Instance)을 선택합니다.
다른 이름으로 에셋 저장(Save Asset As) 창에서 프로젝트의 콘텐츠 폴더에 저장할 머티리얼 인스턴스를 명명합니다. 에셋은 함께 그룹화할 수 있는 방식으로 명명합니다. 예를 들어, UEFN의 스톡 머티리얼 인스턴스는 'M_UGC_'로 시작하여 '_Inst'로 끝나므로 머티리얼 인스턴스 이름은 M_UGC_Circus_Inst와 같아야 합니다.
새 머티리얼 인스턴스를 더블클릭하여 머티리얼 인스턴스 에디터를 엽니다. 에셋을 우클릭하고 편집(Edit)을 선택하여 에디터에 액세스할 수도 있습니다.
머티리얼 인스턴스 에디터의 디테일(Details) 패널에는 머티리얼 인스턴스를 완전하게 커스터마이징하는 데 필요한 여러 툴이 있습니다. 이러한 툴은 다음과 같은 섹션에서 찾을 수 있습니다.
[1] Fill
[2] Stroke
[3] Colors
[4] State(Hovered/Focused/Pressed/Disabled)
Fill
Fill 섹션의 옵션은 머티리얼의 셰이프에 영향을 미칩니다. Fill Transparency 등 다수의 옵션에서 값을 0.0으로 설정하면 해당 세팅이 비활성화되는 반면, 1.0으로 설정하면 세팅이 활성화됩니다. 셰이프가 뷰포트에 표시되도록 Fill Transparency 옵션을 항상 활성화해야 합니다.
위 이미지에서는 셰이프를 생성하는 데 사용한 조정된 세팅을 확인할 수 있습니다.
Stroke
Stroke 섹션의 옵션을 조정하여 커스터마이징 가능한 테두리를 만들 수 있습니다. 프리셋 파란색 테두리 컬러를 통해 Stroke의 옵션 값을 조정하면서 그에 따른 디자인을 확인할 수 있습니다.
위 이미지는 파란색 테두리를 표시하는 Stroke Transparency 옵션이 1.0으로 설정된 모습을 보여줍니다.
컬러
Colors 탭의 옵션을 수정하여 생성하는 셰이프를 한층 커스터마이징할 수 있습니다. 이러한 옵션은 해당하는 부울 박스를 클릭하여 옵션을 '켜기(On)'로 설정했을 때만 조정할 수 있습니다.
셰이프와 테두리 모두에 그레이디언트도 생성 가능합니다. 뷰포트에서 수정에 따라 달라지는 그레이디언트를 미리 볼 수 있습니다.
위 이미지는 그레이디언트에 컬러가 적용되어 있습니다. 이 옵션은 Gradient on / off 값이 0.0보다 크도록 조정하면 활성화됩니다.
상태입니다.
이 옵션은 Colors 섹션에 위치해 있으며, 다양한 상태를 통해 셰이프의 컬러를 설정하도록 수정할 수 있습니다. UI 셰이프 호버, 포커스, 누르기, 비활성화 등 다양한 플레이어 액션에 대한 커스텀 컬러를 설정할 수 있습니다.
피지컬 머티리얼(Phys Material) 옵션에 대한 머티리얼을 설정하지 않는 한, 셰이프는 생성하는 위젯에 임포트될 때 투명한 테두리를 갖게 됩니다. 이러한 현상을 방지하려면 피지컬 머티리얼이 실제 머티리얼로 렌더링되도록 Wood로 설정하세요.
UI 셰이프 커스터마이징을 마친 후에는 우측 상단의 플로피 디스크 아이콘을 클릭하여 저장합니다. 커스터마이징된 머티리얼 인스턴스는 프로젝트의 콘텐츠 폴더에 저장됩니다.
이 튜토리얼의 예시에서는 버튼 배경과 더불어, 서로 결합되어 해바라기를 구성하는 여러 셰이프를 사용합니다.
UI 위젯 생성하기
이제 플레이어가 상호작용할 위젯을 생성해야 합니다. 위젯 생성 및 계층구조 탭 정리에 대한 자세한 내용은 UI 위젯 에디터 문서를 참고하세요.
이 시점에서 디자인의 모든 요소에 머티리얼 인스턴스가 생성되어 있어야 합니다.
이 튜토리얼의 예시는 꽃잎 및 화반 인스턴스 여러 개로 구성되어 있습니다. 버튼은 베이스 및 버튼 아이콘으로 사용되는 2개의 이미지로 구성되어 있습니다.
이러한 머티리얼 인스턴스를 위젯 블루프린트에 배치하여 커스텀 디자인을 제작합니다. 위젯 블루프린트는 팝업 대화창 장치로 임포트되어 프리스톡 UI를 오버라이드합니다.
커스텀 UI를 구성하는 머티리얼 인스턴스 및 버튼 위젯이 모두 있는 새 위젯 블루프린트를 생성합니다. 이는 장치의 세팅에 추가되는 위젯 블루프린트가 됩니다.
이 위젯에서 모든 커스텀 머티리얼 인스턴스를 결합하여 디자인을 만듭니다. UI 위젯을 만들면서 위젯 이름 아래의 일반(Common), 일반 UI(Common UI), 패널(Panel), UI키트(UIKIT), 사용자 생성(User Created)에서 에셋을 드래그합니다.
위 사진에서 에셋은 계층구조(Hierarchy) 탭에 정리되고 뷰포트에 재배치되어 커스텀 UI용 꽃 셰이프를 만듭니다.
디자인이 만족스럽다면 블루프린트를 저장하고 콘텐츠 브라우저로 되돌아갑니다. 이제 이 블루프린트는 커스텀 UI를 표시할 팝업 대화창 장치에 임포트됩니다.
장치에 위젯 추가하기
디자인이 준비되었다면 팝업 대화창 장치를 배치하여 위젯을 표시합니다.
디테일 > 모달 위젯(Modal Widget) > 템플릿 오버라이드 클래스(Template Override Class)로 위젯을 드래그합니다.
세션 시작을 통해 결과물을 확인하고 테스트할 수 있습니다.