El material de medidor es perfecto para su uso en la interfaz de usuario. Se puede hacer referencia a este material en un widget de imagen de UMG para realizar un seguimiento de tu salud, eliminaciones o recopilación de bienes y dinero dentro del juego. Utiliza este tutorial para crear tu propio material de medidor y utilízalo en un diseño de tu interfaz de usuario personalizada.
Este material puede anular el aspecto predeterminado de Fortnite con el material personalizado que crees para registrar la salud, los escudos u otro tipo de estadísticas centradas en los jugadores.
Este material utiliza iconos en su diseño. Unreal Editor para Fortnite (UEFN) incluye de forma nativa con numerosos iconos. Puedes ver los iconos en las carpetas de Fortnite > Texturas > Iconos.
Cómo crear un material
Todos los materiales se crean en el explorador de contenido. Para organizar tu proyecto, crea una carpeta para alojar todos tus materiales.
Haz clic con el botón derecho del ratón en el explorador de contenido para abrir el menú contextual.
Selecciona Material en el menú contextual.
Nombra tu material M_Meter.
Haz doble clic en la miniatura del material para abrir el editor de materiales.
Para crear el material de medidor, tendrás que descargar UI Material Lab desde Fab.
Para obtener más información sobre los nodos de material y su funcionamiento, consulta Nodos de material y configuración.
Nodos de material
A continuación se muestra una lista de los nodos de material utilizados en este tutorial y su finalidad en el producto final. Para omitir esta explicación y empezar a crear el material, haz clic aquí.
| Nodo de material | Propósito |
|---|---|
Añade un color al icono y al relleno de progreso. | |
Se usa para añadir una máscara de fondo debajo del icono. También se utiliza como barra de progreso para enmascarar el fondo según el progreso. | |
Permite añadir una textura al material de interfaz de usuario. | |
Se utiliza para superponer el icono coloreado sobre un color de fondo, así como para crear la máscara del icono sobre el fondo. | |
Envía las coordenadas de textura de UV del icono en forma de valor vectorial de dos canales. | |
Material Function > UI Scale | Las funciones de textura son una subcategoría del nodo Material Function. Esto permite escalar los UV del icono. |
Material Function > UI Scale | Permite enmascarar la barra de progreso detrás del icono y la parte del círculo que se rellena con el color de fondo. Normalmente, esta función de material se utiliza para dibujar un círculo en el material. Puede sustituirse por otras funciones de material de forma SDF (por ejemplo, cuadro SDF de interfaz de usuario) de UI Material Lab para generar una forma diferente. |
Se utiliza para escalar uniformemente los ejes X e Y del icono, donde añadimos 2 parámetros escalares. 1 para escalar la X del icono y otro para la Y del icono, y conectarlos a MF_UI_Scale | |
Los UV del icono se fijan entre 0 y 1 para garantizar que el icono no se envuelva ni se coloque en teselas. | |
Se utiliza para crear un rango de 0-10 para el parámetro escalar Progreso en el dispositivo Rastreador. ConstantBiasScale toma el valor establecido del parámetro, resta el valor de Compensación y lo multiplica por el valor de Escala. | |
Un nodo Multiply toma dos entradas, las multiplica y emite el resultado. En este ejemplo, los canales RGB de una textura se multiplican por un nodo Vector3 para colorear el fondo. Además, LinearGradient se multiplica por un Vector3 para colorear el icono. | |
Step | Crea un umbral para las coordenadas X e Y. El umbral crea un contenedor para el material de fondo en la interfaz de usuario. Los nodos Step convierten los valores por encima de un umbral a 1, y por debajo del umbral a 0. Esto genera la máscara de una barra de progreso en la que hay una separación clara entre una zona rellena y una zona vacía. |
Toma los valores de UGradient del nodo Linear Gradient, los redondea al alza al entero siguiente y emite el resultado. Esto nos permite crear fácilmente un fondo sólido básico. | |
Constant | Permite añadir un valor a un atributo de material. |
Cómo preparar el nodo Main Material
Antes de añadir nodos de material, cambia la configuración del nodo Main Material (MMN) para preparar el material que vas a utilizar en la interfaz de usuario. La configuración de MMN determina qué entradas están disponibles en MMN y dónde se puede utilizar el material.
Selecciona el nodo MMN.
En el panel Detalles del editor de materiales, establece el Dominio del material en Interfaz de usuario.
Establece el modo de mezcla a Translúcido.
Haz clic en la imagen para ampliarla.
Cómo configurar el color de progreso
Comienza el material de medidor configurando el color de progreso, que se puede identificar en UMG mediante el widget Imagen. Puedes utilizar este color de progreso para crear un diseño de interfaz de usuario personalizado.
Haz clic con el botón derecho del ratón en el grafo de material para abrir el menú de nodos.
Escribe Linear Gradient en la barra de búsqueda. Selecciona LinearGradient en el desplegable. El nodo aparece en el grafo.
Repite los pasos uno y dos para añadir los siguientes nodos al grafo de material:
Ceil
Multiply
Constant3vector
Arrastra el pin blanco del nodo Constant3Vector y conéctalo a la entrada A del nodo Multiply. La forma del visor cambia de color.
Selecciona el nodo de material Constant3Vector en el grafo de material. El nodo se resalta en el grafo para indicar que lo has seleccionado.
Haz clic en el cuadrado negro del nodo para abrir la rueda cromática. Selecciona un color de la rueda cromática para el material.
Arrastra el pin UGradient del nodo Linear Gradient y conéctalo a la entrada izquierda del nodo Ceil.
Arrastra el pin derecho de Ceil y conéctalo a la entrada B del nodo Multiply.
Esta configuración de nodo proporciona el color del contenedor de la interfaz de usuario.
Haz clic con el botón derecho del ratón en el área del grafo y añade un nodo LinearInterpolate al grafo.
Arrastra el nodo Multiply y conéctalo a la entrada A del primer nodo LinearInterpolate.
Esta parte del material se utiliza para seguir el progreso de un medidor rellenando el fondo de un contenedor.
Para agrupar nodos y moverte como una unidad, haz lo siguiente:
Haz clic con el botón izquierdo del ratón y arrastra alrededor de un grupo de nodos. Se resaltan todos los nodos seleccionados.
Toma un nodo y arrástralo por el grafo; todos los nodos seleccionados se mueven juntos como una sola pieza.
Cómo configurar la escala y el color de los iconos
Para esta sección del material elegirás y escalarás un icono y seleccionarás un color para el icono en el material y en la interfaz de usuario. Puedes ver los iconos en las carpetas Fortnite > Texturas > Iconos.
Haz clic con el botón derecho del ratón en la zona del grafo y añade los siguientes nodos:
TextureCoordinate
AppendVector
Fijación
TextureSample
Constant3vector
Multiply
Constant
Selecciona el nodo Constant en el grafo, luego haz clic con el botón derecho y selecciona Duplicar en el desplegable. Otro nodo Constant aparece sobre el primero. Mueve el duplicado debajo del original.
Duplica el nodo Multiply.
Duplica el nodo LinearInterpolate (Lerp).
Selecciona el nodo Constant superior del grafo y añade un valor predeterminado de 0.7.
Haz clic con el botón derecho del ratón en el nodo y selecciona Convertir en parámetro en el desplegable. Nombra el parámetro IconScaleY. Este nodo controlará el tamaño de escala de las coordenadas X del icono.
Selecciona el nodo Constant inferior del grafo y añade un valor predeterminado de 0.7.
Haz clic con el botón derecho del ratón en el nodo y selecciona Convertir en parámetro en el desplegable. Nombra el parámetro IconScaleY. Este nodo controlará el tamaño de escala de las coordenadas Y del icono.
Arrastra el nodo del parámetro IconScaleX y conéctalo a la entrada A del nodo AppendVector.
Arrastra el nodo del parámetro IconScaleY y conéctalo a la entrada B del nodo AppendVector.
Los valores X e Y de IconScale establecidos en el nodo del parámetro pueden controlarse fuera del material cuando se convierten en una instancia de material.
A continuación tendrás que crear un nodo de función de material para añadir una función al material que escale los UV del icono.
Cómo configurar una función de material: UI_Scale
En este paso aprenderás a crear una función de material y a buscar funciones para utilizar con el nodo.
Haz clic con el botón derecho del ratón en el grafo y escribe MaterialFunction en la barra de búsqueda. Selecciona MaterialFunctionCall en el desplegable. El nodo MaterialFunctionCall aparece en el grafo.
En el panel Detalles, haz clic en el menú desplegable Función de material, escribe UI_Scale en la barra de búsqueda y, a continuación, selecciona MF_UI_Scale en el desplegable. El nodo MaterialFunctionCall se convierte en el nodo UIScale.
La función UI_Scale permite aumentar o disminuir la escala de los UV del icono utilizando funciones de material. Las funciones de material solo pueden utilizarse en un material a través del nodo MaterialFunction.
Cómo configurar los UV de icono
A continuación, añadirás un icono y un color de icono al material que se escalarán al tomar la información de los parámetros y del escalado de la interfaz de usuario.
Arrastra el nodo TextureCoordinate y conéctalo a la entrada UVs (V2) del nodo MF_UI_Scale.
Arrastra el nodo AppendVector y conéctalo a la entrada Scale (V2) del nodo MF_UI_Scale.
Arrastra el pin Result del nodo MF_UI_Scale y conéctalo a la entrada blanca del nodo Clamp.
Selecciona el nodo Texture Sample para abrir sus opciones en el panel Detalles.
Abre el menú desplegable Textura.
Escribe «icono» en la barra de búsqueda.
Selecciona un icono del desplegable.
Arrastra el pin blanco del nodo Clamp y conéctalo a la entrada UV del nodo Texture Sample.
Arrastra el pin RGB del nodo Texture Sample y conéctalo a la entrada A del primer nodo Multiply.
Arrastra el pin A de Texture Sample y conéctalo a la entrada B del primer nodo Multiply.
Arrastra de nuevo el pin A del nodo Texture Sample y conéctalo a la entrada Alpha del segundo nodo LinearInterpolate (Lerp).
Arrastra el primer nodo Multiply y conéctalo a la entrada B del segundo nodo Multiply.
Selecciona el nodo Constant3Vector para abrir sus opciones en el panel Detalles.
Haz clic en el campo Constante para abrir la rueda cromática.
Selecciona un color para el icono en la rueda cromática.
Arrastra el pin blanco del nodo Constant3Vector y conéctalo a la entrada A del segundo nodo Multiply.
Arrastra el pin blanco del segundo nodo Multiply y conéctalo a la entrada B del primer nodo LinearInterpolate (Lerp).
Arrastra el pin blanco del primer nodo Multiply y conéctalo a la entrada Alfa del primer nodo LinearInterpolate (Lerp).
Arrastra el pin blanco del primer nodo Multiply y conéctalo a la entrada B del segundo nodo LinearInterpolate (Lerp).
Arrastra el pin blanco del primer nodo LinearInterpolate (Lerp) a la entrada Final Color del nodo Main Material.
El icono aparece ahora en la ventana de vista previa del material.
A continuación, configurarás la máscara de la barra de progreso. Esto funciona revelando solo la parte del material que corresponde al aumento de eliminaciones, tal y como se muestra en el siguiente gif.
Cómo configurar una máscara de barra de progreso
El último paso del material es crear una máscara para la barra de progreso que se puede llamar en un widget o en Sequencer para animar el material de IU y hacer que la barra de progreso se llene del color del material a medida que el jugador elimina enemigos.
Tienes que crear espacio para la siguiente serie de nodos. Selecciona todos los nodos existentes actualmente haciendo clic con el botón izquierdo y arrastrando alrededor de ellos. Seguidamente, muévelos a la izquierda como un solo grupo.
Tendrás que conectar la configuración de la máscara al segundo nodo LinearInterpolate (Lerp). Selecciona el segundo nodo LinearInterpolate (Lerp) y muévelo a la derecha, hacia el nodo Main Material. A continuación se muestra el aspecto que debe tener la configuración del nodo en este punto.
Haz clic en la imagen para ampliarla.
Para esta sección del material, tendrás que enmascarar las propiedades del material en función de sus coordenadas X e Y en el contenedor. Estas coordenadas también se utilizarán para revelar el material a medida que aumenten las eliminaciones de jugadores.
Haz clic con el botón derecho del ratón en la zona del grafo y añade los siguientes nodos:
Constant
ConstantBiasScale
LinearGradient
Step
Multiply
Selecciona el nodo Constant, haz clic con el botón derecho del ratón en el nodo y selecciona Duplicar en el desplegable.
Selecciona el primer nodo Constant y dale un valor de 5.0.
Haz clic con el botón derecho del ratón en el nodo y selecciona Convertir en parámetro.
Dale el nombre TrackerProgress al parámetro.
Este parámetro se utilizará en UMG y Sequencer para registrar las eliminaciones del jugador y hacer que el material se revele en el contenedor.
Arrastra el pin blanco del nodo Tracker Progress y conéctalo al nodo ConstantBiasScale.
Selecciona el nodo ConstantBiasScale y, en el panel Detalles, establece el valor de la compensación en 0 y la escala en 0.1. Esto normaliza TrackerProgress al valor 0-10 del rastreador.
Arrastra el nodo ConstantBiasScale y conéctalo a la entrada Y del nodo Step.
Arrastra el pin VGradient del nodo LinearGradient y conéctalo a la entrada X del nodo Step.
Arrastra el pin blanco del nodo Step y conéctalo a la entrada B del nodo Multiply.
Selecciona el segundo nodo Constant y dale un valor de 0.9.
Haz clic con el botón derecho del ratón en el grafo y escribe MaterialFunctionCall en la barra de búsqueda.
Selecciona el nodo Material Function para que sus opciones se abran en el panel Detalles.
Escribe UI_SDF_Circle en la barra de búsqueda.
Selecciona UI_SDF_Circle en el desplegable.
Esta función de material controla el tamaño del contenedor a través del nodo Constant y determina la forma del contenedor de material. En este caso, se trata de un contenedor circular.
Arrastra el segundo nodo Constant y conéctalo a la entrada Size(s) del nodo MF_UI_SDF_Circle.
Arrastra el pin Fill del nodo MF_UI_SDF_Circle y conéctalo a la entrada A del nodo Multiply.
Arrastra el pin blanco del nodo Multiply y conéctalo a la entrada A del segundo nodo LinearInterpolate (Lerp).
Arrastra el pin blanco del segundo nodo LinearInterpolate (Lerp) y conéctalo a la entrada Opacity del nodo Main Material.
El material está completo y la configuración final de los nodos debe parecerse a la imagen de abajo.
Haz clic en la imagen para ampliarla.
Para utilizar este material con UMG, conviértelo en una instancia de material. Los parámetros de una instancia de material pueden anularse, activarse o desactivarse, y llamarse en UMG y Sequencer para animar la interfaz de usuario con la que se utiliza el material.
Para crear una instancia de material:
Haz clic con el botón derecho del ratón en la miniatura del material en el explorador de contenido.
Selecciona Crear instancia de material en el menú desplegable.