Godot 4.7: como criar um HUD com CanvasLayer, score e botão Start

Para criar um HUD em Godot 4.7 que exiba score, mensagens e botão de início sem ser coberto por elementos do jogo, use um nó **CanvasLayer** como raiz da cena de interface. Segundo a documentação oficial do tutorial "Your first 2D game", esse nó desenha a UI em uma camada acima do restante do jogo, de modo que jogador e inimigos não escondam as informações.

O guia parte do projeto do tutorial (com cenas Main e Mob já existentes) e foi escrito para a versão estável do Godot 4.7. A documentação não trata de outras versões, e o texto abaixo não foi testado pela Rplay.

O que você precisa antes de começar

• Noções básicas de cenas e nodes em Godot.
• Compreensão de signals e funções.
• O arquivo de fonte Xolonium-Regular.ttf nos assets do projeto, conforme o tutorial.

Estrutura de nodes da cena HUD

Crie uma nova cena, adicione um CanvasLayer pelo botão "Other Node" e nomeie-o HUD. O HUD precisa mostrar o score (alterado pelo ScoreTimer), uma mensagem como "Game Over" ou "Get Ready!" e um botão de início.

A base da UI são os nodes Control. O tutorial usa Label e Button, criados como filhos do HUD:

• Label chamado ScoreLabel
• Label chamado Message
• Button chamado StartButton
• Timer chamado MessageTimer

Fonte, tamanho e posicionamento

A fonte padrão dos nodes Control é pequena e escala mal. Em cada node, vá em Theme Overrides > Fonts, escolha "Load" e selecione Xolonium-Regular.ttf. Depois, em Theme Overrides > Font Sizes, aumente para 64. Repita em ScoreLabel, Message e StartButton.

Os Controls têm anchors, que definem o ponto de referência das bordas do node. Você pode arrastar os nodes ou usar os Anchor Presets para um posicionamento mais preciso:

• **ScoreLabel:** texto 0, alinhamentos horizontal e vertical centralizados, preset Center Top.
• **Message:** texto "Dodge the Creeps!", alinhamentos centralizados, Autowrap Mode em Word (senão fica em uma linha), Size X em 480 para ocupar a largura da tela e preset Center.
• **StartButton:** texto Start, Size X 200 e Size Y 100, preset Center Bottom e Position Y em 580.

No MessageTimer, defina Wait Time como 2 e ative One Shot.

Script do HUD

O script começa com a declaração do signal que avisa o nó Main sobre o botão:

extends CanvasLayer

# Notifies `Main` node that the button has been pressed
signal start_game

Para mensagens temporárias, como "Get Ready", a função abaixo define o texto, exibe o Label e inicia o timer:

func show_message(text):
    $Message.text = text
    $Message.show()
    $MessageTimer.start()

O tutorial também define show_game_over(): mostra "Game Over" por 2 segundos, volta à mensagem inicial e, após uma pausa breve, exibe de novo o botão Start. Para pausas curtas, a documentação indica que create_timer() do SceneTree pode substituir um Timer node. A função update_score(score) atualiza o texto do ScoreLabel com o valor numérico convertido em texto.

Signals que ligam a UI ao jogo

Conecte o signal pressed() do StartButton e o timeout() do MessageTimer ao HUD. Ao pressionar o botão, ele é escondido e o signal start_game é emitido. Quando o timer termina, a mensagem é escondida.

Depois, instancie a cena HUD em Main, como foi feito com o Player. Na aba Signals, conecte start_game à função new_game() do Main e confirme que o ícone verde de conexão aparece ao lado da função no script.

Sincronizar score e mensagens com o Main

O tutorial indica três chamadas no script principal:

• Em new_game(): atualizar o score no HUD e mostrar a mensagem "Get Ready".
• Em game_over(): chamar show_game_over() do HUD.
• Em _on_score_timer_timeout(): chamar update_score para manter o display em sincronia.

Remova a chamada a new_game() de _ready(), caso ainda exista, ou o jogo começará sozinho.

Limpar os inimigos ao reiniciar

Se você reiniciar logo após o Game Over, os creeps da partida anterior podem continuar na tela. A solução da documentação usa groups: na cena Mob, selecione o nó raiz, abra a aba Groups e crie o grupo mobs. Depois, em new_game() no Main, use get_tree().call_group("mobs", "queue_free"), que executa a função indicada em todos os nodes do grupo e faz cada mob se remover.

O que a documentação não cobre

A fonte não aborda responsividade em resoluções diferentes, alternativas de posicionamento além dos Anchor Presets nem limites de desempenho com muitos elementos de UI. Os valores como 480 de largura e 580 de posição Y pertencem ao layout do tutorial e podem precisar de ajuste em outros projetos.

Como próximo passo, a documentação oficial segue com fundo, música em loop e atalhos de teclado. Para ver como interfaces assim funcionam na prática, explore os jogos 2D da Rplay Games.

Orientações baseadas na fonte indicada; não testadas pela Rplay. Confira a versão e a plataforma antes de aplicar.