Attention: Here be dragons

This is the latest (unstable) version of this documentation, which may document features not available in or compatible with released stable versions of Godot.

Checking the stable version of the documentation...

Animação de recorte(Cut-out)

O que é isso?

Tradicionalmente, animação de recorte é um tipo de animação stop motion em que as peças de papel (ou outro material fino) são cortados em formas especiais e dispostos em representações bidimensionais de personagens e objetos. Os corpos dos personagens geralmente são feitos de várias peças. As peças são arranjadas e fotografadas uma vez para cada quadro do filme. O animador move e gira as partes em pequenos incrementos entre cada tomada para criar a ilusão de movimento quando as imagens são reproduzidas rapidamente em sequência.

Simulações de animação de recorte agora podem ser criadas usando software como visto em South Park e Jake and the Never Land Pirates.

Nos videogames, essa técnica também se tornou popular. Exemplos disso são Paper Mario ou Rayman Origins .

Animação de recorte (Cutout) no Godot

O Godot fornece ferramentas para trabalhar com rigs de recorte (cutout rigs) e é ideal para o fluxo de trabalho:

O sistema de animação é totalmente integrado ao engine: Isso significa que as animações podem controlar muito mais do que apenas o movimento de objetos. Texturas, tamanhos de sprites, pivôs, opacidade, modulação de cores e muito mais podem ser animados e mesclados.
Combinar estilos de animação: AnimatedSprite2D permite utilizar animação tradicional quadro a quadro juntamente com animação por recorte. Na animação tradicional, diferentes quadros utilizam desenhos completamente distintos em vez das mesmas partes reposicionadas. Em uma animação baseada principalmente em recortes, a animação tradicional pode ser utilizada seletivamente em partes complexas, como mãos, pés, mudanças de expressão facial, entre outras.
Elementos de formato personalizado: Formas personalizadas podem ser criadas com Polygon2D permitindo animação UV, deformações, etc.
Sistemas de partículas: um equipamento de animação de recorte pode ser combinado com sistemas de partículas. Isso pode ser útil para efeitos mágicos, jetpacks, etc.
Custom Colliders: Defina colisores e áreas de influência em diferentes partes dos esqueletos, ótimo para chefes e jogos de luta.
Árvore de Animação: Permite combinações complexas e mistura entre várias animações, da mesma forma que funciona em 3D.

E muito mais!

Criação do GBot

Para este tutorial, usaremos como conteúdo de demonstração as peças do personagem GBot, criado por Andreas Esau.

Obtenha os recursos: cutout_animation_assets.zip.

Preparando a estrutura

Crie um Node2D vazio como raiz da cena, trabalharemos dentro dele:

O primeiro nó do modelo é o quadril. Geralmente, tanto em 2D quanto em 3D, o quadril é a raiz do esqueleto. Isso facilita a animação:

Em seguida, será a vez do torso. O torso precisa ser um filho do quadril, então crie um sprite filho e carregue a textura do torso, ajustando-a posteriormente da maneira correta:

Isso parece bom. Vamos ver se nossa hierarquia funciona como um esqueleto rotacionando o torso. Podemos fazer isso pressionando E para entrar no modo de rotação e arrastando com o botão esquerdo do mouse. Para sair do modo de rotação, pressione ESC.

O pivô de rotação está incorreto e precisa ser ajustado.

Esta pequena cruz no meio do Sprite2D é o pivô de rotação:

Ajustando o pivô

O pivô pode ser ajustado alterando a propriedade offset (deslocamento, desvio) no Sprite2D:

O pivô também pode ser ajustado visualmente. Ao posicionar o cursor sobre o ponto do pivô desejado, pressione V para mover o pivô para o Sprite2D selecionado. Há também uma ferramenta na barra de ferramentas com função semelhante.

Continue adicionando as partes do corpo, começando pelo braço direito. Certifique-se de colocar cada sprite em seu lugar correto na hierarquia, para que suas rotações e translações sejam relativas ao seu pai:

Com o braço esquerdo há um problema. Em 2D, os nós filhos aparecem na frente de seus pais:

Queremos que o braço esquerdo apareça atrás do quadril e do torso. Poderíamos mover os nós do braço esquerdo para trás do quadril (acima do nó do quadril na hierarquia da cena), mas aí o braço esquerdo não estaria mais em sua posição correta na hierarquia. Isso significa que ele não seria afetado pelo movimento do torso. Vamos resolver esse problema com nós de transformações remotas RemoteTransform2D.

Nota

Você também pode corrigir problemas de ordem de profundidade ajustando a propriedade Z de qualquer nó que herda do Node2D.

Nó RemoteTransform2D

O nó RemoteTransform2D transforma nós em algum outro lugar na hierarquia. Este nó aplica sua própria transformação (incluindo qualquer transformação que herda de seus pais) ao nó remoto que ele visa.

Isso nos permite corrigir a ordem de visibilidade dos nossos elementos, independentemente da localização dessas partes na hierarquia do recorte.

Crie um nó RemoteTransform2D como filho do torso. Chame-o de remote_arm_l. Crie outro nó RemoteTransform2D dentro do primeiro e chame-o de remote_hand_l. Use la propriedade Remote Path dos dois novos nós para apontar para os sprites arm_l e hand_l, respectivamente:

Mover os nós RemoteTransform2D agora move os sprites. Assim, podemos criar animações ajustando as transformações (transforms) do RemoteTransform2D:

Completando o esqueleto

Complete a estrutura seguindo os mesmos passos para as demais partes. A cena resultante deverá ser semelhante à esta:

O rig resultante será fácil de animar. Ao selecionar os nós e rotacioná-los, você pode animar a cinemática direta (FK) de maneira eficiente.

Para objetos e estruturas simples, isso funciona bem, mas existem limitações:

Selecionar sprites na viewport principal pode se tornar difícil em rigs complexos. A árvore de cena acaba sendo usada para selecionar as partes, o que pode ser mais demorado.
A Cinemática Inversa (IK) é útil para animar extremidades como mãos e pés, e não pode ser usada com nosso rig no seu estado atual.

Para resolver esses problemas, usaremos os esqueletos da Godot.

Esqueletos

Na Godot, existe uma ferramenta auxiliar para criar "ossos" entre os nós. Os nós conectados por esses ossos são chamados de esqueletos.

Como exemplo, vamos transformar o braço direito em um esqueleto. Para criar um esqueleto, uma cadeia de nós deve ser selecionada de cima para baixo:

Em seguida, clique no menu Skeleton e selecione Make Bones.

Isso adicionará ossos cobrindo o braço, mas o resultado pode ser surpreendente.

Por que a mão não tem um osso? No Godot, um osso conecta um nó ao seu pai. E atualmente não há nenhum filho no nó da mão. Com esse conhecimento, vamos tentar novamente.

O primeiro passo é criar um nó de extremidade (endpoint). Qualquer tipo de nó serve, mas o Marker2D é preferível porque é visível no editor. O nó de extremidade garantirá que o último osso tenha uma orientação.

Agora selecione a cadeia inteira, da extremidade até o braço, e crie os ossos:

O resultado se assemelha muito mais a um esqueleto, e agora o braço e o antebraço podem ser selecionados e animados.

Crie extremidades para todas as extremidades importantes. Gere ossos para todas as partes articuláveis do cutout, com o quadril (hip) como a conexão final entre todas elas.

Você pode notar que um osso extra é criado ao conectar o quadril e o torso. O Godot conectou o nó do quadril à raiz da cena com um osso, e nós não queremos isso. Para corrigir isso, selecione o nó raiz e o nó do quadril, abra o menu Skeleton e clique em clear bones.

Sua cena final deve ser algo como isto:

Você deve ter notado um segundo conjunto de extremidades nas mãos. Isso fará sentido em breve.

Agora que toda a figura está configurada (rigged), o próximo passo é configurar as cadeias de IK. As cadeias de IK permitem um controle mais natural das extremidades.

cadeias IK

IK significa cinemática inversa (inverse kinematics). É uma técnica conveniente para animar a posição de mãos, pés e outras extremidades de rigs como o que criamos. Imagine que você deseja posicionar o pé de um personagem em uma posição específica no chão. Sem as cadeias de IK, cada movimento do pé exigiria rotacionar e posicionar vários outros ossos (a canela e a coxa, pelo menos). Isso seria bastante complexo e levaria a resultados imprecisos. A IK nos permite mover o pé diretamente enquanto a canela e a coxa se ajustam sozinhas.

Nota

As cadeias de IK no Godot atualmente funcionam apenas no editor, não em tempo de execução. Elas são destinadas a facilitar o processo de definição de quadros-chave (keyframes) e não são úteis no momento para técnicas como animação procedural.

Para criar uma cadeia de IK, selecione uma cadeia de ossos da extremidade até a base da cadeia. Por exemplo, para criar uma cadeia de IK para a perna direita, selecione o seguinte:

Em seguida, ative essa cadeia para IK. Vá em Edit > Make IK Chain.

Como resultado, a base da cadeia ficará amarela.

Assim que a cadeia de IK estiver configurada, pegue qualquer filho ou neto da base da cadeia (por exemplo, um pé) e mova-o. Você verá o restante da cadeia se ajustar conforme altera a posição dele.

Dicas de animação

A seção seguinte será uma coleção de dicas para criar animações para os seus rigs de cutout. Para mais informações sobre como funciona o sistema de animação no Godot, veja Introdução aos recursos de animação.

Definindo quadros-chave e excluindo propriedades

Elementos de contexto especiais aparecem na barra de ferramentas superior quando a janela do editor de animação está aberta:

O botão de chave insere quadros-chave de posição, rotação e escala para os objetos ou ossos selecionados na posição atual do indicador de reprodução (playhead).

Os botões de alternância "loc", "rot" e "scl" à esquerda do botão de chave modificam sua função, permitindo especificar para qual das três propriedades os quadros-chave serão criados.

Aqui está uma ilustração de como isso pode ser útil: imagine que você tem um nó que já possui dois quadros-chave animando apenas sua escala. Você deseja adicionar um movimento de rotação sobreposto ao mesmo nó. O movimento de rotação deve começar e terminar em momentos diferentes da mudança de escala que já está configurada. Você pode usar os botões de alternância para fazer com que apenas as informações de rotação sejam adicionadas quando você inserir um novo quadro-chave. Dessa forma, você evita adicionar quadros-chave de escala indesejados que interromperiam a animação de escala existente.

Criando uma pose de descanso

Pense em uma pose de descanso (rest pose) como uma pose padrão na qual seu rig de cutout deve ser definido quando nenhuma outra pose estiver ativa em seu jogo. Crie uma pose de descanso da seguinte forma:

1. Make sure the rig parts are positioned in what looks like a "resting" arrangement.

Crie uma nova animação e renomeie-a como "rest".
Selecionar todos os nós em seu rig (a seleção por caixa deve funcionar bem).

4. Make sure the "loc", "rot", and "scl" toggle buttons are all active in the toolbar.

5. Press the key button. Keys will be inserted for all selected parts storing their current arrangement. This pose can now be recalled when necessary in your game by playing the "rest" animation you've created.

Modificando apenas a rotação

Ao animar um rig de cutout, muitas vezes é apenas a rotação dos nós que precisa mudar. Posição (location) e escala raramente são usadas.

Por isso, ao inserir chaves, você pode achar conveniente manter apenas a alternância "rot" ativa na maior parte do tempo:

Isso evitará a criação de faixas de animação indesejadas para posição e escala.

Definição de quadros-chave em cadeias de IK (Keyframing IK chains)

Ao editar cadeias de IK, não é necessário selecionar a cadeia inteira para adicionar quadros-chave. Selecionar a extremidade (endpoint) da cadeia e inserir um quadro-chave inserirá automaticamente quadros-chave para todas as outras partes da cadeia também.

Mover visualmente um sprite para trás de seu pai

Às vezes é necessário fazer com que um nó mude sua profundidade visual em relação ao seu nó pai durante uma animação. Pense em um personagem de frente para a câmera, que puxa algo de trás das costas e o segura à sua frente. Durante essa animação, todo o braço e o objeto em sua mão precisariam mudar sua profundidade visual em relação ao corpo do personagem.

Para ajudar com isso, há uma propriedade animável "Behind Parent" em todos os nós que herdam de Node2D. Ao planejar seu rig, pense nos movimentos que ele precisará realizar e dedique um tempo para pensar em como você usará o "Behind Parent" e/ou nós RemoteTransform2D. Eles fornecem funcionalidades que se sobrepõem.

Configurando curvas de atenuação (easing curves) para múltiplas chaves

Para aplicar a mesma curva de atenuação a múltiplos quadros-chave de uma só vez:

Selecione as chaves relevantes.
Clique no ícone de lápis no canto inferior direito do painel de animação. Isso abrirá o editor de transição.
No editor de transição, clique na curva desejada para aplicá-la.

Deformação esquelética 2D

A deformação esquelética pode ser usada para aprimorar um rig de cutout, permitindo que peças únicas se deformem organicamente (por exemplo, antenas que balançam conforme um personagem inseto caminha).

Esse processo é descrito em um tutorial separado.