Se esta for a primeira vez que você acessa conteúdos de nossa série, considere-se especialmente convidado a juntar-se a nós em uma interessante caminhada de aprendizados sobre o fascinante mundo da programação de jogos digitais.
Por meio do uso da ferramenta Unity, experimentaremos métodos, técnicas e ferramentas utilizados por diversos estúdios de desenvolvimento para a criação de seus jogos. A partir do primeiro tópico da série, abordamos desde os passos mais elementares do processo, como a instalação e a configuração da ferramenta em nossos computadores, até as etapas consideradas mais desafiadoras, como a construção das cenas de jogo, o posicionamento e a configuração de elementos multimídia, e a programação de scripts controladores de comportamentos e de regras de um game.
Até o momento, elaboramos dois jogos 2D de estilos distintos, de nomes Motorista da Pesada e Forest Ping Pong. Estamos trabalhando atualmente no projeto do game Consultório do Dr. Tratanildo, um puzzle ambientado em um consultório médico tridimensional, cuja construção está nos possibilitando aprender mais sobre diferentes aspectos de desenvolvimento de jogos 3D, tais como os relacionados à movimentação de personagens e ao posicionamento de câmeras.
Não se preocupe caso não tenha tido oportunidades prévias de aprendizado na área de programação de jogos ou de sistemas em geral. Nossa série é pensada justamente de forma a auxiliar a quem tem vontade de tirar do papel os jogos que sempre sonhou em tornar realidade, mas ainda não sabe bem ao certo como começar essa empreitada. Para tal, abordamos os conteúdos por meio de atividades práticas, exemplificando e explicando os conceitos utilizados, para que você possa aplicá-los posteriormente em seus projetos pessoais.
Se você gostou da ideia de criar seus próprios games, não perca mais tempo e junte-se a nós nessa jornada, repleta de novos conhecimentos e de muita diversão!
Avançando na construção do menu
Em nosso último encontro, iniciamos a construção da estrutura básica que representará o menu de opções na hierarquia do Canvas da cena principal do game. Vamos retomar a configuração dos elementos, inserindo os itens relacionados ao grupo de opções relativos aos controles do jogo.
Iniciaremos as intervenções de hoje, abrindo 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.
Diferentemente de outras ocasiões, não necessitaremos conceder valores específicos aos atributos de seu componente Rect Transform, pois o controle do posicionamento e da organização dos objetos subordinados a OpcoesControles ficou a cargo de seu componente Horizonyal Layout Group.
Em relação ao texto propriamente dito do título, conceda os valores a seguir aos atributos do componente Text do objeto Titulo:
- Text: insira o texto “Controles”, sem as aspas;
- Font: selecione a fonte de nome “Poppins-Bold”;
- Paragraph:
- Alignment: selecione as duas opções centrais, conforme destacado em amarelo na imagem a seguir;
- Best Fit: deixe a caixa de seleção marcada (true).
- Min Size = 10;
- Max Size = 100.
Ainda com Titulo em evidência, na aba Inspector introduza um novo componente de tipo Outline ao GameObject, por meio do botão Add Component. Altere o valor de seu atributo Effect Color para a cor branca semitransparente, de valores R, G, B = 255 e A = 128.
Em seguida, de volta à aba Hierarchy, clique com o botão direito novamente sobre OpcoesControles. No menu suspenso, selecione a opção UI e, em seguida, Toggle. O nome do novo objeto será “OpcaoMouse”.
Note que, ao finalizarmos a operação, um GameObject e um conjunto de objetos hierarquicamente subordinados a si serão introduzidos no projeto, visíveis via aba Hierarchy:
Caixas de seleção
Elementos de interface de tipo Toggle são conhecidos também como “caixas de seleção”. No Unity, são formados por um conjunto de GameObjects específicos, com determinados componentes atrelados a si, tais como Text, Image e um componente de nome Toggle responsável pelo controle do estado da referida caixa de seleção: On (marcado) ou Off (em branco).
Realizaremos ajustes para cada um dos elementos pertencentes ao Toggle OpcaoMouse, visando deixá-lo visualmente atraente ao estilo que estamos adotando para o menu em geral.
O primeiro elemento que sofrerá intervenções será o GameObject Background. Seu papel em OpcaoMouse é o de representar o retângulo branco, que conterá subordinado a si uma pequena marca de seleção, representando o estado atual do Toggle (On ou Off). Na aba Hierarchy, selecione-o e, via aba Inspector, realize alterações nos valores dos seguintes atributos de seu componente Rect Transform:
- Âncoras (destacado em verde): selecione a opção Middle Left;
- Pos X = 10;
- Pos Y = 20;
- Width = 100;
- Height = 100.
Em seguida, selecione o objeto Checkmark, subordinado a Background, e conceda os seguintes valores aos atributos de seu componente Rect Transform:
- Âncoras (destacado em verde): selecione a opção Middle Center;
- Pos X = 0;
- Pos Y = 0;
- Width = 75;
- Height = 75.
A seguir, selecione o objeto Label, subordinado a OpcaoMouse. Ele contém os elementos visuais correspondentes a descrição visual do Toggle. Iniciaremos as intervenções nele, concedendo os seguintes valores aos atributos de seu componente Rect Transform:
- Âncoras (destacado em verde): selecione a opção Stretch Stretch;
- Left = 110;
- Top = 0;
- Right = 0;
- Bottom = 0.
- Text: insira o texto “Teclado e mouse”;
- Font: selecione a fonte de nome “Poppins-Bold”;
- Paragraph:
- Alignment: selecione a opção de alinhamento à esquerda com centralização vertical, conforme destacado em amarelo na imagem a seguir;
- Best Fit: deixe a caixa de seleção marcada (true).
- Min Size = 10;
- Max Size = 75.
Introduza também um componente de tipo Outline ao objeto, por meio do botão Add Component da aba Inspector. Altere o valor de seu atributo Effect Color para a cor branca semitransparente, de valores R, G, B = 255 e A = 128.
Ao final das intervenções, temos um elemento em mãos interessante visualmente, diferente dos botões que utilizamos frequentemente em nossos projetos até o momento:
Após a criação dos novos objetos, modifique o conteúdo do atributo Text do componente Text atrelado ao objeto Label subordinado a OpcaoTeclado para “Somente teclado”, sem as aspas. O mesmo deve ser realizado para o objeto subordinado a OpcaoControle, trocando o conteúdo para “Controle de videogame”.
Ao final das intervenções, veja como ficaram dispostos os três itens de seleção, em conjunto ao título do grupo:
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
Aos poucos, vamos vendo tomar forma os elementos pertencentes ao menu de opções de nosso jogo. É interessante notar que, após a inserção e a configuração do Horizontal Layout Group atrelado a OpcaoMouse, não foram necessárias intervenções explícitas sobre os atributos dos componentes Rect Transform dos quatro itens pertencentes ao grupo, sendo ele o responsável por organizar na tela o posicionamento e as dimensões dos elementos.
No próximo encontro, teremos alguns ajustes a realizar no menu para finalizarmos sua concepção, referentes especificamente ao conjunto de opções de dificuldade do game e ao comportamento de cada Toggle introduzido em cena.
Nos encontraremos novamente no próximo dia 21 de junho. Até mais! Fique ligado sempre nas novidades do GameBlast!
Revisão: Ives Boitano
