Dando funções ao Menu Princial – Godot Engine

Daniel  SobrinhoDaniel Sobrinho18/07/2021 - 262 acessos

Dando funções ao Menu Princial – Godot Engine

Nesse artigo daremos funções por script aos botões criados dentro do menu principal, e iniciaremos as edições visuais do menu principal.


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.

 

Imagem sem descrição.
Imagem sem descrição.

 

Imagem sem descrição.
Imagem sem descrição.

 

Imagem sem descrição.
Imagem sem descrição.


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.

 

Imagem sem descrição.
Imagem sem descrição.

 

Imagem sem descrição.
Imagem sem descrição.

 

Imagem sem descrição.
Imagem sem descrição.

 

Imagem sem descrição.
Imagem sem descrição.

 

Logo após fazer isso com o VboxConteiner “pai de todos” selecionado, vá no menu desdobrável Layout e selecione “Center”.

 

Imagem sem descrição.
Imagem sem descrição.

 

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”.


Imagem sem descrição.
Imagem sem descrição.

 

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.

 

Imagem sem descrição.
Imagem sem descrição.

 

Imagem sem descrição.
Imagem sem descrição.

 

Imagem sem descrição.
Imagem sem descrição.

 

Imagem sem descrição.
Imagem sem descrição.

 

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:

 

Imagem sem descrição.
Imagem sem descrição.


Imagem sem descrição.
Imagem sem descrição.


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.

 

Imagem sem descrição.
Imagem sem descrição.


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:

 

Imagem sem descrição.
Imagem sem descrição.

 

Imagem sem descrição.
Imagem sem descrição.

 

Imagem sem descrição.
Imagem sem descrição.

 

Imagem sem descrição.
Imagem sem descrição.


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:


Imagem sem descrição.
Imagem sem descrição.


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:

 

Imagem sem descrição.
Imagem sem descrição.

 

Imagem sem descrição.
Imagem sem descrição.

 

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:


Imagem sem descrição.
Imagem sem descrição.


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.


Imagem sem descrição.
Imagem sem descrição.


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:

 

Imagem sem descrição.
Imagem sem descrição.

 

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.

 

Imagem sem descrição.
Imagem sem descrição.

 

Imagem sem descrição.
Imagem sem descrição.

 

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:

 

Imagem sem descrição.
Imagem sem descrição.

 

Imagem sem descrição.
Imagem sem descrição.

 

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!



godot game engine game indie game development open source

Compartilhe nas redes sociais



Daniel  Sobrinho

Daniel Sobrinho

Olá. Eu trabalho com jogos e mídias digitais, com foco na parte de designer e planejamento.


Fórum

Ficou com alguma dúvida? utilize nosso fórum de perguntas e respostas, lá nossa comunidade poderá te ajudar.

https://forum.satellasoft.com