Cómo crear barras de salud y barras de escudo personalizadas

Crea barras de salud y barras de escudo personalizadas en Unreal Motion Graphics (UMG) utilizando materiales de interfaz de usuario, texturas de interfaz de usuario y diversos widgets de la paleta para sustituir la interfaz de usuario (IU) predeterminada de Fortnite. Las barras de salud y de escudo pueden añadirse a una placa identificativa o colocarse por separado en el HUD.

El diseño y la colocación de las barras de salud y de escudo son exclusivos de cada juego y tienen en cuenta el tipo de juego (juego de lucha, multijugador cooperativo, juego de rol, etc.).

Cómo configurar instancias de material sin modificar los materiales

En este ejemplo, utilizaremos una variedad de materiales creados en UEFN. Incluyen una barra de progreso en forma de rectángulo (caja) y círculo. La barra de progreso rectangular también tiene una opción para convertir la barra de progreso en secciones.

Los materiales se configuraron utilizando una combinación de funciones de materiales de UI Material Lab, parámetros que exponemos 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. Esto ayuda a optimizar la interfaz de usuario y permite añadir efectos especiales. Las texturas solo se utilizan para un diseño más complicado que no se puede conseguir fácilmente con funciones matemáticas.

Para obtener más información sobre el uso de materiales como parte del diseño e implementación de tu IU, consulta Materiales útiles para IU. El tutorial contiene 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 ese material sin recompilarlo. Para crear una instancia de un material, haz clic con el botón derecho del ratón en un material y selecciona Crear instancia de material.

Para obtener más información sobre las instancias de material, consulta Creación y uso de instancias de material en la documentación de Unreal Engine.

Hay algunos parámetros expuestos en UEFN. En el material de ejemplo, el parámetro Progress cambia cuánto se llena la barra. El rango se normaliza a 0-100 utilizando el nodo ConstantBiasScale en M_CircleProgressBar para que se ajuste al rango de PS de Fortnite.

Puedes cambiar el Color del fondo (BGColor) y el Color del líquido, que son degradados. Después, puedes previsualizar tus cambios en el visor de vista previa de la izquierda.

Puedes crear tantas instancias de material como necesites para distintos fines. En este ejemplo, se utilizan dos materiales, uno para la los PS y otro para el escudo.

Prácticas recomendadas para la disposición de los widgets

En UMG, utiliza solo el panel de lienzo si necesitas una posición absoluta en la pantalla o manipular con precisión la ubicación de varios widgets.

Para widgets más pequeños utiliza:

• Superposición
• Cajas apilables
• 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 quieres manipular la posición de los widgets hijos)

Una vez que los materiales estén listos, crea un blueprint de widget en el explorador de contenido y, a continuación, haz doble clic en la miniatura del widget para abrir el editor de UMG.

Cómo utilizar un panel de lienzo

En este ejemplo, el panel de lienzo se utiliza para colocar las barras de salud y de escudo en una posición absoluta en el HUD anclando los widgets a determinadas partes de la pantalla.

Para elementos individuales del HUD, se recomienda utilizar una combinación de los siguientes widgets:

• Superposición: si necesitas superponer un widget encima de otro.
• Cajas apilables: si necesitas disponer tus widgets horizontal o verticalmente.
• 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 quieres manipular la posición de los widgets hijos que contiene.

Teniendo esto en cuenta, empieza a diseñar los widgets de salud y escudo.

1. Crea un contenedor para que aloje toda la interfaz de usuario del HUD, para ello utiliza un panel de lienzo como contenedor para albergar todos los elementos individuales del HUD.

   

   En este ejemplo, la salud y los escudos se anclarán en la parte inferior central de la pantalla.

2. Anida una caja apilable bajo el lienzo para crear el contenedor de salud y escudo. Para este diseño, estos elementos se apilarán de izquierda a derecha.

   

   Si quieres disponer tus widgets en una caja apilable verticalmente, cambia la configuración de Orientación en el panel Detalles, en Comportamiento > Orientación.

3. Para cambiar el nombre de tus widgets, selecciónalos y pulsa F2 mientras los añades a tu jerarquía para una mejor organización.

   

4. Selecciona la caja apilable en la jerarquía. En el panel Detalles deberías ver la opción Anclajes. Abre la opción pulsando Mayús + Control. Ancla la caja apilable a la parte inferior central del HUD seleccionando la opción en Fila 3, Columna 2.

   

   La caja apilable debería estar ahora anclada al fondo. El icono de la flor muestra dónde está anclado el widget en el panel de lienzo.

5. Desplaza la caja apilable hacia arriba para que no se pegue al borde inferior de la pantalla. Para ello, edita la opción Posición Y.

   Los valores positivos desplazan el widget hacia abajo, mientras que los valores negativos lo desplazan hacia arriba.

   Haz clic en la imagen para ampliarla.

6. Marca la casilla de verificación Ajustar tamaño al contenido para asegurarte de que el contenedor siempre cambie de tamaño según su contenido.

   Haz clic en la imagen para ampliarla.

Cómo configurar la barra de PS y el texto

Ahora que el contenedor de salud y de escudos está listo, configura el widget de salud y escudos.

1. Anida una superposición bajo la caja apilable y cámbiale el nombre a HPOverlay. Esto hace que el texto de PS se superponga a la barra redonda de PS.

   

2. Anida una imagen en HPOverlay y cámbiale el nombre a HPBar. Esto permite añadir la instancia de material que has creado anteriormente a tu widget.

   

3. Selecciona HPBar en la jerarquía; en Detalles, en Pincel > Imagen, selecciona tu instancia de material personalizada de la barra de salud.

   

   Para cambiar el tamaño de la instancia de material, puedes personalizar la propiedad Tamaño de la imagen a continuación.

4. Anida un bloque de texto bajo HPOverlay y cámbiale el nombre HPText. Esto permite añadir texto encima de la barra de salud del círculo.

   

5. Selecciona el bloque de texto y, en Detalles, establece la alineación Horizontal y vertical en Central. Esto garantiza que el texto esté siempre alineado en el centro de la HPBar.

   Haz clic en la imagen para ampliarla.

6. Cambia el tamaño de fuente en Apariencia > Fuente > Tamaño para que se ajuste a la barra de PS.

   Haz clic en la imagen para ampliarla.

7. Haz clic en Compilar. Ahora tienes una barra de PS y un texto de PS 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 PS y de escudo. Como HPShieldsContainer es una caja apilable, dispone automáticamente los widgets hijos horizontalmente.

Utiliza un widget de imagen dentro de la caja apilable para añadir un espacio entre las barras de salud y de escudo. Para configurar el widget Imagen en blanco, haz lo siguiente:

1. Anida una imagen bajo la caja apilable.

2. Ajusta las propiedades del pincel de la imagen de Dibujar como en Ninguno.

   

Esto significa que no aparecerá nada en tu widget, ¡pero el widget Imagen seguirá ocupando espacio en tu disposición! Esto te permite gestionar fácilmente el espaciado entre elementos en una caja apilable sin necesidad de depender del relleno.

1. Configura el widget de escudo utilizando el mismo proceso que la barra de salud.

   Para crear la barra de escudo más rápido, duplica HPOverlay haciendo clic con el botón derecho del ratón en HPOverlay en la jerarquía y seleccionando Duplicar.

   

2. Anida ShieldOverlay debajo de Imagen separadora para que aparezca al final de la caja apilable.

   

   Los dos tipos de barras aparecen una al lado de la otra en tu widget.

   

3. Cambia el nombre de tus variables a ShieldOverlay, ShieldBar y ShieldText, como se ve en la imagen de jerarquía del widget a continuación.

   

Ahora ya puedes crear las vinculaciones que añaden funcionalidad a las barras de progreso de salud y escudo.

Vinculaciones de vistas

Cómo añadir un modelo de vista

Un modelo de vista permite añadir funcionalidad de dispositivo a un blueprint de widget. El modelo de vista utiliza vinculaciones de vistas para identificar widgets en el blueprint y crear grafos de la funcionalidad del dispositivo para ese widget.

El modelo de vista de información del jugador del controlador del HUD permite sustituir partes del HUD por un widget personalizado.

1. Selecciona Ventana > Modelos de vista para abrir y añadir un modelo de vista a tu widget.

   

2. En la ventana Modelo de vista, selecciona +Modelo de vista. Esto abre una ventana emergente que muestra todos los modelos de vista disponibles actualmente para su uso.

   

3. Hay dos tipos de modelos de vista de controlador del HUD disponibles:

   1. Selecciona Modelo de vista Dispositivo - Controlador del HUD - Lista de información de jugadores de equipo/escuadrón en las opciones de HUDPlayerInfoListViewModel. Basándote en la información anterior, solo quieres que se muestre la información del jugador que tiene el control y no la de su equipo/escuadrón.

      

   2. Selecciona Modelo de vista Dispositivo - Controlador del HUD - Información del jugador si quieres crear widgets independientes para el jugador que controla y su escuadrón/equipo. Utiliza las propiedades en Modelo de vista Dispositivo - Controlador del HUD - del jugador para cada uno de estos widgets. A continuación, tendrás que crear un widget de la pila de plantillas que vincule los modelos de vista de la lista de información de jugadores de equipo/escuadrón a sus modelos de vista.

      

   El modelo de vista Lista de información de jugadores de equipo/escuadrón tiene la misma información que el modelo de vista Controlador del HUD - Información del jugador, pero se utiliza de forma diferente según la situación.

4. Selecciona Modelo de vista Lista de información de jugadores de equipo/escuadrón en las opciones de HUDPlayerInfoListViewModel. Basándote en la información anterior, solo quieres que se muestre la información del jugador que tiene el control y no la de su equipo/escuadrón.

   

Ahora es el momento de configurar los enlaces que unen los datos del modelo de vista a tu widget.

Configuración de vinculaciones de vistas ToText

1. Selecciona Ventana > Vinculaciones de vistas para abrir la ventana Vinculaciones de vistas.

   

2. Selecciona HPText en tu jerarquía y selecciona Añadir widget en Vinculaciones de vistas para vincular HPText y mostrar tu número de salud actual. Aparece una vinculación vacía.

   

3. El cuadro de la izquierda es la propiedad del widget y el de la derecha son los datos que quieres vincular a la propiedad del widget. Haz clic en la caja de la izquierda y aparecerá una lista de propiedades para el bloque de texto HPText. Selecciona la propiedad Text para pasar los números de PS a esta propiedad.

   

4. El cuadro de la derecha son los datos que quieres pasar a la propiedad de widget seleccionada. Sin embargo, la propiedad Text solo acepta datos de tipo Texto. Como el número de PS de Fortnite viene en tipo flotante (es decir, doble), tienes que convertirlo al tipo de texto adecuado. Haz clic en la caja de la derecha y selecciona Funciones de conversión > ToText (Double).

   

   Aparecerá una gran lista de opciones. Las configuraciones más importantes suelen estar en la parte superior, mientras que el resto de las configuraciones te permiten dar formato al valor final que se pasa a tu propiedad Text.

   Haz clic en la imagen para ampliarla.

5. Selecciona el icono de enlace situado junto a Valor y, a continuación, selecciona tu valor de salud en el modelo de vista del controlador del HUD.

   

6. Haz clic en el campo vacío y selecciona HUDPlayerInfoListViewmodel en la columna de la izquierda, amplía Información del jugador controlador a la derecha y selecciona Salud.

   

   Esto pasa la propiedad Health, un tipo flotante (es decir, doble), a través de la función de conversión ToText (Double). ToText (Double) convierte la salud en un tipo de texto para que se muestre en el widget. A continuación, el estado convertido se pasa a la propiedad Text de tu widget HPText.

   

7. Repite los pasos anteriores para configurar el widget ShieldText. Las mismas vinculaciones mostrarán también los números de escudo.

   

Establecer parámetro de material

Para obtener más información sobre cómo funciona Establecer parámetro de material, consulta Establecer parámetro de material en la documentación de Unreal Engine.

Ahora es el momento de configurar la barra de progreso circular. El progreso cambia en función de los niveles de salud y escudo del jugador.

1. Configura una vinculación vacía en tu HPBar circular.

   

2. En el cuadro de la izquierda, selecciona Barra PS > Pincel. El pincel contiene la instancia de material de la barra de PS circular.

   

3. En el cuadro de la derecha, selecciona Funciones de conversión > Establecer parámetro escalar.

   

4. En Nombre del parámetro, introduce el nombre del parámetro que cambia el progreso de tu barra.

   Para buscar el nombre de este parámetro, abre la instancia de material de tu barra de PS y observa los valores de los parámetros a la derecha.

   

5. El parámetro que controla la barra de progreso se llama Progreso. Introduce ese nombre en el campo Nombre del parámetro.

   

   Es importante que el nombre de tu parámetro coincida con el parámetro de tu instancia de material; de lo contrario, el material no funcionará en el juego.

6. Selecciona el icono de vínculo situado junto a Valor. De forma similar a ToText, vincula la salud del jugador al valor.

   

Este es el resultado final de vincular las estadísticas de salud y escudo en el modelo de vista. Ahora, cada vez que cambie la salud del jugador, pasará la propiedad Salud a la instancia de material de la barra de PS y actualizará el parámetro escalar Progreso.

Repite lo mismo para tu ShieldBar. En lugar de vincularlo a la propiedad Health, debería vincularse a la propiedad Shield.

¡Ahora tus vinculaciones de PS y escudos están configurados! Es hora de mostrar tu widget en el HUD.

Configuración del dispositivo Controlador del HUD

1. Coloca un dispositivo Controlador del HUD en tu nivel.

2. En el panel Detalles del dispositivo, asegúrate de que:

   1. Mostrar HUD = Sí

3. En el campo Anular widget de información del jugador, utiliza el widget que contiene la salud y el escudo personalizados.

   Haz clic en la imagen para ampliarla.

4. Selecciona Abrir sesión; deberías ver el widget de salud y de escudo en el HUD. Para probar tu IU, recibe daños y observa cómo actualiza tus estadísticas en el HUD.

   

Otros ejemplos de barras de progreso

El material Rectángulo lo puedes encontrar en Fortnite > IU > Material, puedes personalizar la caja básica para utilizarla como fondo de muchas formas, para cualquier widget.

Crea una instancia de material a partir de esto y empieza a utilizarlo con UMG.

Con la información que encontrarás aquí y los materiales que te proporcionamos, intenta hacer estas barras de progreso:

• Utilizando una textura como fondo para enmarcar el avatar de jugador, el nombre en pantalla y la barra de PS.

  

• Utilizando una combinación de texturas, iconos, materiales de la barra de progreso y el material Rectángulo en Fortnite > IU > Material para estilizar las barras de progreso básicas.

  

• Barra de salud y de escudo seccionadas junto con el avatar del jugador y el nombre en pantalla.