Português

Platformer 2D no Godot - Início Rápido, Parte 1

Bruno Araújo

• 8 min read
Share
Platformer 2D no Godot - Início Rápido, Parte 1
💡
For an English version of this page, click here!

Sobre a versão em português

Os termos e os vídeos neste guia irão referenciar a versão em inglês do Godot, apesar deste guia ser em Português, por questões de padronização e também para utilizar os mesmos termos de outras documentações.

Acredito que ter uma documentação em Português pode ser útil para quem não possui facilidade com a língua inglesa e quer utilizar Godot para fazer os seus jogos; dito isso, recomendo fortemente aprender inglês, já que a grande maioria dos vídeos, documentações e outros materiais são nesse idioma, não apenas sobre Godot mas praticamente todas as áreas de Desenvolvimento de Jogos.

Parte 1 - Uma tela em branco

Introdução

Este guia é focado na produção de um jogo Platformer 2D em Godot de um jeito prático pra quem está começando agora com o motor. Esse guia irá prover uma boa fundação para o seu jogo.

Usaremos Godot 4.7 para esse guia. Se você ainda não baixou, agora é a hora!

GDScript

A linguagem que usaremos ao longo desse vídeo será GDScript. Não se preocupe se você não sabe/não tem interesse em programar, apenas siga as instruções e tudo deve funcionar.

Independentemente da sua experiência em programação, a documentação oficial do Godot é uma fonte essencial de informação sobre o motor, e você irá visitá-la com frequência.

Godot Docs – 4.7 branch
Welcome to the official documentation of Godot Engine, the free and open source community-driven 2D and 3D game engine! If you are new to this documentation, we recommend that you read the introduc…
Godot Engine documentation

No entanto, caso você queira aprender como programar em GDScript, eu recomendaria estes materiais:

Learn GDScript From Zero | GDQuest
Learn Game development
GDQuestBartek Patoleta

Criando o projeto Godot

Abra o Godot, clique no botão Create e preencha o nome do projeto.

Iremos fazer um jogo 2D com gráficos simples, portanto a escolha do renderer fica entre:

  • Se você deseja fazer builds para Web, Compatibility é o renderer recomendado;
  • Caso contrário, deixe a seleção no renderer padrão Mobile.

Forward+ é provavelmente um exagero para esse projeto e só possui suporte para desktop, mas se você quiser escolher eu não vou lhe impedir. Mais informação sobre renderers pode ser encontrada aqui.

Observe as imagens abaixo para referência:

Criando um novo projeto e dando um nome

2D Scene setup

Alguns conceitos fundamentais do Godot são Nodes e Scenes:

  • Como dito na documentação, nodes são os "blocos fundamentais do seu jogo" (tradução livre);
  • Scenes são um conjunto de nodes organizados em uma estrutura de árvore em um arquivo.

Mais informações sobre estes conceitos pode ser vista aqui.

Agora, com o novo projeto aberto, é hora de criar o node raiz e salvar nossa primeira scene!

  • Clique no botão 2D Scene;
  • Click no recém criado Node2D com o botão direito e selecione Rename - ou clique no node e pressione F2;
  • Nomeie-o "World" (ou o que der na sua telha);
  • Selecione a opção do menu Scene/Save Scene ou pressione Ctrl+S para abrir o diálogo de salvamento;
  • Clique no botão de nova pasta no canto superior direito e crie uma nova pasta chamada scenes;
  • Nomeie a scene como world.tscn (ou o que você quiser, mantendo a extensão .tscn) e pressione o botão Salvar.

Abaixo temos um vídeo com estes passos:

0:00
/0:31

Criando o node raiz e salvando a scene

Criação do Player

Criando o node

Em Godot, todo node tem um tipo - o node World criado anteriormente tem o tipo Node2D, que é um "game object 2D herdado por todos os nodes relacionados a 2D" e é um tipo comum para a raiz de um nível ou uma tela de um jogo.

Para o nosso player, iremos utilizar um node mais especializado chamado CharacterBody2D - de acordo com a documentação, é "uma classe especializada para corpos físicos que devem ser controlados pelo usuário" (tradução livre), que é uma boa base para podermos trabalhar. No caso, um corpo físico é um elemento que faz parte de um sistema de física.

Vamos seguindo estes passos:

  • Clique com o botão direito no node World e escolha Add Child Node... (ou pressione Ctrl+A);
  • Na caixa de busca, comece a escrever "Character" e o node CharacterBody2D logo deverá aparecer, clique duas vezes ou selecione-o e pressione o botão Create;
  • Clique com o botão direito no node recém criado e escolha Rename (ou pressione F2) e dê o nome de "Player" (ou o que você achar melhor).
0:00
/0:26

Adicionando Character2D para ser o player

Adicionando os subnodes requeridos

Nesse momento o node Player apenas existe, nada faz por conta própria. Portanto, vamos adicionar alguns outros nodes e um script para lhe dar um comportamento.

Observe que o Player tem um sinal de aviso amarelo ao lado, indicando que algo precisa ser corrigido. Manter o ponteiro do mouse sobre o indicador irá mostrar uma explicação sobre o que fazer:

Aviso para o node Player

O aviso informa que nesse momento o player não pode colidir ou interagir com outros objetos, portanto vamos providenciar uma solução. Além disso, vamos adicionar algo para que o player fique visível na tela.

Node Sprite2D

Estes são os passos para adicionar um node Sprite2D como filho do Player:

  • Clique com o botão direito e adicione um node Sprite2D;
  • Clique no node Sprite2D e arraste o arquivo icon.svg na seção FileSystem (parte inferior esquerda do editor) para o espaço Texture do Sprite2D no Inspector, na parte direita superior do editor.
  • Verifique se o sprite irá aparecer no local do Player no editor.
0:00
/0:20

Adicionando Sprite2D ao player

Node CollisionShape2D

Vamos adicionar agora um node CollisionShape2D, junto com um Shape adequado:

  • Clique com o botão direto no Player e adicione o node CollisionShape2D;
  • Veja que o node recém-criado também tem um aviso, que indica que devemos adicionar um Shape ao mesmo.
  • Clique no node, e no dropdown do Shape no Inspector selecione RectangleShape2D;
  • Você verá que um pequeno retângulo azulado irá aparecer bem no centro do sprite; esta é a forma inicial do colisor.
  • Não tente mover o colisor diretamente! O mesmo deverá permanecer centralizado para evitar problemas com alinhamento;
  • Clique nos pontos vermelhos nos cantos do colisor e estique-o em todos os lados, para que cubra o sprite.
0:00
/0:37

Adicionando CollisionShape2D ao player

Script para o Player

Agora é o momento de adicionarmos alguma funcionalidade ao Player, portanto vamos adicionar um script ao mesmo.

  • Clique com o botão direito no FileSystem (canto inferior esquerdo do editor) e crie uma nova pasta, nomeie-a scripts;
  • Clique no node Player e então no botão para adicionar um script, que fica nda seção Scene e tem um sinal de "mais" verde;
  • Clique no botão de pasta na parte direita do campo Path, vá para a pasta superior e escolha a pasta scripts criada anteriormente;
  • Deixe os outros campos como estão e clique em Create.
0:00
/0:34

Adicionando script ao Player

O script que você acabou de criar adiciona movimento para a esquerda e direita ao player, utilizando as setas do teclado, gravidade e a habilidade de pulo. Ficou assim:

extends CharacterBody2D


const SPEED = 300.0
const JUMP_VELOCITY = -400.0


func _physics_process(delta: float) -> void:
	# Add the gravity.
	if not is_on_floor():
		velocity += get_gravity() * delta

	# Handle jump.
	if Input.is_action_just_pressed("ui_accept") and is_on_floor():
		velocity.y = JUMP_VELOCITY

	# Get the input direction and handle the movement/deceleration.
	# As good practice, you should replace UI actions with custom gameplay actions.
	var direction := Input.get_axis("ui_left", "ui_right")
	if direction:
		velocity.x = direction * SPEED
	else:
		velocity.x = move_toward(velocity.x, 0, SPEED)

	move_and_slide()

Aperte F5 ou clique no botão Play na parte superior direita do editor e vamos ver o que acontece...

0:00
/0:05

aaaaaaaaaAAAAAAAA

...e o player apenas passa direto pela tela! O script funciona, adicionando gravidade e permitindo que o player se mova para a direita e esquerda, mas não tem nada pra ficar em cima e o jogador apenas cai perpetuamente no abismo digital do lado de fora da tela.

Uma plataforma para poder pisar

Portanto, vamos resolver isso providenciando algo pro player poder ficar em cima: um StaticBody2D, que também é um corpo físico mas, como o nome sugere, é estático, tornando-o uma ótima base para uma plataforma. Vamos lá:

Clique no botão 2D na parte central superior do editor e volte para a scene.

  • Clique com o botão direito no node World e adicione um node StaticBody2D;
  • Clique com o botão direito no novo node StaticBody2D e adicione um Sprite2D, do mesmo jeito que foi feito com o node Player;
    • Clique no Sprite2D e no Inspector na direita expanda o item Transform, clique no ícone de corrente na propriedade Scale para desvincular os dois valores, e ajuste a escala X para 5.0 e a escala Y para 0.5;
    • [imagem]
  • Clique com o botão direito no StaticBody2D e adicione um CollisionShape2D, juntamente com um RectangleShape2D;
    • Expanda a forma do CollisionShape2D para cobrir a área do sprite.
  • Com o sprite e colisor configurados, posicione o player e a plataforma mais para o centro da tela.
0:00
/1:25

Criando um StaticNode2D como uma plataforma e posicionando o jogador e a plataforma.

Vamos executar o jogo novamente e ver o que se passa (F5 ou clicando no botão Play na parte superior direita):

0:00
/0:12

Now the player has something to stand on!

Nada mais de queda, e você pode mover o jogador com as teclas de seta e pular com espaço!

Pequenos ajustes no player e mais plataformas

Por enquanto o player está ancorado no espaço, mas tem um pulo bem baixo; além disso, um jogo de Plataforma com apenas uma plataforma não tem muita graça. Vamos resolver isso tudo:

Vamos mais pro alto

A altura de pulo atual é bem baixa, como podemos ajustar isso? Vamos ver:

  • No painel FileSystem (parte inferior esquerda), clique duas vezes no script player.gd na pasta scripts;
  • Na linha 5, mude o valor da constante JUMP_VELOCITY de -400 para -700.
    • O valor é negativo porque a coordenada Y do Godot aumenta de valor quando se vai pra baixo, portanto para que o player suba a velocidade aplicada no eixo Y deve ser negativa.
0:00
/0:09

Ajustando a altura do pulo

Outros lugares para pular

Vamos adicionar mais plataformas:

  • Clique no botão 2D na parte central superior do editor para voltar para a scene;
  • Renomeie o StaticBody2D (selecione-o e pressione F3 ou clique com o botão direto e escolha Rename) para Platform;
  • Clique com o botão direito no node Platform, escolha Save Branch as Scene... e salve como uma nova scene com o nome sugerido (platform.tscn);
  • No FileSystem, arraste a scene platform.tscn para a tela e veja uma nova plataforma aparecer!
  • Arraste mais uma e é isso.

Agora execute o jogo e veja que o jogador está pulando mais alto e pode ficar em cima das outras plataformas!

Próximos passos

Algumas outras coisas que você pode fazer para organizar melhor a scene:

  • Crie um Node2D para ser o node pai de todas as plataformas;
  • Salve o player como uma scene, vai facilitar pra adicionar o player em outras scenes e também para editar o player de maneira isolada;
  • Edite a constante SPEED no script do Player e veja o que aconteceE

E por hoje é só!

Para a Parte 2, iremos falar sobre

  • Adicionar uma câmera à fase;
  • Adicionar alguns sprites pro jogo ter um visual de fato;
  • ...e mais algumas outras coisas.

Até lá!

Mastodon