Como posicionar widgets na tela no Unreal Editor para Fortnite | Fortnite Documentação

Você posiciona widgets na tela com o widget de tela, adicionando widgets aos espaços de tela.

Botão com o texto "Center" exibido no centro da tela.

O código a seguir é um exemplo de um widget de canvas que exibirá o texto "Center" em um botão no meio da tela.

Verse

using { /Fortnite.com/Devices }
using { /Verse.org/Simulation }
using { /UnrealEngine.com/Temporary/UI }
using { /Fortnite.com/UI }
using { /UnrealEngine.com/Temporary/SpatialMath}

hello_world_device := class(creative_device):

    # Set the Button device in the Editor to reference the device in the level
    @editable

Configurações de espaço de tela

Você pode alterar os seguintes campos de um slot de canvas para posicionar widgets no canvas:

Campo	Descrição	Valores
Âncoras	O local na tela onde o widget está ancorado, especificado como uma porcentagem da tela. Quando o canvas é redimensionado, o widget permanece vinculado a suas âncoras no novo tamanho do canvas. Você pode especificar as âncoras máxima e mínima do widget, que podem alterar o tamanho do widget quando SizeToContent estiver habilitado.	O intervalo para os campos X e Y de uma âncora é de 0 a 1, em que `vector2{X := 0.0, Y := 0.0}` é o canto superior esquerdo da tela e `vector2{X := 1.0, Y := 1.0}` é o canto inferior direito da tela.
Alinhamento	A parte do widget que está no local da âncora. Por exemplo, se o campo Alinhamento for `vector2{X := 0.5, 1.0}`, a parte de baixo do centro do widget é posicionada no local da âncora.	O intervalo para os campos X e Y do Alinhamento é de 0 a 1, em que `vector2{X := 0.0, Y := 0.0}` é o canto superior esquerdo do widget e `vector2{X := 1.0, Y := 1.0}` é o canto inferior direito do widget.
Deslocamentos	Esse campo pode afetar o tamanho e a posição do widget de duas maneiras: Quando os campos Âncoras e Alinhamento estão ambos definidos, esse campo pode especificar o deslocamento da âncora para posicionar o widget. Quando o widget está ancorado de forma que o tamanho não faz sentido, esse campo pode representar o tamanho do espaço alocado ao widget. No entanto, se SizeToContent estiver habilitado, o widget terá o tamanho necessário.	A margem deve estar no intervalo de 0 a 1080. Essa resolução será dimensionada de acordo com a resolução da tela do jogador.
SizeToContent	Quando ativado, dimensiona o widget conforme desejado.	`true` / `false` para representar se essa opção está habilitada ou não.

A localização e o layout dos elementos da interface de usuário dependem da plataforma. A resolução da interface de usuário será determinada pela plataforma que o jogador estiver usando, e a interface de usuário será dimensionada para caber.

Geralmente, seu fluxo de trabalho para posicionar um widget definirá os campos na seguinte ordem:

Âncoras para especificar onde o widget deve aparecer na tela, mesmo quando a tela for redimensionada.
Alinhamento para especificar qual parte do widget está posicionada no local da âncora.
Deslocamentos para aplicar um deslocamento a partir do ponto de ancoragem.
SizeToContent para dimensionar o widget conforme necessário.

O código a seguir mostra como a alteração da Margem de deslocamentos muda a posição em que o widget aparece em relação ao local da âncora.

A margem superior de deslocamentos é 0,0

A margem superior de deslocamentos é 50,0

O código a seguir mostra como a alteração do campo Alinhamento afeta qual parte do widget está no local da âncora.

O alinhamento definido para o meio do widget, vector2{X := 0.5, Y := 0.5}

O alinhamento definido para o canto superior esquerdo do widget vector2{X := 0.0, Y := 0.0}

O código a seguir mostra como a alteração das Âncoras mínima e máxima pode afetar o tamanho de um widget.

As âncoras mínima e máxima são iguais:vector2{X := 0.5, Y := 0.5}

As âncoras mínima e máxima são diferentes: Minimum := vector2{X := 0.4, Y := 0.4}, Maximum := vector2{X := 0.6, Y := 0.6}

Exemplo de posicionamento de widgets na tela

O código a seguir é um exemplo de como posicionar widgets em vários pontos da tela.

Verse

using { /Fortnite.com/Devices }
using { /Verse.org/Simulation }
using { /UnrealEngine.com/Temporary/UI }
using { /Fortnite.com/UI }
using { /UnrealEngine.com/Temporary/SpatialMath}

hello_world_device := class(creative_device):

    # Set the Button device in the Editor to reference the device in the level
    @editable