Aprendendo a programar jogos em Unity: finalizando a construção visual do menu de opções

Seja bem-vindo(a) ao GameDev: Aprendendo a programar jogos em Unity de hoje! Dando sequência ao processo de desenvolvimento do menu de opções de nosso game, após a introdução, em nosso encontro anterior, dos elementos visuais pertencentes ao grupo de opções de controle, realizaremos a inserção dos demais itens pertencentes a tela, configurando comportamentos relacionados aos Toggles e, também, às transições entre menus do jogo.

Se hoje for a primeira vez que você tem contato com conteúdos de nossa série, não se acanhe e venha conosco aprender mais sobre o interessante universo do desenvolvimento de jogos digitais. Por meio do uso da ferramenta Unity, estamos explorando diferentes métodos, técnicas e ferramentas  utilizados para a elaboração de jogos dos mais variados estilos gráficos e de gameplay. 

A partir do primeiro tópico da série, são abordados desde as etapas iniciais do processo como um todo, como a instalação e a configuração do Unity em nossos computadores, até as etapas que envolvem a construção e a configuração dos cenários, dos elementos e das regras que farão parte de nossas aventuras digitais. Para tal, lançaremos mão do uso de elementos multimídia, tais como imagens, modelos tridimensionais e sons, além da codificação de scripts controladores de comportamentos e de interações entre objetos nas fases dos jogos.

Para facilitar o aprendizado dos conceitos apresentados, em nossa série abordamos os tópicos envolvidos no processo por meio da elaboração prática de variados games. Até o momento, já finalizamos a construção de dois jogos 2D, Motorista da Pesada e Forest Ping Pong; atualmente, estamos nos dedicando a desenvolver um jogo em ambiente tridimensional, o puzzle Consultório do Dr. Tratanildo.

A elaboração dos três jogos nos permite observar, sob diferentes óticas, aspectos importantes do processo de desenvolvimento, tais como os que envolvem o posicionamento de câmeras, a interação entre elementos visuais e a utilização de recursos de física como fator impactante de gameplay. Todo o processo de desenvolvimento pode ser conferido a partir dos textos disponibilizados no índice, disponível no primeiro texto da série. Vale a pena conferir!

Se você gostou da ideia de tirar do papel os jogos que sempre sonhou em tornar realidade, junte-se a nós em uma divertida caminhada, repleta de novos conhecimentos e de muita diversão!

Opções de dificuldade

Após construirmos a estrutura básica do grupo de opções de controle em nosso menu de opções gerais, aproveitaremos determinadas características dos elementos inseridos para a concepção de um novo grupo de opções, dessa vez relacionadas ao nível de dificuldade do jogo.

Iniciaremos nossas 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.

Ao final da última intervenção realizada no encontro anterior, introduzimos no projeto importantes elementos visuais, reproduzidos na imagem a seguir:

Aproveitando as potencialidades que o uso de Layout Groups nos proporcionam em relação à organização automática de elementos, utilizaremos a mesma estrutura do grupo de opções previamente introduzido como base para a criação do grupo referente às opções de dificuldade do game.

Para tal, na aba Hierarchy, clique com o botão direito sobre o GameObject OpcoesControles e, no menu suspenso apresentado, selecione a opção Duplicate. Renomeie o objeto recém-introduzido para “OpcoesDificuldades”.

Em relação aos objetos subordinados ao novo grupo de opções, realize as seguintes intervenções:

• Titulo: altere o conteúdo do atributo Text de seu componente Text para “Dificuldade”, sem as aspas.
• OpcaoMouse: renomeie-o para “OpcaoNormal” e altere o conteúdo do atributo Text do componente Text de seu objeto subordinado Label para “Normal”.
• OpcaoTeclado: renomeie-o para “OpcaoAlta” e altere o conteúdo do atributo Text do componente Text de seu objeto subordinado Label para “Alta”.
• OpcaoControle: exclua o GameObject.

Por fim, o novo grupo de opções será apresentado em tela de forma organizada, tanto horizontalmente quanto verticalmente, assim como o representado pela imagem a seguir:

As alterações que serão aplicadas ao comportamento do jogo quando da seleção de níveis de dificuldade diferente para o game serão codificadas em breve, mas já adianto que envolverão aspectos relacionados ao tempo disponível para cada tratamento e, também, curiosas interações medicamentosas entre pílulas e agentes de doenças de cores diferentes.

Toggle Groups

Ao final de nosso penúltimo encontro, atrelamos ao GameObject OpcoesControles um discreto componente, chamado Toggle Group. Como realizamos a duplicação do objeto para a criação do grupo de opções relacionadas à dificuldade do jogo, ao selecionarmos ambos, podemos visualizar a presença do componente, por intermédio da aba Inspector: 

Os componentes de tipo Toggle Group são responsáveis por organizar logicamente o estado de grupos de objetos de seleção, compostos por GameObjects com componentes Toggle atrelados a si.

Todos os Toggles que compartilhem o mesmo Toggle Group de referência respeitam determinadas regras que, por exemplo, impedem a seleção simultânea de duas ou mais opções para um mesmo atributo. Em nosso caso concreto, os Toggle Groups inseridos no projeto indicarão ao jogo que apenas uma das três opções de controles poderá estar com seu campo marcado (On) por vez, valendo o mesmo para os campos de seleção do grupo de opções de dificuldade.

O primeiro conjunto de Toggles a receberem intervenções será o de objetos subordinados a OpcoesControles. Via aba Hierarchy, selecione os GameObjects OpcaoMouse, OpcaoTeclado e OpcaoControle simultaneamente. Na aba Inspector, dentro do conjunto de atributos de seus componentes Toggle, conceda ao atributo Group o valor correspondente ao objeto OpcoesControles.

Como todos os objetos selecionados estão atualmente com seus campos marcados (Is On = true), temos de definir qual será o comportamento padrão de nosso game, em relação ao método de controles do jogo. Deixaremos como padrão o primeiro item marcado, e os demais com seus campos em branco. Para tal, via aba Hierarchy, selecione apenas OpcaoTeclado e OpcaoControle, e, na aba Inspector, deixe em branco o valor do atributo Is On de seus componentes Toggle:

Em seguida, selecione os GameObjects OpcaoNormal e OpcaoAlta, subordinados a OpcoesDificuldades. Em seguida, conceda ao atributo Group de seus componentes Toggle o valor correspondente ao objeto OpcoesDificuldades.

Selecione apenas o objeto OpcaoAlta e, via aba Inspector, deixe em branco o valor do atributo Is On de seu componente Toggle.

Feitas as intervenções sobre os objetos dos grupos, vamos configurar agora comportamentos para os botões que ativam ou desativam o menu de opções de jogo.

Ajustando o comportamento dos elementos do menu

O primeiro botão a receber intervenções será o que permite voltarmos ao menu inicial. Via aba Hierarchy, selecione o GameObject Voltar, subordinado a TelaOpcoes. Na aba Inspector, localize o grupo de ações OnClick, dentro do conjunto de atributos de seu componente Button. Clique por três vezes sobre o ícone com o sinal de mais (destacado em azul, na imagem a seguir) e configure os campos que serão exibidos conforme segue:

• Primeiro elemento (destaques em roxo, na imagem a seguir):
• Referencie o GameObject TelaOpcoes;
• Selecione a opção GameObject.SetActive;
• Deixe a caixa de seleção vazia (false).
• Segundo elemento (destaques em laranja, na imagem a seguir):
• Referencie o GameObject Botoes;
• Selecione a opção GameObject.SetActive;
• Deixe a caixa de seleção marcada (true).
• Terceiro elemento (destaques em verde, na imagem a seguir):
• Referencie o GameObject ReccordesCoracoes;
• Selecione a opção GameObject.SetActive;
• Deixe a caixa de seleção marcada (true).

Quando o jogador clicar sobre o botão “Voltar”, o objeto TelaOpcoes será desativado e os objetos Botoes e RecordesCoracoes, elementos componentes da tela inicial do jogo, serão ativados.

Em seguida, vamos desativar TelaOpcoes, selecionando-o na aba Hierarchy e, em seguida, deixando a caixa de seleção vazia, ao lado de seu nome na aba Inspector.

Reativaremos, agora, os elementos pertencentes à tela inicial do jogo. Selecione os GameObjects Botoes e RecordeCoracoes e, via aba Inspector, reative os objetos, deixando a caixa de seleção marcada (destacada em laranja, na imagem a seguir).

Por fim, vamos configurar o comportamento do botão “Opções”, para que sejam realizadas as ações inversas às configuradas para o botão “Voltar”, da tela de opçoes do game. Selecione o GameObject BotaoOpcoes, subordinado a Botoes, e, na aba Inspector, clique por três vezes sobre o ícone com o sinal de mais (destacado em azul, na imagem a seguir) e configure os campos que serão exibidos conforme segue:

• Primeiro elemento (destaques em roxo, na imagem a seguir):
• Referencie o GameObject Botoes;
• Selecione a opção GameObject.SetActive;
• Deixe a caixa de seleção vazia (false).
• Segundo elemento (destaques em laranja, na imagem a seguir):
• Referencie o GameObject RecordesCoracoes;
• Selecione a opção GameObject.SetActive;
• Deixe a caixa de seleção marcada (false).
• Terceiro elemento (destaques em verde, na imagem a seguir):
• Referencie o GameObject TelaOpcoes;
• Selecione a opção GameObject.SetActive;
• Deixe a caixa de seleção marcada (true).

Após tantas intervenções, é chegada a hora de testarmos o funcionamento dos botões e dos Toggles introduzidos nas telas do menu inicial do game. Para tal, vá até a aba Game e clique sobre o ícone do botão Play.

Observe como os elementos respeitam as configurações realizadas: ao selecionarmos uma das opções de controles, as demais permanecem com seus campos vazios, assim como ocorre também com as opções de dificuldade. Também é possível notar que a organização dos elementos em tela respeita os Layout Groups introduzidos, deixando a tela de opções visualmente agradável ao jogador.

Interrompa a simulação de execução, clicando novamente sobre o ícone do botão Play e retornando à aba Scene. 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

Finalizamos a formulação visual dos elementos pertencentes ao grupo de opções do menu inicial do game. Por meio do desenvolvimento e da configuração dos GameObjects pertencentes ao conjunto construído, pudemos experimentar o uso de elementos de layout interessantes para a formulação de interfaces de usuário em nossos projetos pessoais, como Toggles e Layout Groups.

Nos próximos encontros, elaboraremos códigos e intervenções no projeto para que as opções introduzidas no menu de fato interajam com os elementos do game, modificando a forma de se controlar o personagem principal e o nível de dificuldade da aventura. 

Nos encontraremos novamente no próximo dia 5 de julho. Até mais! Fique ligado sempre nas novidades do GameBlast!

Revisão: Ives Boitano