Criando sua Primeira Cena Interativa ✨

Bem-vindos à nossa primeira aula prática! 🚀 Neste módulo, estamos explorando os fundamentos do Godot Engine e do GDScript. Agora que você já conhece a interface e os conceitos básicos de nós e cenas, é hora de dar vida ao seu jogo criando uma cena interativa.

Nesta aula, vamos construir uma cena simples onde um botão, ao ser clicado, alterará o texto de um rótulo (Label). Isso nos permitirá entender como os nós se comunicam através de sinais e como o GDScript pode ser usado para adicionar lógica ao seu jogo.

1. Introdução Clara: O Que Vamos Construir? 🎯

Nosso objetivo é criar uma cena interativa básica que demonstra:

A criação de nós de interface de usuário (Button, Label).
A conexão de sinais (eventos) entre nós.
A escrita de um script GDScript para responder a esses sinais.

Ao final desta aula, você terá uma compreensão fundamental de como a interatividade é construída no Godot, um pilar essencial para qualquer jogo.

2. Explicação Detalhada com Exemplos 💡

Vamos seguir um passo a passo para construir nossa cena.

Passo 1: Configurando a Cena Base 🏗️

Crie um Novo Projeto Godot (se ainda não o fez). Abra o Godot Engine, clique em "New Project", escolha um nome e um diretório, e clique em "Create Folder" e "Create & Edit".
Crie uma Nova Cena 2D: No painel "Scene", clique em "2D Scene". Renomeie o nó raiz (geralmente Node2D) para Main clicando duas vezes no nome ou usando F2.
Adicione um Nó de Interface (Control): Como vamos trabalhar com botões e rótulos, que são elementos de UI, é uma boa prática usar um nó Control como pai para eles.
- Com Main selecionado, clique no ícone + (Add Child Node).
- Procure por Control e clique em "Create". Renomeie este nó para UIContainer.
Adicione um Botão (Button):
- Com UIContainer selecionado, clique no ícone +.
- Procure por Button e clique em "Create".
- No painel "Inspector", encontre a propriedade Text e digite "Clique-me!".
- Posicione o botão no centro da tela. Você pode fazer isso manualmente arrastando-o ou ajustando as propriedades Layout (no Control node pai, ou no próprio Button para Anchor Presets). Para simplificar, vamos arrastar por enquanto.
Adicione um Rótulo (Label):
- Com UIContainer selecionado, clique no ícone +.
- Procure por Label e clique em "Create".
- No painel "Inspector", encontre a propriedade Text e digite "Olá, Godot!".
- Posicione o rótulo acima ou abaixo do botão.

Sua árvore de cena deve se parecer com isso:

Main (Node2D)
  └─ UIContainer (Control)
       ├─ Button
       └─ Label

Dica: Para centralizar os elementos de UI facilmente, você pode usar um nó VBoxContainer como filho de UIContainer e colocar o Button e Label dentro dele. Depois, ajuste o Layout do VBoxContainer para Center ou Full Rect. Para esta aula, o posicionamento manual é suficiente para entender o conceito.

Passo 2: Adicionando Interatividade com GDScript e Sinais 🔌

Agora, vamos adicionar a lógica para que o botão faça algo.

Crie um Script para o Nó Raiz (Main):
- Selecione o nó Main na árvore de cena.
- Clique no ícone de "Attach Script" (parece um pergaminho com um + verde).
- Mantenha as configurações padrão (GDScript, Main.gd, Node2D). Clique em "Create".
Você verá o editor de script abrir com um código inicial:
```
extends Node2D
 
# Called when the node enters the scene tree for the first time.
func _ready():
    pass # Replace with function body.
 
# Called every frame. 'delta' is the elapsed time since the previous frame.
func _process(delta):
    pass
```
Conecte o Sinal pressed do Botão:
- Volte para a visualização "2D" (clique na aba 2D na parte superior).
- Selecione o nó Button na árvore de cena.
- No painel "Node" (ao lado do "Inspector", geralmente na aba superior direita), você verá uma lista de "Signals".
- Encontre o sinal pressed() (é o mais comum para botões).
- Dê um clique duplo em pressed().
- Uma janela "Connect a Signal" aparecerá.
- No campo "Connect to Node", selecione o nó Main (onde o script está anexado).
- O "Receiver Method" será preenchido automaticamente como _on_Button_pressed. Mantenha-o assim.
- Clique em "Connect".
Agora, no seu script Main.gd, uma nova função será criada:
```
func _on_Button_pressed():
    # Este código será executado quando o botão for pressionado.
    pass
```
Implemente a Lógica no Script:
- Dentro da função _on_Button_pressed(), vamos fazer com que o Label mude seu texto.
- Para acessar o Label a partir do script do Main, precisamos de uma referência a ele. Podemos usar $CaminhoDoNo.
- O caminho do nosso Label é UIContainer/Label.
Modifique seu script Main.gd para o seguinte:
```
extends Node2D
 
# Chamado quando o nó entra na árvore de cena pela primeira vez.
func _ready():
    print("Cena interativa carregada!") # Uma mensagem para o console de saída
 
# Chamado quando o botão é pressionado
func _on_Button_pressed():
    # Acessa o nó Label e muda sua propriedade 'text'
    $UIContainer/Label.text = "Botão Clicado! 🎉"
    print("Botão foi clicado!") # Outra mensagem para o console
```
Explicação do código:
- extends Node2D: Indica que este script estende a funcionalidade de um Node2D.
- func _ready():: Esta é uma função callback embutida que é chamada automaticamente quando o nó e todos os seus filhos estão prontos para uso na árvore de cena. É um bom lugar para inicializações.
- func _on_Button_pressed():: Esta é a função que criamos ao conectar o sinal pressed() do Button. Ela será executada sempre que o botão for clicado.
- $UIContainer/Label.text = "Botão Clicado! 🎉": Este é o cerne da interatividade.
  - $UIContainer/Label: É uma forma curta (syntactic sugar) de obter uma referência ao nó Label que está aninhado sob UIContainer. O Godot procura o nó pelo caminho especificado a partir do nó que possui o script (Main neste caso).
  - .text: É a propriedade do nó Label que armazena o texto que ele exibe.
  - = "Botão Clicado! 🎉": Atribui a nova string ao texto do Label.
- print(...): Usado para depuração, exibe mensagens no painel "Output" do Godot.

Passo 3: Testando Sua Cena 🧪

Salve a Cena: Vá em Scene -> Save Scene (ou Ctrl+S). Salve-a como main_scene.tscn na pasta do seu projeto.
Defina como Cena Principal: Vá em Project -> Project Settings -> Application -> Run. No campo Main Scene, clique na pasta e selecione main_scene.tscn.
Execute o Projeto: Clique no botão "Play" (ícone de triângulo) no canto superior direito do editor.

Você deverá ver sua janela de jogo com o botão e o rótulo. Ao clicar no botão, o texto do rótulo deve mudar para "Botão Clicado! 🎉".

3. Código de Exemplo Oficial (Adaptado) 📚

O Godot não possui um único "código oficial" para uma "primeira cena interativa" que abranja tudo, mas os conceitos de nós, sinais e GDScript são consistentemente documentados. O código que usamos acima é uma aplicação direta dos princípios encontrados na documentação oficial para:

Aqui está o código completo para o script Main.gd que você deve ter:

# Main.gd
extends Node2D
 
# Variável para armazenar uma contagem de cliques (opcional, para exercícios futuros)
var click_count = 0
 
# Chamado quando o nó entra na árvore de cena pela primeira vez.
func _ready():
    print("Cena interativa carregada! 🚀")
    # Podemos também pegar referências a nós no _ready para uso posterior
    # var my_button = $UIContainer/Button
    # var my_label = $UIContainer/Label
    # print("Botão: ", my_button.name, ", Rótulo: ", my_label.name)
 
# Chamado quando o botão é pressionado.
func _on_Button_pressed():
    click_count += 1
    # Acessa o nó Label através do seu caminho na árvore de cena
    # e atualiza a propriedade 'text'.
    $UIContainer/Label.text = "Botão Clicado " + str(click_count) + " vezes! 🎉"
    print("Botão foi clicado! Total de cliques: ", click_count)
 
    # Exemplo: Mudar a cor do texto do Label (requer um RichTextLabel ou Custom Color no Label)
    # Para um Label simples, a cor pode ser alterada via `modulate` ou `add_theme_color_override`
    # $UIContainer/Label.modulate = Color(randf(), randf(), randf()) # Cores aleatórias

Nota sobre modulate e add_theme_color_override: Para mudar a cor do texto de um Label via script, você pode usar modulate para mudar a cor de todo o nó (incluindo o texto) ou add_theme_color_override("font_color", Color.RED) para mudar apenas a cor da fonte. O exemplo acima usa modulate para simplicidade, mas o add_theme_color_override é mais preciso para a fonte.

5. Exercícios/Desafios 💪

Agora é a sua vez de experimentar! Use o que você aprendeu para completar os seguintes desafios:

Task List:

Desafio 1: Mudar o Texto do Botão:
- Quando o botão for clicado, além de mudar o texto do Label, mude também o texto do próprio Button para, por exemplo, "Clicado!".
Desafio 2: Contagem de Cliques:
- Modifique o script para que o Label não apenas diga "Botão Clicado!", mas também mostre quantas vezes o botão foi clicado. Ex: "Botão Clicado 1 vez!", "Botão Clicado 2 vezes!", etc. (Dica: use uma variável para armazenar a contagem e converta o número para string com str()).
Desafio 3: Alterar a Cor do Texto:
- Quando o botão for clicado, mude a cor do texto do Label para uma cor diferente (ex: vermelho, verde, azul).
- Dica: Você pode usar $UIContainer/Label.add_theme_color_override("font_color", Color.RED) para mudar a cor da fonte. As cores pré-definidas são Color.RED, Color.GREEN, Color.BLUE, Color.YELLOW, etc.
Desafio 4: Adicionar um Segundo Botão:
- Adicione um segundo Button e um segundo Label à sua cena.
- Conecte o segundo botão a uma nova função no seu script Main.gd.
- Quando o segundo botão for clicado, ele deve mudar o texto do segundo Label para algo diferente.
- Dica: Você pode usar um VBoxContainer para organizar os botões e rótulos verticalmente, ou um HBoxContainer para organizá-los horizontalmente.

6. Resumo e Próximos Passos 🔚

Parabéns! 🎉 Você acabou de criar sua primeira cena interativa no Godot. Nesta aula, você aprendeu:

Como adicionar e organizar nós de interface de usuário (Button, Label).
A importância dos sinais para a comunicação entre nós.
Como conectar um sinal de um nó a uma função em um script.
Como escrever um script GDScript básico para manipular propriedades de outros nós.

Estes são conceitos fundamentais que você usará constantemente no desenvolvimento de jogos. A capacidade de fazer com que os elementos da sua cena respondam às ações do jogador é o que torna um jogo... um jogo!

Próximos Passos:

No próximo módulo, vamos aprofundar no GDScript, explorando variáveis, tipos de dados, operadores e estruturas de controle de fluxo, para que você possa criar lógicas ainda mais complexas e interessantes para seus jogos. Mantenha a prática e continue explorando!

Fundamentos do Godot: Desenvolvimento de games para iniciantes

Criando sua Primeira Cena Interativa