커스텀 대화 UI

위젯 에디터를 사용하여 대화를 위한 버튼과 배경의 룩을 디자인할 수 있습니다. 커스텀 모달을 제작하기 위해 위젯 에디터의 어떤 위젯에도 텍스트를 추가할 필요가 없습니다. 모든 버튼 및 텍스트 블록 위젯은 컨버세이션 뱅크에서 텍스트와 대화를 가져옵니다.

위젯 에디터를 사용하면 다음 항목을 임포트할 수 있습니다.

• 이미지

• 사전에 디자인된 대화창

• 폰트 파일

위젯 에디터를 사용한 커스텀 UI 제작의 멋진 사례는 닌자터틀 아케이드 템플릿 튜토리얼 페이지에서 찾아볼 수 있습니다.

위젯 에디터를 열려면 다음 단계를 따릅니다.

1. 콘텐츠 브라우저 내부에서 우클릭하고 유저 인터페이스(User Interface) > 위젯 블루프린트(Widget Blueprint)를 선택합니다.

2. 위젯 블루프린트 선택 창에서 모달 대화창 베리언트(Modal Dialogue Variant)를 선택합니다.

3. 위젯 블루프린트를 명명하고 위젯 섬네일을 더블클릭하여 위젯 에디터를 엽니다.

4. 커스텀 대화창을 제작할 때는 위젯 에디터 페이지에 설명된 워크플로가 사용됩니다.

대화 장치에서 사용할 가능성이 높은 위젯에는 다음이 포함됩니다.

• Canvas Panel - 정렬 컨트롤을 통해 모든 위젯을 배치할 수 있는 패널입니다.

• UEFN TextBlock for ConversationModalDialogViewModel - 대화 제목 텍스트용입니다.

• UEFN TextBlock for ConversationModalDialogViewModel - 대화 본문 텍스트용입니다.

• UEFN Button for ConversationModalDialogViewModel - 모든 버튼/텍스트 선택지용입니다.

값 바인딩

값 바인딩은 컨버세이션 그래프에 입력된 텍스트를 가리킵니다. 컨버세이션 노드에 입력된 모든 텍스트는 위젯이 뷰모델의 위젯에 제대로 바인딩되면 게임플레이 중에 위젯에 추가됩니다.

커스텀 대화 상자를 위한 텍스트 값 바인딩은 위젯 에디터의 계층구조(Hierarchy) 패널에서 시작됩니다.

1. 계층구조 패널에서 위젯을 선택합니다. 계층구조 상단에서 시작하여 목록 하단으로 내려가며 작업하면 됩니다.  

2. 하단 툴바에서 뷰 바인딩을 클릭합니다. 뷰모델 패널이 열립니다.  

   

3. 필요한 엘리먼트를 선택한 다음 뷰모델(Viewmodel) 패널에서 + 위젯 추가(+ Add Widget)를 클릭합니다. 이렇게 하면 뷰모델 목록에 자동으로 위젯이 추가됩니다.

   

   위젯은 또한 위젯 필드를 클릭하여 드롭다운 메뉴에서 위젯을 선택하는 방식으로 뷰모델에 추가할 수 있습니다.

   

4. UEFN 텍스트(UEFN Text) 프로퍼티의 편집 아이콘을 클릭하고 텍스트(Text) > 선택(Select)을 클릭하여 위젯에 바인딩할 프로퍼티를 선택합니다.

   

5. CreativeModalDialogueViewmodel 드롭다운 메뉴에서 텍스트 값 또는 버튼 값을 선택합니다. 그러면 선택한 값이 위젯에 추가됩니다. 선택은 계층구조 내 위젯의 타입을 기반으로 이루어져야 합니다.

   

6. 선택(Select)을 클릭하여 위젯에 값 바인딩하기를 마칩니다.

   1. 텍스트 값에는 Title, Body 또는 Button# Main Text가 포함됩니다.

   2. Title은 대화 장치의 화자 이름 필드에서 설정된 값이거나 팝업 대화창 장치의 제목에서 설정된 값입니다.

   3. Body는 제목 뒤에 오는 텍스트로, 보통 플레이어에게 대화의 옵션을 제시합니다. Default Entry Point 노드로 연결되는 Speech 노드가 여기에 해당합니다.

   4. Button# Main Text는 컨버세이션 그래프에서 지정된 순서대로 응답 노드에 표시되는 텍스트입니다.

   

버튼 값은 사용된 버튼 위젯의 수에 따라 번호를 매겨야 합니다. 이 값은 버튼 위젯이 추가된 순서와 동일한 순서로 설정됩니다. 버튼은 컨버세이션 그래프의 Response 노드입니다. 이는 버튼 텍스트를 그에 맞는 각 버튼에 바인딩합니다.

버튼 바인딩

버튼 바인딩은 버튼 선택 후 이벤트가 시작되는 것을 가리킵니다. NPC가 아이템을 제공하는 단일 이벤트일 수도 있고, NPC가 판매할 상품을 가지고 있어 일련의 이벤트를 유발하는 복잡한 교환일 수도 있습니다.

커스텀 버튼 위젯에서 이벤트가 발동하도록 프로그래밍하려면 뷰모델의 버튼에 이벤트 로직을 추가해야 합니다.

1. 하단 툴바에서 뷰 바인딩(View Bindings)을 클릭합니다

   

2. 위젯 에디터의 계층구조 패널에서 한 번에 하나의 버튼을 선택합니다. 계층구조 패널에서 위젯을 선택하면 위젯 필드에 선택된 버튼 위젯이 자동으로 배치됩니다.

3. + 위젯 추가를 클릭합니다. 위젯이 목록에 다시 추가됩니다.

   

4. 화살표 필드를 선택하고 뷰모델에 한 방향(One Way to View Model)을 선택합니다.

   

5. 버튼을 선택하고 On Clicked 값을 선택합니다. 선택 창에서 선택이 아닌 이벤트(Event)를 클릭해야 합니다.

6. 뷰모델에서 Response 값을 선택합니다.

7. 아래 줄에서 버튼에 원하는 Response 값을 선택합니다. 바인딩 결과는 다음과 같습니다.

   

또한 어떤 값이 할당되는지에 따라 숨김/숨김 해제할 버튼을 구성할 수 있습니다.

1. 계층구조에서 버튼을 선택하고 버튼에 위젯을 추가합니다.

2. 비저빌리티(Visibility) 값을 선택합니다.

3. 바인딩 우측에서 해당하는 Button # Visibility를 찾아 선택합니다. 바인딩 결과는 다음과 같습니다.

   

4. 이제 버튼이 선택할 응답이 있는 경우에만 표시됩니다.

gif를 클릭하면 확대됩니다.

비저빌리티 바인딩이 없으면 텍스트가 응답 필드에서 지워지고 플레이어에게는 빈 선택지 상자만 남게 됩니다.

gif를 클릭하면 확대됩니다. 텍스트 > 선택

머티리얼 바인딩하기

머티리얼을 UMG에서 사용하여 이미지 위젯을 채울 수 있습니다. UMG에서 사용하는 머티리얼은 UI 머티리얼 형식이어야 위젯이 머티리얼 파일을 인식하고 이미지 위젯과 함께 사용할 수 있습니다. UI 머티리얼에 대한 자세한 내용은 UI 머티리얼 문서를 참고하세요.

머티리얼을 사용하여 대화 머티리얼 배열을 채울 수 있습니다. 임포트된 파일로 커스텀 머티리얼을 만들어 머티리얼 그래프에서 텍스처로 변환할 수 있습니다. 다음 파일 타입만 허용되는 것은 아니지만, 래스터 이미지 에셋을 임포트하는 데 일반적으로 이러한 파일 타입이 사용됩니다.

• .png

• .webp

• .jpg

대화 장치에서 머티리얼을 대화 머티리얼 배열에 추가합니다. 그러면 머티리얼 설정 노드가 컨버세이션 그래프에 표시됩니다. 바인딩의 그래프에서 이 머티리얼을 참조합니다.

머티리얼을 대화 장치에 바인딩하려면 다음 단계를 따릅니다.

1. UI 위젯 에디터(UI Widget Editor)에서 계층구조(Hierarchy) 패널의 이미지 위젯을 클릭합니다.

   

2. 뷰 바인딩(View Bindings)을 클릭하여 바인딩 패널을 엽니다. 이미지 위젯의 바인딩 라인과 함께 패널이 열립니다.

   

3. +위젯 추가(+AddWidget) 버튼을 클릭하여 이미지 위젯을 뷰 바인딩 패널에 추가합니다.

   

4. 왼쪽 필드의 이미지 위젯에서 편집 아이콘을 클릭하여 위젯 옵션을 엽니다.

   

5. 이미지 위젯 > 브러시(Brush) > 선택(Select)을 클릭합니다. 그러면 선택 가능한 브러시 바인딩이 오른쪽 필드에 추가됩니다.

   

6. 오른쪽 필드의 편집 아이콘을 클릭하여 바인딩 옵션을 엽니다.

   

7. Conversion Functions > Make Image Brush From Material > 선택을 클릭합니다. 그러면 이 위젯에 사용할 머티리얼을 정확히 지정할 수 있는 추가 옵션이 열립니다.

   

8. 머티리얼(Material) 슬롯에서 링크 아이콘을 선택한 후 메뉴에서 CreativeModalDialogViewmodel > Art 01 Material > 선택을 클릭합니다.

   

9. 이미지 크기(Image Size) 슬롯에 디테일(Details) 패널 내 이미지 위젯의 이미지 크기(Image Size) 옵션에서 사용한 것과 동일한 크기를 입력합니다.

   

최종적으로, 캐릭터 화자를 식별할 수 있는 머티리얼이 표시됩니다.

대화 UI 애니메이션 만들기

UI 애니메이션에서 대화 머티리얼을 사용할 수도 있습니다. 대화 장치에서 대화 유형(Conversation Type)이 상자(Box) 또는 커스텀(Custom)으로 설정되어 있어야 합니다. 머티리얼 그래프에서 대화 애니메이션 재생(Play Conversation Animation) 노드를 사용하는 경우 대화 장치에서 대화 머티리얼을 참조할 수 있습니다.

이 대화 노드를 UI 위젯에 바인딩하려면 뷰모델의 진행도(Progress) 값을 사용하여 시퀀서에서 생성한 UI 애니메이션에 연결해야 합니다.  머티리얼에 애니메이션을 적용하는 방법을 알아보려면 UI에 애니메이션 적용하기 문서를 참고하세요.