Tutorial Space Shooter Godot: Parallax - Parte 2

Perdeu a parte 1? Vem cá, o link tá aqui!

No post anterior falamos um pouco de preparação e planejamento, definimos quais seriam as características básicas do nosso jogo e indicamos algumas fontes de assets gratuitos para usarmos no nosso jogo.

Nós também falamos sobre os primeiros passos para configurar o Godot para o jogo que vamos desenvolver. Definimos o mapeamento de algumas ações, formato de tela e máscara de apresentação de texturas.

Hoje, vamos começar à trabalhar no desenvolvimento de algumas cenas do nosso Space Shooter. Tá com dúvida em relação à alguns termos da Godot? Não vou entrar em detalhes aqui, mas acho que você vai entender melhor colocando a mão na massa. Então bora começar a nossa jornada de hoje:

Para exemplificar esse efeito, criaremos uma composição de animações de imagens com fundo estrelado rolando suavement de cima pra baixo. Também queremos que tal fundo dê a impressão de que temos estrelas mais próximas e mais distantes, com cada uma das camadas se movendo em uma velocidade diferente. Isso que eu descrevi se chama Parallax e é o que vamos fazer hoje.

Quando você executar seu jogo pela primeira vez (tecla F5 do seu teclado), o que você quer ver? Bom... se você fizer isso agora, antes de seguir o que vou explicar aqui, vai ver só uma tela cinza de 540 px x 960 px sem nada nela. Esta é a tela padrão do Godot, qualquer imagem de fundo ou imagem animada, sempre vai exigir que o desenvolvedor faça alguma coisa para mudar tal tela.

Mas, antes de começar à fazer o Parallax, vamos mapear mais duas ações que não foram mapeadas da última vez, vamos chamar elas de quit e reset e elas farão a saída e reinício do jogo respectivamente, com o acionamento de uma única tecla cada uma delas. Se está com dúvida de como isso é feito, dá uma olhada no post anterior dessa série, no final você deve ficar com o mapeamento desta forma:

Uma vez mapeadas as funções, precisamos criar o código que será responsável por chamar as ações quando tais funções forem acionadas. Será nosso primeiro código, então vamos devagar. Primeiro, com a cena Game selecionada, clique no ícone de um pergaminho com um sinal de mais para associar um script.

Crie uma pasta para organizar os scripts separados das cenas e assets. Vamos chamar esta pasta de scripts, mas você pode dar o nome que quiser.

Com a pasta criada, selecione o template para a criação do seu script e o nome do seu script. Neste caso vamos criar com o template vazio o script game.gd.

No script criado, vamos incluir uma validação para checar se determinada tecla foi acionada dentro da função process, se a tecla ESQ definida para a ação de quit for pressionada vamos sair do jogo, se a tecla R for a tecla pressionada, vamos reiniciar a cena ativa, para isso esse será o script definido:

func _process(delta):
	if Input.is_action_just_pressed("quit"):
		get_tree().quit()
	elif Input.is_action_just_pressed("reload"):
		get_tree().reload_current_scene()

Pra ver se o seu código está funcionando, execute a cena com o botão F5 e depois de aberta aperte o ESC, a tela do jogo deve fechar na sequencia. Por enquanto não dá pra testar a função de reset, mas você pode ver isso depois desse capítulo do tutorial.

Enfim, vamos para o que tínhamos planejado para esse capítulo, né?

Para criar o efeito de parallax no Godot, você vai precisar de 3 nós diferentes:

• ParallaxBackground;
• ParallaxLayer;
• Sprite2D.

O ParallaxBackground funciona como um nó agrupador, tendo os nós ParallaxLayer's como filhos. Este nó será o responsável por criar o efeito de movimento do fundo.

Você pode ter mais de um ParallaxLayer, cada um deles se movendo em uma velocidade diferente para dar a impressão de profundidade. Este nó só define a camada, a imagem desta camada precisa ser adicionada como um Sprite2D filho.

Nos assets do Kenney que baixamos, temos algumas imagens de background. selecionei um fundo roxo com estrelas como o Sprite 2D da camada mais ao fundo. Neste Sprite2D vamos configurar as seguintes informações:

• Desmarcar a opção de centered no Offset;
• Habilitar a opção de Region, definindo a largura e altura como a viewport;
• Habilitar a opção de Repetição da textura.

Também criei uma segunda camada com um sprite composto por uma imagem de fundo transparente e estrelas brancas (esta imagem não faz parte dos assets baixados, você pode usar qualquer ferramenta de pixel art para criar tal imagem).

Com o Parallax Layer selecionado, através do Inspetor defina o espelhamento (mirroring) vertical na mesma altura definida na viewport e a escala do movimento (motion > scale) de acordo com a camada que estiver trabalhando.

No nosso caso estou definindo a camada mais profunda com 0.3 e a mais próxima como 1, isso fará com que a camada "do fundo" se desloque mais devagar que a "mais próxima" do jogador.

Por último para fazer o movimento acontecer, temos que ajustar o script incluindo uma linha de código alterando a posição do offset do ParallaxBackgroud, as camadas vão se mover tomando como referência este offset e a escala de movimento.

A escala de movimento multiplica o offset definido no ParallaxBackground e faz com que este movimento vá mais rápido ou devagar, conforme definido no ParallaxLayer. Uma escala menor faz com que o movimento seja mais lento, uma escala maior que seja mais rápido.

Vamos incluir as seguintes informações no script:

• Uma variável para definição da velocidade de rolagem;
• Uma variável de referência do ParallaxBackground;
• Uma linha de código na função process parra variar o scroll_offset

Conforme indicado abaixo:

...
@onready var parallax_background = $ParallaxBackground
var scroll_speed = 100.00

func _process(delta):
...	
	parallax_background.scroll_offset.y += delta * scroll_speed

E finalmente temos o efeito de Parallax funcionando no fundo do seu jogo!!! Você pode testar seu jogo pela tecla F5. Também dá pra testar as funções de reset e quit que definimos antes, com as teclas R e ESC.

O que você achou? Difícil ou fácil? Muito complicado encontrar as coisas na Engine? E a sintaxe da linguagem GDScript? Deixe seu feedback para melhorarmos a explicação para os próximos capítulos, tá legal?

Hoje vamos ficar por aqui, na próxima semana, vamos criar o nosso Player, colocar ele na nossa cena do jogo, fazer suas lógicas de movimentação e definir a sua máscara de colisão. Já deixa anotado aí na sua agenda pra não perder.