변환 함수: UMG에 머티리얼 파라미터 설정하기

게임플레이 이벤트와 데이터에 따라 업데이트되는 머티리얼을 사용해 다이내믹 UI를 생성해 보겠습니다. 다이내믹 UI를 만들려면 UI 머티리얼, 뷰 바인딩, 머티리얼 파라미터 설정 변환 함수 중 3개(Set Texture, Set Scalar 및 Set Vector Parameter)가 필요합니다.

포트나이트 언리얼 에디터(UEFN)에서는 몇 가지 파라미터가 포함된 기본 머티리얼을 제공합니다. 적 처치 진행률에 따라 다이내믹하게 업데이트되는 머티리얼의 예시가 필요하다면 추적기 장치를 사용해 프로그레스 바 스타일 위젯으로 처치 상황을 추적해 보세요.

머티리얼 인스턴스 생성

머티리얼 인스턴스를 생성하는 데 사용되는 모든 에셋은 UEFN에 네이티브로 포함되어 있습니다. 이 예시에서 머티리얼을 만드는 방법은 머티리얼 튜토리얼 섹션의 미터 머티리얼을 참고하세요.

1. M_Tracker의 머티리얼 인스턴스를 생성하고, 인스턴스 이름을 MI_TrackerExample로 설정합니다.

   

2. 새로운 머티리얼 인스턴스에서 IconScaleX 및 IconScaleY를 원하는 값으로 변경합니다. 이 예시의 머티리얼은 각각 0.7로 설정했습니다.

   진행률에 따라 위젯을 채우는 처치 ProgressColor도 커스터마이징할 수 있습니다. TrackerProgress, Icon, IconColor는 체크하지 않고 그대로 둡니다. 이 세팅은 나중에 추적기 장치와 함께 사용합니다.

   

아이콘은 텍스처(Textures) > 아이콘(Icons)의 Fortnite 폴더에서 찾을 수 있습니다.

추적기 위젯 구성하기

이제 추적기 장치에서 참조하여 커스텀 처치 UI에서 플레이어 처치 상황을 추적할 수 있는 커스텀 추적기 위젯을 UMG에 생성해 보겠습니다.

1. 콘텐츠 브라우저(Content Browser)를 우클릭하고 사용자 인터페이스(User Interface) > 위젯 블루프린트(Widget Blueprint) > 사용자 위젯(User Widget)을 선택합니다.

   

2. 아래의 예시처럼 추적기 머티리얼과 추적기 제목을 보여주는 간단한 추적기 위젯을 만듭니다.

   

3. 위젯 그래프로 오버레이(Overlay)를 드래그합니다. 그러면 위젯을 구성하는 모든 항목이 레이어링됩니다. 위젯이 화면의 어느 위치에 나타나는지 결정할 수 있게 됩니다.

   

4. 추적기 머티리얼 및 추적기 제목을 왼쪽에서 오른쪽으로 정렬할 수 있도록 오버레이에 스택 박스를 중첩합니다.

   

5. 추적기 머티리얼을 생성해 단순한 어두운 백그라운드에 스택 박스를 오버레이할 수 있도록 스택 박스에 오버레이를 중첩합니다.

   

6. 오버레이 내부에서 이미지 위젯 2개를 중첩합니다. F2를 눌러 이미지 이름을 TrackerBackground 및 TrackerMaterial로 변경합니다.

   

7. TrackMaterial을 선택하여 디테일(Details) 패널에서 옵션을 엽니다. 디테일 패널에서 브러시(Brush) > 이미지(Image)를 선택한 다음 아까 생성한 MI_TrackerExample 머티리얼을 찾습니다.

   

8. 아래 이미지 크기(Image Size)를 X=96.0, Y=96.0으로 설정합니다. 게임 내에서 보일 정도로 충분히 커야 합니다.

   

   이제 추적기 머티리얼을 구성했으니, 추적기 머티리얼을 쉽게 알아볼 수 있도록 머티리얼 백그라운드를 만들어야 합니다.

9. TrackerBacking을 선택하고, 계층구조의 디테일 패널에서 브러시 > 그리기 방식(Draw As) > 둥근 박스(Rounded Box)를 선택합니다.

   

10. 더 쉽게 알아볼 수 있도록 색조(Tint) 옵션을 무채색으로 설정합니다. 이 예시에서는 Hex sRGB 필드에서 색조를 3A3A3AFF로 설정했습니다.

    

11. 가로 정렬(Horizontal Alignment) 및 세로 정렬(Vertical Alignment) 옵션을 채우기(Fill)로 설정합니다. 이렇게 하면 TrackerBacking이 TrackerMaterial을 가진 컨테이너를 채우게 됩니다.

    

이제 어떤 게임 내 씬에서도 쉽게 알아볼 수 있는 TrackerMaterial의 백그라운드가 완성되었습니다!

추적기 텍스트 구성하기

추적기 위젯에서 추적기 머티리얼을 참조했으면, 이제 플레이어에게 UI에서 무엇을 추적하고 있는지 알려주는 텍스트를 구성해야 합니다.

1. 오버레이를 포함한 스택 박스에 텍스트 블록을 중첩합니다. 텍스트 블록의 이름을 TrackerTitle로 변경합니다.

   

2. 계층구조에서 TrackerTitle을 선택한 다음, 디테일 패널에서 세로 정렬(Vertical Alignment)을 가운데 세로 정렬(Center Align Vertically)로 설정합니다. 이렇게 하면 항상 텍스트가 TrackerMaterial의 중앙에 정렬됩니다.

   

3. 폰트 크기를 줄이거나, 윤곽선을 추가하거나, 타입페이스를 바꿔 테마에 맞게 스타일을 바꿔 보세요.

   이 예시에서는 다음과 같이 폰트 스타일을 변경했습니다. 폰트 크기(Font Size) = 24 타입페이스(Typeface) = 굵게(Bold) 윤곽선(Outline) = 어두운 빨간색

   폰트와 관련된 외형 카테고리의 모든 세팅을 커스터마이징할 수 있습니다.

   

최종 디자인을 완료하고 나면 TrackerMaterial과 TrackerTitle을 구성하게 됩니다.

아래와 같이 TrackerMaterial을 포함한 오버레이의 오른쪽에 패딩을 추가하여 두 항목 사이에 공간을 확보합니다.

1. 오버레이를 선택합니다.

2. 디테일 패널에서 패딩(Padding)을 펼칩니다.

3. 오른쪽 패딩(Right Padding)을 16px로 변경합니다.

이미지와 텍스트 사이에 공간이 생겼습니다.

여러 오브젝트 사이의 공간을 쉽게 수정하고 싶다면 해당 오브젝트가 포함된 스택 박스에 이미지 위젯을 삽입한 다음, 이미지 크기 X(Image Size X)를 원하는 공간의 크기로 변경하고 그리기 방식(Draw As)을 없음(None)으로 설정합니다. 이렇게 하면 이미지가 보이지 않지만 여전히 스택 박스에서 공간을 차지하게 되며,

각 위젯의 패딩을 수정하지 않고도 오브젝트 사이의 간격을 쉽게 조절할 수 있습니다.

Set Material Parameters 구성하기

이제 추적기 장치의 값을 추적기 위젯의 머티리얼 파라미터에 바인딩해야 합니다.

뷰모델 추가하기

1. 메인 메뉴에서 창(Window) > 뷰모델(Viewmodel)을 선택하여 추적기(Tracker) 뷰모델을 위젯에 추가합니다.

   

2. 뷰모델 창에서 +뷰모델(+Viewmodel)을 선택합니다.

   

3. 팝업 창에서 장치 - 추적기 뷰모델(Device - Tracker View Model)을 선택합니다.

4. 메뉴 바에서 창 > 뷰 바인딩(View Bindings)을 선택하여 뷰 바인딩 패널을 엽니다.

   

이제 추적기의 데이터를 바인딩해 위젯을 조작할 준비가 되었습니다.

스칼라 파라미터 설정하기

스칼라 파라미터는 Int 또는 Float 값을 수신할 수 있습니다. 예를 들어 추적기의 처치 수에 따라서 프로그레스 바가 TrackerMaterial로 채워집니다.

머티리얼은 추적기 장치에서 가져온 처치 수를 변환하여 TrackerMaterial을 채우도록 구성되어 있습니다. 이제 이 데이터를 MI_TrackerExample에 있는 프로그레스 바 머티리얼 파라미터에 바인딩하기만 하면 됩니다.

추적기의 빠른 처치

거의 가득 찬 처치 추적기

1. TrackerMaterial 위젯을 선택한 다음 뷰 바인딩 창에서 +위젯 추가(+Add Widget)를 클릭합니다.

   

2. 좌측 필드에서 TrackerMaterial > 브러시를 선택합니다.

   

3. 오른쪽 필드(TrackerMaterial의 브러시에 바인딩하려는 데이터가 포함된 필드)에서 변환 함수 > Set Scalar Parameter를 선택합니다.

   

   이렇게 하면 브러시 설정에서 Set Scalar Parameter라는 함수가 실행됩니다. 브러시는 현재 MI_TrackerExample을 사용하고 있으므로, 지정하는 스칼라 파라미터를 찾아서 값을 전달하게 됩니다.

   

4. 파라미터 이름(Parameter Name) 필드에 TrackerProgress를 입력합니다. 이렇게 하면 머티리얼이 추적기의 진행률을 바탕으로 채워집니다.

   

   잘못 입력하면 머티리얼에서 올바른 파라미터를 찾을 수 없기 때문에 올바르게 입력해야 합니다. 파라미터 이름을 잊어버렸다면 머티리얼 인스턴스를 열고 오른쪽에서 파라미터를 찾아 보세요.

5. 값(Value) 옆에서 링크 아이콘을 선택하고 드롭다운 메뉴에서 MVVM_UEFN_Tracker > 값을 선택합니다. 이렇게 하면 추적기의 현재 진행률이 바인딩됩니다.

   

이것으로 현재 추적기 진행률이 머티리얼로 바로 전송되도록 구성을 완료했습니다. 추적기에 할당된 플레이어가 적을 처치하면 추적기 머티리얼이 천천히 채워집니다.

Set Vector Parameter

벡터 파라미터는 Vector4 값을 사용합니다. 일반적으로 벡터는 RGBA(4개 벡터) 컬러에 사용됩니다. 여기서는 Vector4를 사용해 장치의 설정에 따라서 아이콘 컬러를 변경해 보겠습니다.

벡터에 대한 자세한 내용은 언리얼 엔진 문서의 벡터 머티리얼 표현식을 참고하세요.

1. 계층구조에서 TrackerMaterial을 선택한 뒤 뷰 바인딩 창을 열고 +위젯 추가를 클릭합니다.

   

2. 왼쪽의 빈 필드에서 TrackerMaterial > 브러시 프로퍼티를 선택합니다.

   

3. 오른쪽의 빈 필드에서 변환 함수 > Set Vector Parameter를 선택합니다.

   

   위에서 설명한 것처럼 이 바인딩은 TrackerMaterial의 브러시(이 경우 MI_TrackerExample)를 가져와, 해당 머티리얼 인스턴스에 지정한 벡터 파라미터를 설정합니다. 추적기 장치가 설정한 옵션을 그대로 따를 수 있도록 아이콘 컬러를 설정할 수 있습니다.

4. Parameter Name 필드에 IconColor를 입력합니다.

   

5. 값(Value) 옆에서 링크 아이콘을 선택하고 MVVM_UEFN_Tracker > 색상(Color)을 선택합니다. 이렇게 하면 추적기 뷰모델의 아이콘 컬러 프로퍼티에 값이 설정됩니다.

   

추적기 장치에 설정된 아이콘 컬러가 머티리얼에 그대로 전달됩니다. 주황색 아이콘이 필요하면 장치에서 설정하기만 하면 됩니다! 이 예시에서 사용하는 머티리얼은 이미 그렇게 구성되어 있습니다.

Set Texture Parameter

텍스처 파라미터는 Texture2D 값을 사용합니다. 텍스처는 보통 이미지나 아이콘에 사용되므로, 여기서는 텍스처를 사용해 장치에 구성된 항목에 따라 아이콘을 변경해 보겠습니다.

텍스처에 대한 자세한 내용은 언리얼 엔진 문서의 텍스처를 참고하세요.

1. 계층구조에서 TrackerMaterial을 선택한 뒤 뷰 바인딩 창을 열고 +위젯 추가를 클릭합니다.

2. 왼쪽의 빈 필드에서 MVVM_UEFN_Tracker > 브러시를 선택합니다.

3. 오른쪽의 빈 필드에서 변환 함수 > Set Texture Parameter를 선택합니다.

   

4. Parameter Name 필드에 Icon을 입력합니다.

   파라미터 이름을 입력할 때에는 오타가 나지 않도록 하세요! 파라미터 이름을 잊어버렸다면 MI_TrackerExample에서 설정 가능한 파라미터 목록을 확인해 보세요.

   

5. 값 필드 옆에서 링크 아이콘을 선택하고 드롭다운 메뉴에서 MVVM_UEFN_Tracker > 아이콘을 선택합니다. 이렇게 하면 추적기 뷰모델에서 가져온 아이콘 프로퍼티에 값이 연결됩니다.

   

이것으로 텍스처 파라미터가 설정되었습니다. 이제 추적기 장치에 설정된 아이콘이 위젯으로 전달됩니다!

추적기 텍스트를 추적기 이름에 바인딩하기

이제 만든 추적기 제목을 추적기 장치의 동일한 세팅에 바인딩해야 합니다.

1. 계층구조에서 TrackerTitle을 선택한 뒤 뷰 바인딩 창을 열고 +위젯 추가를 클릭합니다.

   

2. 왼쪽의 빈 필드에서 드롭다운 메뉴의 TrackerTitle > 텍스트(Text)를 선택합니다.

   

3. 오른쪽의 빈 필드에서 드롭다운 메뉴의 MVVM_UEFN_Tracker > 이름(Name)을 선택합니다.

   

이 바인딩은 추적기 제목을 텍스트 블록으로 전달합니다.

추적기 장치 구성하기

이제 생성할 위젯을 추적기 장치에서 참조해야 합니다. 그래야 HUD에 처치 UI가 표시됩니다.

1. 프로젝트에 추적기 장치를 추가합니다.

2. 추적기 제목(Tracker Title)을 설정합니다. 이 이름이 위젯의 TrackerTitle 텍스트에 표시됩니다.

   

3. 위젯을 HUD 위젯(HUD Widget) 필드에 추가합니다.

   

4. 퀘스트 아이콘(Quest Icon) 필드를 추적기에 표시하고 싶은 아이콘으로 변경합니다. 그러면 MI_TrackerExample의 기본 외계인 아이콘을 오버라이드할 수 있습니다.

   

5. 아이콘 색상(Icon Color)에서 색상을 선택합니다. 위에서 설정한 아이콘이 선택한 컬러로 바뀝니다.

   

6. 다른 세팅도 마저 구성하여 플레이어에게 추적기를 추가합니다.

최종 결과

잘 되었습니다! 이제 커스텀 추적기 위젯이 왼쪽 상단에 표시됩니다. 좀비나 다른 플레이어를 처치하면 위젯이 천천히 차오릅니다! 지금까지 Set Material Parameters를 사용해 게임플레이 데이터를 커스텀 위젯에 연결해 보았습니다.