이 섹션에서는 팝업 대화창 장치에 표시할 커스텀 메뉴를 생성하는 방법을 알아봅니다.
커스텀 메뉴를 생성하려면 다음 단계를 따릅니다.
모달 대화창 베리언트인 위젯 블루프린트를 생성하여 WBP_Dialog_One_Button_Intro로 명명합니다.
우선 Size Box 위젯을 추가한 다음, 그 자손으로 Overlay 위젯을 추가합니다. Size Box에는 Overlay 위젯을 배치할 패널이 제공됩니다.
Overlay 위젯의 디테일 패널에서 세팅을 다음과 같이 적용합니다.
옵션 값 설명 패딩(Padding)
0.0, 0.0, 0.0, 40.0
위젯의 하단에 40픽셀 패딩을 추가합니다.
가로 정렬(Horizontal Alignment)
가운데 가로 정렬
위젯을 화면 중앙에 정렬합니다.
세로 정렬(Vertical Alignment)
하단 세로 정렬
위젯을 화면 하단에 정렬합니다.
Image 위젯의 디테일 패널에서 다음 세팅을 적용합니다. 옵션 값 설명 가로 정렬(Horizontal Alignment) 가로로 채우기 위젯이 최대한 많은 공간을 차지합니다. 세로 정렬(Vertical Alignment) 세로로 채우기(Fill Vertically) 위젯이 최대한 많은 공간을 차지합니다. 색조(Tint) AE4200FF Hex sRGB 배경 색상입니다. 그리기 방식(Draw As) Rounded Box 모서리가 둥근 이미지를 렌더링합니다. 비저빌리티(Visibility) Not Hit-Testable (Self Only) 버튼 자체만 UI에서 선택할 수 있어야 합니다.
UEFN Button Quiet 위젯의 디테일 패널에서 세팅을 다음과 같이 적용합니다. 옵션 값 설명 최소 너비(Min Width) 300 버튼의 너비를 설정합니다. 최소 높이(Min Height) 48 버튼의 높이를 설정합니다. 가로 정렬(Horizontal Alignment) 가로로 채우기 위젯이 최대한 많은 공간을 차지합니다. 세로 정렬(Vertical Alignment) 세로로 채우기(Fill Vertically) 위젯이 최대한 많은 공간을 차지합니다. 비저빌리티(Visibility) 표시 버튼을 UI에서 선택할 수 있어야 합니다. 텍스트(Text) 없음 텍스트 블록을 사용하여 커스텀 텍스트를 만들고 있으므로 텍스트 세팅을 비워 둡니다.
UEFN Text Block 위젯의 디테일 패널에서 세팅을 다음과 같이 적용합니다. 옵션 값 설명 가로 정렬(Horizontal Alignment) 가운데 가로 정렬 위젯을 컨테이너 중앙에 정렬합니다. 세로 정렬(Vertical Alignment) 가운데 세로 정렬 위젯을 컨테이너 중앙에 정렬합니다. 텍스트(Text) 버튼 1 텍스트(Button 1 Text) 임시 텍스트입니다. 뷰 바인딩이 이 텍스트를 팝업 대화창 장치의 세팅에 있는 텍스트로 교체할 것입니다. 비저빌리티(Visibility) Not Hit-Testable (Self Only) 사용자의 상호작용에서 텍스트가 버튼을 숨기지 않아야 합니다.
위젯 에디터에서 뷰 바인딩(View Bindings)을 클릭합니다.
UEFN Button Quiet 위젯에 바인딩을 다음과 같이 추가합니다.
바인딩의 방향을 뷰모델에 한 방향(One Way to View Model)으로 변경합니다.
좌측을 Is Enabled로 설정합니다.
우측을 WidgetName > Is Enabled로 설정합니다.
새로운 바인딩을 생성하고 좌측을 On Clicked로 설정합니다.
우측을 CreativeModalDialogViewmodel > Response로 설정합니다.
Response를 Button 1로 설정합니다.
UEFN Text Block 위젯에 다음 바인딩을 추가합니다.
바인딩의 방향을 위젯에 한 방향(One Way to e)으로 변경합니다.
좌측을 UEFN Text Block > Text로 설정합니다.
우측을 CreativeModalDialogViewmodel > Button 01 Main Text로 설정합니다.
저장하고 위젯 블루프린트의 컴파일을 클릭합니다.
이 튜토리얼의 5단계에서 팝업 대화창 장치에 이 커스텀 위젯을 추가할 것입니다.
