Personalizar las texturas de la interfaz de usuario lleva mucho tiempo y requiere un conocimiento profundo de las funciones de materiales y su configuración. Para que las texturas de la interfaz de usuario personalizadas sean más accesibles, Unreal Editor para Fortnite (UEFN) cuenta con una serie de texturas personalizables.
Carpetas de materiales de la IU
La carpeta Materiales de la IU se encuentra en el explorador de contenido en Fortnite > IU > Materiales.
La carpeta Materiales contiene dos tipos de materiales de interfaz de usuario:
Materiales de medición: normalmente se utilizan para medir la salud y los escudos. (Consulta Colecciones de materiales de la IU para obtener más información).
Texturas: se suelen utilizar como imagen de fondo o en animaciones de la interfaz de usuario.
Las texturas pertenecen a las siguientes categorías de parámetros:
Textura SDF | Efectos de textura | Máscara de texturas |
Forma de la textura con un contorno difuminado. Puedes establecer parámetros que personalicen lo siguiente:
También puedes girar y difuminar las texturas. | Una textura con 9 efectos especiales personalizables diferentes. Todos los efectos se controlan por funciones de materiales que se personalizan mediante entradas de parámetros. | Una máscara de texturas oculta partes de la textura según tus entradas. Puedes definir parámetros que permitan personalizar lo siguiente:
|
 |  |  |
Creación de una instancia de material
Para utilizar una textura de la carpeta IU, primero debes convertirla en una instancia de material. Las instancias de material utilizan menos memoria que los materiales o las texturas, y son mucho más personalizables en UMG debido a los parámetros disponibles.
Los parámetros se manipulan en el modelo de vista, donde se vinculan a una función del dispositivo o al código Verse que manipula el material para que se comporte de una determinada manera.
Para crear una instancia de material a partir de un material, sigue estos pasos:
Abre las carpetas Proyecto > Fortnite > IU > Materiales.
Haz clic en la imagen para ampliarla. Haz clic con el botón derecho del ratón en un material para abrir el menú contextual desplegable.
Selecciona Crear instancia de material en el menú desplegable.
Haz clic en la imagen para ampliarla.
Se generaeá automáticamente una instancia de material en la carpeta principal del proyecto.
Textura SDF
La textura SDF puede sustituir la imagen predeterminada del icono del avatar del jugador o usarse para iconografía. Una textura SDF posee una serie de parámetros personalizables que se utilizan para establecer el aspecto del icono, hacer que sea difuminado o nítido, crear un efecto de brillo para que parezca un letrero de neón y mucho más.
Todos los parámetros de una textura pueden utilizarse con el modelo de vista en UMG y en el código Verse a través de los campos de Verse. Usa la siguiente tabla para obtener más información sobre el uso de los diferentes parámetros.
Base de los RXO
Los parámetros básicos de la textura SDF.
Parámetro | Descripción | GIF |
Textura | Selecciona una textura SDF en el menú desplegable. | |
Color | Selecciona un color para la textura. |  |
Brillo máx. | Aumenta y reduce el brillo del borde de la forma. Los valores cercanos a 0 intensifican el contorno de la forma. Los valores cercanos a 1 aumentan el brillo del contorno de la forma. Los parámetros adicionales de brillo máximo (GlowMax) dependen del valor GlowMax. |  |
Rotación | Gira la textura desde el centro. Un valor de 0.25 gira la textura 90° hacia la izquierda, mientras que un valor de -0.25 la gira 90° hacia la derecha. |  |
Cantidad de difuminado de la textura | Establece la cantidad de suavizado que aplicará a los bordes de la textura SDF cuando se utilicen los parámetros de brillo máximo (GlowMax). Los valores superiores aumentan la cantidad de difuminado, mientras que los valores inferiores la disminuyen. |  |
Color de sombra
Establece el color de la sombra de la textura.
Parámetro | Descripción | GIF |
Brillo máx. de la sombra | Establece la cantidad de brillo que tiene la sombra de la textura. Los valores cercanos a 0 intensifican el contorno de la forma. Los valores cercanos a 1 aumentan el brillo del contorno de la forma. |  |
Compensación X de la sombra | Establece la cantidad de compensación de la sombra de la textura a lo largo del eje X. Los valores superiores alejan la sombra de la textura. Los valores inferiores acercan la sombra a la textura. |  |
Compensación Y de la sombra | Establece la cantidad de desplazamiento de la sombra de la textura a lo largo del eje Y. Los valores superiores alejan la sombra de la textura. Los valores inferiores acercan la sombra a la textura. |  |
Opacidad de la sombra | Establece la opacidad de la sombra de la textura. Los valores cercanos a 1 aumentan la opacidad del color seleccionado. Los valores cercanos a 0 disminuyen la opacidad del color. |  |
Rotación de la sombra | Gira la sombra de la textura desde el centro. Un valor de 0.25 gira la sombra de la textura 90° a la izquierda. |  |
Grosor de la sombra | Establece el grosor de la sombra de la textura. Cuanto mayor es el valor, mayor es el grosor de la sombra. Los valores inferiores disminuyen el grosor. |  |
Trazo
Parámetros que afectan al aspecto del trazo de la textura.
Parámetro | Descripción | GIF |
Color del trazo interior | Establece el color del trazo interior de la textura. |  |
Brillo máx. del trazo interior | Establece la cantidad máxima de brillo del trazo interior de la textura. El brillo máximo del trazo interior (InnerStrokeGlowMax) depende del valor de brillo máximo (GlowMax). El valor máximo establecido del brillo máximo (GlowMax) determina el valor máximo del brillo para el brillo máximo del trazo interior (InnerStrokeGlowMax) y el brillo máximo del trazo exterior (OuterStrokeGlowMax). |  |
Grosor del trazo interior | Establece el grosor del trazo interior. Los valores superiores aumentan el grosor del trazo, mientras que los valores inferiores lo reducen. |  |
Brillo máx. del grosor del trazo interior | Establece el grosor del brillo del trazo interior de la textura. Los valores superiores aumentan el grosor del brillo del trazo, mientras que los valores inferiores reducen el grosor del brillo del trazo interior de la textura. El brillo máximo del grosor del trazo interior (InnerStrokeThicknessGlowMax) depende del valor de brillo máximo (GlowMax). El valor máximo establecido del brillo máximo (GlowMax) determina el valor máximo del brillo para el brillo máximo del trazo interior (InnerStrokeGlowMax), el brillo máximo del grosor del trazo interior (InnerStrokeThicknessGlowMax) y el brillo máximo del trazo exterior (OuterStrokeGlowMax). |  |
Color del trazo exterior | Establece el color del trazo exterior. |  |
Brillo máx. del trazo exterior | Establece la cantidad de brillo del trazo exterior de la textura. Los valores cercanos a 0 intensifican el contorno de la forma. Los valores cercanos a 1 aumentan el brillo del contorno de la forma. El brillo máximo del trazo exterior (OuterStrokeGlowMax) depende del valor de brillo máximo (GlowMax). El valor máximo establecido del brillo máximo (GlowMax) determina el valor máximo del brillo para el brillo máximo del trazo interior (InnerStrokeGlowMax), el brillo máximo del grosor del trazo interior (InnerStrokeThicknessGlowMax) y el brillo máximo del trazo exterior (OuterStrokeGlowMax). |  |
Grosor del trazo exterior | Establece el grosor del trazo exterior de la textura. Los valores superiores aumentan el grosor del trazo, mientras que los valores inferiores lo reducen. |  |
Brillo máx. del grosor del trazo exterior | Establece el grosor del brillo del trazo exterior de la textura. Los valores superiores aumentan el grosor del brillo del trazo, mientras que los valores inferiores lo reducen. |  |
Efectos de textura
Los efectos de textura poseen una serie de efectos personalizables que pueden transformar el aspecto de la textura:
Casilla
Deformación
Pixelar
Rebote
Medio tono
Degradado escalonado
Y mucho más…
Los parámetros se pueden mezclar y orientar con el modelo de vista en UMG y en el código Verse a través de los campos de Verse. Usa la siguiente tabla para obtener más información sobre los diferentes parámetros.
Textura básica
Los parámetros básicos de la textura. Selecciona una textura en el menú desplegable.
Parámetro | Descripción | GIF |
Textura | Selecciona una textura en el menú desplegable. |  |
Mosaico X | Aplica un mosaico a la textura a lo largo del eje X. Un valor de 1 no aplica un mosaico a la textura. Los valores superiores a 1 añaden mosaicos a la textura a lo largo del eje X. Es mejor utilizar números enteros en este parámetro para obtener imágenes completas. |  |
Mosaico Y | Aplica un mosaico a la textura a lo largo del eje Y. Un valor de 1 no aplica un mosaico a la textura. Los valores superiores a 1 añaden mosaicos a la textura a lo largo del eje Y. Es mejor usar números enteros en este parámetro para obtener imágenes completas. |  |
Traslación X | Desplaza la textura a lo largo del eje X. Puedes animar la textura seleccionado el parámetro Traslación X con Sequencer dentro de UMG. |  |
Traslación Y | Desplaza la textura a lo largo del eje Y. Puedes animar la textura seleccionado el parámetro Traslación Y con Sequencer dentro de UMG. |  |
Velocidad de traslación X | Establece la velocidad de traslación a lo largo del eje X. |  |
Velocidad de traslación Y | Establece la velocidad de traslación a lo largo del eje Y. |  |
Escalado
Parámetros que permiten cambiar la escala y el tamaño de la textura. Crea un efecto de golpeteo en la textura.
Parámetro | Descripción | GIF |
Está escalándose | Establece el efecto de escala en la textura. Esta opción solo es visible cuando también se utilizan los demás parámetros de escala. |  |
Velocidad máxima de escala | Establece la velocidad máxima del efecto de escala en la textura. |  |
Velocidad mínima de escala | Establece la velocidad mínima del efecto de escala en la textura. |  |
Tamaño al inicio | El tamaño de la textura al comienzo de la animación. |  |
Tamaño a la mitad | El tamaño de la textura en la mitad de la animación. |  |
Tamaño al final | El tamaño de la textura al final de la animación. |  |
Deformación
Parámetros que permiten añadir un efecto de deformación a la textura.
Para alterar la apariencia de un icono, se deben utilizar parámetros adicionales de deformación junto con el parámetro Está deformándose (IsWarping).
Parámetro | Descripción | GIF |
Está deformándose | Establece la cantidad de efecto de deformación en la textura. |  |
Amplitud X | Aplica un efecto de estiramiento a lo largo del eje X. |  |
Amplitud Y | Aplica un efecto de estiramiento a lo largo del eje Y. |  |
Frecuencia X | Aplica un efecto de onda sinusoide a la textura a lo largo del eje X. |  |
Frecuencia Y | Aplica un efecto de onda sinusoide a la textura a lo largo del eje Y. |  |
Velocidad de deformación | Establece la velocidad del efecto de deformación en la textura. |  |
Pixelar
Parámetros que permiten pixelar la apariencia de la textura.
Parámetro | Descripción | GIF |
Está pixelado | Añade un efecto de píxeles a la textura. Un valor de 0 no aplica el efecto de píxeles a la textura. Un valor de 1 pixela completamente la textura. |  |
Número de píxeles | Establece el número de píxeles que tiene la textura. Un valor de 1 convierte la textura en un cuadrado. Añadir más píxeles crea una forma pixelada. |  |
Rebote
Parámetros que permiten añadir un efecto de rebote a la textura.
Parámetro | Descripción | GIF |
Está rebotando | Establece la tasa de rebote del efecto. Esta opción solo es visible cuando también se utilizan los demás parámetros de rebote. |  |
Velocidad de rebote | Establece la velocidad con la que rebota la textura. |  |
Rebote X | Establece la cantidad de efecto de rebote que se aplicará a lo largo del eje X. |  |
Rebote Y | Establece la cantidad de efecto de rebote que se aplicará a lo largo del eje Y. |  |
Medio tono
Parámetros que producen un efecto de punto de tinta de cómic en la textura.
Parámetro | Descripción | GIF |
Es medio tono | Establece si el efecto está en uso y la opacidad del efecto de medio tono. Los valores superiores aumentan la opacidad del efecto, mientras que los valores inferiores la disminuyen. |  |
Densidad de los puntos | Aumenta la densidad de los puntos en el efecto. Los valores superiores aumentan el número de puntos y reducen su tamaño. Los valores inferiores disminuyen el número de puntos y aumentan el tamaño de los puntos. |  |
Brillo máx. de los puntos | Establece la cantidad máxima de brillo aplicada alrededor de los puntos. Los valores positivos hacen que los puntos parezcan estrellas, mientras que los valores negativos hacen que parezcan círculos. |  |
Brillo mín. de los puntos | Establece la cantidad mínima de brillo alrededor de los puntos. Los valores pueden utilizarse para cambiar el color del fondo y los puntos. Los valores de 5 y superiores hacen que el efecto se desvanezca en un solo color. Del mismo modo, los valores inferiores a -7 hacen que el efecto se desvanezca en un solo color. |  |
Tamaño máximo de los puntos | Establece el tamaño máximo de los puntos. |  |
Tamaño mínimo de los puntos | Establece el tamaño mínimo de los puntos. |  |
Color del degradado 1 | Establece el color principal del efecto de medio tono. |  |
Color del degradado 2 | Establece el color secundario del efecto de medio tono. |  |
Velocidad de desplazamiento de medio tono X | Establece la velocidad a la que se desplazan los puntos por el eje X. |  |
Velocidad de desplazamiento de medio tono Y | Establece la velocidad a la que se desplazan los puntos por el eje Y. |  |
Rotación de medios tonos | Gira la dirección en la que se desplazan los puntos. |  |
Degradado escalonado
Parámetros que permiten añadir un degradado escalonado a la textura.
Estos parámetros dependen de los parámetros de color de tinte.
Parámetro | Descripción | GIF |
Es un degradado escalonado | Establece si se aplica el efecto de degradado escalonado a la textura. |  |
Cantidad de degradado escalonado | Establece la cantidad de degradado escalonado que se aplicará a la textura. IsSteppedGradient debe estar habilitado con un valor inferior a 1.0 para que este parámetro funcione. |  |
Color de tinte
Estos parámetros permiten añadir colores a la textura para crear un efecto de degradado en la misma.
Parámetro | Descripción | GIF |
Opacidad del degradado de tinte | Establece la opacidad de los colores del degradado. Los valores inferiores disminuyen la opacidad de la textura, mientras que los valores superiores aumentan la opacidad del material. |  |
Color de tinte 1 | Establece el primer color del degradado. |  |
Posición del color de tinte 1 | Establece la posición del primer color del degradado. Esta opción solo funciona cuando se selecciona Degradado de tinte activado y se establece un valor. |  |
Color de tinte 2 | Establece el segundo color en el degradado. |  |
Posición del color de tinte 2 | Establece la posición del segundo color del degradado. Los valores superiores desplazan el degradado para que comience en el lado opuesto. Los valores inferiores aumentan la visibilidad de la selección del segundo color. Esta opción solo funciona cuando la opción Degradado de tinte activado está seleccionada y se establece un valor. | |
Color de tinte 3 | Establece el tercer color del degradado. | |
Posición del color de tinte 3 | Establece la posición del segundo color del degradado. Los valores superiores desplazan el degradado para que comience en el lado opuesto. Los valores inferiores aumentan la visibilidad de la selección del segundo color. Esta opción solo funciona cuando se selecciona Degradado de tinte activado y se establece un valor. | |
Degradado de tinte activado | Establece si el efecto de degradado se aplica a la textura. | |
Rotación del degradado de tinte | Gira la dirección del degradado. |  |
Degradado de tinte radial | Cambia el degradado a un degradado radial. | |
Tamaño del degradado de tinte radial | Establece el tamaño del degradado radial. |
Color alfa
Parámetros que permiten añadir transparencia, color y degradado a una textura que tiene alfa.
Estos parámetros funcionan mejor con texturas que tienen color, como una imagen de un personaje o una textura en blanco y negro.
Parámetro | Descripción | GIF |
Opacidad de alfa | Establece la opacidad de los colores alfa en la textura. Los valores inferiores disminuyen la opacidad de la textura, mientras que los valores superiores aumentan la opacidad del material. |  |
Color alfa 1 | Establece el primer color del degradado. |  |
Posición del color alfa 1 | Establece la posición del primer color del degradado. Esta opción solo funciona cuando se selecciona la opción AlphaGradientOn y se establece un valor. |  |
Color alfa 2 | Establece el segundo color en el degradado. |  |
Posición del color alfa 2 | Establece la posición del segundo color del degradado. Los valores superiores desplazan el degradado para que comience en el lado opuesto. Los valores inferiores aumentan la visibilidad de la selección del segundo color. Esta opción solo funciona cuando se selecciona la opción AlphaGradientOn y se establece un valor. |  |
Color alfa 3 | Establece el tercer color del degradado. |  |
Posición del color alfa 3 | Establece la posición del tercer color del degradado. Los valores superiores desplazan el degradado para que comience en el lado opuesto. Los valores inferiores aumentan la visibilidad de la selección del tercer color. Esta opción solo funciona cuando se selecciona la opción AlphaGradientOn y se establece un valor. |  |
Degradado alfa activado | Establece si el degradado se aplica a la textura. |  |
Rotación del degradado alfa | Gira la dirección del degradado. |  |
Degradado radial alfa | Convierte el degradado en un degradado radial. |  |
Tamaño del degradado radial alfa | Establece el tamaño del degradado radial. |  |
Máscara de texturas
La máscara de texturas utiliza parámetros que pueden enmascarar el icono o el avatar del jugador y añadir elementos de contorno a la imagen del icono o del avatar.
El material de máscara de texturas posee una serie de parámetros personalizables que puedes utilizar con el modelo de vista en UMG y en el código Verse a través de los campos de Verse. Usa la siguiente tabla para obtener más información sobre el uso de los diferentes parámetros.
Textura
Parámetros que establecen el aspecto de la textura.
Parámetro | Descripción | GIF |
Textura | Selecciona una textura en el menú desplegable. |  |
Textura alfa | Establece el color alfa de la textura. El valor 1 es blanco. Los valores inferiores a 1 disminuyen el valor del blanco y se mezclan con el color de fondo. |  |
Posición X de la textura | Posiciona la textura a lo largo del eje X. |  |
Posición Y de la textura | Posiciona la textura a lo largo del eje Y. |  |
Escala X de la textura | Escala la textura a lo largo del eje X. |  |
Escala Y de la textura | Escala la textura a lo largo del eje Y. |  |
Relleno
Parámetros que establecen el aspecto del degradado aplicado al fondo.
Parámetro | Descripción | GIF |
Textura de relleno personalizada | Selecciona una textura de relleno en el menú desplegable. | |
Alfa de relleno | Establece el color alfa de la máscara. El valor 1 es blanco; los valores inferiores a 1 disminuyen el valor del blanco y se mezclan con el color de fondo. |  |
Color de relleno 1 | Establece el primer color del degradado. |  |
Posición del degradado de color de relleno 1 | Establece la posición del primer color del degradado. |  |
Color de relleno 2 | Establece el segundo color en el degradado. |  |
Posición del degradado de color de relleno 2 | Establece la posición del segundo color del degradado. Los valores superiores desplazan el degradado para que comience en el lado opuesto. Los valores inferiores aumentan la visibilidad de la selección del segundo color. |  |
Color de relleno 3 | Establece el tercer color del degradado. |  |
Posición del degradado de color de relleno 3 | Establece la posición del tercer color del degradado. Los valores superiores desplazan el degradado para que comience en el lado opuesto. Los valores inferiores aumentan la visibilidad de la selección del tercer color. |  |
Tamaño del degradado radial del color de relleno | Establece el tamaño del degradado en el fondo. |  |
Tipo de degradado de relleno | Cambia el tipo de degradado de radial a lineal. |  |
Brillo | Establece la intensidad del brillo del fondo. | |
Rotación del relleno de degradado lineal | Gira el degradado alrededor de un círculo. La opción LinearGradientFillRotation depende de los valores establecidos en la opción FillGradientType. |  |
Forma | Establece la forma de la máscara alrededor de la textura. |  |
Rotación de la forma | Gira la forma de la máscara alrededor de la textura. |  |
Tamaño de la forma | Establece el tamaño de la forma de la máscara alrededor de la textura. |  |
Radio de la esquina inferior izquierda | Al cambiar este parámetro, se añade una esquina redondeada a la esquina inferior izquierda en función del valor utilizado. |  |
Radio de la esquina inferior derecha | Al cambiar este parámetro, se añade una esquina redondeada a la esquina inferior derecha en función del valor utilizado. |  |
Radio de la esquina superior izquierda | Al cambiar este parámetro, se añade una esquina redondeada a la esquina superior izquierda en función del valor utilizado. |  |
Radio de la esquina superior derecha | Al cambiar este parámetro, se añade una esquina redondeada a la esquina superior derecha en función del valor utilizado. |  |
Contorno
Parámetros que establecen el aspecto del contorno alrededor de la máscara.
Parámetro | Descripción | GIF |
Grosor del espacio | Establece el tamaño del espacio entre el contorno y la textura. La opción Grosor del espacio (GapThickness) depende de que la opción Alfa de contorno (OutlineAlpha) tenga un valor superior a 0.40. |  |
Alfa de contorno | Establece el color alfa del contorno. El valor 1 es el color alfa completo, los valores inferiores a 1 disminuyen el valor del color y se mezclan con el fondo. |  |
Color de contorno 1 | Establece el primer color del degradado del contorno. |  |
Posición del color de contorno 1 | Establece la posición del primer color del degradado del contorno. |  |
Color de contorno 2 | Establece el segundo color del degradado del contorno. |  |
Posición del color de contorno 2 | Establece la posición del segundo color del degradado del contorno. |  |
Color de contorno 3 | Establece el tercer color del degradado del contorno. |  |
Posición del color de contorno 3 | Establece la posición del tercer color del degradado del borde. |  |
Grosor del contorno | Establece el grosor del contorno. |  |
Máscara de texturas
Parámetros para cambiar el aspecto de la máscara de texturas.
Parámetro | Descripción | GIF |
Mostrar vista previa de la máscara | Establece la opacidad de la vista previa de la máscara. Un valor de 0 significa que la vista previa es invisible, y un valor de 1 significa que la máscara es completamente visible. Este parámetro solo es visible cuando las opciones Anchura de la máscara (MaskWidth) y Altura de la máscara (MaskHeight) tienen valores superiores a 0.0. |  |
Posición X de la máscara | Posiciona la máscara a lo largo del eje X. |  |
Posición Y de la máscara | Posiciona la máscara a lo largo del eje Y. |  |
Altura de la máscara | Establece la altura de la máscara. |  |
Anchura de la máscara | Establece la anchura de la máscara. |  |
Pendiente
Parámetros que establecen el grado de inclinación que se aplicará al fondo y al contorno de la máscara.
Parámetro | Descripción | GIF |
Inclinación X | Inclina el fondo y el contorno de la máscara a lo largo del eje X. |  |
Inclinación Y | Inclina el fondo y el contorno de la máscara a lo largo del eje Y. |  |