Como implementar a rolagem parallax no Godot
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 oferece uma abordagem perfeita para implementar a rolagem paralaxe por meio de seu mecanismo 2D robusto, que incorpora suporte inerente para camadas de paralaxe, permitindo que os desenvolvedores obtenham efeitos visuais cativantes com o mínimo de esforço.
Configurando o jogo Godot
Para iniciar o processo, estabeleça um novo projeto bidimensional dentro da estrutura do mecanismo de jogo Godot e configure o ambiente de jogo incorporando a persona do jogador como um de seus elementos principais.
O código utilizado nesta publicação pode ser acessado por meio de um repositório GitHub, que concede permissão para seu uso sem ônus nos termos da licença MIT.
Para demonstrar a implementação do movimento do jogador no mecanismo Unity usando C#, nós adicionais devem ser adicionados à cena. Especificamente, um objeto CharacterBody2D deve ser incluído para facilitar as interações físicas entre o jogador e outros objetos dentro do ambiente. Além disso, um componente CollisionShape2D deve ser anexado ao corpo, o que definirá a forma da área de colisão e permitirá a detecção apropriada de colisões com outros objetos. Finalmente, um objeto Sprite2D pode ser utilizado como uma representação visual do personagem do jogador na tela.
extends CharacterBody2D
var speed = 200
func _physics_process(delta):
var velocity = Vector2()
if Input.is_action_pressed('ui_right'):
velocity.x \+= 1
if Input.is_action_pressed('ui_left'):
velocity.x -= 1
if Input.is_action_pressed('ui_down'):
velocity.y \+= 1
if Input.is_action_pressed('ui_up'):
velocity.y -= 1
velocity = velocity.normalized() * speed
move_and_collide(velocity * delta)
Esse código permite que o personagem do jogador navegue em um plano horizontal utilizando as teclas de seta para se mover em qualquer direção, incluindo esquerda, direita, para cima e para baixo.
Criando camadas diferentes com nós ParallaxLayer
Para gerar o efeito de paralaxe em um ambiente tridimensional, é necessário incorporar várias instâncias da classe ParallaxLayer dentro da cena. Essas camadas adicionais formarão coletivamente os diversos elementos que compõem o pano de fundo. Para que a representação visual da profundidade pareça genuína e realista, é crucial que as camadas mais distantes do observador sejam movidas em um ritmo mais lento do que as mais próximas.
Incorpore entidades StaticBody2D em cada ParallaxLayer anexando-as a um objeto CollisionShape2D, gerando assim elementos de fundo interativos que se interconectam com o jogador e componentes de jogo adicionais, aprimorando a experiência geral de jogo por meio de suas interações.
O código GDScript fornecido gera um efeito de paralaxe utilizando objetos colidíveis em conjunto com elementos em camadas, permitindo a interação e detecção de colisão entre eles dentro da área retangular especificada.
extends ParallaxBackground
func _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)
Utilizando essa implementação, cada camada de paralaxe é equipada com uma entidade StaticBody2D que apresenta um componente CollisionShape2D, que serve para representar elementos discerníveis que residem no cenário.
A natureza interativa dessas entidades desmontáveis envolverá o avatar do jogador e vários componentes do jogo, aprimorando a complexidade geral e as nuances da experiência de jogo.
Movendo camadas diferentes com velocidade diferente
Para obter um efeito de paralaxe no Unity, é essencial ajustar a posição de cada camada em relação à câmera com base nos movimentos do jogador. Ao fazer isso, as camadas mais próximas da câmera parecerão se mover mais rapidamente em comparação com as mais distantes, resultando em uma ilusão de profundidade e movimento.
Incorpore o seguinte código GDScript na cena Player, como segue:
extends CharacterBody2D
func _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)
A presente implementação realiza uma avaliação do movimento associado às camadas de paralaxe, que depende do deslocamento do usuário e, consequentemente, modifica o deslocamento de rolagem do componente ParallaxBackground. É importante observar que um sinal negativo foi utilizado para garantir que as camadas se movam na direção contrária à realocação do usuário.
Adicione imprevisibilidade com rolagem aleatória de paralaxe
A rolagem parallax é uma técnica que adiciona um aspecto inesperado e imprevisível ao plano de fundo de um videogame, gerando e reposicionando continuamente várias camadas durante o jogo. Este método provou melhorar o envolvimento do jogador e contribuir para um ambiente mais cativante e em constante mudança nos jogos.
A fim de incorporar a rolagem de paralaxe arbitrária em uma composição visual, é necessário introduzir camadas de paralaxe adicionais com vários graus de magnitudes de deslocamento e orientações espaciais imprevisíveis.
extends ParallaxBackground
const 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 = 300
func _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_position
add_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)
O presente código estabelece parâmetros constantes para regular a imprevisibilidade das camadas de paralaxe, utilizando a função lerp para interpolar valores dentro do intervalo das escalas mínima e máxima. Este último caracteriza-se pela sua designação específica como segue:
Variant lerp ( Variant from, Variant to, float weight )
Utilizar a saída da função randf() como o peso permite a criação de camadas com valores escalados aleatoriamente.
A função randf\_range é um método alternativo para produzir números aleatórios dentro de um determinado intervalo. Nesse caso, a função create\_random\_layer a utiliza para gerar coordenadas arbitrárias para as camadas recém-adicionadas, confinadas dentro de um escopo predefinido:
var x_position = randf_range(MIN_X_POSITION, MAX_X_POSITION)
De fato, o jogo de demonstração parece ser visualmente atraente e bem organizado, apresentando um layout elegante com elementos interativos que facilitam o envolvimento do usuário. O design incorpora vários recursos gráficos, como imagens e ícones, que contribuem para uma aparência geral polida. Além disso, o uso de espaço em branco cria efetivamente uma composição equilibrada, melhorando a legibilidade e promovendo uma experiência visual limpa para os usuários. No geral, o jogo de demonstração exibe fortes princípios de design e mostra uma integração perfeita de interatividade, gráficos e tipografia.
Incluindo Recursos Adicionais
A rolagem parallax serve como um excelente ponto de partida para elevar o fascínio visual de um jogo de plataforma, mas existem oportunidades para maior refinamento por meio da integração de elementos suplementares. As seguintes sugestões podem ser consideradas.
Objetos de fundo
Considere a incorporação de componentes dinâmicos adicionais em suas cenas de paralaxe, incluindo paisagens suspensas, impedimentos móveis ou personagens de fundo animado. A integração desses recursos pode aprimorar a dimensionalidade e o envolvimento do usuário em sua experiência de plataforma.
Iluminação dinâmica
Considere incorporar efeitos de iluminação dinâmicos em suas camadas de paralaxe para uma camada adicional de realismo e profundidade em seu mundo de jogo. A utilização de fontes de luz e sombras por meio do sistema de iluminação avançado da Godot pode melhorar muito a qualidade visual geral do seu jogo 2D.
Efeitos de Partículas
A incorporação de sistemas de partículas em camadas de paralaxe pode produzir fenômenos visuais delicados, como folhagem caindo, nuvens flutuantes ou corpos celestes cintilantes, aumentando assim os arredores atmosféricos do ambiente de videogame e imbuindo-o de uma sensação de vitalidade. Além disso, você pode incorporar efeitos de áudio isentos de licença em seu jogo, aumentando ainda mais seu apelo geral.
Ciclo Dia-Noite
Incorpore um ciclo dia-noite dentro das camadas de paralaxe para alterar sua tonalidade e luminosidade de acordo com o tempo do jogo, criando um ambiente em constante mudança para os jogadores navegarem ao longo de sua jornada de jogo.
Práticas recomendadas para implementar a rolagem parallax
Para utilizar efetivamente a rolagem parallax em videogames, mantendo uma experiência de usuário perfeita e agradável, é crucial aderir a certas práticas recomendadas que promovem o desempenho ideal e a satisfação geral.
Otimização de performance
Preste atenção à proliferação de camadas de paralaxe, bem como à sua complexidade. Uma quantidade excessiva de camadas ou gráficos de resolução elevada pode precipitar deficiências de funcionalidade, principalmente em equipamentos com pouca potência. É aconselhável simplificar seus recursos visuais e empregar geometrias de colisão reduzidas sempre que possível para manter o desempenho ideal.
Arranjo de camadas
Ao organizar as camadas de paralaxe, é importante estar atento à hierarquia visual e ao efeito de profundidade desejado que elas criam. Pode ser eficaz fazer com que as camadas mais próximas da câmera se movam em um ritmo mais rápido do que as mais distantes, a fim de criar uma sensação de profundidade e movimento no design.
Limites da câmera
Para garantir uma experiência de jogo suave e ininterrupta, é essencial estabelecer limites para os movimentos da câmera dentro do ambiente virtual. Ao fazer isso, podemos evitar vazios desnecessários ou problemas técnicos que possam ocorrer quando o jogador se aproxima do perímetro do mundo do jogo.
Testes e ajustes
Para garantir o desempenho ideal e a aparência da rolagem parallax em uma ampla variedade de dispositivos e resoluções de tela, é essencial testar o design em várias plataformas. Ao ajustar a escala de movimento, a posição das camadas e outras variáveis relevantes, pode-se refinar o efeito de paralaxe para obter o resultado mais desejável.
Torne os jogos Godot mais envolventes com a rolagem parallax
A incorporação de efeitos de rolagem de paralaxe imprevisíveis pode aumentar consideravelmente o envolvimento do usuário em um jogo Godot. Essa técnica, conhecida como rolagem de paralaxe aleatória, gera e posiciona várias camadas em tempo real para criar uma experiência de jogo imersiva.
A incorporação de ambientes dinâmicos por meio de técnicas de geração processual pode evocar uma sensação de movimento e vitalidade no cenário do jogo, infundindo-lhe um ar de espontaneidade e imprevisibilidade. Este pano de fundo visual em constante mudança aumenta a imersão dos jogadores, fornecendo-lhes uma dimensão emocionante adicional para sua jornada de jogo.