Se esta for a primeira vez que você acessa nossa série, considere-se especialmente convidado a nos acompanhar em um divertido processo prático de aprendizagem sobre como podemos utilizar a ferramenta Unity para nos auxiliar a desbravar o fascinante mundo do desenvolvimento de jogos digitais.
No momento, estamos trabalhando no projeto Consultório do Dr. Tratanildo, um interessante game ambientado em um cenário tridimensional, cujo enredo gira em torno de Tratanildo Doencita, um renomado (e excêntrico) médico que realiza tratamentos em seus pacientes utilizando miraculosas pílulas coloridas.
A partir do primeiro texto da série, você terá a oportunidade de aprender diferentes conceitos e práticas de desenvolvimento de games, por meio da elaboração de variados projetos. Desde passos considerados mais básicos, como a instalação e configuração da ferramenta em nossos computadores, até a criação de fato das fases, regras, desafios, objetos e personagens que compõem um jogo são abordados na série.
Quem sabe desta forma você não possa, no futuro, tirar do papel aquele game que sempre sonhou em tornar realidade? Venha conosco para, juntos, seguirmos nesta caminhada rumo a novos conhecimentos!
Configurando câmeras
Durante a composição de nossa cena principal, realizamos a inserção de diferentes câmeras para podermos observar, por exemplo, a caminhada do personagem principal pelo consultório.
A utilização de diversas câmeras em contextos específicos é uma das formas de se obter múltiplas experiências dentro de um game. Podemos acionar câmeras em momentos determinados para experimentarmos modos de jogo diferentes. Em nosso projeto, utilizaremos essa abordagem para que o jogador possa controlar o médico pelo consultório e, na etapa do tratamento de saúde dos pacientes, controle efetivamente o labirinto que representa o interior do corpo dos enfermos.
Vamos, então, iniciar a implementação dessa prática em nosso projeto. 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. Certifique-se de estar com a aba Scene em evidência na tela:
Primeiramente, vamos analisar quais câmeras estão em ação no momento em nosso projeto. Na aba Hierarchy, veja que são três os GameObjects que apresentam um componente Camera atrelado a si: CameraDoutor_externa, CameraDoutor_interna e Main Camera:
Anteriormente, utilizávamos Main Camera para observar o comportamento dos elementos do cenário, conforme fomos acrescentando objetos tridimensionais ao consultório. A partir de agora, como temos câmeras devidamente atreladas ao personagem principal (Doutor_rindo), vamos reposicionar e renomear Main Camera para utilizarmos o referido objeto na visualização do leito.
Na aba Hierarchy, selecione Main Camera e renomeie-o para “CameraLeito_01”, sem as aspas. Na aba Inspector, modifique os valores dos atributos de seu componente Transform conforme indicado a seguir:
- Position X = 14, Y = 12, Z = -20;
- Rotation X = 45, Y = 90, Z = 0;
- Scale X, Y e Z = 1.
Veja como será exibida em tela a imagem gerada por essa câmera, clicando sobre a aba Game:
Pela ilustração anterior, podemos perceber que o leito não estará totalmente alinhado no centro da visualização da câmera. Isto é proposital, pois, do lado direito da imagem, será exibida a representação gráfica do labirinto. Iremos configurar agora a exibição do labirinto por meio da adição de um Canvas à cena.
Render Textures e Raw Images
Na aba Hierarchy, clique com o botão direito sobre uma área vazia e, no menu suspenso, selecione UI e, por fim, Canvas. Serão criados dois GameObjects simultaneamente: o primeiro, com o nome Canvas, e o segundo, com o nome EventSystem.
A criação do GameObject EventSystem pelo Unity, em adição ao objeto Canvas, deve-se ao fato da necessidade de se ter algum objeto que contenha o componente Event System atrelado a si durante a execução para permitir ao Unity captar ações que são normalmente realizadas para interação com um Canvas, como o clique em um botão, por exemplo.
Agora, na aba Hierarchy, iremos clicar com o botão direito sobre Canvas e, no menu suspenso apresentado, selecionar as opções UI e Raw Image sequencialmente, conforme exemplificado a seguir:
Dê o nome de “VisualizacaoLabirinto” ao novo GameObject criado, sem as aspas. Conceda os seguintes valores aos parâmetros de seu componente Transform:
- Anchors Min X = 0.5, Max X = 0.975, Min Y = 0, Max Y = 1;
- Pivot X e Y = 0.5;
- Left, Right, Top e Bottom = 0.
Pela visualização da aba Game, podemos perceber que teremos uma imagem sobreposta ao cenário, cobrindo praticamente toda a lateral direita da tela. O GameObject inserido, que no momento está sendo representado por um quadrado branco na tela, tem um componente do tipo Raw Image atrelado a si.
Componentes do tipo Raw Image apresentam como característica principal a possibilidade de exibirem em tela imagens oriundas de textures, o que nos será muito útil por uma particularidade específica deste tipo de elemento.
Além das texturas “tradicionais”, presentes em diferentes objetos tridimensionais que já inserimos em cena, o Unity permite a criação de texturas especiais em cena com propósitos bem específicos, como é o caso das Render Textures, que recebem imagens advindas de fontes dinâmicas, tais como câmeras ativas dentro de uma cena.
Aproveitando-se desta característica, posicionaremos agora uma nova câmera sobre o labirinto, que servirá como fonte de captura de imagens dinamicamente para um novo Render Texture que criaremos em nosso projeto. Esse Render Texture, por fim, fornecerá imagens para o componente Raw Image de VisualizacaoLabirinto.
Vamos começar essas edições inserindo a nova câmera. Na aba Hierarchy, clique com o botão direito sobre Cameras e, no menu suspenso, selecione a opção Camera. Conceda o nome “CameraLabirinto_01” ao novo GameObject criado, e insira os seguintes valores nos campos correspondentes dos atributos de seu componente Transform:
- Position X = 0, Y = 20, Z = 60;
- Rotation X = 90, Y = 0, Z = 0;
- Scale X, Y e Z = 1.
Agora, iremos criar o elemento Render Texture que irá receber as imagens da nova câmera posicionada em cena. Na aba Project, abra as pastas Assets e, em seguida, Multimedia. Crie uma nova subpasta, concedendo-lhe o nome de “TexturasCamera”:
Dentro de TexturasCamera, clique com o botão direito sobre uma área vazia da aba Project e, no menu suspenso, selecione as opções Create e, por fim, Render Texture.
O nome do novo elemento criado será “TexturaCameraLab01”, sem as aspas. Selecione-o e, na aba Inspector, modifique os valores dos campos do atributo Size para 700 por 700.
Na aba Hierarchy, selecione novamente CameraLabirinto_01 e, na aba Inspector, modifique o valor do atributo Target Texture de seu componente Camera para o item de nome TexturaCameraLab01. Dessa forma, a imagem captada pela câmera será enviada diretamente à nova textura criada.
Como passo final dessa sequência de interações, vamos configurar VisualizacaoLabirinto para que possa receber as imagens dinâmicas armazenadas por TexturaCameraLab01.
Primeiramente, vamos realizar um ajuste adicional às dimensões de VisualizacaoLabirinto, visto que tanto o labirinto quanto o novo Render Texture apresentam proporções quadradas, e não levemente retangulares, como pudemos ver ao inserir VisualizacaoLabirinto em cena.
Para tal, na aba Hierarchy, selecione VisualizacaoLabirinto. Na aba Inspector, adicione um novo componente ao objeto, desta vez do tipo Aspect Ratio Filter. Conceda os seguintes valores a seus atributos:
- Aspect Mode: Width Controls Height;
- Aspect Ratio: 1.
Os valores concedidos farão com que os valores do componente Transform de VisualizacaoLabirinto sempre respeitem a referida proporção (1:1).
Agora, ainda com VisualizacaoLabirinto em evidência, troque o valor do atributo Texture de seu componente Raw Texture para o elemento de nome TexturaCameraLab01.
Embora o labirinto já seja exibido de forma adequada na tela, vamos melhorar a visualização retirando as “bordas cinzas” da imagem, mantendo apenas a estrutura do labirinto visível em conjunto com o cenário do consultório. Para tal, na aba Hierarchy, selecione CameraLabirinto_01 e, na aba Inspector, altere o valor de seu atributo Clear Flags para Solid Color. Desta forma, a câmera desconsiderará o fundo do cenário, trazendo apenas a imagem que desejamos:
Hora dos testes
Após uma bateria de alterações, é chegada a hora de testarmos o que realizamos até o momento; porém, como temos uma grande quantidade de câmeras ativas em cena (algumas, inclusive, com a tag MainCamera atrelada a elas), vamos desativar as que acompanham Doutor Tratanildo em cena desabilitando temporariamente seu GameObject (Doutor_rindo), conforme indicado a seguir:
Agora sim, com a aba Game em evidência, iremos pressionar o ícone do botão Play, selecionaremos Labirinto via aba Hierarchy e realizaremos as tradicionais alterações dinâmicas dos valores de Rotation X e Z para vermos ao vivo o labirinto se mover sem sairmos da visualização padrão do consultório:
Concluídos os testes, interrompa a simulação, pressionando novamente o botão Play. 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
Aos poucos, estamos realizando integrações muito importantes entre o módulo do game responsável pelos “tratamentos médicos” e o cenário do consultório.
Em nossos próximos encontros, avançaremos nesta integração, realizando correções na estrutura do labirinto e codificando métodos para controlar, ao mesmo tempo, a inclinação do labirinto e do leito hospitalar.
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
