Módulo 8 · Aula 8.3 · Mapa de Entrada e movimento

Objetivos de aprendizagem

1. Mover um desenho com as setas usando delta (velocidade igual em qualquer computador).
2. Criar ações no Mapa de Entrada (esquerda, direita, cima, baixo) com mais de uma tecla cada.
3. Mover um CharacterBody2D com velocity, move_and_slide() e Input.get_vector.
4. Trocar a animação e virar o desenho conforme a direção.
5. Seguir o mouse ou o dedo enquanto ele está apertado.

Pré-requisitos

Aula 8.2.

Materiais

Godot 4.7; laboratório (cenas/anda_com_setas.tscn); Sementes em Godot (cenas/jogador.tscn).

Conceitos

Velocidade × delta. position.x += 200 * delta anda 200 pixels por segundo. Sem delta, andaria 200 pixels por quadro: num computador de 60 quadros por segundo, voaria a 12.000 pixels por segundo.

Ação em vez de tecla. No código não se escreve "seta para a direita": escreve-se a ação "direita". No Mapa de Entrada cada ação recebe uma ou mais teclas (seta e letra D, por exemplo). Para trocar as teclas, não se mexe no código. É a mesma ideia da tecla trocável da Feira do Troco (Aula 7.6).

Ações prontas. O Godot já vem com ações ui_left, ui_right, ui_up, ui_down e ui_accept (aparecem ao ligar Mostrar Ações Integradas). O primeiro exemplo usa essas; o jogo usa as ações próprias, com nome em português.

Input.get_vector. Junta as quatro ações numa direção só, de tamanho no máximo 1. Assim, andar na diagonal não fica mais rápido do que andar reto. O teste do Sementes confere isso: reto ou na diagonal, uns 100 pixels em meio segundo.

CharacterBody2D. Corpo que o jogador controla. Põe-se a velocidade em velocity e chama-se move_and_slide(): ele anda e desliza nas paredes. Para jogo visto de cima, a propriedade Motion Mode fica em Floating (no Sementes já está).

_physics_process. Movimento com colisão vai aqui, e não no _process, porque a física roda sempre no mesmo ritmo.

Exemplos

Tutorial passo a passo

Parte A. Primeiro movimento (90 min)

1. Abra anda_com_setas.tscn no laboratório e execute a cena. Ande com as setas.
2. Leia anda_com_setas.gd. Tire o * delta de uma linha e execute: o que aconteceu? Volte como estava.

Parte B. Mapa de Entrada (90 min)

3. Menu Projeto → Configurações do Projeto..., aba Mapa de Entrada.
4. Em Adicionar Nova Ação, escreva direita e clique em Adicionar. Faça o mesmo para esquerda, cima e baixo.
5. No + de cada ação, aperte a tecla (seta) e confirme. Adicione também W, A, S, D.
6. Compare com a captura do Sementes. As teclas aparecem como Right (Físico): "físico" quer dizer a posição da tecla no teclado, e assim funciona em teclados de outros idiomas.

Parte C. Corpo que anda (180 min)

7. Cena nova com raiz CharacterBody2D chamada Jogador. Filhos: AnimatedSprite2D chamado Desenho e CollisionShape2D chamado Colisao.
8. No Desenho, em Sprite Frames, crie um SpriteFrames com as animações parado (1 quadro) e andando (2 quadros), usando os desenhos do sertanejo.
9. No Colisao, em Shape, escolha um retângulo do tamanho do corpo.
10. No Jogador, Motion Mode = Floating. Anexe um script e escreva o código abaixo (sem a parte do toque, por enquanto).
11. Coloque a cena do jogador dentro de uma cena de teste (arrastando o .tscn para a área 2D) e execute.

Parte D. Mouse e dedo (90 min)

12. Acrescente alvo_toque e a função _unhandled_input do código completo. Segure o mouse num ponto: o sertanejo vai até lá.
13. Teste: o que acontece quando o sertanejo chega no ponto? Por que existe o > 8?

Imagens

• ../../../recursos/imagens/godot/captura-godot-mapa-de-entrada.png: Mapa de Entrada com as ações do Sementes.
• ../../../recursos/imagens/godot/captura-godot-script-jogador.png: o script do jogador no editor.
• ../../../recursos/imagens/godot/captura-godot-cena-jogador-inspetor.png: a cena do jogador.

Indicação da interface

O passo a passo do painel de quadros (botões para adicionar quadros de arquivo) não foi fotografado nesta versão; o professor deve fazer uma vez antes da aula.

O código completo

projetos/sementes-godot/scripts/jogador.gd:

extends CharacterBody2D

const VELOCIDADE := 200.0

## Ponto que o jogador está apertando com o mouse ou o dedo. null quando ninguém aperta.
var alvo_toque = null

@onready var desenho: AnimatedSprite2D = $Desenho


func _unhandled_input(event: InputEvent) -> void:
	# O toque na tela chega como clique de mouse (opção padrão do Godot).
	if event is InputEventMouseButton and event.button_index == MOUSE_BUTTON_LEFT:
		alvo_toque = event.position if event.pressed else null
	elif event is InputEventMouseMotion and alvo_toque != null:
		alvo_toque = event.position


func _physics_process(_delta: float) -> void:
	var direcao := Input.get_vector("esquerda", "direita", "cima", "baixo")
	if direcao == Vector2.ZERO and alvo_toque != null and position.distance_to(alvo_toque) > 8:
		direcao = position.direction_to(alvo_toque)

	velocity = direcao * VELOCIDADE
	move_and_slide()
	# Não deixa o sertanejo sair da tela de 800 x 600.
	position = position.clamp(Vector2(16, 24), Vector2(784, 576))

	if direcao.x != 0:
		desenho.flip_h = direcao.x < 0
	if direcao == Vector2.ZERO:
		desenho.play("parado")
	else:
		desenho.play("andando")

Explicação do código

• @onready var desenho = $Desenho: $Desenho é o nó filho chamado Desenho. @onready espera a cena ficar pronta para buscar.
• move_and_slide() já usa o delta por dentro; por isso a função recebe _delta (o traço diz "não uso").
• Vector2 é um par (x, y). clamp prende a posição dentro de um retângulo.
• O toque: segurando, alvo_toque guarda o ponto; soltando, vira null e o sertanejo para. As setas têm prioridade.
• Só vira o desenho quando há movimento para o lado; parado, fica virado para onde estava.

Resultado esperado

Personagem com ações próprias, velocidade igual na diagonal, animação e virada certas, preso na tela, seguindo o mouse ou o dedo.

Problemas comuns

Exercício guiado

Com velocidade 200 e get_vector, quanto o jogador anda em 0,5 s para a direita? E na diagonal? (Resposta: uns 100 pixels nos dois casos. O teste mediu 103,3 nos dois, por causa do arredondamento dos quadros.)

Desafio individual

Acrescente uma ação correr (tecla Shift) que dobra a velocidade enquanto está apertada.

Desafio avançado (opcional)

Faça o personagem acelerar aos poucos até a velocidade máxima, usando velocity = velocity.move_toward(direcao * VELOCIDADE, 800 * delta).

Critérios de avaliação

• Ações próprias no Mapa de Entrada, com duas teclas cada.
• Movimento com get_vector e move_and_slide.
• Animação e virada coerentes.

Checklist de conclusão

• Movi um desenho com delta
• Criei 4 ações com seta e letra
• Montei o CharacterBody2D com desenho e colisão
• Animação parado/andando e virada
• Segue o mouse ou o dedo

Extensão

Física: velocidade é distância dividida por tempo. Cronometre o personagem atravessando a tela de 800 pixels. Bate com 200 pixels por segundo?