Cómo colocar widgets en la pantalla en Unreal Editor para Fortnite | Fortnite Desarrllador

Los widgets se colocan en la pantalla con el widget de canvas añadiendo widgets a sus ranuras de canvas.

Botón con el texto Centro en el medio de la pantalla

El siguiente código es un ejemplo de un widget de canvas que mostrará el texto "Centro" en un botón en el medio de la pantalla.

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

Configuración de la ranura de canvas

Puedes cambiar los siguientes campos de una ranura de canvas para ajustar la posición de los widgets en el canvas:

Campo	Descripción	Valores
Anclajes	La ubicación en el lienzo donde se ancla el widget, especificada como un porcentaje del lienzo. Cuando el canvas cambia de tamaño, el widget queda unido a sus anclas en el nuevo tamaño de canvas. Puedes especificar los anclajes máximos y mínimos del widget, que pueden cambiar el tamaño del widget cuando SizeToContent está habilitado.	El rango para los campos X e Y de un ancla es de 0 a 1, donde `vector2{X := 0.0, Y := 0.0}` es la esquina superior izquierda del lienzo y `vector2{X := 1.0, Y := 1.0}` es la parte inferior derecha del lienzo.
Alineación	La parte del widget que está en el lugar de anclaje. Por ejemplo, si el campo Alineación es `vector2{X := 0.5, 1.0}`, el centro inferior del widget se sitúa en la ubicación del anclaje.	El rango de los campos X e Y para Alineación es de 0 a 1, donde `vector2{X := 0.0, Y := 0.0}` es la parte superior izquierda del widget y `vector2{X := 1.0, Y := 1.0}` es la parte inferior derecha del widget.
Compensaciones	Este campo puede afectar el tamaño y la posición del widget de dos maneras: Cuando los campos Anclajes y Alineación están definidos, este campo puede especificar el desplazamiento desde el anclaje para colocar el widget. Cuando el widget está anclado de forma que el tamaño no tiene sentido, este campo puede representar el espacio de tamaño asignado al widget. Sin embargo, si SizeToContent está habilitado, el widget tomará el tamaño necesario.	El margen debe estar en el rango de 0 a 1080. Esta resolución se escalará para ajustarse a la resolución de la pantalla del jugador.
SizeToContent	Cuando está habilitado, dimensiona el widget según lo deseado.	`true`/`false` para representar si esta opción está habilitada o no.

La ubicación y la disposición de tus elementos de IU depende de la plataforma. La resolución de la IU estará determinada por la plataforma que utilice el jugador, y la IU se escalará para ajustarse.

En general, tu flujo de trabajo para colocar un widget establecerá los campos en el siguiente orden:

Anclajes para especificar dónde debe aparecer el widget en el lienzo, incluso cuando este cambie de tamaño.
Alineación para especificar qué parte del widget se coloca en la ubicación del anclaje.
Desplazamientos para aplicar un desplazamiento desde el punto de anclaje.
SizeToContent para dimensionar el widget según sea necesario.

A continuación se muestra cómo al cambiar el margen de desplazamientos, cambia el lugar en el que aparece el widget en relación con la ubicación del anclaje.

El margen superior de desplazamiento es 0.0

El margen superior de desplazamiento es 50.0

A continuación se muestra cómo cambiar el campo Alineación afecta a qué parte del widget se encuentra en la ubicación del anclaje.

Alineación configurada en el centro del widget, vector2{X := 0.5, Y := 0.5}

Alineación configurada en la parte superior izquierda del widget, vector2{X := 0.0, Y := 0.0}

A continuación, se muestra cómo cambiar los anclajes mínimo y máximo puede afectar el tamaño de un widget.

Los anclajes mínimo y máximo son iguales: vector2{X := 0.5, Y := 0.5}

Los anclajes mínimo y máximo son diferentes: Mínimo := vector2{X := 0.4, Y := 0.4}, Máximo := vector2{X := 0.6, Y := 0.6}

Ejemplo de cómo colocar widgets en la pantalla

El siguiente código es un ejemplo de posicionamiento de widgets en varios puntos de la pantalla.

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