Puede lograr este impresionante efecto visual simplemente moviendo objetos a diferentes velocidades.
El desplazamiento de paralaje es una técnica que utilizan muchos juegos 2D para crear una ilusión de profundidad y agregar interés visual a los fondos del juego. Logra el efecto moviendo diferentes capas del fondo a diferentes velocidades en relación con el movimiento de la cámara.
Godot 4 hace que sea más fácil que nunca implementar el desplazamiento de paralaje. Su potente motor 2D proporciona soporte integrado para capas de paralaje, lo que le permite crear impresionantes efectos visuales con un mínimo esfuerzo.
Configuración del juego de Godot
Para comenzar, cree un nuevo proyecto 2D en el motor de juego de Godot y configura la escena del juego con un personaje de jugador.
El código utilizado en este artículo está disponible en este repositorio GitHub y es gratis para su uso bajo la licencia MIT.
Para este ejemplo, agregue un PersonajeCuerpo2D nodo para el movimiento del jugador. También agregue un
ColisiónForma2D con forma de rectángulo y Sprite2D para representar al personaje del jugador.extends CharacterBody2Dvar speed = 200
func _physics_process(delta):
var velocity = Vector2()if Input.is_action_pressed('ui_right'):
velocity.x += 1if Input.is_action_pressed('ui_left'):
velocity.x -= 1if Input.is_action_pressed('ui_down'):
velocity.y += 1if Input.is_action_pressed('ui_up'):
velocity.y -= 1
velocity = velocity.normalized() * speed
move_and_collide(velocity * delta)
Con este código, el personaje del jugador puede moverse hacia la izquierda, hacia la derecha, hacia arriba y hacia abajo usando las teclas de flecha o entradas similares.
Crear diferentes capas con nodos ParallaxLayer
A continuación, cree el efecto de paralaje agregando múltiples ParallaxLayer nodos a la escena. Cada ParallaxLayer representará una capa diferente del fondo. Para lograr un efecto de paralaje convincente, las capas más alejadas de la cámara deben moverse más lentamente que las más cercanas.
Agregar Cuerpo estático2D nodos con ColisiónForma2D en cada ParallaxLayer para crear algunos objetos colisionables en el fondo. Estos objetos colisionables interactuarán con el jugador y otros elementos del juego, agregando más profundidad al juego.
Aquí está el código GDScript para crear las capas de paralaje con objetos colisionables:
extends ParallaxBackgroundfunc _ready():
# Create the first parallax layer
var layer1 = ParallaxLayer.new()
layer1.motion_scale = Vector2(0.2, 0.2)
add_child(layer1)# Add a StaticBody2D with CollisionShape2D to the first layer
var static_body1 = StaticBody2D.new()
layer1.add_child(static_body1)var collision_shape1 = CollisionShape2D.new()
var shape1 = RectangleShape2D.new()
shape1.extents = Vector2(32, 32)
collision_shape1.shape = shape1
static_body1.add_child(collision_shape1)# Create the second parallax layer
var layer2 = ParallaxLayer.new()
layer2.motion_scale = Vector2(0.5, 0.5)
add_child(layer2)# Add a StaticBody2D with CollisionShape2D to the second layer
var static_body2 = StaticBody2D.new()
layer2.add_child(static_body2)var collision_shape2 = CollisionShape2D.new()
var shape2 = RectangleShape2D.new()
shape2.extents = Vector2(64, 64)
collision_shape2.shape = shape2
static_body2.add_child(collision_shape2)# Create the third parallax layer
var layer3 = ParallaxLayer.new()
layer3.motion_scale = Vector2(1.0, 1.0)
add_child(layer3)# Add a StaticBody2D with CollisionShape2D to the third layer
var static_body3 = StaticBody2D.new()
layer3.add_child(static_body3)
var collision_shape3 = CollisionShape2D.new()
var shape3 = RectangleShape2D.new()
shape3.extents = Vector2(128, 128)
collision_shape3.shape = shape3
static_body3.add_child(collision_shape3)
Con este código, cada capa de paralaje ahora contiene un Cuerpo estático2D nodo con un ColisiónForma2D representando objetos colisionables en el fondo.
Estos objetos colisionables interactuarán con el personaje del jugador y otros elementos del juego, agregando más profundidad y complejidad al juego.
Mover diferentes capas con diferente velocidad
Ahora que ha configurado sus capas de paralaje, debe actualizar sus posiciones en función del movimiento del jugador. Esto creará el efecto de paralaje, donde las capas más cercanas a la cámara se mueven más rápido que las más alejadas.
Agregue el siguiente código GDScript a la escena del reproductor:
extends CharacterBody2Dfunc _physics_process(delta):
...
move_and_collide(velocity * delta)
# Update parallax layers based on player movement
var parallax_background = get_parent()
var motion = -velocity * delta
parallax_background.set_scroll_offset(parallax_background.scroll_offset + motion)
Este código calcula el movimiento de las capas de paralaje según el movimiento del jugador y actualiza el desplazamiento de desplazamiento del nodo ParallaxBackground en consecuencia. Tenga en cuenta el uso del signo negativo para garantizar que las capas se muevan en la dirección opuesta al movimiento del jugador.
El desplazamiento de paralaje aleatorio introduce un elemento de sorpresa e imprevisibilidad en el fondo de tu juego. Al generar y colocar dinámicamente capas de paralaje durante el juego, puede crear una experiencia más atractiva y dinámica para los jugadores.
Para implementar el desplazamiento de paralaje aleatorio, agregue nuevas capas de paralaje con posiciones y escalas de movimiento aleatorias.
extends ParallaxBackgroundconst MAX_LAYERS = 5
const MIN_SCALE = 0.2
const MAX_SCALE = 1.5
const MIN_SPEED = 0.01
const MAX_SPEED = 0.03
const MIN_X_POSITION = -500
const MAX_X_POSITION = 500
const MIN_Y_POSITION = -300
const MAX_Y_POSITION = 300func _ready():
for i in range(MAX_LAYERS):
create_random_layer()func create_random_layer():
# Add a new parallax layer with a random motion scale
var layer = ParallaxLayer.new()
var scale = lerp(MIN_SCALE, MAX_SCALE, randf())
layer.motion_scale = Vector2(scale, scale)var x_position = randf_range(MIN_X_POSITION, MAX_X_POSITION)
var y_position = randf_range(MIN_Y_POSITION, MAX_Y_POSITION)
layer.global_transform.origin.x = x_position
layer.global_transform.origin.y = y_positionadd_child(layer)
# Add a StaticBody2D with CollisionShape2D to the new layer
var static_body = StaticBody2D.new()
layer.add_child(static_body)var collision_shape = CollisionShape2D.new()
var shape = RectangleShape2D.new()
shape.extents = Vector2(32, 32)
collision_shape.shape = shape
static_body.add_child(collision_shape)
func remove_random_layer():
# Remove a random parallax layer
if get_child_count() > 0:
var random_index = randi() % get_child_count()
var layer_to_remove = get_child(random_index)
remove_child(layer_to_remove)
Este código define constantes para controlar la aleatoriedad de las capas de paralaje. Utilizar el lerp función para interpolar valores entre ESCALA_MIN y ESCALA_MAX, generando una escala de movimiento aleatoria para cada nueva capa. Esta función tiene la siguiente firma:
Variant lerp ( Variant from, Variant to, float weight )Pasar el resultado de randf() como el peso te permite generar capas con una escala aleatoria.
El rango_randf La función ofrece otra forma de generar valores aleatorios dentro de un rango. Aquí, la función create_random_layer la usa para generar posiciones aleatorias para las nuevas capas dentro de un rango específico:
var x_position = randf_range(MIN_X_POSITION, MAX_X_POSITION)Su juego de demostración ahora debería verse así:
Incluyendo funciones adicionales
El desplazamiento Parallax proporciona una base sólida para mejorar tu juego de plataformas atractivo visual, pero puede llevarlo aún más lejos incorporando funciones adicionales. Aquí hay algunas ideas para considerar.
Objetos de fondo
Cree más elementos interactivos en sus capas de paralaje, como plataformas flotantes, obstáculos en movimiento o personajes de fondo animados. Estos objetos pueden agregar profundidad e interactividad a su juego de plataformas.
Iluminación dinámica
Introduce efectos de iluminación dinámicos en tus capas de paralaje. Al agregar fuentes de luz y sombras, puede crear una sensación de realismo y profundidad en el mundo del juego. El sistema de iluminación de Godot funciona bien con juegos 2D y puede mejorar significativamente la calidad visual.
Efectos de partículas
Integre sistemas de partículas en sus capas de paralaje para agregar efectos visuales sutiles. Las hojas que caen, las nubes a la deriva o las estrellas brillantes pueden mejorar el ambiente y hacer que el mundo del juego se sienta más vivo. Tú también puedes agregar efectos de sonido sin derechos de autor a tu juego.
Ciclo Día-Noche
Implemente un ciclo día-noche que cambie el color y la intensidad de las capas de paralaje según la hora del día en el juego. Esta característica dinámica puede proporcionar a los jugadores una experiencia en constante evolución a medida que avanzan en el juego.
Si bien el desplazamiento de paralaje puede mejorar las imágenes de su juego, es esencial seguir algunas de las mejores prácticas para garantizar una experiencia fluida y agradable.
Optimización del rendimiento
Tenga en cuenta la cantidad de capas de paralaje y su complejidad. Demasiadas capas o activos de alta resolución pueden provocar problemas de rendimiento, especialmente en dispositivos menos potentes. Optimice su obra de arte y utilice formas de colisión simplificadas siempre que sea posible.
Arreglo de capas
Organice sus capas de paralaje cuidadosamente. Considere la jerarquía visual y el efecto de profundidad deseado. Las capas más cercanas a la cámara deberían moverse más rápido, mientras que las más alejadas deberían moverse más despacio.
Límites de la cámara
Establezca límites para el movimiento de la cámara para evitar espacios vacíos no deseados o fallas visuales cuando el jugador llega a los límites del mundo del juego. Esto asegura una experiencia perfecta para los jugadores.
Pruebas y ajustes
Pruebe su desplazamiento de paralaje en varios dispositivos y tamaños de pantalla para asegurarse de que se ve y funciona bien en diferentes plataformas. Ajustar las escalas de movimiento, las posiciones de las capas y otros parámetros puede ajustar el efecto de paralaje para obtener los mejores resultados.
Agregar desplazamiento de paralaje aleatorio puede mejorar significativamente el nivel de participación de su juego Godot. El desplazamiento de paralaje aleatorio implica generar y colocar dinámicamente capas de paralaje durante el juego.
Al hacer esto, creas una sensación de movimiento y dinamismo en el fondo, haciendo que el mundo del juego se sienta vivo e impredecible. Los jugadores experimentarán un entorno visual en constante cambio, agregando una capa adicional de emoción a su experiencia de juego.
