변환 함수: 뷰모델에서 텍스처 표시하기

Make Image Brush From Texture 및 Make Image Brush From Material 변환 함수를 사용하면 사용자 위젯에서 뷰모델의 텍스처나 머티리얼을 이미지 위젯에 바로 삽입할 수 있습니다.

Set Material Parameter 변환 함수와 달리, 이러한 두 변환 함수는 텍스처 파라미터가 있는 머티리얼이 필요하지 않습니다. UI에 텍스처를 삽입해 줍니다.

이 예시에서는 Make Image Brush from Texture를 사용해 추적기 뷰모델의 아이콘 프로퍼티를 이미지 위젯으로 전달하여 To Text 튜토리얼의 추적기 위젯을 확장했습니다.

위젯 구성

이 추적기 위젯은 IntToText/Double 튜토리얼과 동일한 사용자 위젯을 사용하여 생성했습니다.

이 튜토리얼에는 추적기 장치에서 아이콘을 전달하는 이미지 위젯이 하나 더 있습니다. 기존의 Title 및 CurrentValue 필드는 가로 정렬로 스택 박스에 둘러싸여 있기 때문에 아이콘이 위젯 텍스트와 함께 왼쪽에서 오른쪽으로 표시됩니다.

1. 계층구조(Hierarchy)에 다음 위젯을 아래 목록과 동일한 순서로 추가합니다.

   1. 오버레이(Overlay)

   2. 이미지(이미지 위젯을 오버레이에 중첩하고 이름을 Background로 수정함)

   3. 스택 박스(스택 박스는 오버레이에 중첩함)

   4. 2 X 이미지(스택 박스 아래에 중첩하고 위젯 이름을 각각 Icon 및 Spacer로 변경함)

   5. 스택 박스(두 번째 스택 박스는 첫 번째 스택 박스 아래에 중첩함)

   

2. 아이콘 이미지 위젯의 가로 정렬(Horizontal Alignment) 및 세로 정렬(Vertical Alignment)을 가운데(Center)로 설정합니다. 이렇게 하면 아이콘이 항상 중앙에 위치합니다.

   

스페이서 이미지 위젯을 하나 더 사용해 아이콘과 텍스트 사이에 공간을 만듭니다.

변환 함수 구성

뷰 바인딩(View Bindings) 창을 열어 추적기 장치의 아이콘을 UI의 아이콘 이미지 위젯에 바인딩합니다.

1. 계층구조에서 아이콘 이미지 위젯을 선택한 다음 뷰 바인딩 창에서 +위젯 추가(+Add Widget)를 클릭합니다.

   

2. 좌측 필드에서 아이콘(Icon) > 브러시(Brush) > 선택(Select)을 선택합니다. 이렇게 하면 브러시 필드의 값이 아이콘 이미지로 전달됩니다.

   

   이 브러시 필드는 아이콘 이미지 위젯의 디테일(Details) 패널에서도 볼 수 있습니다. 디테일 패널의 필드 대부분은 뷰 바인딩을 통해 액세스할 수 있습니다.

   

3. 좌측 필드에서 변환 함수(Conversion Functions) > Make Image Brush from Texture > 선택을 클릭합니다.

   

바인딩 아래에 여러 필드가 나타납니다. 각 필드의 역할에 대한 자세한 내용은 Make Image Brush from Texture/Material 프로퍼티를 참조하세요.

1. 이미지(Image) 옆에서 체인 아이콘을 클릭하고, MVVM_UEFN_Tracker > 아이콘 > 선택을 선택합니다.

   

2. 추적기 위젯 내의 이미지 크기(Image Size)를 원하는 대로 설정합니다.

   뷰 바인딩은 원본 이미지 위젯의 X 및 Y 크기를 상속받지 않습니다. 이 예시에서는 아이콘을 잘 볼 수 있도록 이미지 크기를 72x72px로 설정했습니다.

   

최종 결과

추적기 장치를 프로젝트로 드래그한 다음 옵션을 설정합니다.

1. 디테일 패널의 퀘스트 아이콘(Quest Icon) 필드에서 소형(Small) 및 대형(Large) 아이콘을 설정합니다. 이 예시에서는 소형 및 대형 아이콘에 T_UI_IconLibrary_Ham 아이콘을 사용했습니다.

   

아이콘 이미지 위젯이 추적기 장치에 설정된 햄 아이콘으로 채워집니다.

Make Image Brush from Texture/Material 프로퍼티

두 변환 함수는 별도로 지정하지 않는 한 아래와 같이 동일한 필드를 가지고 있습니다.

• 이미지(Make Image from Texture만 해당)

  • 이미지 위젯의 브러시로 전달할 텍스처 변수입니다.

• 머티리얼(Material)(Make Image from Material만 해당)

  • 이미지 위젯의 브러시로 전달할 머티리얼 변수입니다.

• 크기(Size)

  • 그려진 이미지 또는 머티리얼의 크기입니다.

• 색조(Tint Color)

  • 이미지나 머티리얼에 적용할 색조입니다.

• 타일 유형(Tile Type)(Make Image from Texture만 해당)

  • 이미지 위젯의 브러시로 전달된 이미지를 가로, 세로, 또는 가로 세로 모두 중 어떻게 타일링할 것인지 결정합니다. 원본 아이콘 크기가 변환 함수에 지정된 크기보다 작으면 이미지가 타일링됩니다.

  • 이 예시에서는 아이콘 크기가 64x64px이고, 설정된 크기는 72x72px 이므로 타일링이 이뤄집니다.

  

커스텀 HUD 만들기