Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Game Development
  2. Unity
Gamedevelopment

Introdução à animação 2D baseada em ossos com Unity

Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Bone-Based Unity 2D Animation.
Bone-Based Unity 2D Animation: Creating the Actual Animations

Portuguese (Português) translation by Jonathan Ramos (you can also view the original English article)

Neste tutorial, vamos focar nas ferramentas de animação 2D baseada em ossos fornecidas pela engine Unity. A ideia principal é apresentar e ensinar os fundamentos da animação 2D para você possa aplicar em seus próprios jogos. Neste post, nós vamos configurar o projeto, definir os assets e fazer os preparativos iniciais para a animação.

Antes de começar o tutorial, gostariamos de agradecer à Chenguang (DragonBonesTeam) por fornecer-nos a arte usada para produzir esta série de tutoriais.

Para quem é este tutorial?

Este tutorial destina-se principalmente a dois grupos de desenvolvedores de jogos:

  • Aqueles que não estão nem um pouco familiarizados com Unity.
  • Aqueles que estão familiarizados com Unity, mas não com as ferramentas 2D.

Supomos que você tenha algumas habilidades de programação, então não explicaremos o código a fundo. Para seguir este tutorial, você certamente vai precisar baixar a Unity.

Para começar a usar rapidamente a Unity, siga nosso tutorial anterior que apresenta o ambiente 2D da Unity, suas ferramentas e características. É altamente recomendável que você faça isso se você não estiver familiarizado com a Unity.

Resultado final

Esta demonstração mostra o dragão animado que queremos fazer:

Configuração do projeto

Abra a Unity e crie um novo projeto selecionando New Project... do menu File. O Project Wizard vai aparecer. Agora, crie um novo projeto 2D, seguido de uma nova pasta chamada Sprites (dentro do seu diretório Assets).

Agora que você tem a pasta do projeto organizada, é hora de importar os assets do jogo. Você pode encontrá-los na pasta Assets do repositório deste tutorial no GitHub. (Basta clicar em Download ZIP na última página se você não estiver familiarizado com o GitHub.) Observe que essa pasta inclui assets para a toda a série de tutoriais, portanto, há alguns que você não vai usar por enquanto.

Animação com ossos vs. atlas de sprites

Antes de continuarmos, compare as duas imagens seguintes:

Na primeira imagem, o dragão está dividido em várias partes do corpo (cabeça, corpo, braços e assim por diante). Na segunda, o ninja é mostrado em várias poses, com uma sequência de posições para ações diferentes. Isso permite que você imagine claramente como o avatar se moverá em seu jogo.

O sprite do ninja é o que chamamos sprite sheet (folha de sprite) ou sprite atlas. Este tipo de sprite foi muito popular nos jogos 2D clássicos, e ainda hoje são muito comuns.

O sprite do dragão requer uma técnica de animação 2D mais recente, normalmente chamada de animação baseada em ossos. Como o nome sugere, a animação terá um osso como base, onde cada osso do corpo pode ter uma ação específica ou animação. Ter todas as partes do corpo principal do personagem separadas permite que os desenvolvedores criem as animações diretamente na engine. Esta nova técnica de animação é muito semelhante ao que é usado em animação 3D.

Neste tutorial, vamos focar em animação baseada em ossos. No entanto, observe que a Unity não tem uma verdadeira animação baseada em ossos, então nós teremos que simular isso.

Preparando o sprite para a animação

Arraste o arquivo do sprite para o editor e solte-o na pasta Sprites, da seguinte forma:

Antes que qualquer personagem esteja pronto para a animação, você precisa adicionar uma Scene (cena) no projeto. Crie uma pasta Scenes no seu diretório Assets, em seguida, crie uma nova cena e salve-a como Test.scene dentro desta pasta. No final desta etapa, você deve ter algo parecido com isto:

Agora, ainda na guia Project, selecione o sprite dragon, então olhe para o painel Inspector:

Como você pode ver na propriedade Sprite Mode no Inspector, o Sprite Mode está definido como Single. Isto significa que a engine usará a textura inteira como um todo, ao criar um novo sprite. Como temos as partes do corpo separadas no arquivo dragon, não queremos que isso aconteça. Portanto, precisamos mudar o Sprite Mode de Single para Multiple.

Quando você altera essa opção, um novo botão com o nome Sprite Editor aparece:

Atualmente, a ferramenta de corte Sprite Editor não funciona bem em imagens comprimidas. Para garantir o melhor resultado para os sprites animados, você precisa alterar a opção padrão do campo Format na parte inferior da guia Inspector, de Compressed para Truecolor. Em seguida, clique em Apply.

Agora, selecione o sprite do dragão e clique no botão Sprite Editor. Uma nova janela irá aparecer:

No canto superior esquerdo da janela, você irá encontrar o botão Slice. Clique sobre ele, e um outro menu vai aparecer:

Este menu permite que você altere os parâmetros de como o sprite vai ser cortado pela engine. Se você definir o corte como Automatic, a engine tentará detectar as diferentes partes do personagem que tem na imagem. Você pode definir um tamanho mínimo para os pedaços, um pivô (o ponto em torno do qual giram os pedaços) e um dos três métodos:

  • Delete Existing irá substituir qualquer pedaço existente.
  • Smart vai tentar criar novos pedaços enquanto mantém ou ajusta os já existentes.
  • Safe irá adicionar novos pedaços sem modificar os já existentes.

Você também pode definir o parâmetro Type para Grid. Isto lhe dará outras opções:

No modo automático, você pode selecionar o ponto de pivô do sprite, mas você também tem uma opção para definir o tamanho do pixel. Esse valor determina a altura e largura dos pedaços em pixels.

Para esta imagem em particular, selecione o modo Automatic e aperte o botão Slice. O resultado deve ser semelhante a este:

Como você pode ver, o editor cortou as várias partes do sprite em retângulos diferentes. Estas são as peças que você vai usar para construir seu personagem. Como mencionado acima, esta não será uma animação com ossos perfeita, mas cada parte será animada separadamente.

Se você clicar duas vezes em um dos retângulos gerados, um painel pop-up será aberto com as propriedades dessa parte particular do sprite:

Você pode alterar o nome do sprite gerado, sua posição, seu tamanho e seu ponto de pivô. Você também pode alterar os valores de posição e tamanho, arrastando os pontos azuis nas vértices dos retângulos. O círculo azul no centro do retângulo selecionado indica o ponto de pivô.

Para esse sprite, é seguro deixar que a Unity crie os sprites individuais automaticamente. No entanto, em sprites mais complexos você pode precisar definir os sprites manualmente. Você pode fazer isso clicando e arrastando o botão esquerdo do mouse sobre a imagem para definir um retângulo.

Quando você soltar o botão do mouse, a Unity criará um sprite desse retângulo.

Você pode pressionar o botão Trim para ajustar o retângulo do sprite. Então, apenas repita este processo para todos os sprites que você deseja gerar.

Já que o modo automático funcionou muito bem para esta imagem, você não precisa definir os sprites manualmente.

Ajustando os pontos de pivô

A próxima coisa a fazer é ajustar os pontos de pivô sobre os vários sprites gerados. Esta etapa é muito importante para a animação.

Basicamente, você precisa arrastar o ponto de pivô para a área onde o sprite irá unir-se ao corpo principal. Por exemplo, você tem que mover o pivô da cabeça próximo à área do pescoço. Isto fará com que, quando você animar o personagem, todos os movimentos, por exemplo, as rotações, orientem-se em torno desse ponto, permitindo que o personagem se mova de forma realista. Se você deixasse os pontos de pivô em seus lugares originais, você acabaria com animações estranhas, pois o personagem não seria capaz de se mover de forma realista.

Imagine os pontos como as articulações de uma boneca. Para a boneca se mover, as articulações devem estar corretamente colocadas, certo? As mesmas regras se aplicam para os pontos de pivô.

Para mover o ponto de pivô, arraste o círculo azul no centro de cada sprite para o local correto (que é o ponto onde ele deve se conectar à parte do corpo principal). Na imagem a seguir você pode ver o pivô da cabeça no lugar correto:

A parte da cauda deve ficar assim:

Você pegou a ideia? Ótimo! Repita o processo para as partes restantes. (Você pode deixar o pivô da mancha negra no centro, explicaremos mais sobre isso na próxima seção.) Lembre-se, você quer uma animação de dragão, não uma animação de Frankenstein.

Quando você terminar, clique em Apply:

Se você der uma olhada rápida na pasta onde você colocou os sprites, você será capaz de ver que o sprite do dragão agora tem uma seta ao lado dele:

Pressione a seta e você poderá ver todas as peças que compõem o nosso dragão separadamente:

Montando o personagem

Agora que você tem seu personagem fatiado em sprites diferentes, você pode começar colocando os sprites na cena. Como o corpo do dragão é composto de várias partes, você precisa montar o personagem.

A primeira coisa a fazer é arrastar o ponto preto do sprite do dragão para a cena. Este objeto irá funcionar como um centro de massa para seu personagem. Mais tarde vamos dar mais atenção a isto, mas por enquanto, apenas saiba que essa é a base para o seu personagem.

Agora, pegue o corpo do dragão e coloque-o sobre o ponto preto, da seguinte forma:

Repita este processo até que tenha montado seu dragão. No final, ele deve ficar parecido com isto:

Você finalmente tem seu dragão pronto — mas, como você pode notar, parece estranho. Algumas partes que deviam estar sob o corpo estão sobre ele, ou vice-versa. Isso acontece porque nós adicionamos as partes dragão sem nenhuma ordem específica.

Antes de resolvermos esse problema, vamos transformar o sprite do dragão em um único objeto do jogo. Como você deve ter notado, neste momento, as várias partes do dragão funcionam como objetos individuais do jogo — você precisa agrupá-las em um único objeto antes de começar a animá-las.

A fim de agrupar corretamente todos os sprites, use o sprite com o ponto preto como o objeto principal do jogo; todas as outras partes do corpo devem ser agrupadas sob esse sprite. Basta arrastar um sprite em cima do outro dentro da guia Hierarchy para agrupá-los sob o ponto preto.

Na próxima imagem você pode ver como a hierarquia de sprites deve parecer depois que tiver agrupado os objetos do jogo.

Antes de continuarmos, renomeie seu objeto base para Dragon. Quando você mover o objeto Dragon, você poderá mover todas as peças do personagem na cena.

Mas e se você desejar mover apenas um único sprite? Por exemplo, se você deseja mover apenas a mão, sabe que o braço está ligado à mão, então, se você mover o braço a mão deve mover também, correto? Se você tentar fazer isso, você verá que não é o caso. Quando você seleciona o braço e move-o, as restantes partes do corpo não se mexem. Então, a fim de mover todas as partes do corpo, você precisa criar uma hierarquia dentro do seu sprite.

Para tornar este processo mais intuitivo, renomeie as partes do corpo com seus respectivos nomes (clique com o botão direito do mouse e selecione Rename), assim:

Em relação a hierarquia, pense no personagem como uma árvore, com raízes, um tronco e galhos. O ponto preto age como a raiz da árvore; Quando você move-o, todo o corpo do personagem se move. Após a raiz vem o tronco; neste caso, seu tronco será o corpo do personagem, então esse será o próximo sprite na hierarquia. Todas as outras partes do corpo são galhos da árvore. Entretanto, você pode ainda ter ramificações nos galhos, por exemplo, na cauda — a ponta da cauda é um ramo da cauda e assim por diante...

Organize os sprites de seu personagem seguindo essa hierarquia:

Agora, se você mover a parte superior do braço, todas as partes do braço seguirão. Ótimo, não é?

Re-ordenando os sprites

Antes de começar a animar o personagem, ainda há um último detalhe que precisamos cuidar. Como discutimos, as partes do sprite não estão na ordem correta. Para resolver isso, você deve alterar o valor do parâmetro Order in Layer para cada sprite.

Para certificar-se de que o tutorial seja bem sucedido, por favor, use os seguintes valores para cada sprite:

  • Dragon (dragão): 0
  • Body (corpo) : 3
  • Head (cabeça): 4
  • Left Leg (perna esquerda): 4
  • Left Upper Arm (braço superior esquerdo): 5
  • Left Arm (braço esquerdo): 4
  • Left Hand (mão esquerda): 5
  • Right Leg (perna direita): 1
  • Right Upper Arm (braço superior direito): 2
  • Right Arm (braço direito): 1
  • Right Hand (mão direita): 2
  • Tail (cauda): 4
  • Tail Tip (ponta da cauda): 5

No final, seu dragão deve ficar parecido com este:

Para terminar esta parte, apenas centralize seu personagem na tela. Para fazer isso, altere os valores de Transform para a posição central (0, 0, 0).

Até a próxima

Isto conclui a primeira parte da série. Agora você tem um personagem 2D com o sprite na ordem e hierarquia correta.

Se você tiver quaisquer perguntas ou comentários sobre o que abordamos até agora, sinta-se livre para deixar um comentário abaixo.

Referências

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.