Godot - Parte 3

Dando início ao nosso jogo

Sejam bem vindos a terceira postagem da sequência, onde vamos aprender a criar um simples jogo na Godot, nos posts anteriores, vimos um pouco da estrutura da Godot em suas partes que são exibidas para o usuário e vimos também como configurar um projeto para um jogo que será desenvolvido em sistemas mobile.

Hoje vamos dá início a criação do jogo. Peço que baixem nesse momento, as imagens que vamos usar no nosso jogo. clique aqui

Extraia o arquivo zipado. Vá agora à pasta do projeto que criamos, dangerous race. Se não lembra onde está a pasta, é simples ao abrirmos a Godot e selecionarmos o projeto,o mesmo indica o diretório onde está a pasta.

Ao localizar a pasta do projeto, crie uma nova pasta dentro com o nome assets, agora copie ou mova os arquivos de imagem que você baixou para esta pasta. Quando abrirmos o projeto na Godot, você perceberá que a pasta já está visível junto com os arquivos de imagem dentro.

Ao clicarmos na pasta criada, assets, veremos as imagens.Se você tiver feito tudo corretamente, a tela abaixo ficará igual a sua


Agora vamos criar o primeiro Node, não esqueça que a nossa modalidade de jogo é 2D, então verifique na parte superior, se a opção 2D, está selecionada, como abaixo:


Na parte direita onde temos scene, clique no +,.

Nessa opção aparecerão vários elementos que como já explicados, são elementos com características próprias, ao escolhermos um elemento desses estamos criando um Node, que poderá agregar outros elementos filhos ou não. O conjunto de Nodes, formam uma Scene, que também poderá ser formada por apenas um Node ou não. rsrsrs, se não entendeu, relaxe! A partir de agora você vai entender. Então vamos lá, clique no + e a tela abaixo será mostrada:


Selecione o Node2D, apos selecioná-lo, aparecerá o novo node criado, como na tela abaixo:

Clique com o mouse duas vezes em cima, e renomeio para Jogo.

Agora vamos selecionar esse node criado, que está com o nome Jogo e após selecioná-lo, clique em +, assim vamos novamente criar um novo Node, que será filho de Jogo, o node que vamos escolher é o ParallaxBackground, esse Node é usado geralmente quando estamos interessados em colocar um fundo no jogo, que geralmente pode ser uma imagem, em outras circunstâncias, esse Node em conjunto com nodes filhos do tipo ParallaxLayer podem criar uma sensação de profundidade em jogos 2D, durante a movimentação do personagem principal, onde pode ser configurado nas várias velocidades diferentes, isso no caso teria que ter o uso de uma câmera ou configurações manuais do  scroll_offset.

Se achou complicado, relaxe, isso ai foi só uma explicação de acordo com a documentação oficial da Godot, no nosso projeto, faremos algo simples e fácil de entender, então vamo lá! Escolha o node ParallaxBackground, se tiver dificuldades para encontrar, você pode digitar no campo de busca, que automaticamente ele vai filtrando para você como abaixo:



Feito isso, a nova tela ficará dessa forma, logo abaixo:

Compare sempre com a sua, para que ter a certeza que tudo está indo bem. Agora, vamos renomear, esse novo node, para Background. Após isso, deixe selecionado esse node, e novamente clique no +, para adicionarmos um outro node que agora será filho de Background, vamos escolher o node do tipo ParallaxLayer, ficando  a nova tela dessa forma:

O ParallaxLayer são camadas que vão sendo adicionadas dentro do pai que é ParallaxBackground. Cada camada dessa pode sobrepor a outra em profundidade, onde isso é controlado no atributo z index, que fica nas propriedades do Node.

Vamos renomear esse novo node, para Layer1, após isso, deixe o node selecionado e vamos adicionar um novo node que será filho desse Node, Layer1. O Node dessa vez vai ser do tipo Sprite, então é o mesmo procedimento, deixe o node selecionado, vá em + e procure por Sprite, você também tem a opção de digitar no campo de busca,  para encontrar mais rápido. Após essas operações, a nova tela deverá ficar assim:

O node do tipo Sprite, é um node que guarda uma imagem para ser exibida na tela, toda vez que queremos adicionar uma imagem ao jogo, usamos esse tipo de node. Agora vamos renomear esse node para Fundo. Após isso, deixe o node selecionado e vá em Inspector que fica mais em baixo, lá aparece o nome do node que você acabou de renomear e as proprieades. Procure por Texture, como na tela abaixo:

Veja que em Texture, temos null, então clique na aba do lado e vá em Load, como na tela abaixo:

Ao clicar em Load, ele pedirá para você selecionar uma imagem, vá em assets na tela que aparece e selecione chao.png, como abaixo:


Feito isso, a imagem aparecerá na área do jogo, centralizada nas coordenadas de origem do plano cartesiano, como mostra a figura abaixo:

Segurando Alt no seu teclado, tente mover a imagem com o mouse, de forma que a área do jogo fique toda sobreposta na imagem, em todo seu espaço, para ficar mais claro, a imagem abaixo mostra:

Uma outra forma também de você movimentar essa imagem, é no Inspector, na opção Transform, temos a propriedade position, que podem ser editados manualmente, alterando a posição da imagem, então sinta-se a vontade, se preferir essa opção, mas as vezes pode ser mais demorado, acho interessante usarmos a opção do position no inspector, quando precisamos ter uma precisão exata de posicionamentos. Se não tiver encontrado, a imagem abaixo mostra a propriedade:

Agora, vamos criar uma segunda camada, no nosso Background, então selecione a mesma, clique em + e vamos adicionar outro node do tipo ParallaxLayer, e vamos renomear para Layer2, conforme abaixo:


Agora com esse novo node selecionado, vamos adicionar um node filho, que também será do tipo sprite, como fizemos anteriormente, após adicionar esse novo Sprite, renomeio para Pista, conforme abaixo:

Vá em Inspector em Texture e dê um Load para carregar a imagem, que será pista.png. A imagem será adicionada na área do jogo, e agora você fará a mesma coisa que fez com a imagem anterior tente centralizá-lo nas laterais, deixando parecido como na figura abaixo:


Até aqui tudo bem, vamos agora salvar o projeto, pois ainda não fizemos isso, e é bom sempre termos esse hábito para não termos problemas mais tarde, de ter que refazer tudo de novo. Então vamos na opção superior a esquerda, onde tem Scene, como abaixo:


Clicamos em Save Scene. Perceba  que o conjunto de nodes que criamos, formaram uma Scene, mas antes de salvar, vá na pasta do seu projeto e crie uma outra pasta, chamada de scenes, como já mencionamos antes, criaremos sempre uma pasta para recursos diferentes, já temos a pasta de assets que armazenam as imagens do jogo, e agora a pasta scenes que guardará todas scenes criadas no jogo. Continuando, salve a nova Scene dentro da pasta criada dando o nome de Jogo

Voltando agora para a área do jogo, percebemos que nosso fundo está ficando interessante, se você quiser dá um zoom na tela, basta no botão central do mouse, movimentar o scroll para que a tela amplie ou diminua o zoom. É fundamental fazermos isso para observamos detalhes do jogo de perto, a medida que vamos construindo.

No nosso próximo post, vamos trabalhar com o AnimationPlayer, que é um node muito poderoso, onde podemos criar vários tipos de animação. Vamos adicionar o carro,  e vamos usar esse node para fazermos com que tenhamos o efeito do carro se movimentando no sentido vertical para cima.

Resolvi deixar para o próximo post, para explicar com detalhes sobre esse novo node, assim evitamos de ter um texto muito longo. Acreditamos que a aprendizagem é melhor quando realizada em pequenas partes.

Se ainda não viu o post anterior a esse, clique abaixo:

Godot - Parte 2(Criando e configurando o nosso projeto para sistemas mobile.)



Se você ainda não cadastrou seu email para receber atualizações de postagens, vá a nossa página inicial e cadastre, ou se preferir clique Aqui
Autor
Maclaine Sabino

Maclaine Sabino Graduado em Matemática, Administração, finalizando Análise e Desenvolvimento de Sistemas.
Ama aprender coisas novas, tecnologia e música.