Ventanas emergentes de la IU

Puedes crear elementos de interfaz de usuario (IU) personalizados para tu isla en Unreal Editor para Fortnite (UEFN) utilizando un blueprint de widget con el dispositivo Mensaje del HUD y el dispositivo Diálogo emergente.

Hay dos categorías de blueprint de widget para crear una interfaz de usuario personalizada:

• Widget de usuario: sirve para crear un mensaje del HUD personalizado.

• Variante de diálogo modal: sirve para crear botones personalizados en los que se puede hacer clic.

  El dispositivo Diálogo emergente solo funcionará con un blueprint Variante de diálogo modal. Un dispositivo Mensaje del HUD funciona con ambos tipos de blueprint.

Para obtener más información sobre el editor de widgets, consulta el documento Editor de widgets de interfaz de usuario.

Widget de usuario

Este widget utiliza el HUD para mostrar un mensaje de IU personalizado a los jugadores. Utilízalo para enviar a los jugadores a una misión, o como recurso narrativo para los personajes de tu isla. Puedes añadir botones a tu mensaje dentro del proceso de trabajo de Variante de diálogo modal que aparece a continuación.

Arrastra un dispositivo Mensaje del HUD al visor. El dispositivo estará listo para conectarse a un blueprint de widget.

Cómo crear el blueprint

1. Haz clic con el botón derecho del ratón en el explorador de contenido para abrir el menú Explorador de contenido.

   

2. Selecciona Interfaz de usuario > Blueprint de widget. Se abrirá la ruta del widget.

3. Selecciona Widget de usuario. La miniatura del blueprint de widget aparece en el explorador de contenido.

   

4. Cambia el nombre de la miniatura.

   

5. Selecciona el dispositivo Mensaje del HUD en el visor, busca la opción avanzada Widget del HUD en el panel Detalles y, a continuación, selecciona tu blueprint de widget en el menú desplegable.

   

6. Haz doble clic en la miniatura para abrir el editor de widgets.

7. Selecciona un widget de panel del menú Panel. En este ejemplo se utiliza un panel de lienzo.

   Este paso debe realizarse antes de añadir ningún elemento al widget.

   

   Lo que coloques en este panel se mostrará en el mensaje del HUD.

8. Cambia el tamaño del widget del panel haciendo clic en la esquina y arrastrando hasta el tamaño deseado. En este ejemplo, el panel es de 1920 × 1080 para alta definición (HD) completa.

   Haz clic en la imagen para ampliarla.

9. Importa una imagen en el explorador de contenido y, a continuación, arrastra el widget de imagen al editor de blueprints de widget. Esta será la imagen de fondo de tu HUD.

10. Cambia el tamaño de la imagen desde el panel Detalles a través de la opción Tamaño de imagen en Apariencia.

    

11. Desplaza la imagen utilizando los campos de Traslación. Al arrastrar en el primer campo, la imagen se desplaza a izquierda y derecha. Al arrastrar en el segundo campo, la imagen se mueve hacia arriba y hacia abajo.

    

12. Arrastra un widget Bloque de texto de UEFN al panel. El widget de bloque de texto es donde crearás tu mensaje del HUD personalizado.

    Donde coloques el widget de cuadro de texto es donde aparecerá el texto en el mensaje del HUD.

13. Añade tu mensaje de IU personalizado al campo Texto del panel Detalles.

14. Añade color a tu texto y cambia el estilo de la fuente con las opciones de apariencia Color y opacidad, Familia de fuentes y Tamaño.

    Puedes ajustar aún más el texto inclinando las letras, utilizando un espaciado de letras personalizado o añadiendo un esquema o sombras al texto.

Cuando se active tu dispositivo Mensaje del HUD, el mensaje de IU personalizado aparecerá en el HUD.

Variante de diálogo modal

Este widget utiliza una interfaz de botones para conectar un dispositivo Diálogo emergente y a un dispositivo Repartidor de objetos para suministrar un objeto a los jugadores. Para empezar, arrastra un dispositivo Diálogo emergente y un dispositivo Repartidor de objetos al visor.

Cómo crear el blueprint

1. Haz clic con el botón derecho del ratón en el explorador de contenido para abrir el menú Explorador de contenido.

   

2. Selecciona Interfaz de usuario > Blueprint de widget. Se abrirá la ruta del widget.

3. Selecciona Variante de cuadro de diálogo modal. La miniatura del blueprint de widget aparece en el explorador de contenido.

   

4. Cambia el nombre de la miniatura.

   

5. Haz doble clic en la miniatura para abrir el editor de widgets.

6. Arrastra un widget de panel al visor y cambia su tamaño.

   Haz clic en la imagen para ampliarla.

7. Arrastra un widget de imagen al visor o importa un arma u objeto y arrastra la imagen desde el explorador de contenido al visor.

8. Selecciona la alineación de la imagen. Hay diferentes alineaciones horizontales y verticales.

   

9. Traslada la imagen dentro del visor mediante las herramientas de traslación. Al arrastrar en el primer campo, se mueve la imagen a derecha e izquierda; al arrastrar en el segundo campo, se mueve la imagen hacia arriba y hacia abajo.

   

10. Arrastra un widget de botón al visor, selecciona una alineación y, a continuación, traslada el botón utilizando los campos de Traslación.

11. Nombra el botón en el campo Texto y añade una acción en el campo Texto secundario.

    

    Si solo quieres utilizar una acción en el botón, añade la acción solo al campo Texto. Esto significa que tu botón puede decir simplemente «Pulsa aquí».

12. Configura las siguientes opciones de Selección:

    1. Seleccionable: activado

    2. Interactivo al seleccionarse: activado

    

    Esto hace que los botones utilicen el comportamiento de botón al recibir la entrada.

13. Selecciona el dispositivo Cuadro de diálogo emergente en el visor y busca Widget modal > Clase de anulación de plantilla en el panel Detalles. Selecciona el botón de IU del menú desplegable Clase de anulación de plantilla.

    

14. Configura Opción de visualización automática en Inicio del juego. Cuando hagas la prueba de juego, el botón aparecerá automáticamente al inicio de la partida.

    También puedes establecer esta opción en Nunca y luego configurar otro dispositivo para que active el dispositivo Diálogo emergente.

15. Selecciona el repartidor de objetos y añade el arma u objeto a la lista de objetos.

    El objeto que incluyas debe coincidir con la imagen que utilices, a menos que uses un signo de interrogación, en cuyo caso puedes utilizar cualquier objeto que desees.

16. Selecciona el dispositivo Cuadro de diálogo emergente del menú desplegable Objeto otorgado y selecciona Al responder con el botón 1 de la lista de funciones.

    

Lógica del botón

Ahora está todo listo para crear la lógica del botón para el blueprint de widget.

1. Abre el editor de widgets.

2. Haz clic en el botón Ver vinculaciones en la parte inferior del editor.

   

3. Haz clic en Crear modelo de vista.

   

4. Selecciona Modelo de vista del cuadro de diálogo modal del modo Creativo > Seleccionar > Cerrar. Esto añade al blueprint de widget toda la lógica del botón posible que puedas editar.

   

5. Haz clic en Ver vinculaciones > Añadir widget para abrir el menú de selección de widgets.

   

6. Selecciona el widget de botón del desplegable Modelo de vista del cuadro de diálogo modal del modo Creativo y luego haz clic en Seleccionar.

   

7. Selecciona Widget unidireccional y establécelo en Una vía para el modelo de vista en el menú desplegable Modo de vinculación.

   

8. Haz clic en el primer campo y selecciona Funciones de conversión > Botón Obtener respuesta 1 > Seleccionar.

   

   Estos números de botón se refieren a la colocación en el panel.

9. Haz clic en el segundo campo y selecciona Modelo de vista del cuadro de diálogo modal del modo Creativo > Respuesta > Seleccionar.

   

10. Selecciona el widget de botón de UEFN que arrastraste al panel desde el menú desplegable Campo y selecciona Evento de clic > Seleccionar.

    

11. Haz clic en Compilar.

Prueba el juego para asegurarte de que el botón aparece y funciona como es debido al pulsarlo.