Se hoje for a primeira vez que você tem contato com conteúdos de nossa série, considere-se especialmente convidado a juntar-se a nós em uma interessante trilha de aprendizagem sobre os principais conceitos do mundo do desenvolvimento de games.
Por meio da elaboração de divertidos projetos práticos de programação, estamos produzindo jogos de diferentes estilos, tais como jogos de plataforma e puzzles. Atualmente, estamos trabalhando no processo de desenvolvimento de Consultório do Dr. Tratanildo, um game tridimensional ambientado em um louco consultório médico, cujo gameplay apresenta características mescladas de diferentes clássicos dos videogames, tais como Dr. Mario e Pac-Man.
Não se preocupe se você nunca teve a oportunidade de experimentar desenvolver games anteriormente: a partir do primeiro texto da série, mesmo quem ainda não conhece conceitos sobre programação, por exemplo, poderá aprender a tirar do papel aquele game que sempre sonhou em ver tornar-se realidade.
Abordamos desde os conceitos mais básicos, como a instalação e a configuração da ferramenta Unity em nossos computadores, até os conteúdos considerados mais “complexos”, como a definição e codificação das metas e regras do game, inserção e configuração de elementos multimídia e programação dos comportamentos dos personagens e itens das fases.
Venha conosco para que possamos, juntos, seguir nesta caminhada rumo a novos conhecimentos!
Ajustes no Canvas
No final de nosso encontro anterior, implementamos o indicador de tempo restante como um dos elementos subordinados ao Canvas de nossa cena. Dentre as ações que realizamos, determinamos um tamanho para os elementos recém-inseridos na barra superior da tela, conforme indicado pela imagem a seguir:
Porém, ao adotarmos um valor específico para uma das variáveis de tamanho do componente Rect Transform dos elementos (width ou height, por exemplo), alguns “efeitos adversos” podem surgir em nosso game no momento em que ele for executado em telas ou janelas de diferentes resoluções. Por exemplo: a imagem a seguir ilustra como o game se comporta ao rodar em um dispositivo cuja tela apresente a resolução 2560 pixels de largura por 1440 pixels de altura:
A princípio, a exibição dos elementos em cena parece bem natural; porém, ao experimentarmos alterar a resolução para 3840 pixels de largura por 2160 pixels de altura, note a diferença:
Os elementos do HUD ficaram bem menores, impactando uma boa visualização caso o game fosse ser jogado em uma tela pequena. Mesmo assim, o game ainda é jogável dessa forma. Porém, ao experimentarmos o game em resoluções menores do que 1280 pixels de largura por 720 pixels de altura, a situação fica bem complicada:
Pois é, dessa forma seria bem difícil aproveitar o game, não é mesmo? Para resolver essa situação, o Unity nos fornece algumas funcionalidades de ajuste dinâmico das dimensões do Canvas, permitindo que os elementos sejam exibidos na tela respeitando a resolução e dimensões vigentes naquele momento.
Vamos realizar alguns ajustes no Canvas de nosso projeto, para que possamos inserir os próximos elementos sem medo de termos novas dores de cabeça. Para tal, abriremos 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, selecione o GameObject Canvas. Na aba Inspector, são vários os componentes atrelados ao objeto que têm relação com a forma em que os itens serão exibidos em tela; dentre eles, temos o componente Canvas Scaler, responsável por realizar o ajuste dinâmico das dimensões dos elementos gráficos de um Canvas de acordo com a resolução atual.
Para que nossos elementos sejam exibidos de maneira adequada na tela, realize as seguintes alterações aos valores das propriedades de Canvas Scaler:
- UI Scale Mode: selecione a opção Scale With Screen Size;
- Reference Resolution X = 2560, Y = 1440;
- Screen Match Mode: selecione a opção Match Width Or Height;
- Match: conceda o valor 1 ao elemento.
Com os ajustes que realizamos, indicamos ao Canvas que os elementos deverão ser redimensionados automaticamente de acordo com o tamanho da tela vigente (Screen Size), sendo que, no caso, esse “tamanho” é a resolução. Informamos ao game também uma resolução de referência (2560 por 1440), visando permitir ao jogo calcular adequadamente as dimensões proporcionalmente em diferentes resoluções e, por fim, informamos qual das variáveis de dimensões da tela (Width ou Height) deverá servir como referência caso o game necessite realizar ajustes dinâmicos no tamanho dos elementos; em nosso caso, escolhemos a altura (Height) como determinante para o ajuste.
Na prática, o que tudo isso pode significar? É o que iremos ver agora: abra a aba Game e experimente alterar a resolução da simulação, clicando sobre o botão em destaque na imagem a seguir. Escolha, por exemplo, a resolução QHD (2560x1440):
Experimente alterar a resolução para a opção 4K UHD (3840x2160):
Agora sim, não sofreremos mais com distorções na tela devido a mudanças na resolução, desde que nosso jogo seja executado em telas ou janelas com proporção 16:9 ou superior.
Mensagens para mim, mensagens pra você
Muitos dos elementos visuais a serem exibidos no Canvas de nosso projeto terão papel importante para contar a história e objetivos do game. Dentre esses elementos importantes, teremos literalmente “dois papeis” em cena, que nos servirão para passar ao jogador os diálogos e instruções dadas e recebidas entre Doutor Tratanildo e seus pacientes.
A inspiração direta para essa funcionalidade vem do clássico game Super Mario 64, cujas mensagens entre Peach e Mario e, também, entre o cinegrafista Lakitu e o encanador bigodudo da Nintendo eram retratadas pelo jogo por meio de textos exibidos em retângulos na tela:
Iniciaremos implementando o “recadinho” a ser exibido do lado esquerdo do Canvas. Para tal, na aba Hierarchy, clique com o botão direito sobre o GameObject Canvas, no menu suspenso, selecione a opção UI e, por fim, Image:
Conceda o nome “Mensagem_Esq”, sem as aspas, ao novo objeto. A seguir, são listados os valores a serem alterados para os parâmetros de seu componente Rect Transform:
- Âncora (destacado em verde na imagem a seguir): selecione o item de valores Middle Right;
- Pivot (destacado em azul na imagem a seguir): X = 1, Y = 0.5;
- Pos X: -150, Pos Y: 0;
- Width e Height: 800.
Ainda na aba Inspector, altere o valor do parâmetro Source Image de seu componente Image para a imagem de nome blocoPapel:
Vamos conceder ao novo elemento visual a possibilidade de receber conteúdos textuais diversos, por meio da inserção de um objeto subordinado a Mensagem_Esq que contenha atrelado a si um componente do tipo Text. Na aba Hierarchy, clique com o botão direito sobre Mensagem_Esq, no menu suspenso, selecione as opções UI e, em seguida, Text:
O nome do novo objeto será “TextoMensagem_Esq”, sem as aspas. Para seu componente Rect Transform, conceda os seguintes valores a seus atributos:
- Âncora (destacado em verde na imagem a seguir): selecione o item de valores Stretch Stretch;
- Left, Right, Top e Bottom: todos receberão o valor 33.
Para que o texto apareça em tela de forma visível, vamos alterar alguns aspectos do componente Text do objeto:
- Text: conceda o valor “<insira o texto aqui>”, sem as aspas;
- Character Font: escolha a fonte de nome Poppins-Regular;
- Best Fit: deixe o item ativado (true) e conceda os valores Min Size = 10 e Max Size = 60.
Veja que interessante ficou nosso espaço de recados em cena:
Finalizaremos as alterações de hoje em nosso projeto criando uma variante do objeto recém-configurado para o lado direito do Canvas. Na aba Hierarchy, clique com o botão direito sobre Mensagem_Esq e selecione a opção Duplicate. Renomeie o novo objeto para “Mensagem_Dir”, sem as aspas, e conceda os seguintes valores aos atributos de seu componente Rect Transform:
- Âncora (destacado em verde na imagem a seguir): selecione o item de valores Middle Left;
- Pivot (destacado em azul na imagem a seguir): X = 0, Y = 0.5;
- Pos X: 150, Pos Y: 0;
- Width e Height: 800.
Subordinado ao novo GameObject, teremos criado automaticamente uma cópia de TextoMensagem_Esq. Renomeie-a para “TextoMensagem_Dir”, sem as aspas, para não confundirmos os dois objetos.
Por fim, para darmos um “toque especial” ao novo elemento criado, selecione Mensagem_Dir e, na aba Inspector, vamos alterar o valor do atributo Color de seu componente Image para a cor representada pelos valores R = 0, G = 255, B = 255 e A = 255, conforme exemplificado a seguir:
Note que, apesar das coordenadas de cor que informamos ao game serem correspondentes à cor azul ciano, o papel adotou uma coloração mais próxima ao verde. Isso deve-se ao fato da imagem original do papel já apresentar a cor amarela, fazendo com que, ao selecionarmos uma cor via editor do Unity, ocorresse uma “mistura” entre os dois tons.
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
Realizamos uma importante correção em nosso Canvas, permitindo a exibição adequada dos elementos em diferentes resoluções de tela. Além disso, introduzimos dois simpáticos papeizinhos em cena a serem utilizados nos processos de comunicação entre o médico, seus pacientes e, claro, os gamers de nossa aventura
Em nossos próximos encontros, continuaremos a construir o HUD de nosso jogo, introduzindo e configurando importantes elementos de interação entre jogador e game, tais como as telas de pause, vitória e derrota.
Nosso próximo texto já encontra-se disponível, continue conosco nessa jornada de conhecimento e fique ligado sempre aqui no GameBlast!
Revisão: Davi Sousa
