Parallax scrolling featured

en Tutoriales, UE4

Parallax Scrolling utilizando materiales UE4

Con este tutorial vamos a crear un fondo 2D con efecto Parallax utilizando los Materiales de Unreal Engine 4

El efecto Parallax es una técnica que consiste en mover las imágenes mas alejadas de la cámara más lentas que las que se encuentran más cerca, creando la ilusión de profundidad. El método más común para conseguir esto es el llamado método de capas, donde cada una de las capas contiene una imagen del fondo y puede moverse independientemente del resto, en horizontal o vertical, simulando una cámara multiplano.

parallax layers

Un juego puede conseguir este efecto simplemente cambiando la posición de cada capa con diferentes incrementos, pero en el mismo sentido. Las capas que se mueven mas rápido serán percibidas como si estuvieran más cerca de cámara

parallax scrolling sample

Una manera de ahorrar recursos es implementar un bucle de bitmaps con dos imágenes un poco más anchas que las dimensiones de la pantalla, cuando la primera sale de la pantalla puede ponerse al otro lado de la segunda.

loop bitmap

En este tutorial vamos a utilizar otro método, el desplazamiento del mapeo UV. Con este método sólo vamos a necesitar un objeto imagen ya que lo que vamos a desplazar es la textura que está contenida en este objeto en vez de desplazar el objeto imagen por la escena.

UV mapping displacement

En un tutorial anterior (Effectos de Transiciones parte 2), ya habíamos usado el desplazamiento de coordenadas UV, podemos empezar usando parte de los conocimientos adquiridos en ese tutorial. El vector de desplazamiento, al tratarse de un deslazamiento horizontal, es (offset, 0), donde el offset es un valor con rango [0,1].

background ice 0

Capa 0

 

Parallax scrolling material

Material para desplazamiento del mapeo UV

Ahora podemos crear una superficie a la que aplicar el material, un plano es una buena elección para esto, solo recuerda que tienes que escalarlo con el mismo aspect ratio que las imágenes de fondo para evitar sus deformaciones..

parallax plane

Plano para la capa de fondo

El valor de offset del parallax será incrementado con cada llamada al evento Tick, manteniendo un bucle en rango [0,1]. El Tick Event para nuestro actor quedaría asi:

Parallax tick event

Actor Tick event

parallax scrolling ice

Parallax scrolling Capa 0

Podemos repetir el mismo proceso con cada uno de los fondos, creando un plano y una instancia dinámica del material para cada una de las capas y asignando el offset UV independientemente, pero puede resultar un poco lioso.

La mejor manera es modificar el Material anterior para trabajar con múltiples capas. Para que quede más claro vamos a crear un par de material functions, si no sabes como hacer esto puedes echarle un vistazo a How to create Material Functions., es bastante sencillo.

La primera de ellas será para encapsular el desplazamiento de coordenadas que ya estábamos haciendo:

UV displacement

Desplazamiento de coordenadas de la textura

La segunda se encargara de superponer dos texturas teniendo en cuenta el valor del canal de transparencia.

Overlap Images Function

Función para superponer dos texturas

Ahora el Material, vamos a poner un parámetro escalar de entrada para cada una de las capas y un nodo para contener la textura original.

Multilayer Parallax Material

Material Parallax multicapa

Para actualizar la instancia dinámica del material podemos crear una función en la que controlar la “velocidad” de cada capa en función de su “orden-Z”. Las que están más cerca de la cámara les asignaremos una velocidad mayor que las que se encuentras por detrás.

Actor new Tick Event

Update Actor Parallax Scrolling

Función para actualizar los Parallax offsets

Ahora el resultado final es este:

Parallax scrolling result

Recursos:

Imágenes de fondo (Hielo): Download

Imágenes de fondo (Intro): Opengameart


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

cinco × 4 =