Crea una IU dinámica con materiales cambiantes que se actualizan en función de los eventos y los datos del juego. Para lograr que tu IU sea dinámica, debes utilizar una combinación de materiales de IU, vista de vinculaciones y tres de las funciones de conversión para establecer los parámetros de material (establecer parámetro de textura, escalar y vectorial).
En Unreal Editor para Fortnite (UEFN), obtienes un Material básico con una serie de parámetros. Usa el dispositivo de rastreo para registrar las eliminaciones en un widget de barra de progreso como un ejemplo de material que se actualiza de forma dinámica en función de tu progreso en la eliminación de enemigos.
Crea una instancia de material
Para obtener más información sobre las instancias de material, consulta Cómo crear y usar las instancias de material en la documentación de Unreal Engine.
Todos los recursos que se utilizan para crear estas instancias de material se pueden encontrar de forma nativa en UEFN. Para obtener más información sobre cómo crear el material de este ejemplo, consulta Medidor de material en sección de tutoriales de Material.
Crea una instancia de material de M_Tracker y nómbrala MI_TrackerExample.
En la nueva instancia de material, cambia la IconScaleX e IconScaleY según tus preferencias. En este ejemplo, los materiales se establecieron en 0.7 cada uno.
Puedes personalizar el ProgressColor de eliminación que rellena el widget en función de tu progreso. Deja TrackerProgress, Icon e IconColor sin marcar. Estos se utilizarán más tarde con el dispositivo rastreador.
Los íconos se pueden encontrar en la carpeta Fortnite > Texturas > Íconos.
Cómo configurar el widget rastreador
Crearás un widget rastreador personalizado en UMG al que se puede hacer referencia en el dispositivo de rastreo y realizar un seguimiento de las eliminaciones de los jugadores en la IU de eliminaciones personalizada.
Haz clic con el botón derecho en el explorador de contenido y selecciona Interfaz de usuario > Blueprint de widget > Widget de usuario.
Crea un widget rastreador simple que muestre el material del rastreador y un título de rastreador como en el siguiente ejemplo.
Arrastra una superposición al gráfico del widget. Esta superposición coloca en capas todas las piezas que componen el widget. Además, permite determinar en qué parte de la pantalla aparece este widget.
Anida una caja apilada dentro de la superposición para poder colocar el material del rastreador y el título de izquierda a derecha.
Anida una superposición dentro de la caja apilada a fin de crear un material de rastreador para superponer la caja apilada con un fondo oscuro simple.
Dentro de la superposición, anida dos widgets de imagen. Presiona F2 para cambiarles el nombre a TrackerBackground y TrackerMaterial.
Selecciona TrackMaterial para abrir sus opciones en el panel de detalles. En el panel de detalles, selecciona Pincel > Imagen y busca el material MI_TrackerExample que creaste.
Establece el siguiente tamaño de la imagen en X=96.0 y Y=96.0. Debe ser lo suficientemente grande como para verse en el juego.
Una vez que el material del rastreador está configurado, es necesario crear el fondo para el material a fin de que el material de la pista sea más legible.
Selecciona TrackerBacking en la jerarquía y, luego, en el panel de detalles, selecciona Pincel > Dibujar como… > Caja redondeada.
Establece la opción mencionada Matiz en un color neutro para mejorar la legibilidad. En este ejemplo, el matiz se ajustó a 3A3A3AFF en el campo sRGB hexadecimal.
Establece las opciones Alineación horizontal y Alineación vertical en Relleno. Esto garantiza que TrackerBacking rellene el contenedor que contiene el TrackerMaterial.
¡Ahora tienes un fondo legible para tu TrackerMaterial en cualquier escena del juego!
Cómo configurar el texto del rastreador
Después de hacer referencia al material del rastreador en el widget del rastreador, configurarás un texto que informe al jugador qué se rastrea en la IU.
Anida un bloque de texto en la caja apilada que contiene la superposición. Cambia el nombre del bloque de texto a TrackerTitle.
Selecciona TrackerTitle en la jerarquía; en el panel de detalles, establece la alineación vertical en Centrar alineación vertical. Esto garantiza que el texto siempre esté alineado al centro del TrackerMaterial.
Realiza algunos cambios de estilo en la fuente: reduce el tamaño, añade un contorno o cambia el tipo de letra para que se ajuste a tu tema.
En este ejemplo, se realizaron los siguientes cambios: Tamaño de fuente = 24 Tipografía = Negrita Contorno = Rojo oscuro
Puedes personalizar todos los ajustes relacionados con la fuente en la categoría Apariencia.
Una vez que se completen todos los detalles finales del diseño, finalizarás la configuración de TrackerMaterial y TrackerTitle.
Para añadir un poco de espacio entre ambos elementos, añade relleno a la derecha de la superposición que contiene el TrackerMaterial:
Selecciona la superposición.
En el panel de detalles, expande el relleno.
Cambia el relleno derecho a 16 px.
Se añade un espacio entre la imagen y el texto.
Si deseas modificar con facilidad el espaciado entre varios objetos, puedes insertar un widget de imagen en la caja apilada que contiene estos objetos, establecer el tamaño de la imagen X en el espacio que desees y establecer Trazar como en Ninguno. Lo que sucede es que la imagen no aparece, ¡pero aún ocupa espacio en tu caja apilada!
Facilita la gestión del espaciado entre objetos sin buscar rellenos en cada widget.
Cómo configurar los parámetros del material definido
A continuación, vincularás los valores del dispositivo rastreador a los parámetros de material en el widget rastreador.
Cómo añadir un modelo de vista
En el menú principal, añade el modelo de vista del rastreador al widget y selecciona Ventana > Modelo de vista.
En la ventana Modelo de vista, selecciona +Modelo de vista.
En la ventana emergente, selecciona Dispositivo: modelo de vista del rastreador.
En la barra de menús, selecciona Ventana > Vista de vinculaciones para abrir el panel Vista de vinculaciones.
Ya puedes comenzar a vincular los datos del rastreador para manipular el widget.
Cómo establecer el parámetro escalar
Un parámetro escalar toma un valor Int o Float. Por ejemplo, la barra de progreso se rellena con el TrackerMaterial en función de la cantidad de eliminaciones que tengas en el rastreador.
El material se configura para convertir el número de eliminaciones del dispositivo rastreador para rellenar el TrackerMaterial. Todo lo que debes hacer es vincular esos datos al parámetro del material de progreso en MI_TrackerExample.
Un progreso de 3.0 frente a 8.0 en MI_TrackerExample. ¡Esto es muy útil!
Selecciona el widget TrackerMaterial y, luego, haz clic en +Añadir widget en la ventana Vista de vinculaciones.
En el campo de la izquierda, selecciona TrackerMaterial > Pincel.
En el campo de la derecha (que contiene los datos que deseas vincular al pincel de TrackerMaterial), selecciona Funciones de conversión > Establecer parámetro escalar.
Esto ejecuta la función que se llama Establecer parámetro escalar en la configuración del pincel. Dado que tu pincel tiene ahora MI_TrackerExample, buscará un parámetro escalar que especifiques y le pasará un valor.
Escribe TrackerProgress en el campo Nombre de parámetro; esto ocasionará que el material se rellene según el progreso del rastreador.
Es importante que no cometas errores en el parámetro, ya que no se encontrará el parámetro correcto en tu material. Si olvidaste el nombre de tu parámetro, abre la instancia de material y busca los parámetros a la derecha.
Selecciona el ícono de enlace junto a Valor, selecciona MVVM_UEFN_Tracker > Valor del menú desplegable. Esto vincula el progreso actual del rastreador.
¡Ahora el progreso actual del rastreador se introduce de forma directa en el material! El material del rastreador se rellenará poco a poco cuando el jugador asignado al rastreador obtenga una eliminación.
Establecer parámetro de vector
El parámetro del vector toma un valor de Vector4. En general, los vectores se utilizan para los colores: RGBA (los cuatro vectores); utilizarás un Vector4 para cambiar el color de tu ícono en función de lo que se configuró en el dispositivo.
Para obtener más información sobre los vectores, consulta Expresiones de material de vectores en la documentación de Unreal Engine.
Selecciona TrackerMaterial en la jerarquía; luego, abre la ventana Vista de vinculaciones y selecciona +Añadir widget.
Selecciona las propiedades TrackerMaterial > Pincel en el campo vacío de la izquierda.
Selecciona Funciones de conversión > Establecer parámetro de vector en el campo vacío de la derecha.
Como se explicó anteriormente, esta vinculación obtiene el pincel del TrackerMaterial (en este caso, es MI_TrackerExample) y establece un parámetro de vector que se especifica en esa instancia de material. Puedes establecer el color del ícono para que siga las opciones establecidas en el dispositivo rastreador.
Escribe IconColor en el campo Nombre de parámetro.
Selecciona el ícono de enlace junto a Valor; luego, selecciona MVVM_UEFN_Tracker > Color. Esto establece el valor de la propiedad de color del ícono del modelo de vista del rastreador.
El color del ícono que se establezca en el dispositivo rastreador se pasará a tu material. Si quieres un ícono naranja, establécelo en el dispositivo, ¡y lo coloreará por ti! El material que se utilizó en este ejemplo ya está configurado para eso.
Establecer parámetro de textura
Un parámetro de textura toma un valor Texture2D. En general, las texturas se utilizan para imágenes o íconos, por lo que las utilizaremos para cambiar nuestro ícono en función de lo que se configure en el dispositivo.
Para obtener más información sobre las texturas, consulta Texturas en la documentación de Unreal Engine.
Selecciona TrackerMaterial en la jerarquía; luego, en la ventana Vista de vinculaciones, selecciona +Añadir widget.
En el campo vacío de la izquierda, selecciona MVVM_UEFN_Tracker > Pincel.
En el campo vacío de la derecha, selecciona Funciones de conversión > Establecer parámetro de textura.
Escribe Ícono en el campo Nombre de parámetro.
¡Evita cometer errores al escribir el nombre del parámetro! Si olvidas el nombre del parámetro, puedes consultar la lista de parámetros disponibles en MI_TrackerExample.
Selecciona el ícono de enlace junto al campo Valor y, luego, MVVM_UEFN_Tracker > Ícono del menú desplegable. Esto une el valor con la propiedad del ícono del modelo de vista del rastreador.
Se establece el parámetro de textura. ¡Ahora, todo ícono configurado en tu dispositivo rastreador se pasará al widget!
Cómo vincular el texto del rastreador al nombre del rastreador
A continuación, vincularás el título del rastreador que creaste a la misma configuración en el dispositivo rastreador.
Selecciona TrackerTitle en la jerarquía; luego, abre la ventana Vista de vinculaciones y selecciona +Añadir widget.
En el campo vacío de la izquierda, selecciona TrackerTitle > Texto en el menú desplegable.
En el campo vacío de la izquierda, selecciona MVVM_UEFN_Tracker > Nombre en el menú desplegable.
Esta vinculación pasa el título de tu rastreador al bloque de texto.
Cómo configurar el dispositivo rastreador
A continuación, harás referencia al widget que creaste en UMG en el dispositivo rastreador. Esto hace que la IU de eliminación se muestre en el HUD.
Añade un dispositivo rastreador a tu proyecto.
Asigna un nombre al título del rastreador. Este nombre se muestra en el texto del TrackerTitle en tu widget.
Añade tu widget al campo Widget del HUD.
Cambia los campos de íconos de misión a cualquier ícono que quieras mostrar en tu rastreador. Esto anula el ícono de alienígena predeterminado en el MI_TrackerExample.
Selecciona un color en Color del ícono. El ícono que configuraste anteriormente toma el color seleccionado.
Continúa con el resto de la configuración para añadir el rastreador a tu reproductor.
Resultado final
¡Voilà! Tienes el widget de rastreador personalizado que aparece en la parte superior izquierda. Ya sea que elimines zombis u otros jugadores, ¡el widget se llena de a poco! Así es cómo vinculas los datos de jugabilidad a tus propios widgets personalizados mediante el establecimiento de parámetros de material.
