ToText(Int) 및 ToText(Double) 변환 함수를 사용해 Integer 또는 Float 변수를 위젯에 전달합니다. 'ToText' 변환 함수는 Integer 또는 Float 타입의 변수를 위젯에 표시할 수 있는 텍스트 타입으로 변환해 줍니다. 텍스트 이외 타입인 변수는 위젯에서 표시되지 않습니다.
에디터에서 변환 함수는 실제로 To Text (Double)이 아닌 To Text (Double)로 표시되지만 그 역할은 동일합니다.
아래에는 두 변환 함수의 사용법을 보여주는 두 가지 예시가 나와 있습니다.
To Text (Int) 예시: 플레이어가 베이컨을 주우면 진행률을 추적하는 커스텀 추적기 위젯입니다.
To Text (Double) 예시: 상식 퀴즈의 정답 후보를 팝업으로 표시해 주는 커스텀 팝업 대화창 위젯입니다. 시간 안에 답을 선택하지 않으면 타이머를 종료하기 위해 카운트다운 타이머가 사용됩니다.
To Text (Int)
이 예시에서는 커스텀 추적기 위젯을 사용해 플레이어가 수집한 베이컨의 수를 추적합니다. UI 팝업 문서의 단계를 따라 사용자 위젯을 생성하고 이름을 Tracker_Widget으로 지정합니다.
위젯 구성
Tracker_Widget을 구성하기 위해 계층구조 패널에 다음 위젯을 아래 순서로 추가합니다.
오버레이(Overlay)
이미지(오버레이 아래에 중첩하고 이름을 Background로 변경함)
스택 박스(오버레이에 중첩)
텍스트 블록(첫 번째 스택 박스 아래에 중첩하고 이름을 제목으로 변경함, 이 텍스트 블록이 '{Tracker Title}'이 됨)
스택 박스(첫 번째 스택 박스에 중첩)
2 X 텍스트 블록(두 번째 스택 박스 아래에 중첩함, 첫 번째 텍스트 블록의 이름을 현재 값 '{Current}'으로, 두 번째 텍스트 블록의 이름을 플레이버 텍스트 '베이컨 수집함'으로 변경함)
플레이어가 현재 수집한 베이컨의 수를 가져오는 텍스트 블록이 필요합니다. Tracker_Widget은 TrackerTitle 텍스트 블록을 포함하도록 구성되어 있기 때문에 뷰모델에서 Current 텍스트 블록으로 이름 프로퍼티를 전달할 수 있습니다.
동일한 방식으로 위젯을 구성합니다.
플레이어가 베이컨을 수집하면 게임에서는 이렇게 보입니다.
변환 함수 구성
To Text (Int) 변환 함수는 CurrentValue 텍스트 블록을 통해 현재 베이컨 수를 추적기 장치로 전달하는 데 사용됩니다.
To Text (Int) 변환 함수를 구성하려면 먼저 뷰 바인딩을 생성하고, 위젯에서 설정한 값을 추적기 장치(Tracker device)에 바인딩합니다.
창(Window) > 뷰 바인딩(View Bindings)을 엽니다.
위젯에서 CurrentValue 텍스트 블록을 선택한 다음, 뷰 바인딩 창에서 +위젯 추가를 클릭합니다.
뷰 바인딩 좌측 박스에서 CurrentValue > 텍스트(Text)를 선택합니다. 이렇게 하면 텍스트가 CurrentValue 텍스트 블록의 텍스트 프로퍼티로 전달됩니다.
오른쪽 박스에서 필드를 클릭하고 변환 함수 > To Text (Integer)를 선택합니다. CurrentValue 텍스트 블록 바인딩에 여러 필드가 나타납니다.
각 필드의 역할에 대한 자세한 내용은 To Text (Int/Double) 프로퍼티 섹션을 참고하세요.
이렇게 하면 To Text (Integer)라는 변환 함수가 작동하여 값을 가져온 뒤 텍스트 타입의 변수를 반환하고, 이 변수는 CurrentValue 텍스트 블록의 텍스트 프로퍼티로 전달됩니다.
값(Value) 옆에서 체인 아이콘을 선택하고 MVVM_UEFN_Tracker > 값을 선택합니다.
추적기 뷰모델의 값 변수는 To Text (Integer) 변환 함수로 전달됩니다. 이렇게 하면 값 변수가 텍스트 프로퍼티로 출력되고, 다시 CurrentValue 텍스트 블록의 텍스트 프로퍼티로 전달됩니다.
최종 결과
새로운 위젯을 사용하려면 추적기 장치를 프로젝트로 드래그한 뒤 다음을 수행합니다.
추적기 장치의 디테일(Details) 패널에서 HUD 위젯(HUD Widget) 필드를 Track_Widget으로 설정합니다.
추적기는 점수 스탯을 추적하는 데 사용할 수 있습니다. 이 기능을 테스트하려면 레벨의 수집 가능한 오브젝트를 사용하세요.
플레이어가 게임 내에서 베이컨을 수집하면 추적기가 각 베이컨에 정해진 점수 값만큼 자동으로 증가합니다.
To Text (Double)
이 예시에서는 UI 팝업문서의 모달 대화창 베리언트 워크플로를 사용해 Trivia_Widget이라는 커스텀 팝업 대화창 위젯을 만들었습니다. Trivia_Widget은 시간 제한이 끝나기 전에 답해야 하는 포트나이트의 상식 퀴즈를 표시합니다.
위젯 구성
콘텐츠 브라우저(Content Browser)를 우클릭하여 컨텍스트 메뉴를 엽니다.
컨텍스트 메뉴에서 사용자 인터페이스(User Interface) > 위젯 블루프린트(Widget Blueprint) > 모달 대화창 베리언트(Modal Dialog Variant)를 선택합니다.
위젯을 열고 계층구조 패널에 다음 컨테이너를 이미지의 순서에 맞게 추가합니다.
오버레이(Overlay)
이미지(Image)
3 X 스택 박스
오버레이는 부모 컨테이너로서 위젯 전체를 포함하고 있습니다. 다음으로 백그라운드용 이미지 위젯을 사용하고, 마지막으로 텍스트, 버튼 등 모든 콘텐츠를 담을 스택 박스를 여러 개 중첩하여 사용합니다.
아래 그림과 같이 스택 박스에 텍스트 블록 및 버튼을 추가합니다.
TimeLeft 및 TimeFlavorText 텍스트 블록을 스택 박스로 래핑합니다. 이렇게 하면 팝업 대화창 뷰모델의 타임아웃까지 남은 시간(Remaining Time for Timeout) 변수에 바인딩된 TimeLeft가 다이내믹하게 업데이트됩니다.
위젯을 기존 구조의 컨테이너로 래핑해야 할 경우에 위젯 전체를 다시 작업하지 않아도 됩니다. 위젯을 우클릭하고 다음으로 래핑...(Wrap With...) 또는 다음으로 대체...(Replace With...)를 선택하면 쉽게 컨테이너 내부에 새로운 패널을 추가할 수 있습니다.
2x2 그리드 형태의 버튼을 추가합니다. 버튼이 2x2 그리드 형태이므로 스택 박스 대신에 균등 그리드 패널(Uniform Grid Panel)을 사용합니다. Container_Buttons를 우클릭하고 다음으로 대체... > 균등 그리드 패널을 선택합니다.
균등 그리드 패널을 사용하면 자손 위젯을 쉽게 그리드 패턴으로 정리할 수 있습니다. 각 자손의 슬롯 패딩을 간편하게 설정할 수도 있습니다.
계층구조에서 각 버튼을 하나씩 선택하면 메인 디자이너 뷰에서 버튼이 강조 표시됩니다.
메인 디자이너 뷰에서 버튼 주변의 화살표를 클릭하여 버튼을 원하는 특정 행이나 특정 열로 옮길 수 있습니다.
아래 예시에서는 버튼이 왼쪽에서 오른쪽으로, 위에서 아래로 배열되어 있습니다. 버튼의 이름은 Button1, Button2, Button3, Button4로 수정했습니다.
디테일 패널에서 Container_Buttons의 자손 레이아웃(Child Layout) > 슬롯 패딩(Slot Padding)을 16px로 설정합니다.
이 값은 자신의 디자인에 맞게 변경해도 무방합니다.
콘텐츠 스택 박스(Content Stack Box)에 닫기 버튼으로 사용할 소거 버튼(Quiet Button)을 추가합니다.
콘텐츠를 더 읽기 좋게 하기 위해 컨테이너 사이에 여백을 추가합니다. 여백을 주고 싶은 곳에 이미지 위젯을 추가하고, 디테일 패널에서 다음 옵션을 사용합니다.
브러시(Brush) > 그리기 방식(Draw As) = 없음(None)
이미지 크기(Image Size)(X 및 Y 값) = 35(디자인에 따라 조절 가능)
이렇게 하면 패딩을 사용하지 않고도 UI 엘리먼트 사이의 여백을 쉽게 조절할 수 있습니다.
그리기 방식: 이미지(Draw as Image)그리기 방식: 없음(Draw as None)각 버튼을 쉽게 알아볼 수 있도록 버튼 텍스트를 편집합니다.
상식 퀴즈 팝업의 백그라운드 머티리얼을 만들기 위해 Fortnite > UI 폴더를 열고 M_UI_Rectangle의 머티리얼 인스턴스 생성 작업을 진행합니다.
UMG에서 사용자 위젯을 열고 백그라운드 이미지 위젯을 선택한 다음 브러시 > 이미지 필드에서 방금 만든 머티리얼 인스턴스를 선택합니다.
콘텐츠 스택 박스에 32px의 패딩을 추가해 팝업의 가독성을 높입니다.
변환 함수 구성
이 문서에서는 버튼 반응 바인딩을 다루지 않습니다. 대신 타임아웃까지 남은 시간을 구현하기 위해 TimeLeft 텍스트를 Float 변수에 바인딩합니다.
창(Window) > 뷰 바인딩(View Bindings)을 엽니다.
계층구조 패널에서 TimeLeft 텍스트 블록 위젯을 선택합니다. 뷰 바인딩 창에서 +위젯 추가를 클릭합니다.
좌측 박스에서 TimeLeft > 텍스트를 클릭합니다. 이렇게 하면 일정 형태의 값이 TimeLeft의 텍스트 프로퍼티로 전달됩니다.
오른쪽 박스에서 CreativeModalDialogViewmodel > 타임아웃까지 남은 시간(Remaining Time for Timeout) 을 선택합니다. 그런 다음 변환 함수 > To Text (Double)를 선택합니다.
변수 위에 마우스 커서를 올리면 이 값이 Float 값임을 알 수 있습니다. To Text (Double) 변환 함수를 사용하면 Double/ Float 값을 텍스트 변수로 변환하여 UI에 표시할 수 있습니다.
뷰 바인딩 창에 여러 필드가 나타납니다.
각 필드에 대한 자세한 내용은 문서의 To Text (Int / Double) 프로퍼티 섹션을 참고하세요.
값 옆에서 체인 아이콘을 선택하고 CreativeModalDialogViewmodel > 타임아웃까지 남은 시간 > 선택을 선택합니다.
타임아웃까지 남은 시간 변수를 전달받은 To Text (Double) 변환 함수는 Float 값을 UI에서 읽을 수 있는 텍스트 포맷으로 바꾸어 출력합니다. UI는 팝업 대화창이 닫힐 때까지 남은 시간을 정확하게 표시합니다.
최종 결과
팝업 대화창 장치를 프로젝트로 드래그한 뒤 다음을 수행합니다.
팝업 대화창 장치에서 템플릿 오버라이드 클래스(Template Override Class)를 앞서 생성한 Trivia_Widget으로 설정합니다.
대화창 시간 초과 사용(Use Dialog Timeout)을 체크합니다.
시간 초과 지속 시간을 6초로 설정하거나, 플레이어가 팝업을 읽기에 충분할 것 같다고 생각되는 시간을 입력합니다.
이제 팝업 대화창 위젯이 나타나면 매 초마다 팝업 창의 타이머가 줄어듭니다.
To Text (Int/Double) 프로퍼티
To Text (Int) 변환 함수에는 여러 필드가 있습니다. To Text (Double) 함수 역시 별도로 지정하지 않는 한 아래와 같이 동일한 필드를 가지고 있습니다.
값 - 변환 함수로 전달할 Integer 변수입니다.
항상 부호 사용(Always Sign) - 출력된 텍스트 앞에 양수 혹은 음수 부호를 추가해 값이 양수인지 음수인지를 표시합니다. 값이 양수이면 텍스트가 +{Value} 형태로 출력되고, 음수면 텍스트가 -{Value} 형태로 출력됩니다.
그룹 사용(Use Grouping) - 값이 1,000 이상인 경우 값을 묶어서 표시할 것인지를 결정합니다. 이 옵션은 사용자 컴퓨터의 문화권에 따른 숫자 그룹 표시 세팅을 사용합니다. 옵션을 켜면 텍스트가 1,000으로 출력됩니다. 옵션을 끄면 텍스트가 1000으로 출력됩니다.
최소 정수 자릿수(Minimum Integral Digits) - 텍스트에 표시할 정수 자릿수의 최솟값입니다. 디폴트 값은 1입니다. 1보다 크게 설정하면 최소 정수 자릿수보다 자릿수가 적은 정수에는 0이 표시됩니다. 예를 들어 최소 정수 자릿수를 3으로 설정했는데 현재 값이 5라면 텍스트는 005를 출력합니다.
최대 정수 자릿수(Maximum Integral Digits) - 텍스트에 표시할 정수 자릿수의 최댓값입니다. 기본값은 354입니다. 이 옵션은 텍스트를 제한하여 최대 자릿수만큼만 숫자를 보여줍니다.
최소 소수 자릿수(Minimum Fractional Digits)(To Text (Double)만 해당) - 소수점 아래에 표시할 자릿수의 최솟값입니다. 기본값은 0입니다.
최대 소수 자릿수(Maximum Fractional Digits)(To Text (Double)만 해당) - 소수점 아래에 표시할 자릿수의 최댓값입니다. 기본값은 3입니다.
반올림 방식(Rounding Mode)(To Text (Double)만 해당) - Float/Double 값을 가장 가까운 숫자로 어떻게 반올림할 것인지를 결정합니다.
| Type | 설명 | 예시 |
|---|---|---|
절반에서 짝수로(Half to Even) | 가장 가까운 정수값으로 반올림하되, 같은 거리인 경우 짝수에 가까운 값으로 합니다. | 1.5은 2가 되고, 0.5는 0이 됩니다. |
0에서 절반으로(Half from Zero) | 절대값의 가장 가까운 정수값으로 반올림하고, 원래 부호를 붙입니다. | -0.5는 -1.0이 되고, 0.5는 1.0이 됩니다. |
절반에서 0으로(Half to Zero) | 가장 가까운 정수값으로 반올림하되, 같은 거리인 경우 0에 더 가까운 값으로 합니다. | -0.5은 0이 되고, 0.5도 0이 됩니다. |
0에서(From Zero) | 절대값을 '더 큰 값'으로 반올림하고, 원래 부호를 붙입니다. | 0.1은 1이 되고, -0.1은 -1이 됩니다. |
0으로(To Zero) | 절대값을 '더 작은 값'으로 반올림하고, 원래 부호를 붙입니다. | 0.1은 0이 되고, -0.1도 0이 됩니다. |
음의 무한대로(To Negative Infinity) | 더 작은 정수값으로 합니다. | 0.1은 0, -0.1은 -1이 됩니다. |
양의 무한대로(To Positive Infinity) | 더 큰 정수값으로 합니다. | 0.1은 1, -0.1은 0이 됩니다. |