Tipos de widgets

Widgets são elementos da interface do usuário que você pode adicionar ou remover na IU.

As seções a seguir descrevem todos os widgets que você pode usar para criar sua IU personalizada em Verse.

Canvas

Um canvas é um widget de contêiner. Você pode posicionar outros widgets no canvas usando slots de canvas para projetar sua IU. Quando um widget de canvas está no topo da hierarquia da IU, ele representa a tela inteira.

Para ver exemplos de como criar um widget de canvas e como posicionar widgets na tela, consulte Como posicionar widgets na tela.

Botão

Existem três tipos de widgets de botão que você pode adicionar à IU. A diferença entre cada botão é apenas estética.

IU	Código Verse
	Verse TextForUI<localizes> : message = "Option" Widget := button_loud{DefaultText := TextForUI} Copy full snippet(2 lines long)
	Verse TextForUI<localizes> : message = "Option" Widget := button_regular{DefaultText := TextForUI} Copy full snippet(2 lines long)
	Verse TextForUI<localizes> : message = "Option" Widget := button_quiet{DefaultText := TextForUI} Copy full snippet(2 lines long)

Consulte Como tornar o widget interativo para saber como criar interações de botão.

Bloco de cores

Você pode criar um widget e definir sua cor e opacidade. Basta usar o widget color_block.

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

Imagem

Você pode adicionar imagens à IU usando uma textura atribuída ao widget texture_block.

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

Controle deslizante

Você pode adicionar controles deslizantes para que um jogador possa definir valores em um intervalo predefinido. A propriedade de tamanho da etapa é definida por quanto o valor é alterado em um controle ou teclado, mas o tamanho da etapa não é afetado se um jogador usar um mouse para alterar esse valor.

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

Consulte Como tornar o widget interativo para saber como criar interações de barra.

Texto

Para exibir texto na sua IU, use o Bloco de Texto.

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

Sobreposição

Você pode empilhar widgets uns sobre os outros usando um widget de sobreposição. Os widgets são renderizados na ordem em que você especifica os slots de sobreposição.

No exemplo abaixo, o bloco de cores é renderizado primeiro e, em seguida, o bloco de texto é renderizado sobre o bloco de cores. Se trocar a ordem dos slots de sobreposição (de forma que o bloco de texto seja renderizado o primeiro), o bloco de cores é renderizado sobre o bloco de texto, ocultando o texto.

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:

Caixa de empilhamento

Você pode empilhar widgets na vertical ou horizontal usando um widget de caixa de empilhamento.

Orientação vertical	Orientação horizontal
Verse MoveText<localizes> : message = "Move" AttackText<localizes> : message = "Attack" CancelText<localizes> : message = "Cancel" Widget := stack_box: Orientation := orientation.Vertical Slots := array: stack_box_slot: Widget := button_loud{DefaultText := MoveText} stack_box_slot: Expand code Copy full snippet(13 lines long)	Verse MoveText<localizes> : message = "Move" AttackText<localizes> : message = "Attack" CancelText<localizes> : message = "Cancel" Widget := stack_box: Orientation := orientation.Horizontal Slots := array: stack_box_slot: Widget := button_loud{DefaultText := MoveText} stack_box_slot: Expand code Copy full snippet(13 lines long)