Para crear un material padre personalizado para un widget de Imagen de UMG, tienes que establecer Dominio del material en Interfaz de usuario para el nodo Main Material. Este material padre emplea el uso de funciones de material 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 padre y una interfaz más fácil de usar que te permita personalizar los parámetros del material. A continuación, los parámetros del material se actualizan en la interfaz de usuario a través de las propiedades vinculadas del widget de UMG.
Cualquier cambio realizado en un material padre después de la conversión se propagará en todas sus instancias de material.
Desde el explorador de contenido, abre las carpetas Interfaz de usuario > Dispositivos > Controlador del HUD > Instancias de material. Busca y abre el material de 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 utilizaba la propiedad Progreso de la instancia de material para actualizar la barra de escudo en el HUD cuando un jugador recibe daño en el escudo o lo repara. Estos cambios se consiguen utilizando la información del jugador del controlador del HUD para indicar a la instancia de material hacia dónde deslizarse en la barra en función de la información del jugador.
Materiales
El motivo por el que una instancia de material puede escuchar la función de un dispositivo radica en el hecho de que tiene parámetros configurados en su material padre. Los materiales de la interfaz de usuario utilizan funciones de material para crear ritmos o patrones cronometrados en el material que pueden aprovecharse mediante instancias de material para actualizar la información del jugador en el HUD.
Esta plantilla utiliza las mismas funciones de materiales que el proyecto UI Material Lab. Para comprender mejor los distintos tipos de funciones de materiales y cómo se utilizan, consulta la página Desglose de funciones de materiales del proyecto UI Material Lab.
A continuación encontrarás una tabla en la que se describen los distintos materiales creados para el proyecto y cómo utilizarlos.
| Lista de materiales del proyecto | Función |
|---|---|
M_DropShadow | Crea una sombra para mostrarla debajo 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 icono con un fondo y un contorno. |
M_Meter | Crea un medidor de barra sencillo para el dispositivo Interacción de habilidad. |
M_Notches | Crea muescas decorativas espaciadas uniformemente. Se utiliza con M_Meter para crear un medidor de barra con muescas para el dispositivo Interacción de habilidad. |
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 va llenando a medida que avanza. Tiene un icono de textura en el centro del orbe. |
M_Texture_Complex | Permite cambiar la escala o deformar una textura personalizada. Por ejemplo, puede utilizarse para crear un efecto de destellos o submarino. |
M_Texture_SImple | Permite colorear texturas simples. Puede utilizarse con una textura simple en blanco y negro o con una textura empaquetada en canales (utilizando canales RGB). |
M_Wave | Crea una ola con burbujas flotando 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 la función de material que pueden ser vinculados a dispositivos y actualizados en el HUD.
Los grupos de parámetros solo pueden editarse en el editor de instancias de material 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, y a continuación, busca y abre la instancia de material MI_SID03_Water.
Empieza cambiando el color del agua, haz doble clic en los parámetros Color líquido 1 y Color líquido 2. Esto abre la rueda cromática. Cambia el agua a un color diferente. En el ejemplo siguiente, el color del agua cambia de azul a verde.
Observa atentamente las burbujas. Si tienes seleccionada la ventana del editor de instancias de material, deberías ver las burbujas del material flotar hacia arriba. Puedes cambiar el tamaño de la burbuja habilitando los parámetros de tamaño BubblesStartSize y BubblesMiddleSize y, a continuación, editando sus parámetros. Si el parámetro es demasiado grande, las burbujas parecen desaparecer tras una pared.
Parámetros como estos pueden establecerse en Vinculaciones de vistas y ser utilizados por 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 interfaz de usuario para añadir detalles y pulir que no es posible solo con los materiales. Si decides utilizar texturas en tus diseños de interfaz de usuario, ten en cuenta que las texturas consumen mucha memoria.
Utilizando la textura de interacción de habilidad y 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 Coraza trasera, las únicas partes de la interfaz de usuario que quedan visibles son el mensaje, la barra de salud y el contador de eliminación.
El método preferido para crear el aspecto de las cajas estilizadas de la coraza trasera es utilizar una textura. La complejidad del diseño y la forma sería difícil de reproducir en UMG. Los materiales de la interfaz de usuario solo pueden utilizarse para crear formas primitivas básicas, añadir un trazo alrededor de la forma del material y añadir degradados a la forma del material y al trazo.
La muestra de interfaz de usuario con material y textura muestra cómo la mezcla de texturas y materiales crea un aspecto refinado para la interfaz de usuario. La interfaz de usuario está formada por tres texturas que componen el diseño de la coraza trasera y la imagen de la criatura.
La imagen de la criatura se superpone sobre un widget Imagen. El widget Imagen no utiliza una instancia de material. En su lugar, la opción Pincel crea un rectángulo blanco en la capa situada debajo de la imagen de la criatura. El tamaño y las dimensiones del rectángulo se controlan en el panel Detalles mediante las opciones de Tamaño de la 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 para la fotografía de la criatura en el diseño.
Texturas SDF
El campo de distancia con signo es una función que utiliza la posición como entrada y proporciona la distancia desde esa posición. Por ejemplo, en la imagen de abajo, el centro del radial es 1, lo que significa que está completamente blanco, pero a medida que avanza hacia el borde, pasa a 0, es decir, completamente negro. Utilizando este concepto, los SDF proporcionan una forma de especificar un rango de valores de 0 a 1 para aplicar un efecto.
Eso significa que puedes:
Usar valores entre 0.5 y 1.0 y aplicar un color sólido.
Usar valores de entre 0.49 y 0.0 y aplicar un color difuminado que imite un resplandor.
Las texturas normales no hacen eso porque las texturas normales son 1 (blancas) o 0 (negras). Los SDF te dan todos esos datos con una puntuación de 0 a 1.
Estos conceptos también pueden aplicarse 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 y detalles de iluminación en la imagen, que hay menos posibilidades de personalización porque la edición de la imagen para que sea más brillante o más oscura puede hacer que la imagen pierda detalles o se sobreexponga.
Si esa misma imagen se tomó con una cámara DSLR, entonces el archivo sin procesar, que tiene toda la información de color e iluminación, se puede personalizar al nivel de granularidad, como hacer las partes oscuras más brillantes sin perder detalles dentro de esas áreas oscuras, y viceversa.
Busca en las carpetas IU > Textura > SDF la vista previa completa de las texturas SDF para crear tu propia interfaz de usuario de aspecto único.
Hay una carpeta llamada Iconos llena de iconos SDF.
Texturas SDF en materiales
La mayoría de los materiales de interfaz de usuario 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 se utilizan texturas SDF en un nodo de muestra de textura y se emparejan con una funciones de materiales SDF, la interfaz de usuario puede ajustarse manipulando algunos valores del material de la interfaz de usuario.
Alterar diferentes valores en un material de interfaz de usuario utilizando texturas SDF y nodos de material produce algunos efectos diferentes, como:
Sombras
Desenfoque
Resplandor
Brillo
Contornos
Animaciones
Escalado
Las texturas SDF hacen que los materiales de interfaz de usuario parezcan más dinámicos y únicos porque permiten una escala vertical fácilmente sin perder calidad, mientras que los recursos normales pierden calidad cuando se amplían o reducen. Las texturas SDF están mejor optimizadas para hacer fácilmente todos los efectos utilizando solo una textura, creando un grafo de material más limpio.
Por otro lado, las texturas normales en blanco y negro no se manipulan fácilmente en el grafo de material 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 grafo de material detallado para conseguir un resultado similar.
Nodo de material Smooth Step
Los nodos de material del tipo Step suelen crear una transición dura 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 interfaz de usuario. Los materiales de interfaz de usuario en la plantilla que utilizan texturas SDF utilizan el nodo material Smooth Step para crear una transición suave desde el centro del material hasta el borde exterior.
Conclusiones
Aquí tienes algunas conclusiones clave para utilizar materiales y texturas en recursos de interfaz de usuario:
El uso de funciones de materiales ahorra tiempo con nodos de material predefinidos que hacen referencias a funciones en tus materiales de barra de salud y escudo, y materiales de interfaz de usuario de la coraza trasera que hacen que estos 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 interfaz de usuario de aspecto básico y una interfaz de usuario visualmente más interesante.
Las texturas deben utilizarse para elementos de un diseño que sean visualmente complejos y no se puedan producir con materiales.