위젯 타입

위젯은 UI에서 추가 또는 제거할 수 있는 UI 요소입니다.

다음 섹션에서는 Verse에서 커스텀 UI를 생성하는 데 사용할 수 있는 모든 위젯에 대해 살펴봅니다.

캔버스

캔버스 는 컨테이너 위젯입니다. 캔버스 슬롯 의 캔버스 내에 다른 위젯을 배치하여 플레이어를 위한 커스텀 UI를 디자인할 수 있습니다. 캔버스 위젯이 UI 계층구조 최상위에 있을 때는 화면 전체를 나타냅니다.

캔버스 위젯은 다른 캔버스 위젯 내에 중첩시킬 수 있지만, 화면 전체를 포괄하는 캔버스 위젯은 루트 캔버스 위젯이 유일합니다.

캔버스 위젯을 생성하는 방법과 화면 내에 위젯을 배치하는 방법에 대한 예시는 화면에 위젯 배치하기를 참고하세요.

버튼

UI에 추가할 수 있는 버튼 위젯은 세 가지가 있습니다. 각 버튼은 생김새 외에는 차이가 없습니다.

버튼을 상호작용 가능하게 만드는 방법은 위젯을 상호작용 가능하게 만들기를 참고하세요.

컬러 블록

color_block 위젯을 사용하여 컬러와 오파시티를 정의하는 위젯을 생성할 수 있습니다.

Widget := color_block:
    DefaultColor := NamedColors.CornflowerBlue
    DefaultOpacity := 1.0
    DefaultDesiredSize := vector2{X := 128.0, Y := 128.0}
Copy full snippet

Widget := color_block: DefaultColor := NamedColors.CornflowerBlue DefaultOpacity := 1.0 DefaultDesiredSize := vector2{X := 128.0, Y := 128.0}

이미지

texture_block 위젯에 할당된 텍스처를 사용하여 UI에 이미지를 추가할 수 있습니다.

Widget := texture_block:
    DefaultImage := MyTexture
    DefaultDesiredSize := vector2{X := 128.0, Y := 128.0}
Copy full snippet

Widget := texture_block: DefaultImage := MyTexture DefaultDesiredSize := vector2{X := 128.0, Y := 128.0}

UEFN의 텍스처를 Verse 코드에 노출시키는 방법은 UEFN에서 Verse에 에셋 노출하기를 참고하세요.

슬라이더

슬라이더를 추가하면 플레이어가 미리 정의된 범위 내에서 값을 설정할 수 있습니다. '스텝 크기(Step Size)' 프로퍼티는 컨트롤러나 키보드에서의 값이 얼마나 변경되는지를 나타내지만, 마우스를 사용하여 값을 변경하는 플레이어의 스텝 크기에는 영향을 미치지 않습니다.

Widget := slider_regular:
    DefaultValue := 5.0
    DefaultMinValue := 0.0
    DefaultMaxValue := 10.0
    DefaultStepSize := 0.5
Copy full snippet

Widget := slider_regular: DefaultValue := 5.0 DefaultMinValue := 0.0 DefaultMaxValue := 10.0 DefaultStepSize := 0.5

슬라이더를 상호작용 가능하게 만드는 방법은 위젯을 상호작용 가능하게 만들기를 참고하세요.

텍스트

UI에 텍스트를 표시하려면 텍스트 블록 을 사용합니다.

TextForUI<localizes> : message = "This is my text!"
Widget := text_block{DefaultText := TextForUI}
Copy full snippet

TextForUI<localizes> : message = "This is my text!" Widget := text_block{DefaultText := TextForUI}

오버레이

오버레이 위젯을 사용하면 위젯을 서로 중첩시킬 수 있습니다. 위젯은 오버레이 슬롯을 지정한 순서대로 렌더링됩니다.

아래 예시에서는 컬러 블록이 제일 먼저 렌더링되고, 해당 컬러 블록 위에 텍스트 블록이 렌더링됩니다. 텍스트 블록이 먼저 오도록 오버레이 슬롯의 순서를 바꾸면 컬러 블록이 텍스트 블록 위에 렌더링되면서 텍스트를 가립니다.

TextForUI<localizes>(InText : string) : message = "{InText}"

Widget := overlay:
    Slots := array:
        overlay_slot:
            Widget := color_block:
                DefaultColor := NamedColors.MintCream
                DefaultOpacity := 1.0
                DefaultDesiredSize := vector2{X := 1024.0, Y := 128.0}                                
        overlay_slot:
            Widget := text_block:
                DefaultText := TextForUI("This is my text block overlaying a color block.")
Copy full snippet

TextForUI<localizes>(InText : string) : message = "{InText}" Widget := overlay: Slots := array: overlay_slot: Widget := color_block: DefaultColor := NamedColors.MintCream DefaultOpacity := 1.0 DefaultDesiredSize := vector2{X := 1024.0, Y := 128.0} overlay_slot: Widget := text_block: DefaultText := TextForUI("This is my text block overlaying a color block.")

스택 박스

스택 박스 위젯을 사용하면 위젯을 수직 또는 수평으로 중첩시킬 수 있습니다.