En esta sección, aprenderás a crear superposiciones de IU totalmente personalizadas para tus juegos siguiendo los pasos para recrear la IU de jugador de la plantilla de arcade de las Tortugas Ninja.
El desglose básico de los pasos es el siguiente:
Añade vinculaciones de vista a cada elemento de widget interactivo.
Crea una pila de información del jugador para varios jugadores simultáneos.
Configura el dispositivo controlador del HUD para mostrar la IU personalizada.
Descarga gratis el paquete de texturas del Laboratorio de materiales de IU y experimenta con tus propias configuraciones de IU.
Haz clic en la imagen para ampliarla.
¡Comencemos!
Configura los widgets personalizados
En el explorador de contenido, ve a Todo > [NOMBRE de tu proyecto] > IU > Widgets y abre el blueprint de widget UW_HUD_PlayerInfoBlock.
A la izquierda, verás la pestaña Jerarquía, que funciona igual que el esquematizador de la ventana principal del editor y muestra los distintos componentes del widget terminado.
Placa trasera
La sección superior está formada por tres imágenes de placas traseras que definen el aspecto en capas de la IU. Esto incluye lo siguiente:
Backplate1_Image: la capa de fondo de color gris
Backplate2_Image: la capa de contorno naranja
Backplate3_Image: la capa de contorno blanco
En conjunto, estas imágenes crean el estilo enmarcado del panel de información del jugador.
Al importar imágenes para usar tu IU, asegúrate de establecer Grupo de texturas en IU y Configuración de compresión en UserInterface2D(RGBA8).
Nombre del jugador
Este componente está formado por dos elementos: un nombre de jugador activo y un nombre de jugador inactivo, que se mostrarán cuando el jugador esté vivo, eliminado o desconectado en el juego.
Elige dos colores distintos que informarán a los jugadores quién de su equipo está actualmente activo y quién está eliminado.
Para el nombre del jugador activo, establece la Visibilidad en Visible, y para el inactivo, establece esta opción en Oculto. Solo se mostrará en determinadas condiciones.
Establece el Ancho de anulación en 220.0 para que los nombres de jugador más largos no se solapen con el ícono del avatar del jugador.
Ícono del avatar del jugador
Este componente muestra el retrato del personaje del jugador basado en su revestimiento elegido en el juego.
El componente está vinculado a una instancia de material llamada MI_UI_PlayerCard, que se encuentra en la carpeta IU > Instancias de material .
Puedes personalizar esta instancia de material a tu gusto cambiando la configuración en el panel de detalles. Prueba a importar tu propia imagen y añadir algunos colores de contorno.
En este ejemplo, la imagen elegida es una imagen transparente vacía que se conectará más tarde al revestimiento del personaje.
Vida
Este componente contiene las regiones que mostrarán los niveles de vida y escudo del jugador.
A nivel base, puedes ver la caja de tamaño que determina lo grande que puede ser la región.
A continuación se muestra la imagen de la placa trasera de vida, que se llama MI_UI_Health_Backplate. Este material de IU también se está disponible en Fortnite > IU > Materiales. Es muy personalizable y puede ofrecer muchas opciones para mostrar la barra de vida del jugador nada más sacarlo de la caja.
Encima de la placa trasera hay una caja apilable formada por dos componentes: una barra de vida y una sombra denominadas Health_Image y Health_Shadow, respectivamente.
Health_Image es un material de IU de barra de progreso personalizable. Si abres la instancia de material, puedes acercarte cambiando el Tamaño de vista previa.
Intenta cambiar algunos de los ajustes en el panel de detalles para ver cómo afectan al material existente.
Como los valores de los parámetros escalares (el estado de relleno de la barra de progreso) van de 0 a 1, y los valores de vida y escudo de Fortnite suelen ser de 0 a 100, es importante establecer el Multiplicador en 0.01 para que los valores de vida y de escudo se muestren de forma correcta a los jugadores.
La barra Health_Shadow es una simple superposición sombreada añadida con fines estéticos.
Escudo
El componente de escudo está formado por un fondo Shields_Container que muestra el área vacía del escudo en gris oscuro, y una Shields_Image que contiene el material de IU de la barra de progreso.
La Shield_Image utiliza una instancia básica de material de barra de progreso, que es una versión simplificada del material Health_Image.
Cómo añadir la vista de vinculaciones
Ahora que construiste los componentes básicos de la IU para tu juego, practiquemos agregando vinculaciones de vista que permitirán que cada uno de los componentes se actualice en base a los datos que reciben de una sesión en vivo.
Nombre del jugador
Para que el nombre de un jugador aparezca en el campo correcto, sigue estos pasos:
Abre la pestaña Vista de vinculaciones haciendo clic en Ventana > Vista de vinculaciones o seleccionando Vista de vinculaciones en la parte inferior de la pantalla y acoplándola.
Para ver la lista HUDPlayerInfoViewModel de vinculaciones de vista:
1. Abre la ventana Modelos de vista seleccionando Ventana > Modelos de vista.
1. Ve a +Modelo de vista y selecciona HUD - Base de modelos de vista de la información del jugador.
1. Haz clic en Dispositivo: Modelo de vista de información del jugador del controlador del HUD y haz clic en Seleccionar.
Selecciona NameActive_Text en la lista Jerarquía o haz clic en el área de nombre del jugador de la pantalla de vista previa de la IU.
Haz clic en + Añadir widget NameActive_Text y selecciona Texto en el menú desplegable.
En el campo vacío que aparece a la derecha, selecciona HUDPlayerInfoViewmodel y Nombre del jugador en el menú desplegable.
La vinculación final debería verse de la siguiente manera:
Repite los pasos 1 a 3 para el elemento NameInactive_Text.
Para modificar los ajustes de visibilidad del nombre inactivo, añade un nuevo widget a NameInactive_Text y selecciona Visibilidad del menú desplegable.
Haz clic en el campo vacío que aparece a la derecha y selecciona Funciones de conversión > A visibilidad (booleano).
Al seleccionar esta opción, aparecen tres nuevos campos. Haz clic en el ícono de enlace que se encuentra al lado de Está visible. En el menú, selecciona HUDPlayerInfoViewModel y Eliminado.
Establece la visibilidad verdadera en No es comprobable (solo para uno mismo) más abajo. Deja la visibilidad falsa en Plegados. Cuando el jugador queda eliminado o se desconecta, el nombre reemplaza al NameActive_Text pero, cuando el jugador está vivo, permanece plegado.
La vinculación final NameInactive_Text debería verse de esta manera:
Pulsa Compilar para enviar los cambios, ¡y ya terminaste con los nombres de los jugadores!
Ícono del avatar del jugador
Elige Profile_Image en la Jerarquía o haz clic en el área del ícono del jugador en la pantalla de vista previa de la IU.
Haz clic en + Añadir widget Profile_Image.
Ve a Profile_Image > Pincel y pulsa Seleccionar. Esta vinculación se realiza esencialmente en la configuración del pincel seleccionado en el panel de detalles de Profile_Image.
Haz clic en el campo vacío que aparece a la derecha y selecciona Funciones de conversión > Establecer parámetro de textura.
Escribe Textura en el campo Nombre de parámetro. Para encontrar el nombre de este campo, abre la instancia de material del avatar del jugador.
Para las funciones Establecer parámetro de vector/escalar/textura, asegúrate de que los nombres de los parámetros de la instancia de material coincidan exactamente con los del campo Nombre de parámetro.
Haz clic en el ícono de enlace junto al campo Valor y selecciona HUDPlayerInfoViewModel > Ícono de avatar del jugador.
La vinculación final debería verse de la siguiente manera:
Vida y escudo
Elige Health_Image en la Jerarquía o haz clic en el área de la barra de vida en la pantalla de vista previa de la IU.
Haz clic en + Añadir widget Health_Image.
Ve a Profile_Image > Pincel y pulsa Seleccionar.
Haz clic en el campo vacío que aparece a la derecha y selecciona Funciones de conversión > Establecer parámetro escalar.
Escribe Progreso en el campo nombre de parámetro. Para encontrar el nombre de este campo, abre la instancia de material del avatar del jugador.
Haz clic en el ícono de enlace junto a Valor y selecciona HUDPlayerInfoViewModel > Vida.
El progreso muestra un porcentaje de la vida restante del jugador y, como el Multiplicador se fijó en 0.1, cada punto porcentual moverá la barra de progreso por 1/100. Puedes probarlo cambiando de manera arbitraria el valor del porcentaje en la instancia de material para ver cómo se mueve la barra de progreso.
Porcentaje de vida Haz clic en la imagen para ampliarla.
La vinculación final debería verse de la siguiente manera:
En cuanto a la barra de escudo, repite los pasos 1 a 6, pero elige Escudo en vez de Vida.
La vinculación final para el escudo debería verse de la siguiente manera:
Presiona Compilar para enviar los cambios.
Widget completo
Esta vinculación garantiza que todo el widget se muestre solo después de que un jugador se conecte al juego.
Elige PlayerInfoBlock_Overlay en la Jerarquía.
Selecciona + Añadir widget PlayerInfoBlock_Overlay y después elige Visibilidad desde el menú desplegable.
Haz clic en el campo vacío que aparece a la derecha y selecciona Funciones de conversión > A visibilidad (booleano). Al seleccionar esta opción, aparecen tres nuevos campos.
Haz clic en el ícono de enlace que se encuentra al lado de Está visible. En el menú, selecciona HUDPlayerInfoViewModel y Desconectado.
Establece Visibilidad verdadera en Colapsado, y Visibilidad falsa en No es comprobable (solo para uno mismo).
La vinculación final debería verse de esta manera. Pulsa Compilar para guardar los cambios.
Eso es todo. ¡Ya configuraste todo el widget de la IU que mostrará la información en el juego!
Cómo crear una pila de jugadores
En esta sección, verás cómo crear un widget de usuario que muestre jugadores adicionales en el escuadrón con el jugador controlador.
Para comenzar, crea un nuevo blueprint de widget haciendo clic derecho en el explorador de contenido y selecciona Interfaz de usuario > Blueprint de widget.
Selecciona Widget de usuario en el cuadro de diálogo y cámbiale el nombre a HUDInfoStack.
Haz doble clic en el widget de usuario para abrir una nueva ventana del editor.
En el panel Paleta , arrastra un elemento de superposición al panel Jerarquía para comenzar.
Arrastra una caja apilable al nivel debajo de superposición y cámbiale el nombre a PlayerInfoStack.
Desde el panel de modelos de vista, pulsa +Modelo de vista y selecciona Dispositivo - Lista de información de jugadores del escuadrón/equipo del controlador del HUD.
Ve al panel de detalles y pulsa +Añadir extensión de modelo de vista. Esto permite al PlayerInfoStack aceptar una clase de widget de entrada.
Si no te aparecen estas opciones, intenta compilar el widget una vez más.
En cuanto a la clase de widget de entrada, selecciona el PlayerInfoBlock que se creó anteriormente. Luego, selecciona HUDPlayerInfoViewmodel como el modelo de vista de entrada.
En la sección Plantilla de ranuras, puedes ajustar el espaciado entre cada widget y la alineación además de previsualizar cómo quedaría una determinada cantidad de widgets en el juego.
Espaciado entre widgetsHaz clic en el gif para ampliarlo.
En el panel Vinculaciones de vista, haz clic en +Añadir widget y elige HUDInfoStack. Elige PlayerInfoStack_Viewmodel_Extension, expande esta opción para ver Establecer elementos y, luego, selecciónala. Si PlayerInfoStack_Viewmodel_Extension no aparece en la lista, pulsa Compilar para que aparezca.
En el campo vacío que aparece a la derecha, selecciona HUDPlayerInfoListViewModel > Matriz de información de jugadores de escuadrón/equipo. Esto pasará la matriz de modelos de vista de información del jugador a la extensión recién configurada con una función que se llama Establecer elementos.
Pulsa Compilar para guardar los cambios. Ya tienes todo preparado para añadirlos a tu juego mediante el uso del dispositivo de control del HUD.
Si quieres crear un widget para el jugador controlador que esté separado del resto del escuadrón, sigue estos pasos:
Crea un nuevo widget para el jugador controlador y configura las vinculaciones como lo habías hecho antes utilizando Dispositivo - Modelo de vista de la información del jugador del controlador del HUD.
Coloca este widget debajo del widget base que contiene las cajas apiladas.
Crea una vinculación para ese widget. En el campo de la izquierda, selecciona Dispositivo - Modelo de vista de la información del jugador del controlador del HUD. En el campo de la derecha, selecciona Dispositivo - Lista de información de jugadores del escuadrón/equipo del controlador del HUD > Información del jugador controlador.
Configura el dispositivo Control del HUD
Busca el dispositivo de control del HUD en el explorador de contenido y arrástralo a tu escena.
En las opciones de usuario, elige lo que quieres que vea el jugador y garantiza que Mostrar HUD esté en Sí y Mostrar información del equipo esté en No.
Desplázate hacia abajo hasta Anulación del widget de información del jugador y arrastra el widget HUDInfoStack al campo vacío. Asegúrate de que sea el widget de pila que se acaba de crear y no el widget original que creaste.
Haz clic en Guardar.
¡Eso es todo! Ahora debería aparecer la nueva interfaz de usuario cuando pruebes el juego.
A continuación
¡Aprenderás a configurar las cámaras y los dispositivos de controles para tu juego de desplazamiento lateral!
