Caso essa seja a primeira vez que você teve contato com um dos conteúdos de nossa série, aproveite a oportunidade para se juntar a nós em uma jornada de divertidos aprendizados sobre o mundo do desenvolvimento de jogos. Elaborando diferentes projetos práticos de programação, estamos aprendendo sobre interessantes conceitos envolvidos na elaboração de games de diferentes estilos, tais como puzzles e jogos de plataforma.
Atualmente, estamos focados no desenvolvimento do projeto Consultório do Dr. Tratanildo: ambientado em um consultório médico tridimensional, trata-se de um jogo cujas características de gameplay se assemelham às de clássicos como Dr. Mario e Pac-Man.
A partir do primeiro texto da série, mesmo quem ainda não conhece nada sobre programação de jogos vai poder participar e aprender muito nesse processo, pois abordamos desde os conceitos mais elementares, como a instalação da ferramenta Unity em nossos computadores, até os tópicos que irão nos fazer criar games dos mais diferentes estilos, tais como a definição e codificação das metas e regras do game, a inserção em cena de diferentes elementos multimídia e a programação dos diversos comportamentos esperados na interação entre os personagens e os itens das fases.
Venha conosco para que possamos, juntos, seguir nesta caminhada rumo a novos conhecimentos!
Uma nova tela
Para jogos em que o tempo é uma das métricas importantes na composição do desafio a ser enfrentado pelos gamers, é interessante que haja alguma forma de se pausar o jogo, a fim de não prejudicar o andamento do progresso do jogador durante a sessão de gameplay.
Pensando nessa questão, vamos implementar em cena agora uma tela a ser exibida nos momentos em que o jogador escolher pausar o game. A composição dessa tela será bem simples, se assemelhando à que adotamos na construção do projeto Motorista da Pesada. Para relembrarmos de como ela era, veja a imagem a seguir:
Para iniciarmos as atividades, vamos abrir nosso projeto para edição: no Unity Hub, clique duas vezes sobre o item referente ao projeto Consultório do Dr. Tratanildo. Na interface inicial do editor, na aba Project, abra a pasta Assets, Scenes e, por fim, clique duas vezes no ícone da cena ConsultorioScene.
Na aba Hierarchy, clique com o botão direito sobre o GameObject Canvas e, no menu suspenso apresentado, selecione as opções UI e, em seguida, Image. Conceda o nome “TelaPause”, sem as aspas, ao novo objeto criado:
Selecione TelaPause e, na aba Inspector, modifique os valores dos atributos de seu componente Rect Transform conforme indicado a seguir:
- Âncora (destacado em verde na imagem a seguir): selecione o item de valores Stretch Stretch;
- Left, Right, Top e Down: 0.
Ainda na aba Inspector, modifique a coloração do parâmetro Color de seu componente Image para uma cor representada pelos valores R = 150, G = 255, B = 255 e A = 150.
Sobre a tela de cor azulada semitransparente que acabamos de introduzir, iremos posicionar alguns elementos textuais que indicarão que o jogo está pausado e, também, oferecendo a opção de voltar ao game.
Na aba Hierarchy, clique com o botão direito sobre TelaPause e, no menu suspenso apresentado, selecione as opções UI e, em seguida, Text. Conceda o nome “MensagemPause” ao novo objeto criado:
Selecione MensagemPause e altere os valores dos parâmetros de seu componente Rect Transform na seguinte ordem:
- Anchors (destacado em roxo na imagem a seguir, clique na seta à sua esquerda para abrir as opções personalizadas):
- Min X: 0, Min Y: 0.3, Max X: 1, Max Y: 1;
- Left, Right, Top e Down: 0.
Embora as dimensões Left, Right, Top e Down terem sido configuradas com o valor zero, perceba que, ao alterarmos manualmente os valores de Anchors, a área reservada ao texto a ser inserido na tela será de 70% do total da tela na parte superior do Canvas, conforme ilustrado a seguir:
Também iremos modificar valores de parâmetros do componente Text via aba Inspector:
- Text: insira o texto “Jogo pausado”, sem as aspas;
- Character Font: selecione a fonte Poppins-Bold;
- Paragraph Alignment: deixe o texto centralizado, tanto no sentido horizontal quanto no sentido vertical;
- Best Fit: deixe o item ativado (true) e conceda os valores Min Size = 10 e Max Size = 300.
Por fim, ainda na aba Inspector, introduza um novo componente de tipo Outline e modifique os valores de seus parâmetros conforme segue:
- Effect Color: selecione a cor branca de valores R, G, B e A = 255;
- Effect Distance X = 4, Y = -4.
Reaproveitando elementos
Já temos um bom elemento visual para indicar que o jogo encontra-se pausado, configurado para ocupar 70% da área da tela criada. Que tal utilizarmos o espaço restante para disponibilizar uma opção que permita ao gamer retornar à aventura?
Vamos reaproveitar a estrutura do elemento textual criado, duplicando-o e realizando apenas algumas alterações estéticas. Na aba Hierarchy, clique com o botão direito sobre MensagemPause e selecione a opção Duplicate. Renomeie o novo objeto criado para “ButtonRetornarPause”:
Selecione o objeto recém-introduzido para realizarmos alterações nos valores dos atributos de alguns de seus componentes via aba Inspector. Em Rect Transform, modifique os valores dos atributos relacionados à Anchors listados a seguir:
- Min X: 0.2;
- Min Y: 0;
- Max X: 0.8;
- Max Y: 0.3.
Após modificá-los, torne a conceder aos atributos Left, Right, Top e Bottom o valor 0, conforme indicado pela imagem a seguir:
Dessa vez, embora o novo objeto ocupará verticalmente os 30% restantes de área da tela, por meio das alterações realizadas para os parâmetros Min X e Max X posicionamos o novo elemento em tela de forma centralizada no eixo horizontal, concedendo margens em suas extremidades.
Ainda na aba Inspector, vamos realizar alterações relativas ao componente Text:
- Text: insira o texto “Retomar”, sem as aspas;
- Color: escolha a cor correspondente aos atributos R = 255, G = 222, B = 200 e A = 255;
Para o componente Outline, modifique o valor de Effect Color para a cor preta de valores R, G, B = 0 e A = 255.
A imagem a seguir ilustra como o elemento será apresentado em cena após as alterações realizadas:
Para finalizarmos a concepção inicial de ButtonRetornarPause, insira via aba Inspector um novo componente de tipo Button. Posteriormente, iremos interagir com ele para configurarmos a transição entre os estados “pausado” e “em execução” de nosso game.
Não se esqueça de salvar a cena (menu File, opção Save) e o projeto (menu File, opção Save Project) antes de fechar o editor.
Próximos passos
Ao concluirmos a constituição básica dos elementos que estarão presentes na tela de pause do game, demos um passo importante na construção de Consultório do Dr. Tratanildo pois, embora bem simples, nossa tela de pause está robusta o suficiente para permitir que, com poucas alterações, possamos criar outras telas tão ou mais importantes ao contexto do game baseadas em sua estrutura, tais como as que indicarão vitórias e derrotas em nossa aventura.
Em nossos próximos encontros daremos sequência ao processo de construção de telas e elementos do HUD de nosso jogo.
Nosso próximo encontro será no dia 2 de março. Até mais! Fique sempre ligado nas novidades do GameBlast!
Revisão: Davi Sousa
