Aprendendo a programar jogos em Unity: acrescentando uma câmera giratória ao projeto

Seja bem-vindo(a) ao GameDev: Aprendendo a programar jogos em Unity! Hoje, daremos sequência ao processo que iniciamos em nosso encontro anterior, visando a construção do menu inicial de nosso jogo, dando ênfase a alguns aspectos visuais interessantes da nova tela.

Caso essa seja a primeira vez que você tem contato com conteúdos de nossa série, aproveite essa oportunidade para aprender conosco conceitos interessantes sobre o mundo do desenvolvimento de games. Por meio da elaboração de projetos práticos de programação de jogos, estamos experimentando diferentes técnicas e ferramentas para tirar do papel games dos mais variados estilos gráficos e de gameplay.

Por meio do uso da ferramenta Unity, popular motor de jogo utilizado no desenvolvimento de games como Cuphead, Super Bomberman R e Among Us, estamos elaborando diferentes aventuras digitais, que nos permitem aprender conceitos que podemos aplicar em nossos projetos pessoais.

A partir do primeiro texto da série, são abordados desde a instalação e a configuração da ferramenta em nossos computadores até as etapas em que, de fato, colocamos a “mão na massa”, codificando comportamentos dos elementos, preparando os detalhes dos cenários e das fases e encadeando as ações e regras do jogo, de acordo com o que planejarmos para o projeto.

Em nossa série, até o momento, finalizamos a construção de dois jogos: Forest Ping Pong, uma homenagem ao clássico dos arcades Pong (Atari, 1972), e Motorista da Pesada, um game de plataforma inspirado em City Connection (Jaleco, 1985). No momento, estamos trabalhando no processo de construção do jogo Consultório do Dr. Tratanildo, um puzzle tridimensional que está nos permitindo aprender conceitos interessantes sobre cenários 3D, aplicação de física na interação entre elementos e recursos de câmera. Vale muito a pena conferir todo o processo de elaboração dos jogos por meio do índice disponibilizado no primeiro texto da série.

Nossa série é elaborada de forma a permitir a construção de variados jogos a todos que tenham vontade de ver seus projetos tomando forma, mesmo se, anteriormente, não tenham tido a oportunidade de aprender sobre programação de jogos ou de sistemas. Para isso, todas as etapas do processo de criação de nossos projetos são detalhadas, visando facilitar a compreensão dos conceitos e permitir a aplicação do que foi aprendido em seus projetos pessoais.

Se você curtiu a ideia de tirar do papel aquele game que sempre sonhou em poder jogar “na vida real”, junte-se a nós em uma divertida jornada de aprendizados, repleta de novos conhecimentos e de muita diversão!

Filmando o consultório

Ao configurarmos a estrutura básica do menu inicial de nosso jogo, propositalmente deixamos o fundo do menu na cor cinza, visando facilitar a visualização das estruturas posicionadas via aba Scene. Agora que já temos os elementos iniciais do menu posicionados, vamos modificar o fundo para que seja apresentada em tela uma “vista panorâmica” do consultório onde serão realizados os procedimentos médicos mais loucos do mundo virtual, por meio de rotação contínua da câmera em torno de seu eixo Y.

Para que essa visualização seja exibida adequadamente, será necessário configurarmos alguns elementos adicionais à cena principal do projeto. Vamos começar a introduzir esses elementos abrindo o projeto para edição: no Unity Hub, clique duas vezes sobre o item referente a ele. 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 Cameras. No menu suspenso apresentado, selecione a opção Camera, conforme exemplificado pela imagem a seguir:

Nomeie o novo objeto criado como “CameraMenuInicial”. Em seguida, selecione-o e, via aba Inspector, altere os seguintes valores dos atributos de seu componente Transform:

• Position X = 4, Y = 7, Z = 8;
• Rotation X, Y e Z = 0;
• Scale X, Y e Z = 1.

Ainda com CameraMenuInicial em evidência, remova o componente Audio Listener que está atrelado ao GameObject, clicando com o botão direito sobre o elemento da aba Inspector e selecionando a opção Remove Component.

Com a câmera devidamente posicionada aproximadamente ao centro do consultório, vamos iniciar a configuração da animação que permitirá a câmera realizar rotações continuamente.

Embora, nesses casos, o ideal seja a utilização de um componente do tipo Animator, que permite uma configuração avançada da animação a ser aplicada ao objeto, como se trata de uma intervenção bem simples, vamos adicionar o componente legado Animation ao GameObject, criando em seguida uma animação que concretize a rotação em 360 graus do objeto.

Um giro “da pesada”

Com CameraMenuInicial selecionado, via aba Inspector insira um novo componente de tipo tipo Animator ao objeto, por intermédio do botão Add Component.

Em seguida, já com o componente adicionado e ainda com CameraMenuInicial selecionado, clique no menu Window, em seguida selecione o submenu Animation e, por fim, a opção Animation, conforme ilustrado a seguir.

Por intermédio do da nova aba Animation, iremos criar um novo arquivo em nosso projeto, armazenando nele as informações a respeito da animação pretendida para a câmera. Clique no botão Create, no centro da aba Animation, para prosseguirmos com o processo.

Na janela de salvamento que for exibida, acesse a pasta Assets, Multimedia, 3D e, por fim, Animacoes. Conceda o nome “animGirando360.anim” ao arquivo e salve-o na pasta selecionada.

De volta à aba Animation, iremos informar ao sistema de animações do Unity qual atributo sofrerá alterações durante sua execução. Clique no botão Add Property e, diante das opções apresentadas, clique na seta ao lado de Transform e, em seguida, no sinal de mais (+) ao lado de Rotation.

O primeiro passo envolvera nos certificarmos de que a rotação inicial no eixo Y para o objeto CameraMenuInicial será igual a zero. Para tal, no campo destacado em laranja na imagem a seguir, digite o número zero e, em seguida, conceda o valor zero (caso ainda não esteja dessa forma) ao campo correspondente ao atributo Rotation.y.

Em seguida, altere o valor do campo destacado em laranja para 60, para avançarmos ao último frame da animação. Em seguida, conceda o valor 360 ao campo correspondente ao atributo Rotation.y.

Por padrão, animações envolvendo mudança de valores de parâmetros são realizados de forma suavizada pelo Unity, sendo iniciadas e finalizadas de forma desacelerada. Em nosso caso concreto não desejamos essa suavização, visto que a rotação da câmera será contínua até que o jogador resolva iniciar a aventura. Para tal, informaremos ao Unity que se trata de uma mudança linear de valores entre atributos.

Para corrigir essa suavização, vamos realizar alterações no comportamento dos dois pontos temporais de nossa animação (início e final). Altere o valor do campo destacado em laranja para 0, para voltarmos ao início da animação, clique com o botão direito sobre o losango destacado em roxo e, no menu suspenso apresentado, selecione a opção Both Tangents e, em seguida, Linear.

Volte a alterar o valor do campo destacado em laranja para 60, visando avançarmos ao final da animação. Clique com o botão direito sobre o losango destacado em roxo e, no menu suspenso apresentado, selecione a opção Both Tangents e, em seguida, Linear.

Para se certificar de que os valores de Rotation.y serão modificados linearmente, experimente alterar o valor do campo destacado em laranja para 15. Veja se o valor de Rotation.y é apresentado como sendo igual a 90. Repita a operação, observando na posição 45 se o valor de Rotation.y será apresentado como 270.

Por fim, feche a aba Animation. Na aba Project, vá até a pasta em que a animação está armazenada (Animacoes) e clique sobre o ícone de animGirando360. Na aba Inspector, modifique o valor do parâmetro Wrap Mode para Loop, fazendo com que o Unity entenda que a animação deverá ser executada repetidamente.

Na aba Hierarchy, selecione o objeto CameraMenuInicial. Na aba Inspector, conceda o valor correspondente à animação animGirando360 ao atributo Animation de seu componente Animation, conforme exemplificado a seguir:

Como a primeira câmera a exibir imagens durante a execução do jogo será a correspondente ao menu inicial, selecione CameraPosInicialPaciente e o desabilite, por intermédio da opção presente na aba Inspector.

para vermos como essa animação está ficando em nosso projeto, experimente desabilitar temporariamente o GameObject MenuInicial (subordinado a Canvas), vá até a aba Game e pressione o botão Play. Garanto que irá se surpreender, mas não necessariamente de forma positiva:

Definitivamente, podemos afirmar que a câmera está girando (e muito!). Além de ser necessário corrigirmos a velocidade da execução da animação, precisamos ajustar parâmetros no projeto para que o primeiro paciente entre em cena apenas após o jogador acionar o botão correspondente ao início da partida.

Interrompa a simulação da execução, antes que a labirintite te ataque (risos), clicando novamente sobre o ícone do botão Play e retornando à aba Scene. Antes de salvar a cena e o projeto, dessa vez, não se esqueça de reativar, via aba Inspector, o objeto MenuInicial, para que possamos realizar intervenções nele em nossos próximos encontros.

Próximos passos

Embora nosso projeto esteja, temporariamente, em um estado de “altas rotações”, conseguimos avançar bem na elaboração do fundo dinâmico do menu inicial do jogo.

Em nosso próximo encontro corrigiremos a velocidade da animação atrelada ao objeto CameraMenuInicial, por meio da elaboração de um pequeno script. Além disso, iremos codificar ajustes importantes para que o menu, de fato, já esteja parcialmente funcional ao término das próximas intervenções.

Nosso próximo encontro será no dia 5 de abril. Até mais! Fique sempre ligado nas novidades do GameBlast!

Revisão: Ives Boitano