Puedes crear elementos de interfaz de usuario (IU) personalizados para tu isla en Unreal Editor para Fortnite (UEFN) mediante el uso de un blueprint de widget con el dispositivo de mensajes del HUD y el dispositivo de diálogo emergente.
Existen dos categorías de blueprints de widgets para crear una IU personalizada:
Widget de usuario: se utiliza para crear un mensaje del HUD personalizado.
Variante de diálogo de modo: se utiliza para crear botones personalizados sobre los que se puede hacer clic.
El dispositivo de diálogo emergente solo funcionará con el blueprint Variante de diálogo de modo. Un dispositivo de mensajes 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 la IU.
Widget de usuario
Este widget utiliza el HUD para mostrar un mensaje de la IU personalizado a los jugadores. Utilízalo para enviar a los jugadores en una misión o como dispositivo de narrativa para los personajes de tu isla. Puedes agregar botones al mensaje dentro del flujo de trabajo para variantes de modo de diálogo debajo.
Arrastra un dispositivo de mensajes del HUD hacia el interior del visor. El dispositivo estará listo para conectarse a un blueprint de widgets.
Crear el Blueprint
Haz clic derecho en el explorador de contenido para abrir el menú del explorador de contenido.
Selecciona Interfaz de usuario > Blueprint de widget. Se abre la ruta de widgets.
Selecciona Widget de usuario. Y aparecerá la miniatura de blueprint de widgets en el explorador de contenido.
Cambia el nombre de la miniatura.
Selecciona el dispositivo de mensajes del HUD en el visor, busca la opción avanzada Widget del HUD en el panel de detalles y, luego, selecciona tu blueprint de widgets en el menú desplegable.
Haz doble clic en la miniatura para abrir el editor de widgets.
Selecciona un widget del panel en el menú Panel. Para este ejemplo, se utilizó un panel de lienzo.
Este paso se debe realizar antes de añadir cualquier elemento al widget.
Todo lo que coloques en este panel se mostrará en el mensaje del HUD.
Cambia el tamaño del widget de panel. Para ello, haz clic en la esquina y arrástrala hasta llegar al tamaño deseado. En este ejemplo, el panel es de 1920 x 1080 para ofrecer alta definición (HD) completa.
Haz clic en la imagen para ampliarla.
Importa una imagen en el explorador de contenido; luego, arrastra el widget de imagen hasta el editor de blueprints de widget. Esta será tu imagen de fondo del HUD.
En el panel de detalles, utiliza la opción Tamaño de imagen en Apariencia para cambiar el tamaño de la imagen.
Utiliza los campos de traslación para mover la imagen. Si deseas mover la imagen hacia la izquierda y hacia la derecha, arrástrala hasta el primer campo. Si deseas mover la imagen hacia arriba y hacia abajo, arrástrala hasta el segundo campo.
Arrastra un widget de bloque de texto de UEFN hasta el panel. El widget de bloque de texto es donde crearás el mensaje personalizado del HUD.
El lugar donde coloques el widget de cuadro de texto es donde aparecerá el texto en el mensaje del HUD.
Añade el mensaje personalizado de la IU al campo Texto en el panel de detalles.
Añade color al texto y cambia el estilo de fuente con las opciones de apariencia Color y opacidad, Familia de fuentes y Tamaño.
Si deseas seguir ajustando el texto, puedes sesgar las letras, utilizar el espaciado de letras personalizado o agregar contorno o sombras al texto.
Cuando se active el dispositivo de mensajes del HUD, el mensaje personalizado de la IU aparecerá en el HUD.
Variante de modo de diálogo
Este widget utiliza una interfaz de botones para conectar un dispositivo de diálogo emergente a un dispositivo otorgador de objetos a fin de suministrar un elemento a los jugadores. Para empezar, arrastra los dispositivos de diálogo emergente y otorgador de objetos hacia el interior del visor.
Crear el Blueprint
Haz clic derecho en el explorador de contenido para abrir el menú del explorador de contenido.
Selecciona Interfaz de usuario > Blueprint de widget. Se abre la ruta de widgets.
Selecciona Variante de diálogo de modo. Y aparecerá la miniatura de blueprint de widgets en el explorador de contenido.
Cambia el nombre de la miniatura.
Haz doble clic en la miniatura para abrir el editor de widgets.
Arrastra un widget de panel hacia el interior del visor y cambia su tamaño.
Haz clic en la imagen para ampliarla.
Arrastra un widget de imagen hacia el interior del visor o una importación de arma u objeto y, a continuación, arrastra la imagen desde el explorador de contenido hasta el visor.
Selecciona la alineación de la imagen. Existen distintas alineaciones horizontales y verticales.
Traslada la imagen hacia el interior del visor con las herramientas de traslación. Si deseas mover la imagen hacia la izquierda y hacia la derecha, arrástrala hasta el primer campo. Si deseas mover la imagen hacia arriba y hacia abajo, arrástrala hasta el segundo campo.
Arrastra un widget de botón hacia el interior del visor, selecciona una alineación y traslada el botón mediante los campos de traslación.
Escribe un nombre para el botón en el campo Texto y añade una acción en el campo Texto secundario.
Si solo deseas usar una acción en el botón, agrega la acción al campo Texto solamente. Esto significa que el botón solo dirá "Presionar aquí".
Establece las siguientes opciones de selección:
Seleccionable: activada
Interactivo cuando se selecciona: activada
Esto hace que los botones utilicen el comportamiento del botón cuando reciben entradas del usuario.
Selecciona el dispositivo de diálogo emergente en el visor y busca Widget de modo > Clase de anulación de plantilla en el panel de detalles. Selecciona el botón de IU en el menú desplegable Clase de anulación de plantilla.
Establece la opción Visualización automática en Inicio de la partida. Cuando realices la prueba de juego, el botón aparecerá de forma automática en el inicio del juego.
También puedes establecer esta opción en Nunca y, luego, configurar otro dispositivo para que active el dispositivo de diálogo emergente.
Selecciona el repartidor de objetos y añade el arma u objeto a la Lista de elementos.
El elemento que equipes debes coincidir con la imagen que usas, salvo que utilices un signo de interrogación, en cuyo caso puedes usar cualquier elemento que quieras.
Selecciona el dispositivo de diálogo emergente en el menú desplegable Otorgar objeto y, a continuación, elige la opción Al responder con el botón 1 en la lista de funciones.
Lógica del botón
Ahora ya tienes todo listo para crear la lógica del botón del blueprint de widgets.
Abre el editor de widgets.
Haz clic en el botón Vinculaciones de vista en la parte inferior del editor.
Haz clic en Crear modelo de vista.
Selecciona Modelo de vista de modo de diálogo del modo Creativo > Seleccionar > Cerrar. Esta acción agrega toda la lógica del botón posible que puedes editar en el blueprint de widgets.
Haz clic en Vinculaciones de vista > Añadir widget para abrir el menú de selección de widgets.
Selecciona el widget de botón en el menú desplegable Modelo de vista de modo de diálogo del modo Creativo y, a continuación, haz clic en Seleccionar.
Selecciona Widget de una vía y establece esa opción en Una vía a modelo de vista desde el menú desplegable Modo de vinculación.
Haz clic en el primer campo y selecciona Funciones de conversión > Botón de obtener respuesta 1 > Seleccionar.
Estos números de botón hacen referencia a la colocación en el panel.
Haz clic en el segundo campo y selecciona Modelo de vista de modo de diálogo del modo Creativo > Respuesta > Seleccionar.
Selecciona el widget de botón de UEFN que arrastraste al panel en el menú desplegable Campo y selecciona Evento de clic > Seleccionar.
Haz clic en Compilar.
Realiza una prueba de juego para comprobar que el botón aparece y funciona según lo esperado cuando se lo presiona.