Crea barras personalizadas de vida y de escudo en Unreal Motion Graphics (UMG) con materiales de la IU, texturas de la IU y varios widgets en la paleta para reemplazar la interfaz de usuario (IU) predeterminada de Fortnite. Las barras de vida y de escudo pueden añadirse a una placa de identificación o colocarse por separado en el HUD.
El diseño y la colocación de las barras de vida y de escudo son exclusivos de cada juego, y tienen en cuenta el tipo de juego (juego de lucha, cooperativo multijugador, juego de rol, etc.).
Cómo configurar instancias de material sin modificar los materiales
En este ejemplo, utilizarás una variedad de materiales que se crearon en UEFN. Incluyen una barra de progreso en forma de rectángulo (cuadro) y círculo. La barra de progreso rectangular también cuenta con una opción para convertir la barra de progreso en secciones.
Los materiales se configuraron mediante una combinación de funciones de materiales del Laboratorio de materiales de la IU, los parámetros que se exponen a la instancia de material y algunas operaciones matemáticas para que todo funcione.
Se recomienda utilizar materiales para los widgets. Los materiales se actualizan dinámicamente en función de los datos del juego, lo cual ayuda a optimizar la IU y ofrece una forma de añadir efectos especiales. Las texturas solo se utilizan para un diseño más complicado que no se puede lograr fácilmente con funciones matemáticas.
Para obtener más información sobre el uso de materiales como parte del diseño y la implementación de la IU, consulta Materiales útiles de la IU. En el tutorial, se ofrece más información sobre el uso de campos de distancia con signo (SDF) para crear materiales de barra de progreso dinámica en UEFN y UE.
Una instancia de material crea instancias de un material con parámetros que pueden modificar fácilmente la apariencia de dicho material sin recompilarlo. Para crear una instancia de un material, haz clic derecho en un material y selecciona Crear instancia de material.
Para obtener más información sobre las instancias de material, consulta Cómo crear y usar las instancias de materiales en la documentación de Unreal Engine.
Hay algunos parámetros expuestos en UEFN. En el material de ejemplo, el parámetro de progreso cambia en función de cuánto se llena la barra. El rango se normaliza a 0-100 mediante el nodo ConstantBiasScale en la M_CircleProgressBar para que encaje en el rango de PV de Fortnite.
Puedes cambiar el color de fondo (BGColor) y el color líquido que son degradados. Luego, puedes obtener una vista previa de tus cambios en el visor de vista previa de la izquierda.
Puedes crear tantas instancias de materiales como necesites para distintos propósitos. En este ejemplo, se utilizan dos materiales, uno para los PV, y otro para el escudo.
Prácticas recomendadas para el diseño de widgets
Solo en UMG, se utiliza el panel de lienzo si necesitas una posición absoluta en la pantalla o si deseas manipular con precisión la ubicación de varios widgets.
Para widgets más pequeños, utiliza lo siguiente:
Superposición
Cajas apiladas
Cajas de tamaño (si necesitas restringir tu widget a un tamaño específico)
Panel de cuadrícula (si quieres mantener el tamaño de tu contenedor, pero deseas manipular la posición de los widgets derivados)
Una vez que los materiales estén listos, crea un blueprint de widgets en el explorador de contenido y haz doble clic en la miniatura del widget para abrir el editor de UMG.
Cómo usar un panel de lienzo
En este ejemplo, el panel de lienzo se utiliza para colocar las barras de vida y de escudo en una posición absoluta en el HUD al anclar los widgets a ciertas partes de la pantalla.
En el caso de los elementos individuales del HUD, se recomienda utilizar una combinación de los siguientes widgets:
Superposición: si necesitas superponer un widget uno encima de otro
Cajas apiladas: si necesitas colocar tus widgets horizontal o verticalmente
Cajas de tamaño: si necesitas restringir el widget a un tamaño específico
Panel de cuadrícula: si deseas mantener el tamaño de tu contenedor pero quieres manipular la posición de los widgets derivados dentro de él
Con esto en mente, comienza a diseñar los widgets de vida y de escudo.
Crea un contenedor para toda la IU del HUD. Para ello, utiliza un panel Lienzo como contenedor a fin de albergar todos los elementos individuales del HUD.
En este ejemplo, la vida y los escudos se anclarán en la parte inferior central de la pantalla.
Anida una caja apilada en Lienzo para crear el contenedor de vida y escudo. Para este diseño, estos elementos se apilarán de izquierda a derecha.
Si deseas diseñar tus widgets en una caja apilada verticalmente, cambia la configuración de orientación en el panel de detalles en Comportamiento > Orientación.
Cambia el nombre de tus widgets seleccionándolos y presionando F2 a medida que los añadas a tu jerarquía para que haya una mejor organización.
Selecciona la caja apilada en la jerarquía, y en el panel de detalles, deberías ver la opción de anclajes. Abre la opción presionando Shift + Control. Ancla la caja apilada a la parte inferior central del HUD seleccionando la opción en la fila 3, columna 2.
Ahora, la caja apilada debería estar anclada a la parte inferior. Con el ícono de la flor, se muestra dónde está anclado el widget en el panel de lienzo.
Desplaza la caja apilada hacia arriba para que no quede pegada al borde inferior de la pantalla. Haz esto editando la opción Posición Y.
Los valores positivos desplazan el widget hacia abajo, mientras que los valores negativos lo desplazan hacia arriba.
Marca la casilla de verificación Ajustar tamaño al contenido para asegurarte de que el contenedor siempre cambie de tamaño en función del contenido que haya dentro de él.
Cómo configurar la barra de PV y el texto
Ahora que el contenedor de vida y de escudo está listo, configura el widget de vida y de escudo.
Anida una superposición en la caja apilada y cámbiale el nombre a HPOverlay. Esto hace que el texto de PV se superponga a la barra redonda de PV.
Anida una imagen en HPOverlay y cámbiale el nombre a HPBar. Esto ofrece una manera de añadir la instancia de material que creaste anteriormente a tu widget.
Selecciona HPBar en la jerarquía; en Detalles, en Pincel> Imagen, selecciona tu instancia de material personalizada de la barra de vida.
Para cambiar el tamaño de la instancia de material, puedes personalizar la propiedad de tamaño de la imagen que figura a continuación.
Anida un bloque de texto en HPOverlay y cámbiale el nombre a HPText. Esto permite añadir texto encima de la barra circular de vida.
Selecciona el bloque de texto y, en Detalles, establece la alineación horizontal y vertical en centro. Esto garantiza que el texto siempre se alinee en el centro de la HPBar.
Haz clic en la imagen para ampliarla.
Cambia el tamaño de fuente en Apariencia > Fuente > Tamaño para que quepa en la barra de PV.
Haz clic en la imagen para ampliarla.
Haz clic en Compilar. ¡Ahora tienes una barra de PV y un texto de PV listos!
Cómo configurar la barra de escudo y el texto
Para configurar la barra de escudo y el texto, repite los mismos pasos anteriores. Esta vez, añade un espacio entre la barra de PV y la barra de escudo. Dado que HPShieldsContainer es una caja apilada, dispone automáticamente los widgets derivados de forma horizontal.
Usa un widget de imagen dentro de la caja apilada para añadir un espacio entre las barras de vida y de escudo. Configura el widget de imagen en blanco de la siguiente manera:
Anida una imagen en la caja apilada.
Establece las propiedades del pincel de la imagen de Trazar como en Ninguno.
Esto significa que no aparecerá nada en el widget, pero el widget de imagen seguirá ocupando espacio en el diseño. Esto te permite administrar fácilmente el espaciado entre elementos en una caja apilada sin necesidad de depender del relleno.
Configura el widget de escudo mediante el mismo proceso que la barra de vida.
Para crear la barra de escudo más rápido, duplica el HPOverlay haciendo clic derecho en HPOverlay en la jerarquía y seleccionando Duplicar.
Anida la ShieldOverlay debajo de la imagen del espaciador para que aparezca al final de la caja apilada.
Los dos tipos de barras aparecen en paralelo en el widget.
Cambia el nombre de tus variables a ShieldOverlay, ShieldBar y ShieldText como se ve en la imagen de jerarquía de widgets que aparece a continuación.
Ahora puedes crear las vinculaciones que añaden funcionalidad a las barras de progreso de vida y de escudo.
Vista de vinculaciones
Cómo añadir un modelo de vista
Un modelo de vista permite añadir funcionalidades de dispositivo a un blueprint de widget. El modelo de vista utiliza vistas de vinculaciones para identificar widgets en el blueprint y graficar la funcionalidad del dispositivo para dicho widget.
El modelo de vista de información del jugador del controlador del HUD permite reemplazar partes del HUD con un widget personalizado.
Selecciona Ventana > Modelos de vista para abrir y añadir un Modelo de vista a tu widget.
En la ventana Modelo de vista, selecciona +Modelo de vista. Esto abre una ventana emergente en la que se muestran todos los modelos de vista disponibles actualmente para su uso.
Hay dos tipos disponibles de modelos de vista de controlador del HUD:
Selecciona Dispositivo: modelo de vista de lista de información de jugadores de equipo/escuadrón del controlador del HUD en las opciones de HUDPlayerInfoListViewModel. Según la información anterior, solo debes mostrar la información del jugador controlador y no la de su equipo/escuadrón.
Selecciona Dispositivo: modelo de vista de información de jugadores del controlador del HUD si quieres crear widgets separados para el jugador controlador y su escuadrón/equipo. Usa las propiedades en Dispositivo: modelo de vista de información de jugadores del controlador del HUD para cada uno de estos widgets. A continuación, tendrás que crear un widget de la pila de escuadrones que vincule los modelos de vista de la lista de información de jugadores del equipo/escuadrón a sus modelos de vista.
El modelo de vista de lista de información de jugadores de equipo/escuadrón tiene la misma información que el modelo de vista de información de jugadores del controlador del HUD, pero se usa de manera diferente según la situación.
Selecciona el modelo de vista de lista de información de jugadores de equipo/escuadrón en las opciones de HUDPlayerInfoListViewModel. Según la información anterior, solo debes mostrar la información del jugador controlador y no la de su equipo/escuadrón.
Ahora es el momento de configurar las vinculaciones que vinculan los datos del modelo de vista a tu widget.
Cómo configurar las vistas de vinculaciones de ToText
Selecciona Ventana > Vista de vinculaciones para abrir la ventana Vista de vinculaciones.
Selecciona HPText en tu jerarquía y selecciona Añadir widget en Vista de vinculaciones para vincular HPText a fin de que muestre tu número de vida actual. Aparece una vinculación vacía.
El cuadro de la izquierda es la propiedad del widget, y el cuadro de la derecha son los datos que deseas vincular a la propiedad del widget. Haz clic en el cuadro izquierdo, y aparecerá una lista de propiedades para el bloque de texto HPText. Selecciona la propiedad de texto para pasar los números de PV a esta propiedad.
El cuadro de la derecha son los datos que deseas pasar a la propiedad del widget seleccionado. Sin embargo, la propiedad de texto solo acepta datos del tipo texto. Dado que la cantidad de PV de Fortnite viene en un tipo float (es decir, doble), es necesario convertirla al tipo de texto adecuado. Haz clic en el cuadro de la derecha y selecciona Funciones de conversión > A texto (doble).
Aparecerá una extensa lista de opciones. Las configuraciones más importantes suelen figurar en la parte superior, mientras que el resto de las configuraciones te permiten formatear el valor final que se pasa a tu propiedad de texto.
Haz clic en la imagen para ampliarla.
Selecciona el ícono de enlace junto al valor y, luego, selecciona tu valor de vida desde el modelo de vista del controlador del HUD.
Haz clic en el campo vacío y selecciona HUDPlayerInfoListViewmodel en la columna de la izquierda, expande la información del jugador controlador en la derecha y selecciona Vida.
Esto pasa la propiedad de vida, un tipo float (es decir, doble), a través de la función de conversión A texto (doble). A texto (doble) convierte la vida en un tipo de texto para que se muestre en el widget. La vida convertida se pasa a la propiedad de texto de tu widget de HPText.
Repite los pasos anteriores para configurar el widget de ShieldText. A su vez, las mismas vinculaciones mostrarán los números de escudo.
Cómo establecer el parámetro de material
Para obtener más detalles sobre cómo funciona Establecer parámetro de material, consulta Cómo establecer el parámetro de material en la documentación de Unreal Engine.
Ahora es el momento de configurar la barra circular de progreso. El progreso cambia según los niveles de vida y de escudo del jugador.
Establece una vinculación vacía a tu HPBar circular.
En el cuadro de la izquierda, selecciona HPBar > Pincel. El pincel contiene la instancia de material de la barra circular de PV.
En el cuadro de la derecha, selecciona Funciones de conversión > Establecer parámetro escalar.
En Nombre del parámetro, ingresa el nombre del parámetro que cambia el progreso de tu barra de progreso.
Para buscar el nombre de este parámetro, abre la instancia de material de la barra de PV y observa los valores de los parámetros a la derecha.
El parámetro que controla la barra de progreso se denomina progreso. Ingresa ese nombre en el campo Nombre del parámetro.
Es importante que el nombre del parámetro sea el mismo que el del parámetro en la instancia de material; de lo contrario, el material no funcionará en el juego.
Selecciona el ícono de enlace junto a Valor. De forma similar a ToText, vincula la vida del jugador a Valor.
Este es el resultado final de vincular las estadísticas de vida y de escudo en el modelo de vista. Ahora, cada vez que cambie la vida del jugador, pasará la propiedad de vida a la instancia de material de la barra de vida y actualizará el parámetro escalar de progreso.
Repite lo mismo para tu ShieldBar. En lugar de vincularla a la propiedad de vida, debería vincularse a la propiedad de escudo.
¡Ya configuraste tus vinculaciones de PV y de escudo! Es hora de mostrar tu widget en el HUD.
Configuración del dispositivo de controlador del HUD
Coloca un dispositivo de controlador del HUD en tu nivel.
En el panel de detalles del dispositivo, asegúrate de lo siguiente:
Mostrar HUD = Sí
En el campo Anular widget de información del jugador, usa el widget que contiene la vida y el escudo personalizados.
Haz clic en la imagen para ampliarla.
Selecciona Iniciar sesión; deberías ver el widget de vida y de escudo en el HUD. Para probar tu IU, recibe daño y observa cómo se actualizan tus estadísticas en el HUD.
Otros ejemplos de barras de progreso
El material rectangular se puede encontrar en Fortnite > IU > Material. Puedes personalizar el cuadro básico para usarlo como fondo de muchas formas, ¡para cualquier widget!
Crea una instancia de material a partir de esto y empieza a utilizarla con UMG.
Con la información que se ofrece aquí y los materiales que te brindaremos, intenta crear estas barras de progreso:
Usa una textura como fondo para enmarcar tu avatar de jugador, nombre para mostrar y barra de PV.
Usa una combinación de texturas, íconos, materiales de la barra de progreso y el material del rectángulo en Fortnite > IU > Material para estilizar las barras básicas de progreso.
Barra de escudo y de PV seccionadas, junto con el avatar del jugador y el nombre para mostrar.
