Como hacer parallax background infinito en Godot Engine

¿Alguna vez te has preguntado cómo se hacen esos fondos con movimiento infinito con Godot?

Te dejo un mini juego que hice donde apliqué este recurso.

Slide Colors

Este es un recurso muy chulo para nuestros juegos, le da vida al menú, aunque no solo sirve para eso, también lo podemos aplicar en ciertos juegos, como los runners infinitos.

Creando la escena

Primero creamos una escena con un ParallaxBackground, de hijo le ponemos un ParallaxLayer y a este el Sprite o sprites que queramos darle este efecto.
Opcionalmente a la escena la nombramos Background.

Configurando la imagen

Es necesario configurar los archivos de imagen para utilizarlo como mozaico, así solo necesitamos un patrón y este se rellenará en toda la pantalla.


Para lograr esto seleccionamos la imagen desde Godot y abrimos la pestaña de Import, buscamos la categoría Flags y cambiamos Repeat a Enabled o Mirrored (Dependiendo del estilo del mosaico) prueba ambas si no sabes cual elegir, por último damos clic en reimportar.

Adaptando el nodo Sprite

Colocamos la imagen en el sprite y seleccionando el nodo Sprite nos vamos al inspector, buscamos la categoría Region y la activamos y en las variables “w” y “h” colocamos el ancho y alto de la pantalla del juego pero proporcional al ancho y alto de la imagen, es decir, que no quede un mosaico sin partes sin dibujar, por ejemplo, suponiendo que la imagen mide 64x64 y la pantalla es de 600x600, vamos a poner en “w” y “h” 640x640 (es decir, 64x10) para cubrir toda la pantalla.
Ahora seleccionamos el nodo ParallaxLayer y en la categoría Motion vamos a cambiar las variables “x” y “y” de Mirroring y vamos a poner el mismo alto y ancho que pusimos antes.

Añadiendo la magia

Ahora le agregaremos un script a la escena, y colocaremos lo siguiente:

extends ParallaxBackground

export var DIR = Vector2(1,1)
export var SPEED = 100

func _physics_process(delta):
    scroll_offset += DIR * SPEED * delta

Con esto podremos ver en el editor las variables DIR y SPEED, donde DIR es para darle dirección al parallax, y SPEED es para indicar la velocidad.

Paso opcional pero recomendado

Debido a que el scroll_offset siempre esta sumando los mismos valores, es recomendado añadir una forma en que el scroll vuelva a 0, esto dependerá del DIR que le asignemos, para este ejemplo basta con lo siguiente al physics_process:

 if scroll_offset.x >= 1024:
     scroll_offset.x -= 1024
 if scroll_offset.y >= 640:
     scroll_offset.y -= 640

Donde 1024 es el “h” y 640 el “w”. También, se resta en vez de valorar a 0 para evitar que se vea cortado por la diferencia en decimales.
Y con esto ya tenemos listo y terminado el Background, ya lo podremos utilizar en cualquier escena de nuestro juego.

Déjame un comentario si te ha gustado!