Abrindo o projeto que criamos no tutorial passado, iremos organizá-lo criando diretórios antes de iniciarmos as criações dos itens do jogo (lembrando que no artigo passado falamos como criar pastas na aba “FileSystem”, se você não leu ou não lembra, basta acessar o nosso último artigo sobre a Godot clicando aqui). No diretório do projeto criaremos os seguintes diretórios: Assets_Imported, Scenes, Scripts.
• Assets_Imported – Usaremos para depositar modelos 3d que vierem de fora do motor
• Scenes – Usaremos para organizar nossas Scenes, como o jogador, câmera, menu, mapas e etc.
• Scripts – Usaremos para organizar os nossos arquivos de código.
Indo para a aba Scene no canto superior esquerdo, vamos clicar na opção com o círculo verde escrito User Interface. Logo após fazermos isso ira aparecer no lugar das opções outro item com círculo verde escrito Control, essa é a cena base de UI, o que colocarmos no menu será filho dela, e quando formos invocar o menu, invocaremos ela. Note que em cima da view temos uma aba com o círculo verde escrito “[unsaved](*)”, essa informação sempre estara la quando você não salvar a scene recém-criada, então vamos salvá-la na pasta “Scenes”. Apertando o comando de salvar “Ctrl+S”, você vera essa tela:
Vamos mudar o nome do arquivo para “Main_Menu”. Apos isso vamos selecionar o diretório Scene, e criar outro diretório clicando no botão “Create Folder” que está presente no canto superior direito. Daremos o nome de “Main_Menu” ao diretório, nessa pasta colocaremos tudo que será a composição do menu (apenas se tratando de scenes), e vamos clicar em “Save”.
Antes de iniciarmos com os botões do menu, vamos configurar para que essa seja a primeira scene a ser carregada quando o jogo for executado, para isso vamos no item presente no menu desdobrável Project > Project Settings. Nesse momento você deve estar vendo essa tela:
Nesse menu, você poderá configurar algumas bases de funcionamento do projeto. Vamos para Project Settings > Application > Run. Em “Main Scene” você colocara a scene “Main_Menu” que acabamos de criar, basta clicar no ícone de pasta no canto direito e selecionar a cene que deseja.
Apos fazer isso, basta clicar no botão de close para fechar a janela Project Settings.
Como nos criamos a scene de uma opção base, ela veio com o nome de “Control”, que é o nome da scene base de UI, se você lembrar da hora que foi salvar a scene como “Main_Menu”, o nome que aparece escrito era de “Control”, isso porque se a scene não foi salva ainda e você ira salvá-la, o nome sugerido sempre será o nome que aparece na scene na aba Scenes, porém esse nome que está na scene na aba Scene pode ser alterado a qualquer momento sem prejudicar o nome no diretório, que por consequência faz com que os scripts que estão o chamando pelo caminho no diretório não tenham problemas na execução dos comandos presentes nos mesmos. Dito isso, vamos mudar o nome da scene para o nome que demos para ela, no caso: “Main_Menu”. Para fazer isso, basta clicar na scene e apertar f2 ou clicar duas vezes com o botão esquerdo do mouse, depois de fazer a alteração do nome, basta precionar Enter para aceitar a mudança.
Agora vamos ao menu desdobrável “Layout” com a Main_Menu selecionada. Selecione a seguinte opção: Layout > Full Rec. Isso fara com que a scene fique com sua área em todo o canvas independente do tamanho do mesmo. Clicando na cruz em baixo da aba Scene criaremos um botão. Basta pesquisar por “Button”. Note que ao clicar na opção, você vera em baixo uma breve descrição de sua funcionalidade, você também pode ver que o título da janela está escrito, “Create New Node”, Isso porque a forma que a Godot trabalha a parte dentro das scenes é como nodes (nós em português), ou seja, um ligando no outro, formando um sistema, onde o principal pode mandar comandos para os que estão abaixo na escala de parentesco, porém esse mesmo botão que estamos fazendo pode ser salvo como scene separada ou podemos também criar uma scene separada de um botão e instanciarmos na scene Main_Menu. Apos criarmos o botão, vamos clicar no node com o botão direito do mouse e duplicar o mesmo.
Agora, vamos renomear os botões. O primeiro vamos colocar o nome de “Play” e o segundo de “Exit”. Com o botão que deseja adicionar o texto selecionado vá no canto direito na aba Inspector e em Text colocaremos o nome do botão para aparecer ao usuário e o mesmo entender a função do botão.
Agora você já deve estar vendo um pequeno botão na view com o nome, porém como ambos estão no mesmo lugar o que está mais a baixo na ordem dos nodes, esta aparecendo na tela, para verificar se o texto do botão play esta aparecendo, basta clicar com o botão esquerdo no ícone de um olho branco do lado direito do node Exit para que o mesmo não seja renderizado, assim o que estiver “atrás” poderá ser visto.
Apos isso, volte a visibilidade do node Exit clicando no mesmo lugar do ícone de olho branco (que agora está como um olho fechado cinza). Para organizarmos a ordem dos botões temos que decidir como eles serão expostos no menu, nesse caso queremos que seja uma coluna ao invés de uma linha, então vamos entrar com um node de contêiner que são usados para organizar os itens, mais especificamente usaremos o node “VBoxContainer”, esse “V” vem de vertical, também temos o “HBoxContainer” que faz a mesma disposição de itens porém ha horizontal. Para adicioná-lo a cena iremos no mesmo lugar onde fomos para adicionar os botões. Ao abrir a janela de criação de Node, você deve ter se deparado com ela assim:
Note que ela aparece com a última pesquisa escrita do mesmo jeito que você deixou, e no canto inferior esquerdo em “Recent”, mostra os nodes que foram usados, isso facilitara muito o nosso trabalho quando formos instanciar algum node que já criamos antes, porém para uso em outro propósito ou scene. Vamos pesquisar por “VBoxContainer”.
Após você criá-lo, se ao criar estiver selecionando um node especifico, o node ficaram como filho da seleção, então caso ele apareça como na imagem abaixo, não se preocupe, basta arrastá-lo para cima e soltá-lo no Main_Menu node para fazê-lo ser filho do node principal e não dos botões.
Apos fazer isso, você ira repetir esse processo de arrastar e soltar, porém com os botões, selecione os dois e arraste-os para o VBoxContainer node. Nesse momento você deve esta vendo a formação dos botões em coluna, seguindo a ordem de cima para baixo no campo de parente do contêiner.
Agora vamos ancorá-los no centro da canvas, para isso vamos selecionar o node VBoxContainer e ir no menu desdobrável Layout, nele selecionaremos Layout > Center. Pronto! Centralizado!
Perfeito! Nos conseguimos entender como se adiciona nodes e como organizar a disposição da UI no canvas. Uma coisa que você pode ter notado enquanto fazia essas alterações é que do lado do nome da scene na aba em cima da view a um “(*)”, você deve esta vendo escrito “Main_Menu(*)”, toda vez que você se deparar com esse “(*)” do lado do nome da scene, significa que foi alterado algo mas não foi salvo, então vamos salvar as nossas alterações, podemos seguir com o atalho padrão Ctrl+S ou ir no menu desdobrável Scene no canto superior esquerdo e selecionar a seguinte opção: Scene > Save Scene. Caso esteja com várias scenes abertas e queira salvá-las de uma vez só, pode ir em Scene > Save All Scenes, ou usar o comando Ctrl+Shift+Alt+S.
Na imagem abaixo temos a scene que teve alteração dos elementos mas não foi salva:
Na imagem abaixo temos a scene que teve alteração dos elementos e foi salva:
Por enquanto é isso pessoal. No próximo artigo, vamos fazer algumas alterações visuais no nosso menu principal e adicionaremos algumas funcionalidades por scripts nos botões. Até a próxima!