El material de medidor es perfecto para utilizarlo en la IU. Se puede hacer referencia a este material en un widget de imagen UMG a fin de realizar un seguimiento de tu vida, de las eliminaciones o de la recolección de bienes y dinero en el juego. Utiliza este tutorial para crear tu propio material de medidor y utilizarlo en un diseño de IU personalizada.
Este material puede anular el aspecto predeterminado de Fortnite con el material personalizado que crees a fin de realizar un seguimiento de la vida, los escudos u otro tipo de estadística centrada en el jugador.
Este material utiliza íconos en su diseño. Unreal Editor para Fortnite (UEFN) viene con numerosos íconos de forma nativa. Busca los íconos en las carpetas de Fortnite: Texturas > Íconos.
Crear un material
Todos los materiales se crean en el explorador de contenido. A fin de organizar tu proyecto, crea una carpeta para guardar todos tus materiales.
Haz clic con el botón derecho en el explorador de contenido para abrir el menú contextual.
Selecciona Material en el menú contextual.
Asigna el nombre M_Meter a tu material.
Haz doble clic en la miniatura del material para abrir el editor de materiales.
Para crear el material de medidor, tendrás que descargar el Laboratorio de materiales de la IU desde Fab.
Para obtener más información sobre los nodos Material y su funcionamiento, consulta Nodos de material y ajustes.
Nodos de material
A continuación, se presenta una lista de los nodos Material utilizados en este tutorial y su propósito en el producto final. Si deseas omitir esta explicación y comenzar a crear el material, haz clic aquí.
| Nodo Material | Propósito |
|---|---|
Añade un color al ícono y al relleno de progreso. | |
Se usa para añadir una máscara de fondo debajo del ícono. También se utiliza como barra de progreso para ocultar el fondo según el progreso. | |
Permite añadir una textura al material de la IU. | |
Se utiliza para superponer el ícono coloreado sobre un color de fondo, así como para crear la máscara para el ícono sobre el fondo. | |
Emite las coordenadas de la textura UV del ícono en forma de un valor vectorial de dos canales. | |
Función de materiales > Escala de la IU | Las funciones de textura son una subcategoría del nodo Material Function. Brinda una forma de escalar los UV del ícono. |
Función de material > Círculo SDF de la IU | Permite ocultar la barra de progreso detrás del ícono y cuánto del círculo se rellena con el color de fondo. Normalmente, esta función material se utiliza para trazar un círculo en el material. Se puede reemplazar con otras funciones materiales de la forma del SDF (por ejemplo, el cuadro del SDF de la IU) del laboratorio de materiales de la IU para generar una forma diferente. |
Se utiliza para escalar los ejes X e Y del ícono de manera uniforme, donde se añaden 2 parámetros escalares, 1 para escalar la X del ícono y otro para la Y del ícono, y se conectan a MF_UI_Scale. | |
Los UV del ícono se fijan entre 0 y 1 para garantizar que el ícono no se ajuste ni se coloque en mosaico. | |
Se utiliza para crear un rango de 0 a 10 para el parámetro escalar de progreso en el dispositivo rastreador. ConstantBiasScale toma el valor establecido del parámetro, deduce el valor de sesgo, y lo multiplica por el valor escalar. | |
Un nodo Multiply toma dos entradas, las multiplica juntas y genera el resultado. En este ejemplo, los canales RGB de una textura se multiplican por un nodo Vector3 para colorear el fondo. Además, se multiplica LinearGradient por Vector3 para colorear el ícono. | |
Paso | Crea un umbral para las coordenadas X e Y. El umbral crea un contenedor para el material de fondo en la IU. Los nodos Step convierten los valores por encima de un umbral en 1 y por debajo del umbral en 0. Esto genera la máscara para una barra de progreso donde existe una separación clara entre un área rellena y una vacía. |
Toma los valores UGradient de la gradiente lineal y los redondea al siguiente entero, y genera el resultado. Nos permite crear un fondo sólido básico con facilidad. | |
Constant | Permite añadir un valor a un atributo de material. |
Cómo preparar el nodo Main Material
Antes de añadir cualquier nodo Material, cambia la configuración del nodo Main Material (MMN) y prepara el material que se utilizará en la IU. En la configuración del MMN, se determina qué entradas están disponibles en el MMN y dónde se puede utilizar el material.
Selecciona el nodo MMN.
En el panel de detalles del editor de materiales, establece el dominio de material en Interfaz de usuario.
Establece el modo integración en Translúcido.
Haz clic en la imagen para ampliarla.
Cómo configurar el color de progreso
Comienza el material de medidor mediante la configuración del color de progreso que se puede identificar en UMG con el widget de imagen. Puedes utilizar este color de progreso para crear un diseño de IU personalizado.
Haz clic derecho en el gráfico de materiales para abrir el menú del nodo.
Escribe Gradiente lineal en la barra de búsqueda. Selecciona Gradiente lineal en el menú desplegable. El nodo aparece en el gráfico.
Repite los pasos uno y dos para añadir los siguientes nodos al gráfico de materiales:
Ceil
Multiply
Constant3vector
Arrastra el pin blanco del nodo Constant3Vector y conéctalo a la entrada A en el nodo Multiply. La forma en el visor cambia de color.
Selecciona el nodo de material Constant3Vector en el gráfico de materiales. El nodo se resalta en el gráfico para indicar que lo seleccionaste.
Haz clic en el cuadrado negro del nodo para abrir la rueda de colores. Selecciona un color de la rueda de colores 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 brinda color al contenedor de la IU.
Haz clic derecho en el área del gráfico y añade un nodo LinearInterpolate al gráfico.
Arrastra el nodo Multiply y conéctalo a la entrada A del primer nodo LinearInterpolate.
Esta parte del material se utiliza para realizar un seguimiento del progreso en un medidor al rellenar el fondo de un contenedor.
Para agrupar nodos y moverlos como una unidad, realiza lo siguiente:
Haz clic izquierdo y arrastra el cursor alrededor de un grupo de nodos. Todos los nodos seleccionados se resaltarán.
Selecciona un nodo y arrástralo por el gráfico; todos los nodos seleccionados se moverán juntos como una sola pieza.
Cómo configurar la escala y el color de los íconos
Para esta sección del material, elegirás y escalarás un ícono, y seleccionarás un color para el ícono en el material y en la IU. Los íconos se pueden encontrar en las carpetas Fortnite > Texturas > Íconos.
Haz clic derecho en el área del gráfico y añade los siguientes nodos al gráfico:
TextureCoordinate
AppendVector
Fijación
TextureSample
Constant3vector
Multiply
Constant
Selecciona el nodo Constant en el gráfico; luego, haz clic derecho y selecciona Duplicar en el menú 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 en el gráfico y añade un valor predeterminado de 0.7.
Haz clic derecho en el nodo y selecciona Convertir a parámetro en el menú desplegable. Nombra el parámetro IconScaleX. Este nodo controlará el tamaño de la escala para las coordenadas X del ícono.
Selecciona el nodo Constant inferior en el gráfico y añade un valor predeterminado de 0.7.
Haz clic derecho en el nodo y selecciona Convertir a parámetro en el menú desplegable. Nombra el parámetro IconScaleY. Este nodo controlará el tamaño de la escala para las coordenadas Y del ícono.
Arrastra el nodo de parámetro IconScaleX y conéctalo a la entrada A del nodo AppendVector.
Arrastra el nodo de parámetro IconScaleY y conéctalo a la entrada B del nodo AppendVector.
Los valores X e Y de IconScale que se establecen en el nodo parámetro se pueden controlar fuera del material cuando se convierten en una instancia de material.
A continuación, deberás crear un nodo Material Function para añadir una función al material que escale los UV del ícono.
Cómo configurar una función de material: UI_Scale
En este paso, obtendrás más información sobre cómo crear una función material y buscar funciones para utilizar con el nodo.
Haz clic derecho en el gráfico y escribe MaterialFunction en la barra de búsqueda. Selecciona MaterialFunctionCall en el menú desplegable. El nodo MaterialFunctionCall aparece en el gráfico.
En el panel de detalles, haz clic en el menú desplegable Función de material y escribe UI_Scale en la barra de búsqueda; luego, selecciona MF_UI_Scale en el menú desplegable. El nodo MaterialFunctionCall se convierte en el nodo UI Scale.
La función UI_Scale permite aumentar o disminuir la escala de los UV del ícono mediante las funciones materiales. Las funciones materiales solo se pueden utilizar en un material a través del nodo Material Function.
Configura los UV del ícono
A continuación, añadirás un ícono y un color de ícono al material que se escalará al tomar la información de los parámetros y el escalado de la IU.
Arrastra el nodo TextureCoordinate y conéctalo a la entrada de UV (V2) en el nodo MF_UI_Scale.
Arrastra el nodo AppendVector y conéctalo a la entrada de escala (V2) en el nodo MF_UI_Scale.
Arrastra el pin de resultado del nodo MF_UI_Scale y conéctalo a la entrada blanca en el nodo Clamp.
Selecciona el nodo Texture Sample para abrir sus opciones en el panel de detalles.
Abre el menú desplegable de Textura.
Escribe "ícono" en la barra de búsqueda.
Selecciona un ícono del menú desplegable.
Arrastra el pin blanco del nodo Clamp y conéctalo a la entrada de UV en el 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 del nodo 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 alfa del 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 de detalles.
Haz clic en el campo Constante para abrir la rueda de colores.
Selecciona un color para el ícono en la rueda de colores.
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 de color final en el nodo Main Material.
El ícono ahora aparece en la ventana de vista previa del material.
A continuación, configurarás la máscara para la barra de progreso. Esto funciona mediante la revelación de la porción del material que corresponde al aumento en las eliminaciones, tal como 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 mediante un widget o un Sequencer para animar el material de la IU y que la barra de progreso se rellene del color del material a medida que el jugador elimina enemigos.
Debes crear espacio para la siguiente serie de nodos. Haz clic izquierdo y arrastra el cursor alrededor de todos los nodos existentes para seleccionarlos; luego, muévelos hacia la izquierda como un solo grupo.
Tendrás que conectar la máscara configurada en el 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 debería tener la configuración del nodo en este momento.
Haz clic en la imagen para ampliarla.
Para esta sección del material, deberás 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 los jugadores.
Haz clic derecho en el área del gráfico y añade los siguientes nodos al gráfico:
Constant
ConstantBiasScale
LinearGradient
Paso
Multiply
Selecciona el nodo Constant, haz clic derecho en el nodo y selecciona Duplicar en el menú desplegable.
Selecciona el primer nodo Constant y dale el valor 5.0.
Haz clic derecho en el nodo y selecciona Convertir en parámetro.
Nombra el parámetro TrackerProgress.
Este parámetro se usará en UMG y Sequencer para rastrear las eliminaciones del jugador y lograr que el material se revele en el contenedor.
Arrastra el pin blanco del nodo TrackerProgress y conéctalo al nodo ConstantBiasScale.
Selecciona el nodo ConstantBiasScale y, en el panel de detalles, establece el valor de sesgo en 0 y la escala en 0.1. Esto normaliza a TrackerProgress conforme al valor del rastreador entre 0 y 10.
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 el valor 0.9.
Haz clic derecho en el gráfico y escribe MaterialFunctionCall en la barra de búsqueda.
Selecciona el nodo MaterialFunction para que sus opciones se abran en el panel de detalles.
Escribe UI_SDF_Circle en la barra de búsqueda.
Selecciona UI_SDF_Circle en el menú desplegable.
Esta función material controla el tamaño del contenedor a través del nodo Constant y determina la forma del contenedor de material. En este caso, es un contenedor circular.
Arrastra el segundo nodo Constant y conéctalo a la entrada Tamaños del nodo MF_UI_SDF_Circle.
Arrastra el pin de relleno 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 Opacidad del nodo Main Material.
El material está completo, por lo que la configuración completa del nodo debería verse como en la siguiente imagen.
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 con el fin de animar la IU con la que se utiliza el material.
Para crear una instancia de material, debes realizar lo siguiente:
Haz clic derecho en la miniatura del material en el explorador de contenido.
Selecciona Crear instancia de material en el menú desplegable.