Tutorial

Nesse tutorial, vamos criar um pequeno jogo simples em 2D voltado para a arqueologia. A ideia é simples: é preciso realizar uma escavação e identificar todos os artefatos encontrados, numa sequência simples de ações. A pontuação final depende das ações realizadas na ordem certa.

A estrutura geral tem três níveis:

Um Control que cobre a tela inteira,
Um GridContainer, no centro do Control, para a área de escavação,
E os Buttons das quadrículas individuais, inseridas no GridContainer.

Vamos começar com isso. Depois veremos o resto.

Criamos uma nova Cena com o botão Interface de Usuário. Obtemos assim um Control ocupando a totalidade do espaço. Apertamos CTRL-A para criar um nó filho e selecionamos um GridContainer. Este deve ter a âncora centralizada no meio da tela. Definimos seu Custom Minimum Size em 300*300px. Definimos também que terá 3 colunas (assim a escavação terá 9 quadrículas).

Em seguida, criamos outra Cena, desta vez selecionando Outro Nó, e escolhemos um nó de tipo Button. Para este, o Custom Minimum Size deve estar em 100*100px. No Theme Override, vamos configurar a forma geral da quadrícula. Primeiro, em Normal, criamos um StyleBoxFlat, com um Corner Radius de 10px em cada canto. Repetimos o mesmo para Pressed e Hover. Neste último, no entanto, vamos acrescentar um Border Width de 3px em cada canto e um Border Color branco. Assim será mais simples de perceber qual quadrícula estamos escavando. Enfim, para Focus, deixamos um StyleBoxEmpty. Podemos salvar a cena em quadricula.tscn.

Agora, vamos adicionar um script para o GridContainer. Criamos uma variável no Inspector com @export, de forma a podermos inserir o nosso quadricula.tscn. Na função _ready, criamos um loop para criar as 9 quadrículas automaticamente.

extends GridContainer
@export var quadricula: PackedScene
func _ready() -> void: for i in (columns*columns): var quad = quadricula.instantiate() add_child(quad)

O que acontece aqui?

Quando o mouse passa por cima de uma quadrícula, ela reage, e aparece mais claramente. Mas ainda não conseguimos fazer nada. Para simular o processo da escavação arqueológica, precisamos representar, de alguma maneira, que a profundidade da quadrícula vai mudando.

Como escavamos cada quadrícula individualmente, também precisam de propriedades indivíduais. Para isso, vamos criar outro script, desta vez na cena quadricula.tscn. Criamos uma variável de profundidade, e um gradiente de cor que vai representar a cor do sedimento. Como a cena é um botão, vamos também criar uma função, chamada sempre que o botão é recebe um click.

Isso significa que não vai haver escavação de verdade. Apenas simulamos a progressão alterando a cor da quadrícula.

extends Button
@export var sedimento: Gradient
var profundidade: float = 1.0
func _ready() -> void: cor_sedimento()
func escavacao() -> void: if profundidade >= 0.1: profundidade -= 0.1 cor_sedimento()
func cor_sedimento() -> void: var normal = get_theme_stylebox("normal") var hover = get_theme_stylebox("hover") normal.bg_color = sedimento.sample(abs(profundidade)) hover.bg_color = sedimento.sample(abs(profundidade))

O que acontece aqui?

Criamos uma função cor_sedimento() que tem o papel de recalcular a cor sempre que for chamada.

Neste caso, ela é chamada em dois momentos: primeiro, logo no início, quando o botão é carregado no sistema. Segundo, também é chamada sempre que o mouse fizer um click nele ou passar por cima. Ademais, quando clicamos, a profundidade diminui de 0.1.

Limitamos a profundidade a 0.0, portanto, cada quadrícula pode receber até 10 decapagens. Depois disso, a condição (if profundidade >= 0.1) não é mais verdadeira, portanto, o código não é mais executado.

Está na hora de criar artefatos!

Para isso, criamos uma nova cena com Interface de Usuário. Centralizamos ela na tela e definimos um Custom Minimum Size de 25*25 pixeis. Na opção Mouse, selecionamos também o Filter: Stop. Enfim, adicionamos um AnimatedSprite2D, com um novo SpriteFrame. Na janela, adicionamos os 6 frames do arquivo item.png e colocamos a velocidade em 10.0 FPS. Marcamos a opção de Auto-reproduzir ao Carregar. Salvamos a cena como item.tscn.

Agora vamos editar o script da quadrícula para fazer os itens aparecerem nas decapagens. Criamos uma nova função achados().

extends Button
@export var sedimento: Gradient@export var item: PackedScene
@onready var control: Control = $"../.."
var profundidade: float = 1.0
func _ready() -> void: cor_sedimento()
func escavacao() -> void: if profundidade >= 0.1: profundidade -= 0.1 cor_sedimento() achados()
func cor_sedimento() -> void: var normal = get_theme_stylebox("normal") var hover = get_theme_stylebox("hover") normal.bg_color = sedimento.sample(abs(profundidade)) hover.bg_color = sedimento.sample(abs(profundidade))
func criar_achados() -> void: var novo = item.instantiate() var pos = position - Vector2(100,100) novo.position = pos + Vector2(randf_range(-50.0,50.0),randf_range(-50.0,50.0)) control.add_child(novo)

O que acontece aqui?

Sempre que clicamos numa quadrícula, é criado um artefato. Estes são animados, mas não é suficiente: não há como interagir com os artefatos embora esse seja o propósito da pesquisa arqueológica.

extends Control
@onready var animacao: AnimatedSprite2D = $AnimatedSprite2D
func mouse_entra() -> void: animacao.pause()
func mouse_sai() -> void: animacao.play()
func mouse_click(event: InputEvent) -> void: if event is InputEventMouseButton and event.pressed: queue_free()

Cada função é ligada a um Signal da Control: mouse_entered(), mouse_exited() e gui_input(). Pause() e play() permitem criar um efeito visual quando o mouse passa por cima. Já o queue_free() retira simplesmente o item do jogo.

Mas para termos a mecânica de base completa, ainda precisamos resolver um problema: é possível escavar uma quadrícula mesmo quando há artefatos nela. Idealmente, não fazemos isso e, caso for, os itens existentes devem ser descartados. Questão: como identificar quais artefatos estão em qual quadrícula?

Primeiro vamos arrumar melhor os artefatos que, por enquanto, estão acumulados na raiz do jogo. Criamos um nó Control chamado "ItensContainer". Colocamos seu Mouse Filter no modo Ignore e fazemos a referência no script da quadrícula. No script, definimos também uma nova variável numero_quad. O numero_quad deve ser atribuída na hora da criação da grade, no script do grid_container. Assim, cada quadrícula tem um número único, como numa escavação real.

extends GridContainer
@export var quadricula: PackedScene
func _ready() -> void: for i in (columns*columns): var quad = quadricula.instantiate() quad.numero_quad = i add_child(quad)

Este número pode então ser repassado para os itens na hora de sua criação. Para isso, criamos a mesma variável no script dos itens. Assim, temos a possibilidade de verificar qual artefato vem de qual quadrícula. E quando há um click numa quadrícula, antes de criar um novo artefato, podemos verificar se há algum existente e proceder ao seu descarte.

extends Button
@export var sedimento: Gradient@export var item: PackedScene@onready var itenscontainer: Control = $"../../ItensContainer"
var profundidade: float = 1.0var numero_quad: int
func _ready() -> void: definir_sedimento()
func escavacao() -> void: if profundidade > 0.0: profundidade -= 0.1 definir_sedimento() criar_itens()
func definir_sedimento() -> void: var normal = get_theme_stylebox("normal") var hover = get_theme_stylebox("hover") normal.bg_color = sedimento.sample(abs(profundidade)) hover.bg_color = sedimento.sample(abs(profundidade))
func criar_itens() -> void: verificar_descarte() var novo = item.instantiate() var pos = position - Vector2(125,125) novo.position = pos + Vector2(randf_range(-40.0,40.0),randf_range(-40.0,40.0)) novo.numero_quad = numero_quad itenscontainer.add_child(novo)
func verificar_descarte() -> void: for i in itenscontainer.get_children(): if i.numero_quad == numero_quad: i.queue_free()

Agora temos a estrutura e a mecânica básica do jogo. O resto é questão de deixar tudo mais lúdico. Vamos começar com um mecanismo mais interessante para os itens. Sabemos que nem tudo que aparece numa quadrícula é um vestígio arqueológico. Algumas coisas são... bem, qualquer outra coisa. Vamos então simular isso com uma nova variável aleatória. Para começar, vai ter 50% de chances de ser um vestígio.

Quando o mouse estiver por cima, vamos então criar uma barra de progresso que simbolize a observação do item para determinar se, sim ou não, é um vestígio. Na prática, vimos que isso já é determinado logo no início, mas o jogador não precisa saber. Incluimos mais duas variáveis adicionais, para poder controlar o processo: verificado (se o item já foi analisado) e observando (se o item está sob análise). No final, criamos uma nova função para alterar a cor do item dependendo do resultado da análise.

extends Control
@onready var animacao: AnimatedSprite2D = $AnimatedSprite2D@onready var observacao: TextureProgressBar = $Observacao
var numero_quad: intvar e_vestigio: bool = falsevar verificado: bool = falsevar observando: bool = false
func _ready() -> void: if randf() > 0.5: e_vestigio = true
func _process(delta: float) -> void: if observando == true: observacao.value += 100.0 * delta if observacao.value >= 100.0: verificado = true observando = false observacao.value = 0.0 revela_vestigio()
func mouse_entra() -> void: animacao.pause() if verificado == false: observando = true
func mouse_sai() -> void: animacao.play() observando = false observacao.value = 0.0
func mouse_click(event: InputEvent) -> void: if event is InputEventMouseButton and event.pressed: queue_free()
func revela_vestigio() -> void: if e_vestigio == true: animacao.self_modulate = Color(0.0,1.0,0.0) else: animacao.self_modulate = Color(1.0,0.0,0.0)

O que acontece aqui?

Agora, quando o jogador escava, ele encontra itens aleatórios que precisam ser analisados. No final da análise, identifica se, ou não, se trata de um vestígios arqueológico. A cor indica o resultado: verde ou vermelho. Temos também uma barra de progresso para indicar quando a análise está em curso.

Ainda está muito regular e feio, mas a mecânica de base está quase pronta. Precisamos desenvolver a interface, e criar algumas ferramentas. Para isso, criamos um novo nó Control na raiz, que vai conter botões. Chamamos ele UI e ancoramos em toda extensão da base da tela, com um Custom Minimum Size de 40 px no eixo y. Colocamos o seu Mouse Filter: Ignore. Adicionamos um HBoxContainer, centralizado abaixo da tela, e 4 botões simples com os nomes 1, 2, 3 e 4.

Para administrar o comportamento dos botões, criamos um script no nó principal, que vai conter as variáveis mais essenciais do jogo. Cada botão tem a função de estabelecer um modo de interação: escavar, observar, descartar e coletar. O modo é então utilizado como condição para as ações desenvolvidas nas quadrículas. Aproveitamos também para criar um sistema de pontuação, com três variáveis: uma para o total de itens, uma para aqueles que foram corretamente pesquisados, e uma para aqueles que foram tratados de forma errada.

extends Control
var modo: int = 0var stat_total: int = 0var stat_correto: int = 0var stat_errado: int = 0
func _on_botão_pressed(input: int) -> void: modo = input for i in botoes.get_children(): if i.name == str(modo): i.button_pressed = true else: i.button_pressed = false

No script de quadricula.tscn, introduzimos algumas modificações:

A função esvacacao() só passa a ser executada se o modo é 1.
Na função criar_itens(), aumenta o stat_total.
Na função verificar_descarte(), quando a pessoa escava rapidamente, cada objeto que não foi coletado ou descartado faz aumentar stat_errado.

func escavacao() -> void: if control.modo == 1 and profundidade > 0.0: profundidade -= 0.1 definir_sedimento() criar_itens()
func criar_itens() -> void: verificar_descarte() var novo = item.instantiate() var pos = position - Vector2(125,125) novo.position = pos + Vector2(randf_range(-40.0,40.0),randf_range(-40.0,40.0)) novo.numero_quad = numero_quad control.stat_total += 1 itenscontainer.add_child(novo)
func verificar_descarte() -> void: for i in itenscontainer.get_children(): if i.numero_quad == numero_quad: control.stat_errado += 1 i.queue_free()

Já no script de item.tscn, as condições são um pouco mais complexas, porque há diversas possibilidades. Primeiro, quando o mouse entra, executamos a animação apenas se o modo for 2. Segundo, ao clicar, é preciso verificar se estamos no modo 3 (descartar) ou 4 (coletar), e qual a natureza do item: vestígio ou não, se foi verificado ou não. Tudo isso permite preparar pontuações diferentes. Por exemplo, descartar um vestígio faz perder pontos (stat_errado).

func mouse_entra() -> void: animacao.pause() if control.modo == 2 and verificado == false: observando = true
func mouse_click(event: InputEvent) -> void: if event is InputEventMouseButton and event.pressed: if control.modo == 3: if verificado == true and e_vestigio == false: control.stat_correto += 1 elif verificado == true and e_vestigio == true: control.stat_errado += 1 elif verificado == false: control.stat_errado += 1 queue_free() if control.modo == 4: if verificado == true and e_vestigio == true: control.stat_correto += 1 elif verificado == true and e_vestigio == false: control.stat_errado += 1 elif verificado == false: control.stat_errado += 1 queue_free()

O que acontece aqui?

Os quatro botões da UI permitem complexificar a mecânica geral. Agora, há um movimento de ida e volta entre os diversos modos, para simbolizar as etapas da escavação arqueológica e a necessidade de fazer uma escolha entre coleta e descarte. Temos também um esboço de pontuação com três variáveis: a soma dos erros e dos acertos é sempre equivalente ao total.

Page updated

Report abuse