Você pode obter esse impressionante efeito visual simplesmente movendo objetos em diferentes velocidades.
A rolagem parallax é uma técnica que muitos jogos 2D usam para criar uma ilusão de profundidade e adicionar interesse visual aos planos de fundo do jogo. Ele consegue o efeito movendo diferentes camadas do fundo em diferentes velocidades em relação ao movimento da câmera.
O Godot 4 torna mais fácil do que nunca implementar a rolagem parallax. Seu poderoso mecanismo 2D fornece suporte integrado para camadas de paralaxe, permitindo criar efeitos visuais impressionantes com o mínimo de esforço.
Configurando o jogo Godot
Para começar, crie um novo projeto 2D em o motor de jogo Godot e configurar a cena do jogo com um personagem do jogador.
O código usado neste artigo está disponível neste Repositório GitHub e é gratuito para você usar sob a licença do MIT.
Para este exemplo, adicione um CharacterBody2D nó para o movimento do jogador. Adicione também um CollisionShape2D com formato retangular e Sprite2D para representar o personagem do jogador.
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)
Com este código, o personagem do jogador pode se mover para a esquerda, direita, para cima e para baixo usando as teclas de seta ou entradas semelhantes.
Criando diferentes camadas com nós ParallaxLayer
Em seguida, crie o efeito de paralaxe adicionando vários ParallaxLayer nós para a cena. Cada ParallaxLayer representará uma camada diferente do plano de fundo. Para obter um efeito de paralaxe convincente, as camadas mais distantes da câmera devem se mover mais lentamente do que as mais próximas.
Adicionar StaticBody2D nós com CollisionShape2D em cada ParallaxLayer para criar alguns objetos colidíveis no fundo. Esses objetos colidíveis irão interagir com o jogador e outros elementos do jogo, adicionando mais profundidade à jogabilidade.
Aqui está o código GDScript para criar as camadas de paralaxe com objetos colidíveis:
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)
Com este código, cada camada de paralaxe agora contém um StaticBody2D nó com um CollisionShape2D representando objetos colidíveis no fundo.
Esses objetos colidíveis irão interagir com o personagem do jogador e outros elementos do jogo, adicionando mais profundidade e complexidade ao jogo.
Movendo camadas diferentes com velocidade diferente
Agora que você tem suas camadas de paralaxe configuradas, você precisa atualizar suas posições com base no movimento do jogador. Isso criará o efeito de paralaxe, onde as camadas mais próximas da câmera se movem mais rapidamente do que as mais distantes.
Adicione o seguinte código GDScript à cena Player:
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)
Esse código calcula o movimento das camadas de paralaxe com base no movimento do jogador e atualiza o deslocamento de rolagem do nó ParallaxBackground de acordo. Observe o uso do sinal negativo para garantir que as camadas se movam na direção oposta ao movimento do jogador.
A rolagem aleatória de paralaxe introduz um elemento de surpresa e imprevisibilidade no plano de fundo do seu jogo. Ao gerar e posicionar dinamicamente as camadas de paralaxe durante o jogo, você pode criar uma experiência mais envolvente e dinâmica para os jogadores.
Para implementar a rolagem de paralaxe aleatória, adicione novas camadas de paralaxe com escalas e posições de movimento aleatório.
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 a aleatoriedade das camadas de paralaxe. Use o lerp função para interpolar valores entre MIN_SCALE e MAX_SCALE, gerando uma escala de movimento aleatório para cada nova camada. Esta função tem a seguinte assinatura:
Variant lerp ( Variant from, Variant to, float weight )Passando o resultado de randf() já que o peso permite gerar camadas com uma escala aleatória.
O randf_range A função oferece outra maneira de gerar valores aleatórios dentro de um intervalo. Aqui, a função create_random_layer o usa para gerar posições aleatórias para as novas camadas dentro de um intervalo especificado:
var x_position = randf_range(MIN_X_POSITION, MAX_X_POSITION)Seu jogo de demonstração agora deve se parecer com isto:
Incluindo Recursos Adicionais
A rolagem parallax fornece uma base sólida para aprimorar seu jogo de plataforma apelo visual, mas você pode ir ainda mais longe incorporando recursos adicionais. Aqui estão algumas ideias para considerar.
Objetos de fundo
Crie elementos mais interativos em suas camadas de paralaxe, como plataformas flutuantes, obstáculos em movimento ou personagens de fundo animados. Esses objetos podem adicionar profundidade e interatividade ao seu jogo de plataforma.
Iluminação dinâmica
Introduza efeitos de iluminação dinâmicos em suas camadas de paralaxe. Ao adicionar fontes de luz e sombras, você pode criar uma sensação de realismo e profundidade no mundo do jogo. O sistema de iluminação da Godot funciona bem com jogos 2D e pode melhorar significativamente a qualidade visual.
Efeitos de partículas
Integre sistemas de partículas em suas camadas de paralaxe para adicionar efeitos visuais sutis. Folhas caindo, nuvens flutuantes ou estrelas brilhantes podem melhorar o ambiente e tornar o mundo do jogo mais vivo. Você também pode adicionar efeitos sonoros livres de direitos autorais ao seu jogo.
Ciclo Dia-Noite
Implemente um ciclo dia-noite que altere a cor e a intensidade das camadas de paralaxe com base na hora do dia no jogo. Esse recurso dinâmico pode fornecer aos jogadores uma experiência em constante evolução à medida que avançam no jogo.
Embora a rolagem parallax possa elevar o visual do seu jogo, é essencial seguir algumas práticas recomendadas para garantir uma experiência agradável e tranquila.
Otimização de performance
Esteja atento ao número de camadas de paralaxe e sua complexidade. Muitas camadas ou recursos de alta resolução podem levar a problemas de desempenho, especialmente em dispositivos menos potentes. Otimize sua arte e use formas de colisão simplificadas sempre que possível.
Arranjo de camadas
Organize suas camadas de paralaxe cuidadosamente. Considere a hierarquia visual e o efeito de profundidade desejado. As camadas mais próximas da câmera devem se mover mais rapidamente, enquanto as mais distantes devem se mover mais lentamente.
Limites da câmera
Defina limites para o movimento da câmera para evitar espaços vazios indesejados ou falhas visuais quando o jogador atingir os limites do mundo do jogo. Isso garante uma experiência perfeita para os jogadores.
Testando e Ajustando
Teste sua rolagem parallax em vários dispositivos e tamanhos de tela para garantir que ela tenha boa aparência e desempenho em diferentes plataformas. Ajustar as escalas de movimento, as posições da camada e outros parâmetros pode ajustar o efeito de paralaxe para obter os melhores resultados.
Adicionar rolagem de paralaxe aleatória pode aumentar significativamente o nível de engajamento do seu jogo Godot. A rolagem aleatória de paralaxe envolve gerar e posicionar camadas de paralaxe dinamicamente durante o jogo.
Ao fazer isso, você cria uma sensação de movimento e dinamismo em segundo plano, tornando o mundo do jogo vivo e imprevisível. Os jogadores experimentarão um ambiente visual em constante mudança, adicionando uma camada extra de emoção à sua experiência de jogo.
