Se hoje for a primeira vez que você tem contato com conteúdos de nossa série, sinta-se especialmente convidado a conhecer mais sobre o projeto de aprendizado de programação de jogos que estamos desenvolvendo no GameBlast.
Por meio do uso da ferramenta Unity, estamos experimentando métodos, técnicas e ferramentas utilizados por grandes e pequenos estúdios de desenvolvimento de jogos para a criação de seus títulos. A partir do primeiro tópico da série, abordamos os passos necessários para tirarmos do papel games dos mais variados estilos gráficos e de gameplay, por meio da elaboração de projetos práticos de programação.
Inicialmente, elaboramos dois jogos 2D simples, chamados Motorista da Pesada e Forest Ping Pong. No momento, estamos trabalhando no terceiro projeto da série, dessa vez ambientado em um cenário tridimensional: trata-se do puzzle Consultório do Dr. Tratanildo.
Os conceitos abordados nos três projetos são aplicáveis, em sua maioria, ao desenvolvimento de diferentes tipos de games, portanto, vale muito a pena conferir seus processos de desenvolvimento por meio do índice disponibilizado no primeiro texto da série.
Nossa série é desenvolvida visando permitir a criação de um game mesmo por quem não teve oportunidades prévias para aprender conceitos sobre programação de jogos ou de sistemas em geral. Para tal, os passos envolvidos nos processos de codificação de regras e comportamentos, além das configurações dos elementos multimídia dos games, são explicados de forma detalhada, utilizando exemplos e analogias, quando necessário. Dessa forma, você poderá aplicar os conceitos aprendidos de forma fácil a seus projetos pessoais.
Se você gostou da ideia de aprender a criar um jogo por conta própria, aproveite a oportunidade para juntar-se a nós em uma jornada repleta de conhecimentos e de muita diversão!
Primeiros componentes
Até o momento, nosso jogo apresenta uma quantidade interessante de funcionalidades implementadas. Algumas delas envolvem escolhas que o jogador pode realizar, dependendo de suas preferências. É o caso, por exemplo, dos métodos de controle do personagem e do labirinto que implementamos em nossos últimos encontros.
Para que o jogador possa realizar esta e outras configurações importantes, deixamos reservado no menu inicial do game o botão “Opções”, responsável por exibir elementos gráficos na tela que permitirão a o gamer modificar suas preferências de jogo. Iniciaremos a construção dessa tela, posicionando e configurando GameObjects relacionados a esta funcionalidade.
Para começarmos nossas intervenções, vamos abrir o projeto para edição. Abra o Unity Hub e clique duas vezes sobre o item referente ao projeto Consultório do Dr. Tratanildo. Na interface inicial do Unity, na aba Project, abra a pasta Assets e, em seguida, Scenes. Clique duas vezes sobre o ícone da cena ConsultorioScene.
Na aba Hierarchy, selecione o objeto Opcoes, subordinado ao GameObject MenuInicial que, por sua vez, encontra-se hierarquicamente subordinado ao objeto Canvas.
Para não confundirmos a tela de opções com os botões apresentados pelo jogo em seu menu inicial, vamos renomear o objeto, clicando com o botão direito sobre o item e selecionando a opção Rename. Nomeie o objeto como “Botoes”, sem as aspas, conforme indicado pela imagem a seguir:
- Âncoras (destacado em verde): selecione a opção Stretch Stretch;
- Left, Right, Top e Bottom = 0.
O objeto TelaOpcoes concentrará os elementos gráficos que utilizaremos para a confecção da tela de opções do jogo.
O primeiro elemento a ser inserido é o título da tela: na aba Hierarchy, clique com o botão direito sobre TelaOpcoes, no menu suspenso, selecione a opção UI e, em seguida, Text. Conceda o nome “Titulo” ao novo objeto; os seguintes valores devem ser concedidos aos atributos de seu componente Rect Transform sequencialmente:
- Âncoras (destacado em verde): selecione a opção Top Stretch;
- Left = 850;
- Right = 300;
- Pos Y = -250;
- Height = 150.
- Text: “Opções do jogo”;
- Character Font: selecione a fonte de nome Poppins-Bold;
- Paragraph:
- Alignment: configure o texto para que seja exibido de forma centralizada tanto horizontalmente quanto verticalmente (dois botões centrais);
- Best Fit: deixe a caixa selecionada (true);
- Min Size = 10;
- Max Size = 150.
- Color: conceda a cor azul escuro (valores R = 0, G = 0, B = 125, A = 255).
Por fim, ainda na aba Inspector, por meio do botão Add Component conceda um componente de tipo Outline ao objeto, alterando apenas o valor de seu atributo Color para a cor branca semitransparente (valores R = 255, G = 255, B = 255, A = 128).
O título do menu de opções será exibido conforme exemplificado pela imagem a seguir, ocupando o espaço à direita do logo do game.
Na aba Hierarchy, clique com o botão direito sobre TelaOpcoes. No menu suspenso apresentado, selecione a opção UI e, em seguida, Button. Nomeie o novo GameObject como “Voltar” e, via aba Inspector, conceda sequencialmente os seguintes valores aos atributos de seu componente Rect Transform:
- Âncoras (destacado em verde): selecione a opção Top Right;
- Pos X = -200;
- Pos Y = -250;
- Width = 300;
- Height = 150.
- Text: “< Voltar”;
- Character Font: selecione a fonte de nome Poppins-Bold;
- Paragraph:
- Alignment: configure o texto para que seja exibido de forma centralizada tanto horizontalmente quanto verticalmente (dois botões centrais);
- Best Fit: deixe a caixa selecionada (true);
- Min Size = 10;
- Max Size = 60.
Introduzindo Layout Groups
Com os elementos da parte superior da tela devidamente configurados, vamos preparar o espaço em que os demais itens do menu serão exibidos.
Na aba Hierarchy, clique com o botão direito sobre TelaOpcoes. No menu suspenso apresentado, selecione a opção Create Empty. Conceda os seguintes valores aos atributos de seu componente Rect Transform:
- Âncoras (destacado em verde): selecione a opção Stretch Stretch;
- Left, Right e Bottom = 50;
- Top = 450.
A área que iremos utilizar para a inserção dos demais elementos de nosso menu concentra-se no destacado em amarelo pela imagem a seguir:
Para não atrapalhar a visualização da composição dos elementos pertencentes ao menu de opções, vamos ocultar temporariamente os elementos exibidos na tela inicial do jogo. Selecione simultaneamente os objetos Botoes e RecordesCoracoes e desative-os, por meio do caixa de seleção que fica ao lado da descrição do objeto, na aba Inspector.
Componentes da classe dos Layout Groups são utilizados para organizar na tela os elementos de um grupo de objetos de interface de usuário, como botões e imagens exibidas por um Canvas. Utilizaremos um Vertical Layout Group para empilhar verticalmente duas fileiras de opções: a primeira, referente ao método de controle do personagem; e a segunda, referente ao nível de dificuldade do game.
Os valores dos atributos do Vertical Layout Group de GrupoOpcoes que necessitam ser alterados são descritos a seguir:
- Padding:
- Left e Right = 0;
- Top e Bottom = 50.
- Spacing = 50;
- Child Alignment = selecione a opção Middle Center;
- Control Child Size = deixe as duas caixas de seleção marcadas (Width e Height = true).
- O grupo de atributos Padding refere-se às margens internas que os objetos subordinados a GrupoOpcoes devem obedecer;
- O atributo Spacing refere-se ao valor de distanciamento interno entre os objetos;
- Child Alignment trata da disposição dos objetos subordinados dentro do grupo;
- Por fim, Control Child Size indica se o Vertical Layout Group pode ou não ajustar automaticamente os parâmetros de altura (Height) e largura (Width) dos objetos pertencentes ao grupo.
Com GrupoOpcoes e seu Vertical Layout Group devidamente posicionados e configurados, vamos começar a compor o primeiro conjunto de opções.
Na aba Hierarchy, novamente clique com o botão direito sobre GrupoOpcoes . No menu suspenso apresentado, selecione a opção UI e, em seguida, Image. Conceda o nome “OpcoesControles” ao GameObject recém-introduzido e selecione-o.
Via aba Inspector, altere o valor do atributo Color de seu componente Image para a cor de valores R = 255, G = 255, B = 255, A = 64. Note também que, em relação a seu componente Rect Transform, determinados valores de atributos não podem ser editados; esses valores são ajustados automaticamente, por ação do Vertical Layout Group.
Ainda com OpcoesControles em evidência, atrele ao objeto um componente de tipo Horizontal Layout Group. Os valores de atributos a serem alterados são descritos a seguir:
- Spacing = 30;
- Child Alignment = selecione a opção Middle Center;
- Control Child Size = deixe as duas caixas de seleção marcadas (Width e Height = true).
Dentro de OpcoesControles, os itens apresentados também serão alinhados automaticamente, por meio da ação de um Layout Group que atua organizando os itens na horizontal.
Ainda na aba Inspector, atrele mais um componente ao objeto, dessa vez de tipo Toggle Group. Embora aparentemente simples, este componente será muito útil em uma etapa posterior da construção dos grupos de opções, quando formos configurar os elementos selecionáveis de cada grupo.
Por enquanto, esses são os elementos que adicionaremos à tela de opções. Não se esqueça de salvar a cena (menu File, Save) e o projeto (menu File, Save Project) antes de fechar o Unity.
Próximos passos
Iniciamos a construção de uma importante funcionalidade de nosso game, que permitirá aos jogadores escolherem as melhores configurações para suas sessões de jogatina de forma simplificada e acessível.
Embora ainda não pudemos observar o menu pronto e nem a ação concreta dos Layout Groups em cena, os passos prévios que tomamos hoje serão importantes para que a construção da tela ocorra sem sobressaltos.
No próximo encontro finalizaremos a configuração dos elementos internos de cada grupo de opções, ativando o comportamento dos Layout Groups, e entenderemos como funcionam os Toggle Groups, introduzidos ao final das atividades realizadas hoje.
Nos encontraremos novamente no próximo dia 14 de junho. Até mais! Fique ligado sempre nas novidades do GameBlast!
Revisão: Ives Boitano
