Continuando de onde paramos no nosso projeto, vamos incrementar nosso Main Menu com funções e adicionar algumas informações visuais e estilo ao mesmo, mas caso ainda não tenha feito os passos passados ou não lembra o que foi feito, basta clicar aqui.
O que é primeiro, vem primeiro
Se você é um leitor atento, você pode ter notado algo que estava faltando no nosso menu que foi feito no artigo passado. Sim! Nos não colocamos o nome do jogo! Algo muito presente nos menus principais. Então vamos colocar o nome do jogo! Nesse caso, eu decidi colocar o nome do jogo de “Hello Godot”. Sim, bem original!…
Brincadeiras de lado, vamos a nossa prática na Godot. Para adicionarmos o nome, vamos usar o node Label(note que não estou mais chamando de scenes, isso é porque eu quis aos poucos ir passado pela forma de ver os elementos na Godot, a scene será quando eles forem arquivos separados, tudo é node, mas também é scene, porém enquanto não destacarmos como um arquivo separado, vamos chamá-los de Node. Caso ainda tenha dúvidas sobre isso, você pode ler a explicação da documentação clicando aqui). Para adicionarmos esse node, vamos no mesmo lugar onde fomos para adicionar o VboxContainer, lá, vamos pesquisar por “Label”, e adicioná-lo. Após adicioná-lo, com o mesmo selecionado, vamos na aba "Inspector" e em "Text", vamos colocar o nome do jogo.
Agora vamos colocá-lo como filho do VboxContainer, depois deixá-lo em cima dos botões para que seja o primeiro item da coluna. Seguindo o ritmo, vamos voltar ao menu de criação de novos nodes e vamos procurar na parte inferior a coluna “Recent:”, nela vamos selecionar para criação outro VboxContainer (lembra que falei que isso seria útil e polparia nosso tempo? Pois é, isso ajuda muito na hora de criar o mesmo node de novo). Ao criar você o colocara como filho do primeiro VboxContainer, os botões serão colocados como filho dele, e por ultimo, vamos deixá-lo abaixo do Label que criamos para o nome do jogo no menu.
Logo após fazer isso com o VboxConteiner “pai de todos” selecionado, vá no menu desdobrável Layout e selecione “Center”.
Como você pode perceber as coisas já estão ficando um pouco confusas na nomenclatura dos nodes, vamos renomeá-los? O node Label, será chamado de “Game Name”, o segundo node VboxConteiner de “Buttons”.
Por fim, para finalizarmos essa parte, vamos adicionar mais um node. Com o node raiz “Main_Menu” selecionado, vamos abrir o menu de criação de novos nodes e vamos adicionar o node ColorRect, após fazermos isso, com o mesmo selecionado vamos em Layout e vamos clicar em “Full Rect”, note que ele ocupou todo espaço marcado como a cena, sempre que quiser que algo ocupe toda a área limite, é só fazer isso, que ela ficara “ancorada” assim. Logo após isso, arraste o node para ser o primeiro filho da raiz Main_Menu, fazendo isso, você pode ver agora os botões e o título, porém fica difícil ler o nome do jogo devido a cor do retângulo, então provisoriamente vamos mudar a cor dele para cinza mais especificamente a cor #838383. Para fazer isso basta ir na aba Inspector e em Color selecionar o retângulo com a cor do node, isso fara um menu aparecer com diferentes formas de selecionar a cor desejada, caso deseje pode brincar com as possibilidades, e ao finalizar colocar na opção abaixo após o símbolo “#” o valor escrito anteriormente.
Criando nossos primeiros scripts na Godot Engine
Antes de iniciarmos nosso código, vamos criar outra scene, mas dessa vez não vamos criar uma cena de UI e sim uma scene 3d. Para fazermos isso, vamos clicar no sinal de adição (“+”), do lado da aba da view da scene Main_Menu, e após isso vamos selecionar a opção “3D Scene” na aba Scene. Você deve estar vendo essa tela:
Após fazermos isso, vamos mudar o node raiz que está com o nome de Spatial para World. E em seguida vamos salvar dentro do diretório Scenes. Para fazermos isso, vamos criar outro diretório na pasta Scenes, com o nome de Levels, é nessa pasta que colocaremos os níveis do jogo.
Pronto! Agora podemos partir para o código!
De volta na Scene Main_Menu, com o node raiz (Main_Menu) selecionado, vamos clicar no ícone de pergaminha do lado do ícone de lupa para adicionarmos um novo script. Em linguagem, vamos deixar GDScript mesmo, vamos selecionar o path de criação do nosso script, clicando no ícone de pasta, vamos selecionar ir no diretório Scripts que criamos previamente, e dentro do mesmo criaremos o diretório Main_Menu, setaremos o “interior” desse novo diretório como o caminho de criação do nosso script, após isso clique em “Create”. Você deve estar vendo essa tela agora:
Apague tudo que estiver dentro exceto “extends Control”, não se preocupe com isso agora. Com o node do botão Exit selecionado vamos na aba Node no canto superior direito da UI da Godot, lá, vamos adicionar o signal “button_up()” clicando duas vezes em cima do mesmo. Você deve estar vendo esse menu aberto agora:
Vamos deixar selecionado a raiz Main_Menu porque é onde está o script que desejamos linkar esse signal. Para finalizarmos basta clicar em Connect. Você deve está vendo no script dessa forma agora:
Você deve estar se perguntando o que acabou de acontecer, correto? A Godot trabalha com uma forma de comunicação para enviar informações chamadas de Signals, o que em nossa língua seria chamado de sinais. Existem os já preestabelecidos para os nodes, como o que estamos usando, mas também tem como criarmos nossos próprios signals (o que por enquanto deixaremos para explicar mais para frente), essa forma de comunicação é muito poderosa e a versatilidade da possibilidade de criação de signals faz essa ferramenta ganhar ainda mais poder para nossos desenvolvimentos. Voltando para o que acabamos de fazer, nos ligamos um sinal do botão Exit, no script, o sinal é um “booleano” que informara o estado de verdadeiro ou falso, o gatilho é o botão levantar, ou seja, quando clicamos no botão ele “baixará”, mas somente quando levantamos o botão esquerdo do mouse (fazendo com que o botão suba) é que o gatilho “booleano” será acionado e o sinal mandando para nosso script. Embaixo da função _on_Exitbutton_up(), vamos adicionar umas linhas de código:
func _on_Exit_button_up():
get_tree().quit()
Nesse código estamos pegando tudo que está na árvore da scene aberta atualmente e fechando. Para testar o código, basta apertar o ícone de dar Play ( ou o comando F5) na scene e clicar no botão Exit para fechar o jogo.
Continuando no mesmo script vamos repetir o que fizemos com o botão Exit porém com o Play, você deve estar vendo a seguinte tela:
Agora selecione a função que acabou de colocar e coloque em cima da função do botão do Exit, note que o símbolo de link verde que fica do lado da função, segue a seleção, ou seja, mesmo depois de adicionar no script, você pode organizar a ordem em que a função aparecera sem perder o link.
Agora vamos escrever mais algumas coisas no nosso script, no início do mesmo vamos adicionar uma variavel de nome “world” logo abaixo de “extends Control”, nela vamos adicionar o caminho da scene que queremos carregar ao dar play (para copiar o caminho da scene basta ir no diretório onde esta localizada, clicar com o botão direito e clicar em copy path):
var world = ‘res://Scenes/Levels/World.tscn’
Nota: Como GDScript é parecida com python, a caracterização de string pode ser feita com ‘’ ou “”, pessoalmente gosto de usar ‘’ por achar mais pragmático, mas nesse caso vai de vocês.
Na função _on_Play_button_up() vamos adicionar o comando para mudar a cena atual para a desejada, o código ficará assim:
func _on_Play_button_up():
get_tree().change_scene(world)
O código final ficou assim:
extends Control
var world = 'res://Scenes/Levels/World.tscn'
func _on_Play_button_up():
get_tree().change_scene(world)
func _on_Exit_button_up():
get_tree().quit()
Você pode clicar em play (ou usar F5) para executar o jogo e testar os botões, e se tudo der certo, ciclando no botão Play que acabamos de configurar, você sairá da cena 2d de UI e será carregado a uma cena vazia 3d (a qual criamos mais cedo nesse artigo). Você deve estar vendo agora essa tela:
Não se preocupe, seu script funcionou perfeitamente caso a janela do jogo fique assim, a cena 3D não está sendo mostrada como na view do editor, porque não colocamos um node de câmera na scene world. Por agora, para fins de visualização rápida, vamos adicionar a câmera dentro da scene World. Abra a cena, vá no menu de adição de nodes, e pesquise por câmera e adicione-a a cena.
Nota: Você deve ter reparado que apareceu dois tipos de câmeras, você pode facilmente identificar o tipo de node (2d e 3d) pelas cores, como vimos anteriormente.
Pronto! Podemos repetir o teste mais uma vez!
Note que demos Play com a scene World aberta, porém foi carregada nossa scene de Main_Menu, isso porquer nas configurações que fizemos no passado, setamos como o node inicial o Main_Menu, caso queira testar direto ou apenas a cena que estar aberta, basta clicar no ícone Play Scene ou usar o comando F6.
Seguindo para o teste do botão Play, agora recebemos a visão tridimensional do nosso level de teste poderemos ver o mundo criado:
O que vem depois?
Por enquanto é isso pessoal! No próximo artigo vamos fazer mudanças mais profundas no visual da UI, como mudar a fonte e o tamanho das letras, alterar as cores dos botões, editar as distâncias dos elementos, setar o tamanho mínimo dos elementos, etc. Até a próxima!
