Existen las siguientes dos formas para crear un material de IU personalizado para tu proyecto:
Colección de materiales: una colección de materiales que tiene toda la funcionalidad de la IU integrada con anterioridad en el material.
Material base personalizado: un material creado desde cero con las funciones materiales.
Colección de materiales
La colección de materiales es una serie de materiales del medidor y texturas muy personalizables. Puedes encontrar la colección de materiales en el explorador de contenido en Fortnite > IU > Materiales. Los materiales se dividen en los siguientes dos tipos:
Materiales del medidor: se suelen utilizar como barras de progreso.
Texturas: se suelen utilizar para iconografía y retratos de jugadores.
El dispositivo material_collection_device tiene un ejemplo de cómo la colección de materiales se puede utilizar con Verse para mostrar las texturas y los materiales, así como utilizar los parámetros de las instancias de material a fin de cambiar con dinamismo los materiales de la IU cuando ocurren eventos de daño en el juego.
Material base personalizado
Para crear un material base personalizado para un widget de imagen de UMG, debes definir la opción Dominio de material como Interfaz de usuario para Nodo de material principal. Este material base emplea el uso de funciones materiales que hacen que el material sea más dinámico.
Los materiales se convierten en instancias de material para garantizar una reutilización eficiente del material base y una interfaz más fácil de usar que te permite personalizar los parámetros del material. Los parámetros del material se actualizan en la IU por medio de las propiedades vinculadas del widget de UMG.
Todos los cambios realizados en un material base después de la conversión se propagan en todas sus instancias de material.
En el explorador de contenido, abre las carpetas IU > Dispositivos > Control del HUD > MaterialInstances. Busca y abre el material de la barra de escudo denominado MI_HCD01_ShieldBar haciendo doble clic en la miniatura. Esto abre la instancia de material en el editor de instancias de material.
En la sección anterior, Cómo configurar los parámetros del dispositivo, se explicó cómo se usaba la propiedad Progreso de la instancia de material para actualizar la barra de escudo en el HUD cuando un jugador recibe daño con el escudo o repara su escudo. Estos cambios se logran mediante el uso de la información del jugador del control del HUD para decirle a la instancia de material en qué dirección deslizar la barra según la información del jugador.
Materiales
La razón por la que una instancia de material puede escuchar la función de un dispositivo radica en el hecho de que tiene parámetros definidos en su material base. En los materiales de la interfaz de usuario, se utilizan funciones materiales para crear ritmos o patrones cronometrados en el material que se pueden aprovechar a través de instancias de material para actualizar la información del jugador en el HUD.
Esta plantilla utiliza las mismas funciones materiales que el proyecto de laboratorio de materiales de la IU. Para comprender mejor los diferentes tipos de funciones materiales y cómo se utilizaron, consulta la página Desglose de las funciones materiales del proyecto de laboratorio de materiales de la IU.
A continuación se muestra una tabla que describe los diferentes materiales creados para el proyecto y cómo utilizarlos.
| Lista de materiales del proyecto | Uso |
|---|---|
M_DropShadow | Crea una sombra paralela para mostrar debajo de una forma. Permite un cuadrado, un círculo, un hexágono o una forma personalizada (mediante una textura). Las formas personalizadas no permiten suavizar la sombra. |
M_IconWithbackground | Crea un ícono con un fondo y un contorno. |
M_Meter | Crea un medidor de barra simple para el dispositivo de interacción especializada. |
M_Notches | Crea muescas decorativas espaciadas uniformemente. Se usa con M_Meter para crear un medidor de barra con muescas para el dispositivo de interacción especializada. |
M_ProgressBar_Basic | Crea una barra de progreso con esquinas curvas o afiladas con relleno degradado y contorno. |
M_ProgressBar_Orb | Crea una barra de progreso en forma de orbe que se llena a medida que avanza. Tiene un ícono de textura en el centro del orbe. |
M_Texture_Complex | Permite escalar o deformar una textura personalizada. Por ejemplo, se puede utilizar para crear un efecto brillante o submarino. |
M_Texture_SImple | Permite colorear texturas simples. Se puede utilizar con una textura simple en blanco y negro o una textura con datos empacados por canal (mediante canales RGB). |
M_Wave | Crea una ola con burbujas que flotan en la parte superior. |
Grupos de parámetros
Abre las distintas instancias de material de la plantilla para ver los distintos parámetros enumerados en los grupos de parámetros. Estos son los parámetros editables de las funciones materiales que se pueden vincular a dispositivos y actualizar en el HUD.
Los grupos de parámetros pueden editarse en el editor de instancias de material solo si están marcados.
Para editar los parámetros en el editor de instancias de material, abre el explorador de contenido y las carpetas IU > Dispositivos > SkilledInteraction > MaterialInstances; luego, busca y abre la instancia de material MI_SID03_Water.
Empieza por cambiar el color del agua, haz doble clic en los parámetros de Color líquido 1 y Color líquido 2. Esto abre la rueda de colores. Cambia el agua a un color diferente. En el ejemplo siguiente, el color del agua cambia de azul a verde.
Mira de cerca las burbujas. Si tienes seleccionada la ventana del editor de instancias de material, deberías ver que las burbujas en el material ascienden. Si deseas cambiar el tamaño de la burbuja, habilita los parámetros de tamaño BubblesStartSize y BubblesMiddleSize y después edita sus parámetros. Si el tamaño del parámetro es demasiado grande, las burbujas parecen desaparecer detrás de una pared.
Parámetros como estos se pueden definir en la opción Vinculaciones de vista y utilizarse con las funciones del dispositivo para actualizar la información del jugador.
Migra instancias de material y recursos de textura para utilizarlos en tus propios proyectos.
Texturas
Las texturas se utilizan en la IU para aportar un nivel de detalle y pulido que no se puede conseguir únicamente con materiales. Si decides utilizar texturas en tus diseños de IU, ten en cuenta que las texturas consumen mucha memoria.
Con la textura de interacción especializada y las muestras combinadas de textura y material, puedes ver qué parte de la IU está hecha con texturas. En la muestra de Textura, cuando desactivas el widget de placa de fondo, las únicas partes de la IU que quedan visibles son el mensaje, la barra de vida y el contador de eliminaciones.
El método preferido para crear el aspecto de las cajas estilizadas en la placa de fondo es utilizar una textura. La complejidad del diseño y de la forma sería difícil de reproducir en UMG. Los materiales de la IU solo se pueden utilizar para crear formas primitivas básicas, aplicar un trazo en el contorno de la forma del material y añadir degradados a la forma y al trazo del material.
La muestra de IU con material y textura muestra cómo la combinación de texturas y materiales crea un aspecto más pulido para la IU. La IU está formada por tres texturas que conforman el diseño de la placa de fondo y la imagen de la criatura.
La imagen de la criatura está superpuesta sobre un widget de imagen. El widget de imagen no utiliza una instancia de material. En cambio, la opción Pincel crea un rectángulo blanco en la capa debajo de la imagen de la criatura. El tamaño y las dimensiones del rectángulo se controlan en el panel de detalles mediante las opciones de Tamaño de imagen.
En el panel Jerarquía, los widgets que preceden a otros en la lista se sitúan en la capa de fondo, y cada widget adicional se sitúa encima del widget precedente en la lista.
Una instancia de material se utiliza como sombra paralela para la fotografía de la criatura en el diseño.
Texturas SDF
El SDF es una función que usa la posición como una entrada y genera la distancia a partir de esa posición. Por ejemplo, en la imagen siguiente, el centro del radial es 1, es decir, completamente blanco, pero a medida que avanza hacia el borde, hace una transición a 0, completamente negro. Con este concepto, los SDF ofrecen una manera de especificar un rango de valores entre 0 y 1 para aplicar un efecto.
Eso significa que puedes hacer lo siguiente:
Selecciona valores entre 0.5 y 1.0, y aplica un color sólido.
Toma valores entre 0.49 y 0.0, y aplica un color atenuado que imite un brillo.
Las texturas normales no hacen eso porque su valor es 1 (blancas) o 0 (negras). Los SDF te dan todos esos datos entre 0 y 1.
Estos conceptos también se pueden aplicar a la fotografía. Si una fotografía se guarda como archivo .png y tiene efectos aplicados, pero no hay una gama completa de colores ni detalles de iluminación en la imagen, significa que hay menos opciones de personalización con la imagen, porque editarla para que sea más clara u oscura puede hacer que la imagen pierda detalles o estos se borren.
Si esa misma imagen se tomó con una cámara DSLR, el archivo sin procesar, que tiene toda la información de color e iluminación, se puede personalizar al nivel de granularidad, como hacer que las partes oscuras sean más brillantes sin perder detalles dentro de esas áreas oscuras, y viceversa.
Busca en las carpetas IU > Textura > SDF para obtener la vista previa completa de las texturas SDF y crear tu propia IU con estilo único.
Hay una carpeta llamada Íconos llena de íconos SDF.
Texturas SDF en materiales
La mayoría de los materiales de la IU son materiales 2D planos que utilizan valores binarios de 0 y 1 para definir el exterior y el centro del material. En materiales 2D. Cuando las texturas SDF se utilizan en un nodo Texture Sample y se emparejan con una función de material SDF, la IU se puede ajustar mediante la manipulación de algunos valores en el material de la IU.
La alteración de diferentes valores en un material de IU donde se utilizan texturas SDF y nodos de material produce algunos efectos diferentes, como los siguientes:
Sombras
Desenfoque
Brillo difuso
Brillo
Contornos
Animaciones
Escalamiento
Las texturas SDF hacen que los materiales de la IU parezcan más dinámicos y únicos porque permiten una escala vertical sin perder calidad, mientras que los recursos normales pierden calidad cuando se amplían o reducen. Las texturas SDF tienen una mejor optimización para hacer fácilmente todos los efectos con una sola textura, lo que permite crear un gráfico de materiales más organizado.
Por otro lado, las texturas regulares en blanco y negro no se manipulan fácilmente en el gráfico de materiales y se recurre al uso de múltiples texturas. En la imagen anterior, la forma más sencilla de añadir brillo a las texturas es superponiendo la textura sobre un degradado radial, en lugar de crear un gráfico de materiales detallado para lograr un resultado similar.
Nodo de material Smooth Step
Los nodos de material de tipo Step suelen crear una transición difícil en los materiales, por ejemplo, de 0 a 0.25 directamente. El nodo Smooth Step, por otro lado, utiliza funciones SDF para crear una transición suave en los materiales de la IU. Los materiales de la IU en la plantilla que usan texturas SDF utilizan el nodo de material Smooth Step para crear una transición suave desde el centro del material hasta el borde exterior.
Puntos clave
Estos son algunos puntos importantes para el uso de materiales y texturas en los recursos de la IU:
El uso de funciones materiales ahorra tiempo gracias a los nodos de material predefinidos que hacen referencia a funciones en los materiales de la barra de vida y escudo, y a los materiales de la placa de fondo de la IU que hacen que reaccionen a eventos en el juego.
Los materiales y las texturas SDF crean una IU de aspecto más dinámico.
Comprender cómo superponer tus widgets de imagen marca la diferencia entre una IU de aspecto básico y una IU más interesante visualmente.
Las texturas deben utilizarse para los elementos de un diseño que son visualmente complejos y no se pueden producir con materiales.