Godot Engine: Bad Turtles

De Aulas
Revisão de 23h34min de 13 de maio de 2024 por Admin (discussão | contribs) (→‎Scripts)

Afluentes : Jogos Digitais, Usabilidade, desenvolvimento web, mobile e jogos

Recursos

Projeto

  • Abra o Godot e crie um novo projeto. Nesse ponto é importante configurarmos algumas informações:
    • Nome do Projeto: Nome do jogo.
    • Caminho do Projeto: Pasta onde o projeto vai ficar. É importante saber essa localização, pois é onde colocaremos nossos recursos (assets) imagens, sons, etc.
    • Renderizador: A forma como o motor vai usar a renderização. Temos três modos:
      • Avançado: Fornece o máximo de recursos e renderização para nosso game.
      • Mobile: Tem recursos específicos para smartphones e limitações de renderização para que o jogo seja compatível com esses dispositivos.
      • Compatibilidade: É a forma com maior compatibilidade com dispositivos mobile e Web. Contudo, possui recursos limitados e sua forma de renderização é a mais simples.
Criação do projeto

Cenas

Vamos começar a criar a estrutura do nosso projeto por meio das cenas.


Cena Player

Vamos começar criando nosso personagem principal do jogo. Aquele que iremos controlar.

  • Crie uma nova cena.
  • Adicione um nó raiz do tipo CharacterBody2D e renomeie-o para Player.
  • Salve a cena como player.tscn. Como já renomeamos o nó raiz, ele já vai sugerir esse nome mesmo.
  • Como nós filhos de Player:
    • Um nó do tipo AnimatedSprite2D.
    • Um nó do tipo CollisionShape2D.
    • Um nó do tipo Timer.
      • Esse temporizador indica o tempo que o personagem ficará em modo de super poder a cada vez que ele come um doce. Durante esse período, ele pode matar as tartarugas ao invés de ser morto.
      • Configurando em Inspector:
        • Wait Time = 5
        • Em One Shot selecionar Ativo.
Cena Player.
  • Na aba Inspector, Em SpriteFrames está como [vazio]. Clique ali e selecione novo SpriteFrames.
  • Clique em SpriteFrames agora, onde estava escrito [vazio].
Adicionando animação.
  • Agora nossa ferramenta de animação SpriteFrames é aberta. Renomeie a animação default para normal e adicione os sprites do player em sequencia. Depois crie uma nova animação chamada super e adicione o boneco que parece com o player, só que com outras cores.
Animações do Player.
  • Agora precisamos adicionar a colisão do player.
  • Vá para a árvore de nós da cena Player e selecione CollisionShape2D.
  • Em Inspector, temos Shape como [vazio]. Clique em [vazio] e crie um Novo CircleShape2D.
Colisão do player.
  • Na área de desenho, ajuste o círculo para o tamanho que será a colisão.
Colisão do Player.

Cena Turtle

  • Para criar a cena Turtle, siga os mesmos procedimentos do Player, mas com o nome de Turtle.
  • Na animação, temos apenas a defaut, então pode deixar o mesmo nome e colocar ali nossas tartaruguinhas.
Cena Turtle.
  • Depois adicione um AudioStreamPlayer2D e renomeie para SoundKill. Esse será o som que tocará quando a tartaruga morrer.
Cena Turtle.

Cena Candy

Para a cena Candy, siga os mesmos passos de Turtle, mas pode usar um nó raiz do tipo StaticBody2D mesmo.

Cena Candy.

Quando chegar na parte da animação. Coloque em sequencia as imagens para dar a impressão de aumentando e diminuindo.

Então as imagens ficarão na sequencia: 00, 01, 02, 03, 02, 01.

Animação Candy.

Cena Maze

A cena Maze é o labirinto onde nossos elementos vão transitar e conterá elementos de colisão.

  • Crie uma nova cena.
  • Crie um nó raiz do tipo Node2D e renomeie para Maze.
  • Salve a cena como maze.tscn.
  • Crie um nó filho do tipo TileMap.
Cena Maze
  • Vá para a aba Inspector, à direita da nossa ferramenta.
  • Em Tile Set, crie um Novo TileSet.
Novo TileMap
  • Vamos customizar as células em que vamos criar nosso labirinto para o tamanho de 64x64.
  • Para isso, altere o Rendering Quadrant Size para 64.
Redimensionando células.
  • Cique em TileSet e agora altere Tile Size para x = 64 e y = 64.
Redimensionando células.

Agora vamos começar a trabalhar com nosso tileset. Nos recursos disponíveis do exemplo, temos um tileset muito simples chamado tileset.png, mas que vai servir para nossa aprendizagem.

tileset.png
  • Arraste o tileset.png para a ferramenta TileSet
  • Observe que ele vai pedir se já quer separar conforme o tamanho que definimos. Selecione SIM.
Adicionando a imagem do tileset.png

Para que possamos ter colisão, temos que dizer isso para nosso Nó TileSet.

  • Vá na aba Inspector. Selecione Physics Layer, e clique em Adicionar Elemento.
Adicionando física aos tilesets.
  • Observe que agora, quando selecionamos um elemento à direita, temos um novo elemento em Tile Base que se chama Física. Selecione o campo Física.
Física nos TileSets.
  • Ao selecionar Física, abrimos nossa Physics Layer 0.
  • Selecione novamente nosso elemento que parece uma caixinha e pressione a tecla F.
  • A caixa agora tem colisão.
Tecla F para selecionar nosso tileset inteiro.
  • Agora clique na aba TileMap lá em baixo.
  • Selecione qualquer um dos tiles e com o botão direito do mouse, adicione-o ao nosso game.
  • Com o botão esquerdo, você pode apagar um tile.
  • Faça isso até que o ambiente esteja conforme você deseja.
Modelando o labirinto.

Cena HUD

Para criar o HUD:

  • Crie um nó raiz do tipo Node2D e renomeie para HUD;
  • Salve com hud.tscn;
  • Crie 4 nós tipo Label e renomeie eles:
    • LabelScore: com o texto SCORE:
    • InfoScore: pode colocar 000 como texto só para posicionar no local correto, mas isso será alterado em tempo de execução.
    • LabelTimeout: com o texto TIMEOUT:
    • InfoTimeout: com o texto 000, mas também iremos alterar em tempo de execução.
  • Posicione os Labels como achar melhor no layout do game. Mas deixei o Label com seu Info correspondente próximos.
Cena HUD.

Cena World

Para a cena World, faremos:

  • Crie uma nova cena;
  • Adicione um nó raiz do tipo Node2D e renomeie ele para World;
  • Salve com world.tscn;
  • Instancie seguintes os elementos na correntinha, ao lado do sinal de + em Cena:
    • Maze
    • Candy (coloque alguns candys espalhados pelo ambiente. Usar a combinação de teclas CTRL+D com um elemento selecionado e ele vai copiar em cima do atual. Mova ele para onde quiser.
    • Player, posicionando no local preferido.
    • Turtle: crie alguns turtles espalhados no ambiente.
    • HUD: só instancie, ele vai estar onde precisa estar.
Cena World.

Depois disso criaremos alguns novos nós:

  • Timer:
    • Crie um nó do tipo Timer;
    • Em Inspector, altere Wait Time para 10s
    • Deixe selecionado One Shot e Autostart
  • MusicNormal e MusicSuper:
    • Crie dois nós do tipo AudioStreamPlayer2D
    • Renomeie esses nós para MusicNormal e MusicSuper respectivamente;
    • Em cada nó, arraste a música correspondente com extensão OGG para o atributo Stream em Inspector.
    • Em MusicNormal, habilite o atributo Autoplay, pois é ela que vai começar a tocar.
    • Para que as músicas possam ficar em loop, em cada um dos arquivos ogg de música
      • selecione eles em Arquivos
      • vá na aba Import e selecione Repetir como Ativo.
      • clique no botão reimportar
  • Adicione um nó do tipo TextureRect e renomeie para GameOverImage.
    • Arraste a imagem gameover.png para Texture em Inspector
    • Em Inspector... CanvasItem... Visibility... retire a seleção de Ativo em Visible.
  • Adicione um AudioStreamPlayer2D
    • renomeie ele para SoundGameOver
    • arraste o arquivo gameover.wave para Stream em Inspector

A tela da cena World vai ficar mais ou menos como a imagem a seguir.

Tela World.


Scripts

Agora vamos criar nosso scripts. Veja que os scripts estão todos documentados com comentários no GDScript.

Player

Para criar o script do Player:

  • Vá na aba da Cena e, com o nó Player selecionado, clique no ícone para adicionar script, conforme imagem abaixo:
Criando Scripts.
  • Estamos criando um GDScript de um objeto tipo CharacterBody2D, no caso Player.
  • Ele tenta trazer como padrão em Modelo o CharacterBody2D: Basic Movement. Mas vamos colocar como Node: Default, pois será mais adequado para nosso exemplo. Não precisamos de tudo o que o Basic Movement traz.
Criando Scripts.
extends CharacterBody2D

var SPEED = 200           # velocidade
var screensize            # tamanho da tela
var super_power = false   # modo de super poder

# metodo chamado ao criar o objeto
func _ready():
	screensize = get_viewport_rect().size

# metodo chamado para matar o personagem
func kill():
	hide()                             # deixamos ele invisivel
	$CollisionShape2D.disabled = true  # desabilitamos as colisoes
	get_parent().game_over()            # avisamos ao World que morremos

# Entramos em modo de super poder
func do_super():
	super_power = true                      # sabemos que temos super poderes
	SPEED += 10                             # a velocidade eh incrementada
	$AnimatedSprite2D.animation = "super"   # alteramos a animacao para super
	get_parent().change_music(true)         # mudamos para musica mais animada
	$Timer.start()                          # iniciamos um timeout de super

# Essa funcao processa a fisica do jogo e sera chamada
# a cada frame do jogo. Eh parte do game loop
func _physics_process(delta):
	var vel = Vector2()                         # Crio um vetor 2D
	if Input.is_action_pressed("ui_down"):      # Se digitada tecla para baixo
		vel.y += SPEED                          # Aumenta y do vetor
		rotation_degrees = 0                    # Rotaciona a imagem 0 graus
	elif Input.is_action_pressed("ui_right"):   # Senao, se tecla para direita
		vel.x += SPEED                          # Aumenta x do vetor
		rotation_degrees = -90                  # Rotaciona a imagem -90 graus
	elif Input.is_action_pressed("ui_up"):      # Senao se tecla para cima
		vel.y -= SPEED                          # Diminui y do eixo vertical
		rotation_degrees = 180                  # Rotaciona para 180 graus
	elif Input.is_action_pressed("ui_left"):    # Senao se tecla para esquerda
		vel.x -= SPEED                          # Diminui x do eixo horizontal
		rotation_degrees = 90                   # Rotaciona a imagem 90 graus
	# Se movimentou, o vetor vel sera maior que zero
	if vel.length() > 0:                            
		var obj = move_and_collide(vel * delta)     # move e pega colisao
		if obj:                                     # se colidiu, retorna em obj
			if 'Turtle' in obj.get_collider().name: # Se for Turtle
				if super_power:                     # Se estiver no modo super
					var other = obj.get_collider()  # Pega o objeto Turtle
					other.kill()                    # E mata ele
					get_parent().make_point()       # Faz ponto no jogo
				else:                               # Senao
					kill()                          # Morre
			elif 'Candy' in obj.get_collider().name:# Se for um Candy
				var other = obj.get_collider()      # Pega o objeto Candy
				other.kill()                        # Mata o Candy
				do_super()                          # E entra no modo super
		$AnimatedSprite2D.play()   # Da play na animacao
	else:                          # Senao, se nao movimentou, vel = 0     
		$AnimatedSprite2D.stop()   # E para a animacao
	# Se sair da tela, eixo x ou y, volta pra tela
	position.x = clamp(position.x, 25, screensize.x - 25)
	position.y = clamp(position.y, 25, screensize.y - 25)

# Essa funcao eh chamada quando o timeout do modo super
# chega a zero, voltando entao para o modo normal.
func _on_timer_timeout():
	super_power = false                     # Desliga o modo super
	SPEED -= 10                             # Volta a velocidade normal
	$AnimatedSprite2D.animation = "normal"  # Volta a animacao normal
	get_parent().change_music(false)        # E volta a musica mais calma

Turtle

Candy

HUD

World

Disponível em “https://saulo.arisa.com.br/wiki/index.php?title=Godot_Engine:_Bad_Turtles&oldid=9370”