HUD 메시지 장치와 팝업 대화창 장치가 포함된 위젯 블루프린트를 사용하여 포트나이트 언리얼 에디터(Unreal Editor for Fortnite, UEFN)에서 섬에 맞는 커스텀 유저 인터페이스(User Interface, UI) 엘리먼트를 만들 수 있습니다.
커스텀 UI를 생성하는 데에는 두 가지 위젯 블루프린트 카테고리가 있습니다.
사용자 위젯(User Widget) - 커스텀 HUD 메시지를 만드는 데 사용됩니다.
모달 대화창 베리언트(Modal Dialog Variant) - 클릭 가능한 커스텀 버튼을 만드는 데 사용됩니다.
팝업 대화창 장치는 모달 대화창 베리언트 블루프린트에서만 작동합니다. HUD 메시지 장치는 두 가지 블루프린트 유형 모두에서 작동합니다.
위젯 에디터에 대해 자세히 알아보려면 UI 위젯 에디터 문서를 참고하세요.
사용자 위젯
이 위젯은 HUD를 사용해서 커스텀 UI 메시지를 플레이어에게 표시합니다. 이를 사용해서 플레이어가 퀘스트를 수행하도록 안내하거나 섬 환경에서 캐릭터를 위한 설명 도구로 사용할 수 있습니다. 아래의 모달 대화창 베리언트의 워크플로에서 메시지에 버튼을 추가할 수 있습니다.
HUD 메시지 장치를 뷰포트로 드래그합니다. 위젯 블루프린트에 연결할 수 있도록 장치가 준비됩니다.
블루프린트 생성
콘텐츠 브라우저에서 우클릭하여 콘텐츠 브라우저 메뉴를 엽니다.
유저 인터페이스(User Interface) > 위젯 블루프린트(Widget Blueprint)를 선택합니다. 위젯 패스가 열립니다.
사용자 위젯을 선택합니다. 위젯 블루프린트 섬네일이 콘텐츠 브라우저에 표시됩니다.
섬네일 이름을 바꿉니다.
뷰포트에서 HUD 메시지 장치를 선택하고 디테일 패널에서 HUD 위젯(HUD Widget) 고급 옵션을 찾은 다음 드롭다운 메뉴에서 위젯 블루프린트를 선택합니다.
섬네일을 더블클릭하여 위젯 에디터를 엽니다.
패널 메뉴에서 패널 위젯을 선택합니다. 이 샘플에서는 캔버스 패널(Canvas Panel)이 사용되었습니다.
이 단계는 위젯에 엘리먼트를 추가하기 전에 수행해야 합니다.
무엇이든 이 패널에 놓으면 HUD 메시지에 표시됩니다.
모서리를 클릭하고 원하는 크기로 드래그해서 패널 위젯 크기를 조절합니다. 이 예시에서 패널 크기는 HD 해상도에 해당하는 1920 x 1080입니다.
이미지를 클릭하면 확대됩니다.
이미지를 콘텐츠 브라우저로 임포트한 후 이미지 위젯을 위젯 블루프린트 에디터로 드래그합니다. 그러면 HUD 배경 이미지로 설정됩니다.
디테일 패널에서 외형(Appearance) 아래의 이미지 크기(Image Size) 옵션을 사용하여 이미지 크기를 조절합니다.
이동(Translation) 필드를 사용하여 이미지를 이동합니다. 첫 번째 필드를 드래그하면 이미지가 좌우로 이동합니다. 두 번째 필드를 드래그하면 이미지가 위아래로 이동합니다.
UEFN Text Block 위젯을 패널로 드래그합니다. 텍스트 블록 위젯에서는 커스텀 HUD 메시지를 생성합니다.
텍스트 블록 위젯을 배치하는 곳에서 HUD 메시지에 텍스트가 표시됩니다.
디테일 패널에서 텍스트(Text) 필드에 커스텀 UI 메시지를 추가합니다.
컬러 및 오파시티(Color and Opacity), 폰트 패밀리(Font Family), 크기(Size)와 같은 외형 옵션을 사용하여 텍스트에 컬러를 추가하고 폰트 스타일을 변경합니다.
문자를 기울이거나 커스텀 문자 간격을 사용하거나 외곽선을 추가하거나 텍스트에 섀도를 적용하여 텍스트를 미세 조정할 수 있습니다.
HUD 메시지 장치가 트리거되면 커스텀 UI 메시지가 HUD에 표시됩니다.
모달 대화창 베리언트
이 위젯은 버튼 인터페이스를 사용해서 팝업 대화창 장치 및 아이템 지급 장치(Item Granter) 장치에 연결하여 플레이어에게 아이템을 공급합니다. 시작하려면 팝업 대화창 장치 및 아이템 지급 장치 장치를 뷰포트로 드래그합니다.
블루프린트 생성
콘텐츠 브라우저에서 우클릭하여 콘텐츠 브라우저 메뉴를 엽니다.
유저 인터페이스(User Interface) > 위젯 블루프린트(Widget Blueprint)를 선택합니다. 위젯 패스가 열립니다.
모달 대화창 베리언트를 선택합니다. 위젯 블루프린트 섬네일이 콘텐츠 브라우저에 표시됩니다.
섬네일 이름을 바꿉니다.
섬네일을 더블클릭하여 위젯 에디터를 엽니다.
패널 위젯을 뷰포트로 드래그하고 크기를 조절합니다.
이미지를 클릭하면 확대됩니다.
이미지 위젯을 뷰포트로 드래그하거나 무기 또는 아이템 이미지를 임포트한 후 콘텐츠 브라우저에서 뷰포트로 이미지를 드래그합니다.
이미지 정렬을 선택합니다. 여러 가지 방식으로 가로 및 세로로 정렬할 수 있습니다.
이동 툴을 사용하여 뷰포트 내에서 이미지를 이동합니다. 첫 번째 필드를 드래그하면 이미지가 좌우로 움직이고 두 번째 필드를 드래그하면 이미지가 위아래로 움직입니다.
버튼 위젯을 뷰포트로 드래그하고, 정렬을 선택한 후 이동 필드를 사용하여 버튼을 이동합니다.
텍스트 필드에서 버튼을 명명하고 보조 텍스트(Text Secondary) 필드에 액션을 추가합니다.
버튼에만 액션을 사용하려면 텍스트 필드에 액션을 추가합니다. 즉, 버튼에 단순히 "여기를 누르세요(Press Here)"가 표시될 수 있습니다.
다음과 같은 선택(Selection) 옵션을 설정합니다.
선택 가능(Selectable) - 켜짐
선택 시 인터랙션 가능(Interactable when Selected) - 켜짐
그러면 입력 수신 시 버튼에 버튼 비헤이비어가 사용됩니다.
뷰포트에서 팝업 대화창 장치를 선택하고 디테일 패널에서 모달 위젯(Modal Widget) > 템플릿 오버라이드 클래스(Template Override Class)를 찾습니다. 템플릿 오버라이드 클래스 드롭다운 메뉴에서 UI 버튼을 선택합니다.
자동 표시(Auto Display) 옵션을 게임 시작(Game Start)으로 설정합니다. 플레이를 테스트하면 게임 시작 시에 버튼이 자동으로 생성됩니다.
또한 이 옵션을 없음(Never)으로 설정한 후 다른 장치가 팝업 대화창 장치를 트리거하도록 구성할 수 있습니다.
아이템 지급 장치를 선택하고 무기 또는 아이템을 아이템 목록(Item List)에 추가합니다.
장착하는 아이템이 사용된 이미지와 일치해야 하지만 물음표를 사용하면 원하는 아이템을 자유롭게 사용할 수 있습니다.
아이템 지급(Grant Item) 드롭다운 메뉴에서 팝업 대화창(Pop-up Dialog) 장치를 선택하고 함수 목록에서 버튼 1 응답 시(On Responding Button1)를 선택합니다.
버튼 로직
이제 위젯 블루프린트에 버튼 로직을 만들기 위한 준비가 완료되었습니다.
위젯 에디터를 엽니다.
에디터 하단에서 뷰 바인딩(View Bindings) 버튼을 클릭합니다.
뷰모델 생성(Create Viewmodel)을 클릭합니다.
Creative Modal Dialog Viewmodel > 선택(Select) > 닫기(Close)를 클릭합니다. 그러면 편집할 수 있는 모든 버튼 로직이 위젯 블루프린트에 추가됩니다.
뷰 바인딩 > 위젯 추가(Add Widget)를 클릭하여 위젯 선택 메뉴를 엽니다.
Creative Modal Dialog Viewmodel 드롭다운에서 버튼 위젯 > 선택을 클릭합니다.
위젯에 한 방향(One Way Widget)을 선택하고 바인딩 모드 드롭다운 메뉴에서 뷰모델에 한 방향(One Way To Viewmodel)으로 설정합니다.
첫 번째 필드를 클릭하고 Conversion Functions > Get Response Button 1 > 선택을 클릭합니다.
이러한 버튼 번호는 패널에서의 위치를 나타냅니다.
두 번째 필드를 클릭하고 CreativeModalDialogViewmodel > Response > 선택을 클릭합니다.
Field 드롭다운 메뉴에서 패널로 드래그한 UEFN 버튼 위젯을 선택하고 클릭 이벤트(Click Event) > 선택을 클릭합니다.
컴파일(Compile)을 클릭합니다.
플레이테스트를 통해 버튼이 생성되고 눌렀을 때 의도한 대로 작동하는지 확인합니다.