Os 12 Princípios da Animação

Você com certeza já assistiu alguma animação 2D dos estúdios Walt Disney, e obviamente ficou encantado com a qualidade e imersão que esses filmes nos proporcionam. É unânime, animações da Disney são reconhecidas à quilômetros de distância, seja pela narrativa envolvente, pelas tramas divertidas, pelos temas criativos e também (e um dos motivos desse artigo) o visual e qualidade das animações. Quando eu digo qualidade de animação eu não me refiro necessariamente à imagem colorida e HD, me refiro muito mais ao conforto visual, aquela animação que é gostosa de olhar. Tal sentimento é totalmente predefinido em 12 princípios básicos que os animadores do estúdio utilizavam – e ainda utilizam – para trazer um outro nível de qualidade para as animações. E se engana muito quem acha que esses princípios não se aplicam à jogos. Apenas lhes digo uma palavra: Cuphead.

Sem delongas ( Quem é esse tal de delongas? Hahaha), vamos aos princípios!

1. Comprimir e Esticar (Squash and Stretch)

Já posso adiantar que este é um dos conceitos mais importantes (se não o mais). Literalmente falando, ele se trata da figura se achatar, comprimir, esticar, entre outras deformações durante uma ação, afinal, nada é tão sólido que não seja deformável (a não ser que você esteja animando algo de adamantium, mas aí também existem alguns conceitos pra isso haha). Tal conceito é usado para enfatizar a movimentação da figura, deixá-la muito mais dinâmica e “delicinha” de se ver, como podemos notar no primeiro exemplo:
 

Veja como a primeira bolinha aparenta ser mais sólida, pois não tem nenhuma deformidade ao quicar no chão. Já o segundo exemplo com o conceito aplicado, podemos perceber que ela se estica no ar e se achata quando cai no chão. O ato de esticar, necessariamente serve para enfatizar a velocidade do objeto, já o de achatar, enfatiza o impacto que um determinado objeto sofre. 

Esse efeito pode ser aplicado em TUDO, inclusive em personagens:

Vejam como nesse exemplo o rosto do personagem estica e contrai para enfatizar a sua respectiva expressão, isso é LINDO! 

Um ponto bem importante neste conceito que devemos tomar cuidado ao aplicar, é sempre manter a massa do objeto consistente. Mas como assim? Veja bem… Se você pegar uma bolinha de chiclete e esticar, ela ficará muito mais comprida, porém ficará muito mais fina, pois a massa da largura foi compensada sendo redistribuída no comprimento, e isso deve ser aplicado também nos objetos que você for animar com esse conceito… nunca crie corpo e massa à mais, sempre redistribua a que existe fazendo as alterações necessárias.

Animações que exageram nesses efeitos fogem muito do realismo, mas cá entre nós, é muito mais engraçado e gostoso de se ver… e a Disney (e outros estúdios, é claro) fazem isso muito bem, e sempre acertam.

2. Antecipação (Anticipation)

Este conceito é um pouco mais conceitual. Imagine o seguinte cenário: você está assistindo um desenho animado e do nada o personagem dá um soco em outro. Até aí tudo bem, é a violência gratuita que antigamente rolava solta em todo desenho… Mas você “viu esse soco chegando”? É ai que a antecipação entra… O simples fato do personagem arregaçar as mangas, ou até girar os bracinhos antes de atacar prepara o público para a ação… neste meio tempo o seu cérebro já te bota à par da situação totalmente e te prepara para o que está por vir. Deve ser por isso que os filmes do Transformers causam tanta dor de cabeça, não é verdade? Hahaha.

E isso não é só em animação, a antecipação é real! Um jogador de beisebol, por exemplo, antes de dar a tacada ele estica o braço e o taco lá para trás para dar o impulso do golpe. Sem a antecipação nenhum movimento nosso teria efeito ou força.

Dando um exemplo mais aplicado, imagine uma arma à laser em um jogo que precisa recarregar antes de atirar novamente. Uma animação dela carregando serve como antecipação para mostrar ao jogador que ela está pronta para atirar. E falando um pouco mais superficialmente, podemos entender a antecipação como um feedback para o jogador das próximas ações a serem feitas.

3. Encenação (Staging)

Este conceito está ligado com a confusão visual que certas poses e animações podem causar. É muito importante que as suas animações sejam de fácil entendimento, para que a pessoa que esteja assistindo entenda facilmente o que o personagem está fazendo, sem se confundir ou ter uma ideia diferente da que você quis transmitir.

Uma boa encenação é marcada por animações bem consistentes, com bons ângulos e formas, e isso vai desde o formato do objeto animado em si, quanto suas cores e disposição no cenário.

É muito fácil de ver se sua animação possui uma boa encenação. Pegue os frames e transforme-os em silhuetas. Peça para alguém que não conhece a animação tentar adivinhar o que o personagem está fazendo apenas observando as silhuetas. Se a pessoa acertar ou se aproximar da ação, maravilha! Se não chegar nem perto, isso pode ser um mal sinal. É claro que esse exercício pode não funcionar para todas as animações, mas sempre tente tomar este cuidado ao criar!

4. Animação Direta e Posição-Chave (Straight Ahead Action & Pose to Pose)

Estes são dois conceitos que estão ligados com a produção da animação em si. Na animação direta, o animador não tem planejado o número de frames que a animação vai ter, ou seja, ele vai animando até terminar. Isso possui vantagens e desvantagens. A vantagem é que a animação fica bem menos mecânica, já que há a total liberdade para a construção dos frames. A desvantagens é a falta de organização que isso pode causar… é muito fácil se perder nesse método haha. Já o método com posição-chave, o animador sabe exatamente quantos frames e sub-frames a animação vai ter, é bem mais sistemático. Isso traz ao animador muito mais clareza, e pode até ser muito mais rápido fazer este método do que o anterior, mas é claro que isso varia de animador para animador.

Resumindo, o método de animação direta é muito mais livre e espontâneo, e o posição-chave muito mais claro e objetivo. Agora qual você deve usar, só testando para descobrir!

5. Continuidade e sobreposição da ação (Overlapping Action and Follow Through)

Esse conceito basicamente existe pra tirar o efeito robótico das animações. Imaginem a seguinte cena: Um personagem com capa e outros adereços sai correndo e por algum motivo ele para. Jamais faça tudo parar de uma vez só! O personagem possui elementos de tamanhos, pesos e comportamentos diferentes, e isso deve ser levado em consideração na hora de animar.

Vejam esse esquilo, no último frame, depois que ele parou, o rabo ainda continuou se movendo pois é um elemento “independente” do movimento do corpo, é algo mais leve, teve atrito com o ar, é grande, balança… Saber analisar seu personagem e identificar os elementos que precisam ser animados com esse atraso e diferenciação pode ser um desafio, mas deve ser feito caso você não queira que um personagem que deveria ser totalmente dinâmico, saia andando por aí como um robô. 

Pra fixar mais ainda o conceito, olhem como a capa do personagem se comporta depois que ele já está no chão:

6. Aceleração e desaceleração (Slow In & Slow Out)

Esse conceito está diretamente ligado com os key frames (frames chave da animação) e os frames intermediários.

Quando queremos representar uma ação muito rápida, ou acelerar o personagem para que ele rapidamente saia de uma ação e entre em outra, devemos criar os frames-chave com poucos frames intermediários entre eles. Já para desacelerar é totalmente ao contrário, se queremos suavizar o movimento de um personagem ou objeto e fazer com que ele saia de um movimento brusco para um mais calmo, devemos colocar vários frames intermediários para ele desacelerar suavemente.

Isso fica bem mais claro ao analisarmos o seguinte exemplo que representa um movimento semelhante ao de uma montanha-russa:

Notem que quando o “carrinho” está lá em cima, a animação possui bem mais frames, para que passe o efeito de desaceleração… já quando ele está caindo rapidamente, veja que existem muito menos frames, pra dar a impressão de velocidade.

7. Movimento em Arcos (Arcs)

A natureza é redonda. Todas as formas e coisas tendem a fazer movimentos suavizados e circulares (Já viram aquele desenho do Donald no país da matemática?). E isso deve ser aplicado também nos movimentos que vamos fazer em nossas animações, não para passar realidade, mas para passar conforto! Afinal, nossa mente está acostumada com esses padrões, e algo fora disso é meio chato de ficar olhando.

Vejam como a movimentação em arcos está presentes em todas as animações dos exemplos aí em baixo, percebam o quão suave o movimento fica se o objeto seguir a forma de arco em sua trajetória:

8. Ação Secundária (Secondary Actions)

As vezes só uma animação de um objeto não é o suficiente para demonstrarmos tudo o que queremos transmitir em uma cena. às vezes precisamos de alguns pedacinhos que complementem a ação, e essas são as animações ou ações secundárias.

Vamos imaginar a seguinte animação: um inimigo inseto morre explodindo. Você anima o corpo dele se despedaçando, mas e a explosão de melequinha que isso causaria, entra onde? Essa animação de “splash” da meleca junto com a animação principal do personagem morrendo formam a cena toda, se completam.

Muitas vezes, em jogos, essas animações secundárias são feitas através de sistemas de partículas automáticas, como por exemplo, o efeito de impacto ao socar um inimigo ou o efeito de fogo no cano da arma ao atirar.

Ações secundárias estão muito ligadas com o conceito número cinco, “continuidade e sobreposição da ação”, e podemos usar o mesmo exemplo do esquilo para ilustrar… o rabinho dele se mexendo é uma ação secundária, se formos levar em consideração que o objeto principal ali é o corpo do esquilo:

9. Temporização (Timing)

Esse conceito está mais ligado com a parte técnica, mais especificamente quantos frames por segundo sua animação deve rodar. Em filmes tradicionais, geralmente usa-se 24 frames por segundo para gerar a imagem na tela. Porém isso não é regra, na verdade é muito relativo com o que o animador quer transmitir.

Em desenvolvimento de jogos temos cenários muito comuns que se baseiam na briga entre o animador e o programador: “Você deixou a animação rápida demais, nem dá pra ver o efeito que eu animei…”, “Agora ela está lenta demais, o personagem está travado!”.

Esse “problema” de personagem travando pode ser compensado com mais frames intermediários, ou aumentando o número de frames por segundo a serem exibidos. E por outro lado, pra que fazer 20 frames em uma animação que deve ser rápida e durar ai no máximo 0,3 segundos, como um estralo de explosão, por exemplo?

Como dito anteriormente, é tudo relativo! Basta vocês decidirem e entrar em um acordo para estabelecer padrões de número de frames ou velocidade das animações. E claro, levando em consideração o conceito do slow in e slow out, isso é muito importante.

10. Exagero (Exaggeration)

Hora de viajar na maionese! Por mais realista que o personagem seja, um exagero aqui e ali deixa ele muito mais vivo e dinâmico! Esse conceito está diretamente ligado com o primeiro que vimos nessa lista.

Além de ser agradável visualmente, o exagero nas ações refletem uma boa comunicação da animação que você está produzindo, e neste caso podemos deixar um pouquinho de lado o real, e partir mais pro lado caricato mesmo.

Explore muito esse conceito, e você verá que seus personagens ficarão muito mais carismáticos e expressivos. Veja esse exemplo:

Percebem o quão exagerado é o movimento da ação do personagem, e o quanto isso é maravilhoso? Hahaha.

11. Desenho Volumétrico (Solid Drawing)

Esse conceito está diretamente ligado com o fato de você criar sprites que sejam 2D, porém, que não sejam de papel! Que tenham volume! Isso é muito importante para marcar a posição e ações do personagem, isso se dá tanto na animação, quanto na forma que você desenha o personagem, na forma como você o pinta, entre outros fatores.

Dar volume a um personagem 2D é tão importante quanto saber animá-lo corretamente. Não adianta de nada aplicar os conceitos desta lista se o seu personagem aparentar ser algo achatado, não funciona!

Vejam que apesar de ser 2D, o Gênio é muito volumétrico. Isso se dá devido às suas formas, a hierarquia dos elementos e a disposição de cada um dos pedacinhos dele.

Uma boa forma de trabalhar essa parte de volume em seu personagem, é desenhá-lo em diversas poses e ângulos, para literalmente estudá-lo como um todo, assim você saberá como desenhar os frames daquela animação onde ele está em uma pose diferenciada. O exemplo a seguir é o modelsheet do Pernalonga, e você pode saber mais sobre modelsheets e como fazê-los nesta aula do Guilherme do Palavra Nerd.

12. Apelo (Apeal)

Chegamos ao último princípio desta lista, mas não menos importante. O apelo está ligado com o fato de que seus personagens e animações devem ser FODAS e atraentes. Ninguém liga para um personagem feio ou mal construído, independente se ele é bom, mau, secundário, primário ou aleatório. Se ele está lá, é por alguma razão, é para ser visto, e ele não será visto se ele não for bonito, atraente, consistente e divertido (essa parte do divertido é relativa, depende do contexto, haha). Basicamente, você precisa aplicar esses onze conceitos mas não deixar esse último de lado, se não o trabalho pode ser em vão.

É claro que este último conceito é mais um “puxão de orelha” pra você produzir personagens e animações legais, mas isso não é apenas aplicar e já era, igual à alguns outros conceitos… construir um bom personagem demanda de muito estudo e principalmente prática, então, lápis na mão e ideias no papel!

Eu espero que tenham curtido esta visão e explicação desses conceitos tão importantes, é muito bacana analisá-los e ver que eles realmente fazem sentido, eles estão ali, é só saber identificá-los… e saber aplicar é muito mais satisfatório. Quaisquer dúvidas, é só deixar nos comentários, beleza? E pra finalizar, deixo esse vídeo do Cuphead que é o jogo mais lindo dos últimos tempos:

https://www.youtube.com/watch?v=2KaXZcjQiWc

Valeu galera, até a próxima!

Bibliografia:

THOMAS, Frank. JOHNSTON, Ollie. “ILLUSION OF LIFE, THE – DISNEY ANIMATION”. 1ª Edição, EUA, 1995. 
GUIMARÃES NETO, Haroldo. Apostila do Curso de Animação 2D HGN. São Paulo, 2005.
Imagens e vídeos obtidos na internet.