escola.all.dev.brEscola de Programação

Fundamentos do Godot: Desenvolvimento de games para iniciantes

0/20 aulas0%
pratica

Interface do Usuário (UI): Labels, Buttons e Control Nodes

Aprenda sobre interface do usuário (ui): labels, buttons e control nodes

40 min
Aula 1 de 5

Módulo 4: Aprimoramento e Exportação do Jogo

Aula: Interface do Usuário (UI): Labels, Buttons e Control Nodes

Olá, futuro desenvolvedor de jogos! 👋 Sejam bem-vindos à nossa aula prática sobre Interface do Usuário (UI) no Godot Engine. Esta é uma das partes mais cruciais na criação de um jogo, pois é através da UI que o jogador interage com o seu mundo, recebe informações e toma decisões.

Nesta aula, vamos mergulhar nos fundamentos dos Control Nodes, explorando em detalhes como usar Labels para exibir texto e Buttons para capturar a interação do usuário. Prepare-se para colocar a mão na massa e criar elementos interativos que darão vida à experiência do seu jogador! 🎮

1. Introdução à Interface do Usuário (UI) no Godot

A UI (User Interface) é a ponte entre o seu jogo e o jogador. Seja um menu principal, um placar de pontos, um inventário ou botões de ação, tudo isso faz parte da UI. No Godot, a construção de interfaces é feita principalmente através de Control Nodes.

Por que Control Nodes? 🤔 Control Nodes são um tipo especial de nó no Godot, projetados especificamente para a construção de interfaces gráficas. Eles possuem propriedades únicas para posicionamento, dimensionamento, âncoras e margens, que os tornam ideais para layouts responsivos e adaptáveis a diferentes tamanhos de tela.

Nesta aula prática, nosso objetivo é:

  • Compreender o papel dos Control Nodes na construção da UI.
  • Aprender a usar Label para exibir informações textuais.
  • Aprender a usar Button para criar elementos interativos.
  • Conectar a UI com o código GDScript para criar funcionalidades.

Vamos começar! 🚀

2. Explicação Detalhada com Exemplos

2.1. Control Nodes: A Base da UI

Todo elemento de UI no Godot herda de Control. Isso significa que eles compartilham propriedades fundamentais de layout:

  • rect_position: Posição do canto superior esquerdo do nó.
  • rect_size: Largura e altura do nó.
  • rect_min_size: Tamanho mínimo que o nó pode ter.
  • anchor_left, anchor_right, anchor_top, anchor_bottom: Definem a "âncora" do nó, ou seja, a que parte do seu pai ele se "prende". Valores de 0 a 1, representando porcentagens (0% a 100%).
  • margin_left, margin_right, margin_top, margin_bottom: Distância em pixels das bordas da âncora.
  • layout_mode: Um atalho visual para configurar âncoras e margens comuns (ex: Full Rect, Center, Top Wide).

Exemplo Prático:

  1. Crie uma nova cena 2D (Scene -> New Scene).
  2. Adicione um nó Control como raiz da cena. Renomeie-o para UI_Principal.
  3. Com UI_Principal selecionado, no Inspector, em Layout, selecione Full Rect. Isso fará com que o nó ocupe toda a tela.

2.2. Label: Exibindo Texto

O nó Label é usado para exibir texto estático ou dinâmico na sua UI. É perfeito para títulos, placares, mensagens informativas, etc.

Propriedades Chave:

  • Text: O conteúdo textual a ser exibido.
  • Autowrap Mode: Define como o texto se comporta se for muito longo para uma linha. Opções incluem Off, Word, Char, Word Smart.
  • Horizontal Alignment (Align): Alinhamento horizontal do texto (esquerda, centro, direita, preencher).
  • Vertical Alignment (Valign): Alinhamento vertical do texto (cima, meio, baixo, preencher).
  • Theme Overrides: Permite personalizar a fonte, o tamanho e a cor do texto.

Exemplo de Código (GDScript): Vamos criar um Label e modificá-lo via script.

  1. Na cena UI_Principal, adicione um nó Label como filho de UI_Principal.
  2. No Inspector do Label, defina o Text como "Meu Jogo Incrível".
  3. Em Layout, selecione Center para centralizar o Label.
  4. Adicione um novo script à raiz UI_Principal (clique com o botão direito em UI_Principal -> Attach Script).
# UI_Principal.gd
extends Control
 
@onready var titulo_label = %Label # Usamos % para referenciar o nó pelo seu nome
 
func _ready():
	# Podemos modificar o texto do Label via código
	titulo_label.text = "Bem-vindo ao\nMeu Jogo Incrível!"
	# E também outras propriedades, como o tamanho da fonte (via Theme Overrides)
	# Para mudar o tamanho da fonte via código, precisaríamos de um FontFile ou DynamicFont
	# Mas para esta aula, vamos focar no texto.
	
	print("UI carregada e Label atualizado!")

Para que o Label seja visível e ajustado:

  • No Inspector do Label, em Theme Overrides -> Font Sizes -> font_size, defina um valor maior, como 64.
  • Em Horizontal Alignment, escolha Center.
  • Em Vertical Alignment, escolha Center.
  • Selecione Autowrap Mode como Word Smart para que o \n funcione bem.

2.3. Button: Interação do Usuário

O nó Button é um dos elementos de UI mais fundamentais, permitindo que o jogador clique em algo para realizar uma ação.

Propriedades Chave:

  • Text: O texto exibido no botão.
  • Disabled: Se true, o botão não pode ser clicado e aparece esmaecido.
  • Toggle Mode: Se true, o botão pode ser pressionado e permanecer "ligado" ou "desligado".
  • Button Group: Permite agrupar botões para que apenas um possa ser selecionado por vez (como botões de rádio).

Sinais (Signals) Chave:

  • pressed(): Emitido quando o botão é clicado e solto. É o sinal mais comum para ações.
  • button_down(): Emitido quando o botão é pressionado (mas ainda não solto).
  • button_up(): Emitido quando o botão é solto.

Exemplo de Código (GDScript): Vamos adicionar um Button que, ao ser clicado, muda o texto do nosso Label.

  1. Na cena UI_Principal, adicione um nó Button como filho de UI_Principal.
  2. No Inspector do Button, defina o Text como "Clique-me!".
  3. Posicione o botão abaixo do Label. Você pode usar o Layout -> Center Bottom e ajustar as margin_bottom para subir um pouco.
  4. No script UI_Principal.gd, adicione o seguinte:
# UI_Principal.gd
extends Control
 
@onready var titulo_label = %Label
@onready var meu_botao = %Button # Referência ao nosso botão
 
var contador_cliques = 0
 
func _ready():
	titulo_label.text = "Bem-vindo ao\nMeu Jogo Incrível!"
	
	# Conectando o sinal 'pressed' do botão ao nosso script
	meu_botao.pressed.connect(_on_meu_botao_pressed)
	
	print("UI carregada e Label atualizado!")
 
# Função que será chamada quando o botão for pressionado
func _on_meu_botao_pressed():
	contador_cliques += 1
	titulo_label.text = "Você clicou " + str(contador_cliques) + " vezes!"
	print("Botão clicado! Contador: ", contador_cliques)

Para conectar o sinal visualmente (alternativa ao código):

  1. Selecione o nó Button.
  2. No painel Node (ao lado do Inspector), vá para a aba Signals.
  3. Encontre o sinal pressed() e clique duas vezes nele.
  4. Na janela que aparece, selecione o nó UI_Principal (o nó que contém o script) como o receptor do sinal.
  5. Clique em Connect. O Godot irá gerar automaticamente uma função como _on_Button_pressed() no seu script. Você pode então preencher essa função com a lógica desejada.

2.4. Containers: Organizando a UI

Embora não sejam o foco principal desta aula, é crucial mencionar os Container Nodes. Eles são Control Nodes que organizam automaticamente seus filhos. Exemplos comuns:

  • VBoxContainer: Organiza os filhos verticalmente.
  • HBoxContainer: Organiza os filhos horizontalmente.
  • GridContainer: Organiza os filhos em uma grade.
  • MarginContainer: Adiciona margem ao redor de seus filhos.

Dica: Sempre que tiver vários elementos de UI que precisam de um layout específico, use Containers! Eles simplificam muito o design responsivo.

3. Integração: UI e GDScript

A verdadeira magia acontece quando a sua UI interage com a lógica do jogo. Vimos como um Button pode disparar uma função em GDScript, e como essa função pode atualizar um Label. Este é o ciclo básico de interação da UI:

  1. Criação da UI: Adicionar Control Nodes na cena.
  2. Configuração do Layout: Usar anchor, margin, layout_mode e Containers.
  3. Conexão de Sinais: Ligar eventos da UI (como pressed() de um botão) a funções no seu script.
  4. Lógica do Script: Implementar o que acontece quando os eventos da UI são disparados (ex: mudar texto de um Label, carregar uma nova cena, etc.).

4. Exercícios/Desafios Práticos

Chegou a hora de praticar! Crie uma nova cena para cada desafio.

Desafio 1: Menu Principal Simples 🎮

Crie uma cena de menu principal para um jogo.

Tarefas:

  • Crie uma nova cena 2D e adicione um nó Control como raiz (ex: MainMenu).
  • Adicione um Label para o título do jogo (ex: "Aventura Épica").
    • Centralize-o na parte superior da tela.
    • Aumente o tamanho da fonte para que seja bem visível.
  • Adicione um VBoxContainer como filho do MainMenu.
    • Centralize o VBoxContainer no meio da tela.
    • Defina um rect_min_size para ele ter uma largura mínima.
  • Dentro do VBoxContainer, adicione três Buttons:
    • "Iniciar Jogo"
    • "Opções"
    • "Sair"
  • Anexe um script ao nó MainMenu.
  • Conecte o sinal pressed() de cada botão a uma função correspondente no script.
  • Implemente as funções para que, ao clicar nos botões, uma mensagem seja impressa no console:
    • "Iniciar Jogo clicado!"
    • "Opções clicado!"
    • "Sair clicado! Fechando o jogo..." (Para o botão "Sair", você pode usar get_tree().quit() para realmente fechar o jogo no executável).

Dica: Use o Layout -> Center ou Center Top para o VBoxContainer e o Label para facilitar o posicionamento.

Desafio 2: Contador de Cliques Interativo 🔢

Crie uma UI que exiba um contador de cliques e permita resetá-lo.

Tarefas:

  • Crie uma nova cena 2D e adicione um nó Control como raiz (ex: ClickCounter).
  • Adicione um Label que exibirá o número de cliques.
    • Centralize-o na tela.
    • Defina o texto inicial como "Cliques: 0".
    • Aumente o tamanho da fonte.
  • Adicione um HBoxContainer como filho do ClickCounter, posicionado abaixo do Label.
    • Centralize o HBoxContainer horizontalmente.
  • Dentro do HBoxContainer, adicione dois Buttons:
    • "Clique!"
    • "Resetar"
  • Anexe um script ao nó ClickCounter.
  • Crie uma variável no script para armazenar o contador_cliques (inicialmente 0).
  • Conecte o sinal pressed() do botão "Clique!" a uma função que:
    • Incrementa o contador_cliques.
    • Atualiza o texto do Label para exibir o novo valor.
  • Conecte o sinal pressed() do botão "Resetar" a uma função que:
    • Define contador_cliques de volta para 0.
    • Atualiza o texto do Label para "Cliques: 0".

5. Resumo e Próximos Passos

Parabéns! 🎉 Você deu os primeiros passos essenciais na criação de interfaces de usuário interativas no Godot Engine.

Nesta aula, aprendemos:

  • Que os Control Nodes são a base para construir a UI.
  • Como usar o nó Label para exibir texto.
  • Como usar o nó Button para capturar interações do usuário.
  • A importância de conectar sinais da UI ao seu GDScript para adicionar funcionalidade.
  • A utilidade dos Container Nodes para organizar elementos de UI de forma eficiente.

A UI é um campo vasto e divertido no desenvolvimento de jogos. Na próxima aula, exploraremos mais Control Nodes, como TextureRect, ProgressBar, e como aplicar Temas para dar um visual consistente e bonito à sua UI.

Continue praticando e explorando! A criatividade é o limite! ✨

Ver Curso

© 2025 Escola All Dev. Todos os direitos reservados.

Interface do Usuário (UI): Labels, Buttons e Control Nodes - Fundamentos do Godot: Desenvolvimento de games para iniciantes | escola.all.dev.br