Puedes colocar los widgets en la pantalla con el widget de lienzo añadiendo widgets a las ranuras de su lienzo.
Botón con el texto Centro en el centro de la pantalla](centered-loud-button-alignment-middle-of-widget.png)
El código siguiente es un ejemplo de widget del lienzo que mostrará el texto "Centro" en un botón situado en el centro de la pantalla.
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):
# Establece el dispositivo Botón en el editor para referenciar dicho dispositivo en el nivel.
@editable
MyButton : button_device = button_device{}
# Un mensaje localizable para mostrar como texto en la interfaz de usuario
TextForMyUI<localizes> : message = "Centro"
# Asignación entre el jugador y el widget que se puede haber añadido a su IU
var MaybeMyUIPerPlayer : [player]?canvas = map{}
# Se ejecuta cuando se inicia el dispositivo en un juego en ejecución
OnBegin<override>()<suspends> : void =
MyButton.InteractedWithEvent.Subscribe(HandleButtonInteraction)
# Una IU personalizada solo puede asociarse a un jugador concreto y solo ese jugador puede verla
HandleButtonInteraction(Agent : agent) : void =
# Los agentes pueden ser un jugador o una IA, pero solo puedes obtener una IU de un jugador.
# Por ello, debes asignar el agente, que ha interactuado con el dispositivo Botón, al tipo de jugador.
if (InPlayer := player[Agent], PlayerUI := GetPlayerUI[InPlayer]):
if (MyUI := MaybeMyUIPerPlayer[InPlayer]?):
PlayerUI.RemoveWidget(MyUI)
if (set MaybeMyUIPerPlayer[InPlayer] = false) {}
else:
NewUI := CreateMyUI()
PlayerUI.AddWidget(NewUI)
if (set MaybeMyUIPerPlayer[InPlayer] = option{NewUI}) {}
# Widget de lienzo que muestra un botón con el texto "Centro" en el centro de la pantalla
CreateMyUI() : canvas =
MyCanvas : canvas = canvas:
Slots := array:
canvas_slot:
Anchors := anchors{Minimum := vector2{X := 0.5, Y := 0.5}, Maximum := vector2{X := 0.5, Y := 0.5}}
Offsets := margin{Top := 0.0, Left := 0.0, Right := 0.0, Bottom := 0.0}
Alignment := vector2{X := 0.5, Y := 0.5}
SizeToContent := true
Widget := button_loud{DefaultText := TextForMyUI}
return MyCanvas
Configuración de espacios del lienzo
Puedes cambiar los siguientes campos de un espacio del lienzo para colocar los widgets en el lienzo:
| Campo | Descripción | Valores |
|---|---|---|
| Anclajes | La ubicación en el lienzo donde se ancla el widget, especificada como porcentaje del lienzo. Cuando el lienzo cambia de tamaño, el widget permanece unido a sus anclajes en el nuevo tamaño del lienzo. Puedes especificar los anclajes máximo y mínimo del widget, que pueden cambiar el tamaño del widget cuando SizeToContent está habilitado. | El rango para los campos X e Y de un anclaje es de 0 a 1, donde vector2{X := 0.0, Y := 0.0} es la parte 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 para los campos X e Y de 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. |
| Desfases | Este campo puede afectar al tamaño y a la posición del widget de dos formas:
|
El margen debe estar entre 0 y 1080. Esta resolución se escalará para ajustarse a la resolución de la pantalla del jugador. |
| SizeToContent | Si está activado, dimensiona el widget como desees. | true/false para representar si esta opción está activada o no. |
La ubicación y disposición de tus elementos de IU depende de la plataforma. La resolución de la IU vendrá determinada por la plataforma que utilice el jugador, y la IU se escalará para ajustarse.
Generalmente, tu flujo de trabajo para posicionar un widget consistirá en 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 ajustar el tamaño del 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.
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.
A continuación se muestra cómo cambiar los anclajes mínimo y máximo puede afectar al tamaño de un widget.
Ejemplo de colocación de widgets en la pantalla
El código siguiente es un ejemplo de colocación de widgets en varios puntos de la pantalla.
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):
# Establece el dispositivo Botón en el editor para referenciar dicho dispositivo en el nivel.
@editable
MyButton : button_device = button_device{}
# Mensajes localizables que se van a mostrar como texto en la IU
TextForMyUI<localizes>(InText : string) : message = "{InText}"
# Asignación entre el jugador y el widget que se puede haber añadido a su IU
var MaybeMyUIPerPlayer : [player]?canvas = map{}
# Se ejecuta cuando se inicia el dispositivo en un juego en ejecución
OnBegin<override>()<suspends> : void =
MyButton.InteractedWithEvent.Subscribe(HandleButtonInteraction)
# Una IU personalizada solo puede asociarse a un jugador concreto y solo ese jugador puede verla
HandleButtonInteraction(Agent : agent) : void =
# Los agentes pueden ser un jugador o una IA, pero solo puedes obtener una IU de un jugador.
# Por ello, debes asignar el agente, que ha interactuado con el dispositivo Botón, al tipo de jugador.
if (InPlayer := player[Agent], PlayerUI := GetPlayerUI[InPlayer]):
if (MyUI := MaybeMyUIPerPlayer[InPlayer]?):
PlayerUI.RemoveWidget(MyUI)
if (set MaybeMyUIPerPlayer[InPlayer] = false) {}
else:
NewUI := CreateMyUI()
PlayerUI.AddWidget(NewUI)
if (establece MaybeMyUIPerPlayer[InPlayer] = option{NewUI}) {}
# Widget de lienzo que muestra un botón con texto en varias posiciones por la pantalla
CreateMyUI() : canvas =
MyCanvas : canvas = canvas:
Slots := array:
canvas_slot: # Parte superior izquierda de la pantalla
Anchors := anchors{Minimum := vector2{X := 0.0, Y := 0.0}, Maximum := vector2{X := 0.0, Y := 0.0}}
Offsets := margin{Top := 0.0, Left := 0.0, Right := 0.0, Bottom := 0.0}
Alignment := vector2{X := 0.0, Y := 0.0}
SizeToContent := true
Widget := button_loud{DefaultText := TextForMyUI("Arriba a la izquierda")}
canvas_slot: # Parte superior central de la pantalla
Anchors := anchors{Minimum := vector2{X := 0.5, Y := 0.0}, Maximum := vector2{X := 0.5, Y := 0.0} }
Offsets := margin{Top := 0.0, Left := 0.0, Right := 0.0, Bottom := 0.0}
Alignment := vector2{X := 0.5, Y := 0.0}
SizeToContent := true
Widget := button_loud{DefaultText := TextForMyUI("Centro superior")}
canvas_slot: # Parte superior derecha de la pantalla
Anchors := anchors{Minimum := vector2{X := 1.0, Y := 0.0}, Maximum := vector2{X := 1.0, Y := 0.0}}
Offsets := margin{Top := 0.0, Left := 0.0, Right := 0.0, Bottom := 0.0}
Alignment := vector2{X := 1.0, Y := 0.0}
SizeToContent := true
Widget := button_loud{ DefaultText := TextForMyUI("Arriba a la derecha")}
canvas_slot: # Parte central izquierda de la pantalla
Anchors := anchors{ Minimum := vector2{X := 0.0, Y := 0.5}, Maximum := vector2{X := 0.0, Y := 0.5}}
Offsets := margin{Top := 0.0, Left := 0.0, Right := 0.0, Bottom := 0.0}
Alignment := vector2{X := 0.0, Y := 0.5}
SizeToContent := true
Widget := button_loud{DefaultText := TextForMyUI("Centro izquierda")}
canvas_slot: # Parte central de la pantalla
Anchors := anchors{Minimum := vector2{X := 0.5, Y := 0.5}, Maximum := vector2{X := 0.5, Y := 0.5}}
Offsets := margin{Top := 0.0, Left := 0.0, Right := 0.0, Bottom := 0.0}
Alignment := vector2{X := 0.5, Y := 0.5}
SizeToContent := true
Widget := button_loud{DefaultText := TextForMyUI("Centro")}
canvas_slot: # Parte central derecha de la pantalla
Anchors := anchors{Minimum := vector2{X := 1.0, Y := 0.5}, Maximum := vector2{X := 1.0, Y := 0.5}}
Offsets := margin{Top := 0.0, Left := 0.0, Right := 0.0, Bottom := 0.0}
Alignment := vector2{X := 1.0, Y := 0.5}
SizeToContent := true
Widget := button_loud{DefaultText := TextForMyUI("Centro derecha")}
canvas_slot: # Parte inferior izquierda de la pantalla
Anchors := anchors{Minimum := vector2{X := 0.0, Y := 1.0}, Maximum := vector2{X := 0.0, Y := 1.0}}
Offsets := margin{Top := 0.0, Left := 0.0, Right := 0.0, Bottom := 0.0}
Alignment := vector2{X := 0.0, Y := 1.0}
SizeToContent := true
Widget := button_loud{DefaultText := TextForMyUI("Inferior izquierda")}
canvas_slot: # Parte central inferior de la pantalla
Anchors := anchors{ Minimum := vector2{X := 0.5, Y := 1.0}, Maximum := vector2{X := 0.5, Y := 1.0}}
Offsets := margin{Top := 0.0, Left := 0.0, Right := 0.0, Bottom := 0.0}
Alignment := vector2{X := 0.5, Y := 1.0}
SizeToContent := true
Widget := button_loud{DefaultText := TextForMyUI("Centro inferior")}
canvas_slot: # Parte inferior derecha de la pantalla
Anchors := anchors{Minimum := vector2{X := 1.0, Y := 1.0}, Maximum := vector2{X := 1.0, Y := 1.0}}
Offsets := margin{Top := 0.0, Left := 0.0, Right := 0.0, Bottom := 0.0}
Alignment := vector2{X := 1.0, Y := 1.0}
SizeToContent := true
Widget := button_loud{DefaultText := TextForMyUI("Inferior derecha")}
return MyCanvas