Up to date
This page is up to date for Godot 4.3.
If you still find outdated information, please open an issue.
Parallax 2D
Introducción
Parallax es un efecto que se utiliza para simular profundidad haciendo que las texturas se muevan a distintas velocidades en relación con la cámara. Godot proporciona el nodo Parallax2D para lograr este efecto. Sin embargo, puede ser fácil equivocarse, por lo que esta página proporciona descripciones detalladas de algunas propiedades y cómo solucionar algunos errores comunes.
Nota
Esta página solo explica cómo utilizar Parallax2D. Este nodo aún es experimental, por lo que la implementación podría cambiar en futuras versiones de Godot. Sin embargo, se sigue recomendando su uso sobre los nodos ParallaxLayer y ParallaxBackground.
Escala de desplazamiento
La columna vertebral del efecto de paralaje es la propiedad scroll_scale. Funciona como un multiplicador de velocidad de desplazamiento, lo que permite que las capas se muevan a una velocidad diferente a la de la cámara para cada eje establecido. Un valor de 1 hace que el nodo de paralaje se desplace a la misma velocidad que la cámara. Si desea que su imagen se vea más lejana al desplazarse, use un valor menor que 1, y 0 la detendrá por completo. Si desea que algo aparezca más cerca de la cámara, use un valor mayor que 1, lo que hará que se desplace más rápido.
La escena anterior se compone de cinco capas. Algunos valores adecuados para scroll_scale podrían ser:
(0.7, 1)- Bosque(0.5, 1)- Colinas(0.3, 1)- Nubes Bajas(0.2, 1)- Nubes Altas(0.1, 1)- Cielo
El vídeo de abajo, muestra como esos valores afectan el desplazamiento en el juego:
Repetición infinita
Parallax2D proporciona un efecto adicional que da a las texturas la ilusión de repetirse infinitamente. repeat_size le dice al nodo que ajuste su posición hacia adelante o hacia atrás cuando la cámara se desplaza según el valor establecido. Este efecto se logra agregando una única repetición a todos los elementos del canvas(lienzo) secundario compensados por el valor. Mientras la cámara se desplaza entre la imagen y su repetición, retrocede de manera invisible dando la apariencia de una imagen en bucle.
Al ser un efecto delicado, es fácil que usuarios que no estén familiarizados con el mismo cometan errores con su configuración. Repasemos el "cómo" y el "por qué" de algunos problemas comunes que encuentran los usuarios.
Tamaño insuficiente
Es más fácil trabajar con el efecto de repetición infinita cuando tienes una imagen diseñada para repetirse sin problemas y es del mismo tamaño o más grande que tu ventana gráfica antes de configurar el repeat_size. Si no puedes obtener recursos diseñados para esta tarea, hay otras cosas que puede hacer para preparar mejor su imagen en cuestión de tamaño.
Aquí hay un ejemplo de textura que es muy pequeña para su ventana:
Podemos ver que el tamaño de la ventana gráfica es 500x300 pero la textura es 288x208. Si configuramos repeat_size al tamaño de nuestra imagen, el efecto de repetición infinita no se desplaza correctamente porque la textura original no cubre la ventana gráfica. Si configuramos repeat_size según tamaño de la ventana gráfica, tenemos un hueco grande. ¿Qué podemos hacer?
Hacer la ventana gráfica más pequeña
The simplest answer is to make the viewport the same size or smaller than your textures. In Project Settings > Display > Window, change the Viewport Width and Viewport Height settings to match your background.
Nivela el Parallax2D
Si no buscas un estilo perfecto en cuanto a píxeles o no te molesta que la imagen se vea un poco borrosa, puedes optar por ampliar la escala de las texturas para que se ajusten a tu pantalla. Establece la escala de Parallax2D y todas las texturas secundarias se escalarán con ella.
Escala los modos hijo
Similar a ajustar la escala de la :ref: Parallax2D<class_parallax2d>, puedes escalar los nodos tus :ref: Sprite2D<class_sprite2d> para que se extiendan adecuadamente en la pantalla. Ten en mente que algunas opciones como la Parallax2D.repeat_size y la :ref: Sprite2D.region_rect<class_sprite2d_property_region_rect> no toman en cuenta la escala, por lo que es necesario ajustar esos valores basados en la escala.
Repetir las texturas
También puedes empezar con el pie derecho preparando los nodos secundarios en una etapa anterior del proceso. Si tienes un Sprite2D que te gustaría repetir, pero es demasiado pequeño, puedes hacer lo siguiente para repetirlo:
Establece texture_repeat como CanvasItem.TEXTURE_REPEAT_ENABLED
Establece la region_enabled a
trueEstablezca region_rect en un múltiplo del tamaño de su textura lo suficientemente grande como para cubrir la ventana gráfica.
Debajo, puedes ver que repetir la imagen dos veces las hace lo suficientemente largas para cubrir la pantalla.
Posicionado deficiente
Es común ver a los usuarios centrar erróneamente sus texturas en (0,0):
Esto crea problemas con el efecto de repetición infinita y se debe evitar. El "lienzo de repetición infinita" comienza en (0,0) y se expande hacia abajo y hacia la derecha hasta el tamaño del valor repeat_size.
Si las texturas están centradas en (0,0), cruzando el "canvas de repetición infinita" se cubre paracialmente, por lo que solo se repite parcialmente.
¿Incrementar repeat_times arreglaría esto?
Incrementar :ref: repeat_times_<class_parallax2d_property_repeat_times> técnicamente debería funcionar en algunas situaciones, pero es una solución muy forzada y no es la manera en la que debería ser resuelto (repasaremos esto en un momento). Una mejor solución es entender como funciona el efecto de repetir y configurar correctamente las texturas del parallax para empezar.
Primero, verifica si alguna textura se está desparramanso en las partes negativas del canvas. Asegúrate de que las texturas usadas en los nodos parallax encajan dentro del "canvas de repetición infinita" empezando en (0,0). De esta forma, si la :ref: Parallax2D.repeat_size<class_parallax2d_property_repeat_size> se establece correctamente, debería verse parecido a esto, con un solo bucle de la imagen del mismo tamaño o de mayor longitud que el viewport:
Si piensas en cómo la imagen se desplaza a través de la pantalla, empieza mostrando lo que hay dentro del rectángulo rojo (determinado por la repeat_size) y cuando alcanza lo que hay dentro del rectángulo amarillo comprime la imagen delantera para dar la ilusión de un desplazarse eternamente.
Si tienes la imagen posicionada lejos del "canvas de repetición infinito", cuando la cámara alcance el rectángulo amarillo, la mitad de la imagen se corta antes de saltar al a siguiente como en la imagen que se muestra abajo:
Desplazar offset
Si tus texturas parallax ya están funcionando correctamente, pero prefieres empezar desde un punto diferente,la Parallax2D viene con una propiedad scroll_offset usada para colocar el offset donde el "Canvas de repetición infinita" empieza. Como ejemplo, si tu imagen mide 288x208, configurar la :ref: scroll_offset<class_parallax2d_property_scroll_ofset> a (-144,0) o (144,0) permite empezar a mitad de camino a través de la imagen.
Repetir tiempos
Idealmente, siguiendo esta guía, tus texturas paralajas van a ser suficientemente grandes para cubrir la pantalla, inclusive cuando disminuyas el zoom. Hasta ahora, hemos encajado perfectamente una textura 288x208 dentro de una ventana gráfica de 288x208. De cualquier manera, pueden ocurrir problemas cuando disminuyamos el zoom configurando la :ref: Camera2D.zoom<class_camera2d_property_zoom> a (0.5, 0.5):
Aunque todo está configurado correctamente para la ventana gráfica en el nivel de zoom predeterminado, al alejar la imagen, esta se hace más pequeña que la ventana gráfica, lo que rompe el efecto de repetición infinita. Aquí es donde repeat_times puede ayudar. Al configurar un valor de 3 (una repetición adicional por delante y por detrás), ahora es lo suficientemente grande como para acomodar el efecto de repetición infinita.
Si estas texturas se hubieran tenido que repetir verticalmente, habríamos especificado un valor y para repeat_size. repeat_times también agregaría automáticamente una repetición arriba y abajo. Esto es solo un paralaje horizontal, por lo que deja un bloque vacío arriba y abajo de la imagen. ¿Cómo solucionamos esto? ¡Necesitamos ser creativos! En este ejemplo, estiramos el cielo más arriba y el sprite de hierba más abajo. Las texturas ahora admiten el nivel de zoom normal y la reducción a la mitad del tamaño.
Dividir la pantalla
La mayoría de los tutoriales para crear un juego de pantalla dividida en Godot comienzan escribiendo un pequeño script para asignar el Viewport.world_2d del primer SubViewport al segundo, de modo que compartan una pantalla. A menudo surgen preguntas sobre cómo compartir un efecto de paralaje entre ambas pantallas.
El efecto parallax (paralaje) simula una perspectiva moviendo las posiciones de diferentes textura en relación a la cámara. Esto es problemático si tienes múltiples cámaras, porque nuestras texturas ¡no pueden estar en dos lugares al mismo tiempo!
This is still achievable by cloning the parallax nodes into the second (or third or fourth) SubViewport. Here's how a setup looks for a two player game:
Of course, now both backgrounds show in both SubViewports. What we want is for each parallax to only show in their corresponding viewport. We can achieve this by doing the following:
Leave all parallax nodes at their default visibility_layer of 1.
Set the first SubViewport's canvas_cull_mask to only layers 1 and 2.
Do the same for the second SubViewport but use layers 1 and 3.
Give your parallax nodes in the first SubViewport a common parent and set its visibility_layer to 2.
Do the same for the second SubViewport's parallax nodes, but use a layer of 3.
How does this work? If a canvas item has a visibility_layer that doesn't match the SubViewport's canvas_cull_mask, it will hide all children, even if they do. We use this to our advantage, letting the SubViewports cut off rendering of parallax nodes whose parent doesn't have a supported visibility_layer.
Vista previa en el editor
Antes de la 4.3, la recomendación era colocar cada capa en su propio ParallaxBackground, activar la propiedad follow_viewport_enabled, y escalar la capa individual. Este método siempre ha sido difícil de conseguir, pero todavía se puede lograr mediante el uso de un CanvasLayer en lugar de un ParallaxBackground.
Nota
Otra recomendación es el addon KoBeWi's "Parallax2D Preview". Provee unos cuantos modos de vista previos distintos ¡y es muy práctico!