Unity 2D parte 2: adicionando efeitos visuais ao seu jogo

Criando animações - Introdução

Nesse curso, a gente vai pegar o nosso projeto do Desafiando as Alturas e vai melhorá-lo. Então, a gente vai continuar aquele projeto do primeiro curso de Unity, onde a gente está fazendo um jogo 2D, e vai melhorá-lo, vai poli-lo. E vamos testar! Vamos ver o que a gente vai fazer esse curso.

Então, vamos jogar. Aqui, a gente vai ter o nosso avião, a gente vai adicionar uma animação para ele, porque nós temos que colocar o motor dele funcionando. Então, a gente vai ver como funciona as animações dentro da Unity. Outra coisa que a gente vai adicionar nesse curso são as partículas, então, essa ideia de fumaça saindo do avião. Essa fumaça saindo do motor dele são partículas, a gente vai ver como isso funciona dentro da Unity.

Outra coisa que a gente vai adicionar nesse curso, vai ser o nosso controle de dificuldade. Então, conforme a gente vai jogando, se eu sou um jogador habilidoso, eu vou ter mais desafios, eu vou girando, passando por obstáculos mais rápido. Então, a gente pode ver que eu tenho agora um obstáculo atrás do outro e a gente não tinha isso antes, eu tinha um obstáculo mais separado um do outro.

Então, a gente tem essa dificuldade de acordo com o tempo que eu jogo. Outra coisa a gente vai adicionar nesse curso é o recorde. Então, eu tenho a interface gráfica e a gente vai colocar um painel com o recorde para salvar quantos pontos o jogador mais habilidoso fez. Então, a gente tem o nosso recorde sendo salvo.

Então, a gente vai ver como funciona a persistência de dados, como salva as informações dentro do computador da pessoa que está jogando. Com o nosso recorde no lugar, quando estamos a adicionar isso, a gente vai adicionar uma recompensa também. Então, a gente vai colocar essas medalhas. Se você for muito bem, medalha de ouro. Se você for mais ou menos, medalha de prata. E se você for mal, medalha de bronze. Então, a gente tem uma recompensa para quem estiver jogando.

Outra coisa que a gente vai fazer, é melhorar a nossa interface gráfica. Por quê? Ela tem ficar responsiva, porque ela não pode depender do tamanho da nossa tela. Então, se eu sair e ativar a minha interface gráfica lá no Canvas... Então, vamos pegar a minha interface gráfica.

Aqui no Canvas, se eu diminuir ou aumentar o tamanho da minha tela de jogo, a minha interface agora vai responder. Então, a gente vai fazer isso, a gente vai deixar essa interface independente do tamanho da nossa tela, muito importante para jogos mobile, para quem quiser. Então, a gente vai fazer tudo isso neste curso e a gente vai aprender ainda mais sobre a Unity. Eu sou Ricardo Bugan e vou ser o instrutor neste curso.

Criando animações - Animando o avião

Então, a gente vai continuar o nosso projeto do Desafio nas Alturas, aquele protótipo que a gente terminou no primeiro curso dessa série. Então, a gente está fazendo um jogo inspirado no Flappy Bird.

E nesse meio tempo, entre a gente terminar aquele protótipo e agora esse curso, a gente distribuiu esse jogo para o resto da equipe. Então, o game designer, o artista, o músico... Todo mundo responsável por fazer esse jogo junto com a gente, para complementar o nosso trabalho de programação, jogou o jogo e deram os seus feedbacks.

Um dos feedbacks que a gente recebeu foi o da pessoa responsável pela arte. Ela falou: "Olha, quando eu desenhei o avião, quando a gente colocou o avião no nosso jogo, a gente pensou nisso, eu tinha colocado uma animação nele". Se você for na pasta de imagens, vai ver que a gente tem três imagens de avião: o avião 1, 2 e 3. E ela falou: "Se você for ver a hélice de cada imagem dessa está um pouco diferente, porque é uma animação da hélice girando".

Se você for pensar, sempre que tem um avião no ar, o motor dele está funcionando. No caso, o nosso motor é a hélice. Então, a hélice tem que estar girando, porque se a gente for no nosso jogo e der um play, a nossa hélice está parada, o tempo inteiro ela vai ficar parada. E não é isso o que a pessoa responsável pela arte quer, ela falou: "Olha, eu criei essa animação, e eu gostaria que ela fosse implementada". Então, a gente vai fazer isso.

Repara também que eu estou jogando, e a gente está com o áudio do jogo junto comigo. E a gente não está mexendo com o áudio agora, então, a gente não vai precisar usá-lo, a gente não vai precisar ficar atento ao áudio agora. Então, eu posso clicar aqui, no Mute Audio, esse botãozinho que vai fazer o meu som parar.

Então, todo o áudio do jogo vai estar com o volume zero, e a gente pode testar o nosso jogo sem ficar ouvindo o tempo inteiro a música ou os efeitos sonoros, porque a gente não está mexendo com o áudio agora.

Mas então, vamos lá colocar a nossa animação dentro do avião. Então, eu tenho as três imagens aqui, e como a gente vai fazer? Quem vai ter essa animação é o avião, então vamos selecioná-lo na minha hierarquia. E como a gente vai adicionar essa animação? A animação é o novo comportamento do meu avião.

Então, a gente vai ter um novo componente. Vamos lá embaixo no meu inspetor, clicar em Adicionar Componente (Add Component), e a gente vai adicionar um novo componente chamado Animator, que fica dentro da aba Miscellaneous.

Então, vamos lá? Adicionar Componente, Miscellaneous, Animator ,e aqui, eu tenho um novo componente, que é o meu Animator. O que esse componente faz? Ele vai controlar qual animação deve estar sendo executada naquele momento, porque o nosso avião pode ter mais de uma animação, ele vai ter a animação da hélice rodando, mas ele poderia ter mais animações.

E como esse Animator funciona? Ele vai precisar de um Controller, que é uma camada de abstração da Unity, onde a gente vai falar quais são as animações que pertencem a esse objeto. Porque um Animator controla qual animação deve ser executada, mas ele não tem essas animações, ele não é parte de informações, ele só tem a parte lógica. Quem tem as informações de quais animações pertencem ao componente, é esse Controller.

E como a gente cria um Controller? Vamos na pasta Assets, vamos clicar com o botão direito, Create, e a gente vai criar um novo Animator Controller. Então, esse Animator Controller é quem vai ter as informações, quais animações vão ser executadas para aquele objeto. Então, vamos criar um Animator Controller, e vamos chamá-lo de Aviao, já que ele é o Animator Controller do avião.

Então, ControllerAviao. Então, a gente tem esse ControllerAviao. E, vamos lá no nosso objeto aviao1 e a gente vai clicar e arrastar para atribuir o meu Animator Controller para o meu componente Animator.

0:03:34] Então, agora eu tenho já o componente que controla qual animação deve ser executada em cada momento, e eu tenho agora a camada de informações, quais animações pertencem a esse objeto. Então, como eu faço para editar tudo isso? Como eu faço para ver quais as animações pertencem ao meu avião nesse momento?

Eu vou abrir a minha janela de Animator. Então, eu vou em Window, e vamos abrir o nosso Animator. E a gente tem aqui uma janela chamada Animator. Então, você vê que ele uma nova aba, ficou aqui do lado da nossa Game, do nosso jogo, e esse é o meu Animator.

0:04:05] Então, aqui a gente tem as animações que pertencem ao meu avião. Só que não tem animação nenhuma. A gente tem a entrada, que é por onde o componente Animator vai acessar esse Controller, vai acessar essas informações. Mas a gente não tem nenhuma informação aqui mesmo. A gente precisa criar o nosso clipe de animação.

E para isso, a gente vai em outra janela. Então, eu venho em Window de novo e, dessa vez, eu não vou abrir o Animator que eu tenho aqui embaixo, eu vou abrir o Animation. Ou se você quiser, Ctrl + 6, e ele vai abrir uma outra janelinha, que é o nosso Animation. Eu vou deixá-la aqui embaixo junto com o nosso console. Então, a gente tem na parte de baixo da nossa tela, o nosso Animation, onde a gente vai criar o clipe de animação.

Então, dentro do clipe de animação, você tem: Para começar a animar o aviao1, o nosso objeto aviao1, crie um animation clip, um clipe de animação. Então, vamos clicar em Create, vamos criar um novo clipe de animação. Ele vai pedir a gente salvar isso, então, a gente vai salvá-lo como animacaoAviao.

Então, a gente tem a nossa animação do avião aqui. E você vê que o Animator, aquela janela que tem as informações já criou o nosso animacaoAviao, então, agora ele já sabe que existe esse clipe animação dentro do nosso aviao1.

Então, a gente tem a camada de informações que vai ser passada para o nosso componente Animator, e a gente tem a animação em si. Se eu abrir essa aba um pouco mais, a gente tem a barra de edição da nossa animação.

E como a gente vai editá-la? A gente precisa selecionar qual propriedade do avião a gente vai animar, porque se eu clicar nele aqui, a gente vai ver que tem vários componentes, e eu posso animar, eu posso alterar qualquer uma das propriedades desses componentes, qualquer uma dessas propriedades são públicas.

Então, se eu vier em Adicionar Propriedade, em Add Property, a gente vai ver que tem Transform, Sprite Renderer, Rigidbody, o nosso próprio script do avião e o Circle Collider, qualquer um desses é passível de animação. O que a gente quer é mudar a imagem do nosso avião, e quem faz isso? Quem faz isso é o Sprite Renderer. Então, a gente vai selecioná-lo, e a gente quer mudar o Sprite, então, a gente vai selecionar essa propriedade: Sprite.

Então, agora a gente dá dois cliques... Por que ele não foi? Ah, ele não é dois cliques, desculpa. Você clica no + aqui do lado. Vamos clicar no +, e ele adiciona para a gente o nosso Sprite Renderer. E como a gente vai animar, de fato, o avião? Vamos voltar para a nossa cena, a gente tem o avião aqui, e eu tenho a minha timeline, essa barra com o tempo. Então, 0, 0.5, 0.1... Toda essa barra de animação funciona em relação ao tempo.

Então, eu tenho no primeiro frame a imagem 1 que já está. E eu quero depois de 0.5 segundos mudar essa animação, colocar uma nova. Para isso, a gente vai entrar no modo de gravação da minha janela de Animation, que é esse botão vermelhinho, como se fosse o Rec, de câmera mesmo.

Então, você clica nele e você vê que ficou vermelha a minha timeline. Então, ele está em gravação, ele está querendo gravar. E, se a gente ver aqui, o nosso Sprite Renderer também está vermelho porque a gente está em modo de gravação.

Então, tudo o que a gente alterar nessa propriedade, ele vai gravar, e ele vai criar novos quadro-chave, que ele chama. Então, como a gente vai posicionar a minha timeline? Então, eu tenho essa barra branca que vai me falar qual é o tempo atual, qual é o tempo que eu estou editando... Vamos colocar em 0.5, vamos clicar na bolinha aqui do lado do Sprite... A gente abre ela, e esse segundo frame, vai ser o frame do aviao 2.

Então, eu vou clicar no aviao 2. Veja que na timeline, ele já criou outra bolinha, então, agora ele já tem um novo quadro-chave. Cada losângulo desse é um quadro-chave. E se a gente vier aqui, se eu andar na minha timeline, a gente pode ver que a imagem do avião dentro da minha cena já está alterando. Então, 1, 2, 1, 2. E agora, a gente pode adicionar o terceiro quadro-chave.

Então, vamos lá em 0.1 ou 0:10, aqui na nossa timeline, e vamos clicar na bolinha de novo para selecionar um novo Sprite e, dessa vez, a gente vai querer o Sprite 3. Então, a gente vai ter o Sprite 3 rodando e a gente já tem nossa hélice já sendo animada.

Como a gente já adicionou os nossos três Sprites, a gente já terminou de gravar, vamos sair do modo de gravação. Então, clicar de novo naquela bolinha vermelha, sair do modo de gravação, ela deixou de ficar vermelha, a minha timeline, deixou de ficar vermelho, o meu Sprite...

E agora, a gente pode dar um play. A gente clica no play do lado da animação e vê ela rodando. Então, se a gente der um play, ele está executando. Só que repare que quando a gente criou a animação, quando a gente adicionou o nosso Sprite, ele criou um quadro-chave aqui no final, lá perto do segundo. E esse quadro-chave perto do segundo acaba deixando a animação muito ligeira?, ela tem que rodar até o final para voltar.

Então, vamos deletá-lo. Então, eu vou selecionar, clicar e arrastar para selecionar, apertar Delete... E agora sim, a gente tem uma animação rodando só naqueles três quadros que a gente criou. E a gente pode ver que já dá essa impressão de movimento. Se a gente afastar um pouco a nossa cena, já tem a impressão de movimento do nosso avião.

Então, com isso feito, vamos tirar o play, vamos salvar a nossa cena e vamos dar um play no jogo em si e ver com isso ficou no jogo. Vamos aumentar a minha cena, vamos voltar para o console, aumentar a minha cena e dar o play. Vamos ver como isso ficou. E aqui, eu tenho o nosso avião já rodando em looping.

Então, a gente tem a nossa animação sendo criada. A animação que a artista criou para a gente já foi implementada no jogo. Então, lembrando, retomando... Como a gente fez isso?

A gente adicionou o componente Animator, que é quem controla qual animação está sendo executada, a gente criou um Controller do avião... Então, se eu der dois cliques, a gente tem o nosso Controller, a nossa camada de informação, quais são as animações que pertencem ao avião. Então, a gente tem a animação do avião, que é um clipe de animação.

Então, a gente vem no nosso Animation, que a gente criou o clipe de animação. Tudo isso para fazer uma animação da nossa hélice rodando como a gente queria.

Criando animações - Animando mais facilmente

Agora, a gente já tem o nosso avião com a hélice rodando. Então, a gente dá o play no jogo e a gente tem um avião com a hélice girando o tempo inteiro já em looping, a animação já veio para o padrão em looping e a gente pode jogar.

Então, a gente aumentou a sensação de movimento, o avião sempre que está no ar, sempre está andando e a hélice dele girando. Então, a gente aumentou essa sensação de movimento para o nosso avião. Mas a gente pode usar aquele recurso de animação para outras coisas.

Por exemplo, a gente não tem nada no nosso jogo que indique para o jogador o que ele tem que fazer. Ou seja, ele vai ver o jogo pela primeira vez, ele pode pensar que ele precisa apertar? espaço para começar o jogo, para jogar o avião para cima.

Ele não, necessariamente, vai clicar, não é uma coisa intuitiva, ele não vai saber. Então, a gente pode usar imagens que foram criadas para a gente, para criar uma dica, um efeito visual que dê essa dica do que o avião tem que fazer, do que o jogador tem que fazer. Então, se a gente for na nossa pasta de Imagens, eu tenho a mão piscando... Então, eu tenho a mao1 e a mao2, a mão sem nada e a mão com aquela intenção de clique, com esse efeito de piscando.

Como é uma mão, a gente já associa com o mouse e consegue usar isso para fazer uma animação, essa dica de animação. Mas eu vou ter que criar todo aquele processo de novo? Eu vou ter que vir aqui, criar um objeto, adicionar um Animator, fazer um Animator Controller, criar a animação, ajustar os quadros de animação...

Tudo isso para conseguir fazer a minha animação? Essa é uma maneira que a gente fez, a gente fez isso no avião, mas essa não é a única maneira de criar uma animação na Unity. Por quê?

No avião, a gente já tinha o objeto criado, a gente começou a criá-lo e não tinha animação nenhuma e a gente quis adicionar uma animação. Mas a gente está querendo agora criar um objeto do zero, esse objeto não existe. A gente não tem nenhum objeto com a imagem da mão, ele não tem nenhum comportamento ainda. Então, a gente pode já criar esse objeto de uma vez com animação.

Se eu selecionar a imagem da mao1, segurar o Ctrl e selecionar a mao2, então, agora eu tenho duas imagens selecionadas... Se eu trouxer elas para a cena, a gente vai ver que a Unity já traz para mim uma janela para salvarmos alguma coisa. E o que ele está querendo salvar? Se lermos aqui em cima, ele está falando: Criar uma nova animação. Ou seja, eu selecionei as duas imagens e a Unity já entendeu que eu quero criar um objeto com uma animação dessas duas imagens.

Já que essa mãozinha está piscando, que ela vai indicar para o jogador o que tem ele tem que fazer, vamos chamar a animação dele de MaoPiscando, e a gente salva. Você vê que ele já criou o nosso MaoPiscando e o nosso mao2, o Animator Controller. Então, se eu clicar duas vezes nesse Animator Controller, nesse objeto aqui, ele já traz a nossa MaoPiscando, a camada de informações com as informações de quais animações pertencem à mão.

E nossa mão, se eu vier aqui na mao2, que ele criou para mim, que ele pegou o nome da imagem mao2, ele vai ter já um objeto com o Sprite Renderer, com o Transform e com o Animator, já configurado. Então, se eu voltar na minha cena, a gente tem a nossa mão, ela está aqui embaixo e, ela está lá atrás, a gente não está vendo ela pela frente do nosso nosso fundo. Então, a gente vai ter que mudar a ordem na camada dela.

Então, vamos colocar ela está mais para frente. Então, dez camadas para frente do nosso fundo. Então agora, a gente já tem a mão na nossa cena. Mas ela está um pouco pequena, então vamos aumentá-la. Vamos selecionar a nossa escala, essa ferramenta de escala fica ali em cima, e vamos clicar e arrastar para aumentar a nossa mão. E agora, a gente pode dar um play e ver que a gente tem agora a mão piscando loucamente.

Então, a gente já criou uma animação muito mais fácil, um jeito muito mais prático de criar animação do que todo aquele processo de adicionar um Animator, criar um Animator Controller e fazer a nossa animação naquela timeline, na janela de animação.

No fundo, a Unity fez tudo isso para a gente, mas se ela faz de maneira automática fica muito mais fácil. Então, a gente agora tem duas maneiras de criar animações, aquela que a gente viu no avião, um pouco mais trabalhosa, mas se você já tem um objeto criado e que você não quer recolocar todos componentes, ajustar todos os parâmetros de novo, você pode fazer daquele jeito...

Ou se você já tem um objeto que você sabe que vai ter animação, você já seleciona uma das animações dele, traz para a cena e ele já vai adicionar todo o Animator Controller, Sprite, a Animation e o componente Animator para a gente. Então, é muito mais fácil de animação desse jeito.

Sobre o curso Unity 2D parte 2: adicionando efeitos visuais ao seu jogo

O curso Unity 2D parte 2: adicionando efeitos visuais ao seu jogo possui 142 minutos de vídeos, em um total de 47 atividades. Gostou? Conheça nossos outros cursos de Jogos em Programação, ou leia nossos artigos de Programação.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Criando animações
• Salvando recordes
• Adicionando partículas
• Controlando a dificuldade
• Polindo o jogo