GameDev

Aprendendo a programar jogos em Unity: Introdução ao sistema de animações 2D com sprites

Vamos conhecer as ferramentas de animação de objetos que o Unity nos oferece e os atributos que podem ser alterados.

Seja bem-vindo(a) ao GameDev: Aprendendo a programar jogos em Unity de hoje! Dando sequência ao processo de desenvolvimento de nosso primeiro platformer 2D, conheceremos mais sobre as funcionalidades oferecidas pelo Unity para a criação e aplicação de animações envolvendo os elementos bidimensionais do game.


Caso esta seja a primeira vez que você acessa nossa série, sinta-se convidado a juntar-se a nós para aprendermos, juntos, conteúdos interessantes sobre o desenvolvimento de jogos. A partir do primeiro tópico, você poderá conhecer mais sobre como é desenvolvido um game utilizando a plataforma Unity e irá, colocando a “mão na massa”, elaborar divertidos e desafiadores projetos de gêneros e estilos diversos.

Nossa série é elaborada de forma a permitir, por meio de exemplos e projetos, que você possa criar “do zero” os games que sempre sonhou em tirar do papel. No momento, estamos elaborando o platformer 2D Motorista da Pesada, jogo cujo objetivo proposto ao jogador é a coleta, no menor tempo possível, de caixas de presente espalhadas pelos cenários, utilizando-se para isso de um simpático carrinho, que deverá ser guiado pelos diversos caminhos das fases, tomando muito cuidado com as perigosas bombas que foram espalhadas pelo cenário.

No tópico anterior de nossa jornada aprendemos sobre o que são prefabs e como utilizá-los adequadamente, visando dar, ao programador, mais agilidade e rastreabilidade das alterações que podem ser realizadas em objetos inseridos em um game. Aproveitamos os novos conhecimentos adquiridos para converter alguns dos GameObjects de nosso jogo para prefabs, como os elementos dos menu e, até mesmo, o objeto de nosso personagem principal. Venha conosco e vamos juntos nesta jornada rumo a novos conhecimentos!

Dando vida a um game

Um dos fatores que pode aumentar o engajamento e imersão à aventura proposta em um jogo é o uso de animações em seus elementos gráficos, personagens, itens e cenários.

Em geral, o uso de animações consegue "dar mais vida" a um game e, em conjunto com a utilização de recursos sonoros, aproxima mais o jogador dos desafios propostos, trazendo emoção e tornando aquele momento em questão, por vezes, inesquecível.


As animações em um game podem ser realizadas de diferentes formas, tais como por meio de alterações periódicas dos sprites de objetos bidimensionais, realização de movimentos e rotações de componentes presentes em objetos 2D ou 3D, alteração da coloração ou brilho de um elemento da cena, dentre outras.

O Unity, por meio de suas ferramentas de animação, permite realizar diversas alterações nos parâmetros dos componentes de um GameObject dinamicamente, fazendo com que possamos animar da forma que desejarmos os elementos de nossos projetos.

Em Motorista da Pesada inserimos alguns itens que, por si só, já estão apresentando comportamentos bem “dinâmicos”, como as plataformas, o carrinho e o fundo. Portanto, vamos começar a aprender mais sobre as funcionalidades de animação aplicando-as sobre outros elementos que também são bem importantes mas que andam meio “parados”, sem muito destaque visual em nossas cenas; no caso, nossos itens coletáveis (bombinhas e presentes).

Vamos então colocar a mão na massa: abra o Unity Hub e clique duas vezes sobre o item referente ao projeto Motorista da Pesada. Na interface inicial do Unity, na aba Project, abra a pasta Assets, Scenes e, por fim, clique duas vezes no ícone da cena Fase01.

Assim como vimos ao estudar sobre prefabs, as ferramentas de animação do Unity também utilizam arquivos na estrutura (pastas) do projeto para salvar as informações sobre os elementos que irão ser animados. Dessa forma, para organizarmos melhor os arquivos que serão gerados, vamos criar uma nova pasta.

Na aba Project, clique duas vezes sobre a pasta Assets e, logo após, abra a pasta Multimidia. Clique com o botão direito sobre alguma área vazia da janela que apresenta o conteúdo da pasta em questão e, no menu suspenso, clique em Create e, em seguida, Folder, conforme exemplo a seguir:

O nome de nossa nova pasta será “Animacoes”, sem as aspas. Clique duas vezes sobre seu ícone para abrir a nova pasta vazia.

Começaremos a animar nossos coletáveis pelas bombinhas. Na aba Hierarchy, selecione o GameObject Bombinha01, subordinado ao objeto Itens. Feito isso, abra o menu Window, submenu Animation e, por fim, selecione o item Animation, conforme exemplo a seguir:

Uma nova janela, de nome Animation, será exibida. Será nessa janela que realizaremos indicações ao Unity sobre qual tipo de animação aplicaremos às bombinhas. Clique sobre o botão Create para criarmos os arquivos correspondentes à animação:

Dentro da pasta Animacoes, dê o nome ao arquivo de “AnimacaoBombinha”, sem as aspas, e clique em Salvar.

Perceba que, dentro da estrutura da pasta Animacoes, foram criados dois arquivos: um de nome "AnimacaoBombinha.anim", que armazenará as informações sobre a animação criada, e outro de nome "Bombinha01.controller", cujo papel será detalhado mais adiante, ainda neste texto.

Por hora, vamos editar a nossa animação propriamente dita. Na aba Hierarchy, volte a selecionar o objeto Bombinha01 e, na janela Animation, clique sobre o botão Add Property.

Os recursos de animação do Unity permitem alterar diversos parâmetros dos componentes de um GameObject. No momento, realizaremos alterações na propriedade Sprite do elemento Sprite Renderer de nossas bombinhas.

No menu suspenso que for apresentado, selecione a opção Sprite Renderer e, em seguida, Sprite, clicando no símbolo de mais (+) ao lado da opção, conforme exemplo a seguir:

Clique ao lado da seta indicada em verde na imagem a seguir para exibir, na linha do tempo da animação, as imagens das bombinhas em destaque:

Por padrão, ao se criar uma nova animação com sprites via ferramenta Animation do Unity, é apresentada na interface uma linha do tempo contendo dois losangos, um na posição temporal 0:00 (zero segundo) e outro na posição 1:00 (um segundo), como destacado na imagem a seguir. Esses losangos representam modificações que serão realizadas em algum atributo dos componentes de um GameObject; no contexto atual, representam os momentos em que o sprite do elemento Sprite Renderer do GameObject será alterado.

O tempo total (um segundo) pode ser alterado, mas não iremos fazê-lo agora, pois, por padrão, ao término da execução da animação, ela será repetida, e é isso o que estamos querendo no momento.

Inicialmente, ambos losangos representam o mesmo sprite (o “original”, do Sprite Renderer em questão), ou seja, ainda não está sendo realizada nenhuma alteração. Introduziremos agora nessa linha temporal “losangos” novos representando sprites diferentes para que, no decorrer de um segundo, sejam realizadas modificações visuais no elemento, visando criar uma animação de fato.

Na aba Project, abra a pasta Assets, Multimidia e, por fim, Imagens. Selecione o item que representa a imagem de nome “bombinha_B.png”. Clique e arraste o item para dentro da janela Animation, posicionando-o na linha do tempo na posição (0:20).

Faça o mesmo com o item que representa a imagem de nome “bombinha_C.png”, posicionando-o na linha do tempo na posição (0:40):

Por fim, feche a janela Animation e, na janela principal do Unity, teste a execução do jogo, indo à aba Game e pressionando o botão Play:

Chegue perto da bombinha que estamos editando e perceba que agora há uma discreta animação, com seu pavio aparentando estar pegando fogo, conforme imagem a seguir demonstra melhor:

Interrompa a simulação do game, pressionando novamente o botão Play e retornando à aba Scene.

Animation Controller

Na aba Hierarchy da janela principal do Unity, selecione novamente o GameObject Bombinha01. Observe, no final da aba Inspector, que um componente do tipo Animator foi adicionado automaticamente ao objeto; essa ação foi realizada pelo Unity no momento em que criamos a animação para o objeto, via janela Animation.

Você se lembra de que, ao iniciarmos a criação da animação via janela Animation, foram salvos dois arquivos na pasta Animacoes, um com extensão “.anim” e outro com extensão “.controller”? O elemento Animator, adicionado automaticamente em nosso GameObject, irá interagir diretamente com o controlador em questão.

O arquivo de extensão ".controller" é um elemento do tipo Animation Controller, responsável por intermediar a relação entre os objetos de nossa cena e a animação, permitindo, inclusive, sua posterior reutilização para outros objetos na cena.

Além disso, veremos mais adiante em outros projetos que Animation Controllers permitem a um objeto transitar entre diferentes animações, dependendo de seu estado corrente. Por exemplo, um personagem tridimensional pode adotar uma animação para os momentos em que estiver parado, outra para quando estiver andando, outra nos momentos em que estiver correndo… são inúmeras as possibilidades.


Vamos clicar duas vezes sobre o elemento Bombinha01, referenciado pelo parâmetro Controller do componente Animator.

Uma nova aba será apresentada na janela principal do Unity, de nome Animator. Trata-se da interface de controle para elementos do tipo Animation Controller.

Os retângulos coloridos apresentados pelo Unity representam animações ou estados, e a transição entre eles é representado por setas, conforme ilustrado a seguir:

Como estamos utilizando uma animação bem simples e que irá ser executada continuamente (o “acender” do pavio da bombinha), após o estado Entry (início da execução da animação, representado pelo retângulo em verde) ele simplesmente irá executar a animação AnimacaoBombinha (representado pelo retângulo em laranja) continuamente.

Clique sobre o retângulo que representa AnimacaoBombinha para que possamos realizar alterações em alguns de seus atributos sem alterar diretamente a animação que criamos anteriormente. A aba Inspector irá exibir alguns desses atributos:

Um dos atributos que pode ser alterado é a velocidade de execução, representada pelo atributo Speed. Se mantido com o valor 1, o ciclo total da animação que criamos anteriormente (as transições entre os sprites) levará um segundo, conforme planejamos inicialmente. Já se colocarmos um valor maior do que 1, a animação será executada mais rapidamente; conceda o valor 2 ao atributo Speed para dobrarmos a velocidade da animação:


Feito isso, clique com o botão direito sobre a aba Animator e selecione a opção Close Tab.

Vá até a aba Game e pressione o botão Play para observar que a animação, agora, será realizada de forma mais rápida, conforme exemplo a seguir:

Interrompa a simulação de execução e retorne à aba Scene para aplicarmos a animação que criamos a mais elementos, além da primeira bombinha.

Prefab de um explosivo

Aproveitando-se de uma das principais vantagens da ferramenta que aprendemos em nosso encontro anterior, criaremos agora um novo prefab baseado no GameObject da primeira bombinha. Dessa forma, sem muito esforço, poderemos substituir as demais bombinhas de nossa fase por versões mais “explosivas” e animadas.

Na aba Project, abra a pasta Assets e, em seguida, Prefabs. Na aba Hierarchy, selecione o GameObject Bombinha01, clique e arraste o item em direção à área da pasta aberta na aba Project. Dessa forma, criaremos o prefab Bombinha01, conforme exemplificado na imagem a seguir:

Nesse primeiro momento, alguns alertas do Unity (como o descrito na imagem a seguir) podem aparecer, mas não irão impactar na execução de nosso jogo; desconsidere-os por enquanto.

Agora, vamos substituir as versões sem animação das bombinhas por versões baseadas no novo prefab. Clique e arraste o ícone do prefab Bombinha01, da aba Project, em direção à aba Hierarchy, logo abaixo do GameObject Bombinha01, para que os novos elementos criados também sejam subordinados ao objeto Itens. Repita a operação mais uma vez; serão criados dois novos objetos de nomes “Bombinha01 (1)” e “Bombinha01 (2)”, sem as aspas.

Na aba Hierarchy, selecione o GameObject Bombinha02. Na aba Inspector, clique com o botão direito sobre seu Transform e, no menu suspenso, selecione a opção Copy Component. Dessa forma, iremos passar para a memória temporariamente todas as informações de posicionamento, rotação e escala do objeto em questão.

Selecione agora o objeto Bombinha01 (1) e, na aba Inspector, clique com o botão direito sobre seu Transform e selecione a opção Paste Component Values. O objeto baseado em prefab terá, agora, os mesmos valores de posicionamento de Bombinha02.

Repita as duas últimas operações, dessa vez copiando o componente Transform de Bombinha03 e colando os valores no Transform de Bombinha01 (2).

Na aba Hierarchy, selecione Bombinha02 e Bombinha03, clique com o botão direito sobre a seleção e escolha a opção Delete.


Renomeie os objetos derivados do prefab (selecionando-os, clicando com o botão direito e escolhendo a opção Rename) conforme lista abaixo:
  • De: Bombinha01 (1) / Para: Bombinha02; e
  • De: Bombinha01 (2) / Para: Bombinha03.
Por fim, vamos simular a execução do jogo (aba Game, botão Play) para observar todas as bombinhas da fase posicionadas corretamente e com animações ativas para cada objeto:

Não se esqueça de interromper a execução, clicando novamente no botão Play. Salve a cena (menu File, Save) e o projeto (menu File, Save Project) antes de fechar o Unity.

Próximos passos

Hoje realizamos nosso primeiro contato com o sistema de animações do Unity. Criamos uma animação simples, baseada em troca de sprites, que fez nossos explosivos aparentarem ser bombas mais “realistas”, com o pavio em chamas, prestes a explodir. Além disso, conhecemos superficialmente um Animation Controller e sua atuação como “meio de campo” entre a animação propriamente dita e o objeto a ser animado.

Como pudemos perceber, são diversos os atributos dos componentes de um GameObject que podem ser alterados por uma animação. Aproveitando-se dessa característica, em nosso próximo encontro iremos criar animações para nossas caixas de presente mas, dessa vez, envolvendo outros aspectos que não a troca de sprites

A cada melhoria aplicada, estamos mais próximos de finalizar nossa primeira fase e, consequentemente, preparando-nos para elaborar as próximas, finalizando nosso game. Parabéns pelo progresso até aqui!

Nosso próximo texto já encontra-se disponível, continue conosco nessa jornada de conhecimento e fique ligado sempre aqui no GameBlast!

Revisão: Vitor Tibério

Entendo videogames como sendo uma expressão de arte e lazer e, também, como uma impactante ferramenta de educação. No momento, doutorando em Sistemas da Informação pela EACH-USP, desenvolvendo jogos e sistemas desde 2020. Se quiser bater um papo comigo, nas redes sociais procure por @RodrigoGPontes.
Este texto não representa a opinião do GameBlast. Somos uma comunidade de gamers aberta às visões e experiências de cada autor. Escrevemos sob a licença Creative Commons BY-SA 3.0 - você pode usar e compartilhar este conteúdo desde que credite o autor e veículo original.


Disqus
Facebook
Google