transition effects tutorial 1

en Tutoriales, UE4

Efectos de transición utilizando materiales (parte 1)

Con este tutorial voy a mostrarte como hacer transiciones básicas usando materiales. Una transición puede utilizarse para pasar de una escena de mapa a una escena de batalla, o hacer la aparición de la pantalla de pausa de una manera más interesante, tiene muchas aplicaciones.

Durante este tutorial vamos a usar surface materials que pueden aplicarse a objetos como el sprite de nuestro fondo y UI materials que pueden usarse en componentes de los widgets de interfaz de usuario.

Debemos elegir User Interface en el desplegable material domain para poder usar el material en los UI widgets.

Material details

Podemos crear una componente de tipo Imagen en nuestro widget de la interfaz y elegir nuestro material de transición en el campo Image.

Widget image component

La inicialización de la variable que llevará la instancia dinámica del material MID es similar a la de un surface material pero usaremos la función Get Dynamic Material en vez de Create Dynamic Instance Material.

Material instance dynamic variable

Para establecer los parámetros del material podemos usar las mismas funciones

Dynamic scalar parameter configuration

Ahora vamos a ver algunos ejemplos prácticos


Desvanecimiento a negro

La transición más básica, un desvanecimiento a un determinado color, generalmente negro. Podemos poner una componente de tipo Image cubriendo la pantalla y cambiar su parámetro de transparencia alpha con el tiempo

El material tiene una entrada para seleccionar el color de la transición y otra para el valor de transparencia alpha

Fade to color material

Corte angular


Para hacer este tipo de transición debemos usar un gradiente y establecer una variable para determinar el límite sobre el que empezará a aplicar transparencia. Cuando el valor de color del pixel sea mayor que el límite pondremos que el valor de transparencia al máximo 1.0, si es menor lo pondremos al mínimo 0.o. Este método producirá una transición más definida.

Para crear dinámicamente una textura gradiente podemos usar la función VectorToRadialValue, el resultado es un degradado angular suavizado

Usando la condición que hemos definido unas lineas antes obtenemos una forma más afilada

material_vectortoradial

Para editar la dirección de la transición  podemos conectar una función Swizzle entre el nodo textcoord y la entrada de coordenadas UV de la función VectorToRadialValue, pero antes de esto debemos desplazar las coordenadas para centrar el gradiente así que restaremos 0.5 al nodo textcoord. Podemos aplicar un vector 2D en vez de un escalar para variar de manera independiente la coordenada X y la Y, y centrar la transición en un objeto determinado de la escena, por ejemplo.

Center param

0.5 value

0.8 value

Swizzle and center
Swizzle result

Pero también queremos empezar la transición desde la parte superior así que necesitamos darle la vuelta insertando un flip, o lo que es lo mismo, aplicar una multiplicacion usando un vector 2d.

Angle transition material

Flip factor

Vector (-2,-2)

Vector (-2,2)

Vector (2,-2)


Corte radial

La función principal de este material es RadialGradientExponential

Esta función crea un degradado radial suavizado. El suavizado del gradiente esta controlado por el parámetro de entrada Density, los valores más bajos dan resultados más suaves mientras que los más altos muestran bordes más nítidos.

Density 1

Density 4

Density 10

Podemos controlar el centro del gradiente usando el parámetro de entrada CenterPosition, usando un vector 2D podemos especificar diferentes valores para el eje X y el Y. Las coordenadas UV de un material toma valores entre 0.0 y 1.0 por lo tanto si queremos centrar el gradiente usaremos un vector (0.5,0.5)

El valor del radio necesario para rellenar la textura completamente debe ser calculado usando el valor de centrado, si el gradiente esta justo en el centro de la misma solo necesitamos un valor de 0.71 para cubrir la textura, con un centro en (0.25,0.25) necesitariamos incrementar el radio hasta 1.06 para completarla.

Center (0.5, 0.5) only need radious 0.7 to fill

Center (0.25, 0,25) need radious 1.06 to fill

Radial transition material

Podemos conseguir animaciones bastante divertidas combinando todos los parámetros.


Mosaico o pixelación

Esta transición se aplicará sobre el sprite the fondo por lo tanto estableceremos el dominio del material a surface

Para pixelar un material tenemos que modificar las coordenadas UV para que no tengan un gradiente tan suavizado. Podemos añadir un escalar para controlar la densidad de píxeles de la transición.

Mosaic transition material

Linear split

Para conseguir una transición con este efecto podemos usar la función LinearGradient con la misma condición utilizada en la transición de corte angular para aumentar la dureza de la transición.

Una transición simple pero efectiva

Podemos añadir un parámetro para establecer el punto de inicio de la división. Usando la función Abs conseguimos propagar la división desde ambos lados del corte.

Split transition material

Continuará…. (part 2)

Ayudanos con este blog!

El último año he estado dedicando cada vez más tiempo a la creación de tutoriales, en su mayoria sobre desarrollo de videojuegos. Si crees que estos posts te han ayudado de alguna manera o incluso inspirado, por favor considera ayudarnos a mantener este blog con alguna de estas opciones. Gracias por hacerlo posible!

Escribe un comentario

Comentario