Crea una interfaz de usuario dinámica con materiales cambiantes que se actualicen en función de los eventos y datos del juego. Para que tu IU sea dinámica, tienes que utilizar una combinación de materiales de IU, vinculaciones de vistas y tres de las funciones de conversión Establecer parámetro de material (Establecer parámetro de textura, escalar y vectorial).
En Unreal Editor para Fortnite (UEFN) se te proporciona un material básico con una serie de parámetros. Utiliza el dispositivo Rastreador para registrar las eliminaciones en un widget tipo barra de progreso como ejemplo de un material que se actualiza dinámicamente en función de tu progreso en la eliminación de enemigos.
Cómo crear una instancia de material
Para obtener más información sobre las instancias de material, consulta Creación y uso de instancias de material. -in-unreal-engine) en la documentación de Unreal Engine.
Todos los recursos utilizados para crear estas instancias de material se pueden encontrar de forma nativa en UEFN. Para saber cómo hacer el material de este ejemplo, consulta Material de medidor en la sección de tutoriales de materiales.
-
Crea una instancia de material de M_Tracker y nómbrala MI_TrackerExample.
-
En la nueva instancia de material, cambia IconScaleX e IconScaleY en función de tus preferencias. Los materiales de este ejemplo se han ajustado a 0.7 cada uno.
Puedes personalizar el parámetro ProgressColor de eliminación que rellena el widget en función de tu progreso. Deja TrackerProgress, Icon e IconColor sin seleccionar. Se utilizarán más adelante con el dispositivo Rastreador.
Los iconos se pueden encontrar en la carpeta Fortnite en Texturas > Iconos.
Cómo configurar el widget Rastreador
Debes crear un widget Rastreador personalizado en UMG al que se puede hacer referencia en el dispositivo Rastreador y que rastreará las eliminaciones de los jugadores en la interfaz de usuario personalizada de eliminaciones.
-
Haz clic con el botón derecho del ratón en el explorador de contenido y selecciona Interfaz de usuario > Blueprint de widget > Widget de usuario.
-
Crea un widget Rrastreador sencillo que muestre el material del rastreador y un título para el rastreador, como en el ejemplo siguiente.
-
Arrastra una superposición al grafo del widget. Esto superpone todas las piezas que componen el widget. También permite determinar en qué lugar de la pantalla aparece este widget.
-
Anida una caja apilable dentro de la superposición para poder disponer el material del rastreador y el título de izquierda a derecha.
-
Anida una superposición dentro de la caja apilable para poder crear un material de rastreador para superponer a la caja apilable un simple fondo oscuro.
-
Dentro de la superposición, anida dos widgets Imagen. Pulsa F2 para cambiarles el nombre a TrackerBackground y TrackerMaterial.
-
Selecciona TrackMaterial para abrir sus opciones en el panel Detalles. En el panel Detalles, selecciona Pincel > Imagen y busca el material MI_TrackerExample que has creado.
-
Establece Tamaño de la imagen a continuación en X=96.0, Y=96.0. Debe ser lo suficientemente grande como para poder verse en el juego.
Ahora que el material del rastreador está configurado, tienes que crear el fondo del material para que el material de la pista sea más legible.
-
Selecciona TrackerBacking, en el panel Jerarquía y, a continuación, en el panel Detalles selecciona Pincel > Dibujar como > Caja redondeada.
-
Establece la opción Matiz de arriba en un color neutro para mejorar la legibilidad. En este ejemplo, el matiz se ha establecido en 3A3A3AFF en el campo sRGB hexadecimal.
-
Establece las opciones Alineación horizontal y Alineación vertical en Rellenar. Esto garantiza que TrackerBacking rellene el contenedor que contiene material TrackerMaterial.
Ahora tienes un fondo para tu TrackerMaterial que resulta fácilmente legible en cualquier escena del juego.
Cómo configurar el texto del rastreador
Después de que se haga referencia al material del rastreador en el widget Rastreador, debes configurar un texto que informe al jugador de lo que se está rastreando en la interfaz de usuario.
-
Anida un bloque de texto en la caja apilable que contiene la superposición. Cambia el nombre del bloque de texto a TrackerTitle.
-
Selecciona TrackerTitle en el panel Jerarquía. En el panel Detalles, establece Alineación vertical en Alineación centrada vertical. Esto garantiza que el texto esté siempre alineado en el centro con respecto al material TrackerMaterial.
-
Haz algunos cambios estilísticos en la fuente, reduciendo el tamaño, añadiendo un contorno o cambiando el tipo de letra para que se ajuste a tu tema.
En este ejemplo, se han realizado los siguientes cambios: Tamaño de fuente = 24 Tipo de letra = Negrita Contorno = Rojo oscuro
Puedes personalizar todos los ajustes relacionados con la fuente en la categoría Apariencia.
Una vez que hayas completado todos los toques finales de diseño, ya debes tener configurados TrackerMaterial y TrackerTitle.
Para añadir espacio entre ambos elementos, añade relleno a la derecha de la superposición que contiene material TrackerMaterial:
-
Selecciona la superposición.
-
En el panel Detalles, expande Rellenar.
-
Cambia Relleno derecho a 16 píxeles.
Se añade un espacio entre la imagen y el texto.
Si quieres modificar fácilmente el espaciado entre varios objetos, puedes insertar un widget Imagen en la caja apilable que contiene estos objetos, establecer Tamaño de la imagen X en el espacio que quieras y elegir Ninguno en Dibujar como. Lo que ocurre es que la imagen no aparece, pero sigue ocupando espacio en la caja apilable.
Esto facilita la gestión del espaciado entre objetos y elimina la necesidad de incluir rellenos en cada widget.
Cómo configurar la opción Establecer parámetros de material
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
-
Añade el modelo de vista Rastreador al widget seleccionando Ventana > Modelo de vista en el menú principal.
-
En la ventana de tu modelo de vista, selecciona +Modelo de vista.
-
En la ventana que aparece, selecciona Dispositivo - Modelo de vista del rastreador.
-
En la barra de menús, selecciona Ventana > Vinculaciones de vistas para abrir el panel Vinculaciones de vistas.
Ya puedes empezar a vincular los datos del rastreador para manipular tu widget.
Cómo establecer un 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 cuántas eliminaciones tengas en el rastreador.
El material está configurado para convertir el número de eliminaciones del dispositivo Rastreador para rellenar el TrackerMaterial. Todo lo que tienes que hacer es vincular esos datos al parámetro de 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, a continuación, haz clic en +Añadir widget en la ventana Vinculaciones de vistas.
-
En el campo de la izquierda, selecciona TrackerMaterial > Pincel.
-
En el campo de la derecha (que contiene los datos que quieres vincular al pincel del TrackerMaterial), selecciona Funciones de conversión > Establecer parámetro escalar.
(w:500)Esto ejecuta la función nombrada Establecer parámetro escalar en el ajuste Pincel. Como tu pincel tiene actualmente MI_TrackerExample, buscará un parámetro escalar que especifiques y le pasará un valor.
-
Escribe TrackerProgress en el campo Nombre del parámetro; esto hace que el material se rellene en función del progreso del rastreador.
Es importante que no cometas errores en el parámetro porque no podrá encontrar el parámetro correcto en tu material. Si has olvidado cómo se llama tu parámetro, abre la instancia de material y busca los parámetros a la derecha.
-
Selecciona el icono de enlace situado junto a Valor, selecciona MVVM_UEFN_Tracker > Valor en el menú desplegable. Esto vincula el progreso actual del rastreador.
Ahora tienes tu rastreador de progreso actual alimentando directamente tu material. El material del rastreador se irá llenando lentamente cuando el jugador asignado al rastreador sea eliminado.
Cómo establecer un parámetro vectorial
Un parámetro vectorial toma un valor de Vector4. Los vectores se utilizan normalmente para los colores: RGBA (los cuatro vectores). Vas a utilizar un Vector4 para cambiar el color de tu icono en función de lo que esté configurado en el dispositivo.
Para obtener más información sobre los vectores, consulta Expresiones de material vectoriales en la documentación de Unreal Engine.
-
Selecciona TrackerMaterial en el panel Jerarquía, luego abre la ventana Vinculaciones de vistas 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 vectorial en el campo vacío de la derecha.
Como se ha explicado anteriormente, esta vinculación obtiene el pincel del material TrackerMaterial (en este caso, MI_TrackerExample) y establece un parámetro vectorial que se especifica en esa instancia de material. Puedes configurar el color del icono para que siga las opciones que haya establecido el dispositivo Rastreador.
-
Escribe IconColor en el campo Nombre del parámetro.
-
Selecciona el icono de enlace junto a Valor y, a continuación, selecciona MVVM_UEFN_Tracker > Color. Esto establece el valor de la propiedad Color del icono del modelo de vista del rastreador.
Cualquier color de icono que esté configurado en el dispositivo Rastreador se pasa a tu material. Si quieres un icono naranja, simplemente configúralo en el dispositivo y lo coloreará por ti. El material utilizado en este ejemplo ya está configurado para ello.
Establecer parámetro de textura
Un parámetro de textura toma un valor de Texture2D. Las texturas se utilizan normalmente para imágenes o iconos, así que vamos a utilizarlas para cambiar nuestro icono en función de lo que esté configurado en el dispositivo.
Para obtener más información sobre las texturas, consulta Texturas en la documentación de Unreal Engine.
-
Selecciona TrackerMaterial en el panel Jerarquía y, a continuación, en la ventana Vinculaciones de vistas 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 Icon en el campo Nombre del parámetro.
¡No te equivoques al escribir el nombre del parámetro! Si olvidas el nombre del parámetro, puedes consultar MI_TrackerExample para ver la lista de parámetros disponibles para configurar.
-
Selecciona el icono de enlace junto al campo Valor y selecciona MVVM_UEFN_Tracker > Icono en el menú desplegable. Esto vincula el valor a la propiedad Icono del modelo de vista del rastreador.
Has configurado el parámetro de textura. Ahora, cualquier icono que esté configurado en tu dispositivo Rastreador lo 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 has creado al mismo ajuste del dispositivo Rastreador.
-
Selecciona TrackerTitle en el panel Jerarquía, luego abre la ventana Vinculaciones de vistas 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 derecha, 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.
-
Dale un nombre al título del rastreador. Este nombre se muestra en el texto del TrackerTitle de tu widget.
-
Añade tu widget al campo Widget del HUD.
-
Cambia los campos de Icono de misión por cualquier icono que quieras que aparezca en tu rastreador. Esto anula el icono de extraterrestre predeterminado en MI_TrackerExample.
-
Selecciona un color en Color del icono. El icono que has configurado anteriormente adopta el color seleccionado.
-
Continúa con la configuración de los demás ajustes para añadir el rastreador a tu jugador.
Resultado final
¡Voilá! Tienes el widget Rastreador personalizado arriba a la izquierda. Tanto si eliminas a zombis como a otros jugadores, el widget se rellena lentamente. Así es como vinculas los datos del juego a tus propios widgets personalizados utilizando la opción Establecer parámetros de material.
