Luiz Eduardo Leão

Gerente de Tecnologias Educacionais

Laíse Caldeira Pedroso

Analista de Desenvolvimento Industrial IV e Gestora do projeto SENAI Play

Wendell Ross Dantas de Medeiros

Coordenador de EAD - PB

Aline Alves da Silva Costa

José Liherbert Sales Lisbôa
Autores

Aline Alves da Silva Costa

Denize da Silva Dias Cruz
Designer Instrucional

Aline Alves Silva da Costa

Denize da Silva Dias Cruz
Marcela Torres de Avellar
José Liherbert Sales Lisbôa
Designer e Diagramação
Sumário

Introdução 4

Contextualização 4

1 - Animação Cut Out 6

2 - Instalação do Spriter 2D 6
3 - Organização das pastas 11
4 - Introdução ao Spriter 2D 13
5 - Organizando seus arquivos dentro do software 15
6 - Inserindo as partes do elemento no palco 18
7 - Reconhecendo os quadros chaves 23
8 - Realizando a interpolação do movimento 24
9- Utilizando o onion skinning 25
10 - Aceleração e desaceleração 26
11 - Animação de bola quicando 27
12 - Conceito sobre rigging de personagem 32
13 - Inserindo os bones no elemento 35
14 - Criando um ciclo de animação 45
15 - Duplicando e reutilizando sua animação 49
16 - Exportando sua animação 50
17 - Referências 56

4
 Introdução

Fala, Player! É uma honra ter você aqui, que com toda certeza, tem grande
admiração pelo mundo dos jogos digitais, não é mesmo?
Então, minha proposta para você é que juntos possamos explorar e aprender
sobre animação 2D, que além de ser bastante utilizada na produção de jogos
digitais, também é utilizada na criação de filmes, desenhos, vídeos entre outras
possibilidades.
Neste curso iremos aprender sobre softwares simples, práticos e intuitivos
que te possibilitarão criar artes 2D de personagens para jogos digitais, por meio de
ferramentas e recursos que possibilitam que seu produto atenda às normas e
padrões de qualidade, usabilidade, interatividade, integridade e segurança da
informação.

Contextualização

Você sabe o que é animação 2D ou bidimensional?

Para entender esse conceito você precisa saber que uma imagem
bidimensional refere-se a características visuais de altura e largura, sendo assim,
como é que uma imagem, ou melhor, uma sequência de imagens pode gerar uma
animação?
Pela repetição da mesma imagem em vários quadros, com alteração de
poses que possibilitem um efeito visual de movimento. Para entender melhor é
importante que você saiba que, a animação pode acontecer no papel ou por
softwares de edição de imagens.
Seja qual for o meio escolhido, manual ou digital, o princípio para a
animação se mantém, requerendo da pessoa que vai animar a produção e repetição
da imagem a ser animada, adicionada com alterações de uma imagem para outra,
que sinalizem a movimentação desejada no final. Para isso é interessante que essa
pessoa possua conhecimentos sobre técnicas de animação. Uma delas é conhecida
como “Pose a Pose” ou animação de quadros chaves. Onde o artista irá definir o
quadro inicial (que é a pose de origem) e o quadro final, que como o nome diz,

5
refere-se ao estado final que o personagem ou objeto animado deverá alcançar
durante a animação.
A vantagem de se utilizar um software é as inúmeras possibilidades e
ferramentas que possibilitam maior qualidade, e agilidade na sua animação.
Agora, que você já se ligou no conceito de animação 2D, tenho certeza que
está com grande expectativa para aprender a criar seus personagens, montar e até
mesmo animar. Então, tá esperando o que para soltar um play no conhecimento?
Vamos lá?
Para animar, você precisa conhecer alguns fundamentos da animação,
destaquei três para você:

Tipo de Direta Stop Motion Pose a Pose

Animação
Conhecida como Aqui, a ideia de Trata-se de
quadro a movimento do realizar o desenho
quadro, nela objeto ou do personagem ou
temos que personagem é objeto em sua pose
inicial e, após um
desenhar de um feita por certo intervalo,
em um de forma fotografias. sua pose final.
contínua até Determina-se o Todo intervalo
chegar na movimento que se entre as duas poses
Características animação deseja fazer e é chamado de
desejada vai fotografando interpolação ou
o objeto intervalação.
alterando a pose
levemente, de
uma foto para
outra.

Na maioria das Na forma Essa é uma das

vezes em cenas tradicional é técnicas mais
rápidas, que visto em muitos utilizadas por,
Quando é mais não precisam comerciais de justamente, se ter
utilizada? de muitos produtos e mais controle
detalhes a filmes no estilo tanto nas poses da
serem cartoon. animação como
mostrados. também no tempo
decorrido.

6
 1 - Animação Cut Out

Como já falamos, a animação por meio de softwares alinhada com sua

criatividade te possibilitará atingir uma boa qualidade na movimentação dos seus
personagens e objetos, tanto para games ou outras finalidades.
Neste microcurso, iremos aprender sobre o Cut Out, a animação aqui é feita
por meio de recortes de partes de um desenho com o objetivo de evitar o desgaste
de ter que repetir o processo de desenhar muitas vezes. Nela, utilizamos bastante a
animação pose a pose que também é conhecida como animação dos extremos, pois
trata de desenhar as poses principais da animação, que são justamente os quadros
chaves, e entre eles, realizar os quadros intermediários. Em muitos estúdios, os
desenhos principais são feitos por animadores chefes, já os intermediários são
realizados por assistentes de animação ou estagiários.
Então, vamos juntos? Estou com muita vontade de te ensinar!
O software que iremos utilizar para animações CUT OUT é o spriter 2D,
portanto você vai precisar instalá-lo agora.

2 - Instalação do Spriter 2D

Vamos iniciar realizando a instalação do Spriter 2D, para isso:

Acesse: https://brashmonkey.com/ para entrar no site oficial do Spriter 2D.

Após isso, o site contém um menu no canto superior esquerdo da tela, com o nome
Spiter Pro. Clique nele e acesse o submenu: Download do Spriter 2D para entrar
na página de downloads do site:

7
 Imagem: Página inicial do site Brashmonkey

Na próxima página, escolha para qual sistema operacional você irá utilizar o
software. No nosso curso, utilizaremos o windows, pois é o sistema operacional que
está instalado na máquina.

Imagem: Página de seleção de download para sistema operacional.

Ao clicar em download, escolha a pasta onde irá baixar o arquivo e clique em

salvar:

8
 Imagem: Janela de seleção de pasta para salvar o arquivo

Seu arquivo será baixado em formato .ZIP. Abra e clique duas vezes no
arquivo com extensão .EXE de nome: Spriter_r11.exe

Imagem: Arquivo executável dentro de uma pasta do tipo .ZIP

9
 Irá abrir uma janela de licenças de uso do software, leia, aceite os termos,
caso concorde, e clique em Next:

Imagem: Janela de acordo de licença.

A próxima janela é se você deseja criar um ícone de atalho na área de

trabalho, caso queira, deixe a caixa de diálogo marcada e clique Next.

10
 Imagem:

Próxima janela, é só clicar no botão Install para instalar o programa

Imagem: Janela com opção de instalar o spriter 2D.

11
 Após a instalação, caso você deixe marcado a opção e clique em Finish, o
programa já será aberto em seguida:

Imagem: Janela final de instalação do Spriter 2D.

3 - Organização das pastas

Agora, se liga! Na organização das pastas, é importante que você as

organize, de acordo com animações individuais. Por exemplo, se o personagem tem
animações nos olhos, na boca, na mão, que são independentes do movimento do
corpo, deve-se colocar esses sprites que serão alterados em pastas diferentes. O
mesmo caso seria se o personagem tivesse sprites de roupas diferentes na mesma
posição, colocaríamos uma pasta à parte apenas para a substituição dessas roupas.
Vejamos um exemplo na imagem a seguir:

12
 Imagem: Personagem Judite e pastas do lado direito

Na imagem mostra a pasta principal com o nome do personagem: Judite, e

dentro dela, as subpastas para sprites que serão alterados individualmente, são as
pastas com os nomes: Olhos, Óculos, e Bocas.
Dentro do spriter 2D, com essa organização, quando for necessário a
mudança de um sprite que está na pasta, basta clicar com o botão direito do mouse
e o programa vai abrir uma janela apenas com o conteúdo das pastas para você
escolher qual irá substituir.
É sempre bom ter a prática de não utilizar acentos, espaços em brancos ou
caracteres especiais nos nomes das pastas, pois durante alguma exportação, ou
mudança de sistema operacional o arquivo poderá ficar corrompido. E para uso em
jogos, isso já irá ajudar bastante o programador caso ele faça algo dinâmico
utilizando pastas com os sprites.

13
 4 - Introdução ao Spriter 2D

Ao abrir o spriter 2D pela primeira vez, é exibido na tela uma janela com
opções de atualizações do software, sendo: A primeira opção é para sempre o
sistema verificar por versões estáveis. A segunda opção para verificar versões
estáveis porém com versões betas inclusas, podendo ocorrer alguns bugs. E a
última opção para não checar por atualizações. Você pode salvar a opção
escolhida de atualização, fechar a janela ou cancelar.

Imagem: Janela de configuração de atualizações

A próxima janela a ser exibida, são dois links para vídeos tutoriais da internet
e abaixo uma opção para sempre exibir essa mesma janela ao iniciar o programa,
caso deixe ela marcada. Você pode clicar para ser direcionado a um navegador com
os tutoriais ou fechar esta janela.

14
 Imagem: Janela de vídeos ajudas com dois links para tutoriais.

Para exibir todas as janelas habilitadas do programa, é necessário criar um novo

documento, indo no menu File no topo da tela, New Project, ou pressionar o atalho
Ctrl + N.

Imagem: Aba File aberta com a opção New Project selecionada.

Após criar o novo documento irá abrir uma janela para você escolher onde
está a pasta que contém todos os seus sprites para iniciar um novo projeto.
Definindo o local e escolhendo sua pasta, clique no botão: selecionar pasta:

15
 Imagem: Janela de seleção de pasta para criação de um novo projeto.

Caso você abra novamente a pasta selecionada, nela agora, irá conter um
arquivo de backup que é salvo automaticamente pelo próprio programa, como ainda
não foi salvo o seu projeto, ele estará com o nome de NewProject.autosave,
conforme imagem a seguir:

Imagem: Exibindo arquivo de autosave dentro da pasta selecionada.

5 - Organizando seus arquivos dentro do

software

Veja que com a sua pasta selecionada, do lado direito na janela Pallete é
exibido todas as pastas dentro da principal que você selecionou inicialmente. Aqui,

16
por exemplo, temos quatro pastas dentro da principal, estas são: Bola Senai,
Cadeira Rodas, Judite e Skate, todas elas contêm sprites para serem utilizados.

Imagem: Janela Palette do spriter 2D

Sempre que formos inserir algum sprite no palco, deveremos ajustar o pivot,
que é o ponto de origem da imagem. Podemos modificá-lo clicando nos ícones do
lado direito da janela, com suas respectivas bordas nas miniaturas, clicando na
própria imagem do sprite, onde você quer definir o pivot, ou pela opção de pivot X e
pivot Y, que por padrão inicia em 0,0 nos dois eixos e o pivot é fixado na parte
superior esquerda.

Imagem: Sprite aberto em

17
 Pega a Dica: Para melhor se guiar durante as animações, é aconselhável
utilizar o eixo X do palco como se fosse o piso de um cenário, veja por exemplo, o
sprite de uma cadeira de rodas inserida com essa prática no palco:

Imagem: Sprite de cadeira de rodas colocada no palco na posição para simular o eixo X como piso
do cenário.

Já do lado esquerdo do spriter 2D, temos a janela de Z-order, onde define a

ordem de qual elemento vem primeiro. A ordem dos elementos seguem da seguinte
forma: de cima para baixo é a ordem de visualização no palco, ou seja, como no
exemplo da imagem, a cadeira é o último elemento, ficando as duas rodas por cima
dela.

Imagem: Janela Z-order com três sprites sendo a imagem da cadeira a última.

Após ter definido o pivot do seu sprite, basta clicar em ok e depois é só clicar com o
botão esquerdo do mouse no sprite e arrastá-lo para o palco. Mais abaixo, temos as janelas
de animations, sempre que for inserir um novo objeto crie novas entidades para cada
elemento, ou seja, para cada elemento que irá receber animações diferentes, crie uma nova
entity para melhor organizar o seu projeto.

18
 Imagem: Janela animations com uma entity inserida com apenas uma animação.

Para criar novas entidades basta apenas clicar no ícone conforme imagem abaixo:

Imagem: Janela de animations com o ícone destacado para criar novas entidades.

6 - Inserindo as partes do elemento no palco

Para inserir seus sprites, de forma mais rápida, sem ter que alterar muito o
Z-order, em um personagem de forma humanoide, sempre arraste os sprites para o
palco seguindo a ordem de baixo para cima, ou seja, inserindo elementos dos pés
até a cabeça. Aqui, iremos utilizar a personagem Judite.

19
 Imagem: Judite inserida no palco

A ordem da cabeça, por exemplo, de forma correta no Z-order deve ficar dessa
forma:

Imagem: Z-order mostrando os sprites que compõem toda a cabeça da personagem.

O pivot deve ser colocado pensando justamente nos movimentos possíveis

para as futuras animações, portanto se você vai conectar os braços, lembre-se de
qual rotação este braço faria na hora de animar, abaixo temos um exemplo de onde
devem ficar os pivot no caso das animações do braço.

20
Imagem: Demonstrando rotações e posições dos pivots.

21
 Para ter certeza se a rotação está correta, sempre coloque o mouse sobre o
ícone que tem um círculo, e observe que será mostrado duas setas indicando
rotação, e com isso você irá mover e verificar se a rotação está correta:

Imagem: Ícone de rotação sendo exibido sobre um sprite.

Caso você tenha inserido um elemento acima do outro, e tenha dificuldades

em selecionar os que estão por trás, basta selecionar o sprite desejável na janela
Z-order, e em uma janela mais abaixo alterar as propriedades de posição dos eixos
X e Y.

Imagem: Demonstrando o sprite de nome femurE e as propriedades sendo exibidas logo

abaixo.

Pega a Dica: Detalhe importante! Mesmo que os sprites sejam iguais, no

caso do nosso exemplo, as pernas, não crie apenas um e duplique dentro do
programa. Sempre utilize sprites diferentes independente da imagem ser igual. Um

22
dos motivos é não correr risco de problemas com o software, por reconhecer que é
o mesmo arquivo duplicado.
Ainda no Pega a Dica uma outra observação é o pivot, pois caso o elemento
seja duplicado, o pivot permanece do sprite original, e se for modificado na cópia, o
original recebe esses atributos, não tem como um ser diferente do outro.

Lembra que organizamos nossas pastas por animações individuais? Bom,

agora é a hora de ver ela funcionando na prática.
Para as pastas dos olhos por exemplo, se o pivot de todas as imagens
estiverem iguais, basta clicar com o botão direito do mouse no sprite do olho, que
está inserido no palco, que irá abrir uma nova janela de exibição das miniaturas dos
outros sprites dentro que contêm este clicado, que como exemplo demonstrado
abaixo utilizamos os olhos:

Imagem: Janela exibida após clicar com o botão direito do mouse no sprite de olho da personagem.

E por fim, após posicionar todos os elementos no palco, faça uma última
verificação das posições do Z-order observando movimentos para possíveis
animações. Por exemplo, o braço esquerdo da personagem ao mover não pode
passar por cima do corpo nem do braço direito, por isso a ordem dele é por último.

23
 7 - Reconhecendo os quadros-chave

Para criar um quadro-chave (ou extremo) no Spriter 2D, basta deixar o

mouse no frame que você deseja, e realizar algum movimento no sprite. Na timeline
será exibido um retângulo de cor branca indicando que ali tem um quadro chave. E
quando selecionado ele fica de cor avermelhada:

Imagem: Janela de timeline com dois quadros chaves, um selecionado e outro não selecionado.

O tempo que já inicia por padrão no Spriter 2D, é definido em 1000

milissegundos, portanto para realizar uma animação de 1 segundo (24 quadros ou
frames) é necessário termos os 1000 milissegundos.
Caso queira aumentar o tempo da animação, basta digitar a quantidade do
tempo em milissegundos, e clicar em Apply Length:

Imagem: Janela de timeline destacando a inserção de um novo tempo

Agora, caso você queira demonstrar os quadros na timeline em vez dos

milissegundos, basta clicar no ícone de configurações, conforme imagem abaixo:

Imagem: Janela de timeline destacando o ícone de configurações.

Definir sua quantidade de FPS (frames por segundos) e habilitar o snapping:

24
 Imagem: Janela de configurações da timeline

8 - Realizando a interpolação do movimento

A interpolação ou intervalação, são os quadros de movimento que ficam entre

dois extremos, um inicial e um final. Portanto, se você possui uma animação que
tem por exemplo os extremos nos quadros 5 e 10, isso quer dizer que, do quadro 6
até o 9 são quadros de interpolação:

Imagem: Janela da timeline com destaques nos quadros de interpolação 6,7,8 e 9 que estão entre os
frames 5 e 10.

A vantagem do Spriter 2D, é que você não precisa se preocupar em criar a

interpolação desses quadros, pois o próprio software executa automaticamente.
Agora, em caso de rotações de sprites maiores, sempre “guie” o software
para qual sentido ele irá rotacionar, horário ou anti-horário, pois o mesmo tentará ir
para o próximo quadro chave pelo caminho mais próximo da rotação final.
Por exemplo:
Supomos que queiramos rotacionar o ponteiro de um relógio iniciando em
12h e finalizando às mesmas 12h em sentido horário,observe que o quadro inicial
neste caso será o mesmo do final, assim o sistema irá entender que é a mesma
coisa, e não fará a rotação.

25
Portanto, o correto para “indicar” é criar outros quadro-chaves na interpolação desse
movimento, por exemplo, quadro na posição de 3h, outro na de 6h, mais um na de
9h e assim ele completaria até chegar no quadro de 12h em sentido horário, pois
cada quadro estará próximo suficiente para o sistema saber o que seguir:

Imagem: Demonstração da criação de novos quadros chaves para auxiliar a interpolação automática
do software.

9- Utilizando o onion skinning

Conhecido também como efeito casca de cebola, é o efeito de demonstrar de

forma mais transparente, os quadros anteriores e sucessores a um quadro-chave.
Para ativá-lo no Spriter 2D, basta deixar o mouse ao lado da barra de
inserção vermelha da timeline, clicar com o botão direito do mouse e arrastar na
timeline. A cor vermelha indica o que vem antes, e a cor verde, o que vem depois,
observe:

Imagem:Timeline com a barra de inserção no frame 9 e o onionskining ativado até o quadro 3 e

quadro 15.

Imagem: Demonstração do onion skinning ativado mostrando quadro anterior e quadro posterior.

26
 10 - Aceleração e desaceleração

O processo de acelerar uma animação e desacelerar, consiste na quantidade

de quadros e posição dos elementos.
Se temos quadro-chaves mais distantes (mais demorada será a animação) e
a posição do objeto mais próximo em relação ao próximo quadro, estamos dizendo
que essa animação é mais lenta, pois permanece muito tempo praticamente na
mesma posição.
Já o inverso, quadros mais próximos e posições mais distantes, estou
dizendo que em pouco tempo o objeto atinge uma distância maior.
Vamos ver este exemplo no sprite do skate:
No quadro 1 ele estará na posição 0 do eixo X e no quadro 15 na posição
1500 do mesmo eixo:

Imagem: Demonstração de skate com dois quadros chaves, um no frame 1 e outro no frame 12 e
skate na posição 0 do eixo x.

Isso quer dizer que, para o skate se deslocar da posição 0 até a posição
1500 no eixo x, ele irá gastar um total de 12 quadros, ou seja, meio segundo para
atingir a próxima posição.
Agora, se a posição final do skate estiver no quadro 6 por exemplo, ele fará o
mesmo deslocamento da posição 0 até a 1500 em um total de apenas 6 quadros, ou
seja, em 0,25 segundos.

27
 Imagem: Demonstração de skate com dois quadros chaves, um no frame 1 e outro no frame 6 e
skate na posição 1500 do eixo x.

11 - Animação de bola quicando

Uma das maiores práticas iniciais da animação, é a realização de animar

uma bola quicando, pois com ela podemos ter conceitos de acelerar e desacelerar,
como também estudar sobre como controlar o timing da animação.
Primeiramente, com o sprite da bola pronto, vamos definir o pivot na parte
inferior central da bola, pois ao definirmos a posição 0 no eixo X e Y, sabemos que
ela estará no centro do palco e acima do eixo X, simulando um piso para a bola.

Imagem: Bola inserida no palco com seu pivot destacado e suas propriedades de posição
zeradas.

28
 Para definir a animação da bola em loop, já temos que ter em mente que o
primeiro quadro será o mesmo do último quadro para que o loop funcione de forma
correta. Portanto, para que você fique familiarizado com o desenho da tabela de
animação, abaixo temos uma imagem de como irá funcionar esta animação:

Imagem: Desenho de uma tabela de animação mostrando um total de 24 quadros sendo o quadro 12
com a bola achatada.

O quadro inicial, iremos colocar a bola no canto mais alto, o quadro 12 já

sabemos que é quando colide com o chão, ou seja, eixo zero, e o quadro 24 será o
mesmo do inicial para justamente continuar o loop. Portanto, de acordo com o
desenho da tabela, já temos nosso loop definido, tempo de animação, e ainda o
controle dos extremos. Por isso o uso dela é tão importante em suas animações.
Então vamos continuar nossa animação:
No frame 0, iremos definir a posição y da bola em -1000, lembre-se sempre
de verificar se o eixo x está zerado, para não correr o risco da bola se movimentar
na horizontal:

Imagem: Sprite de bola na posição -100 do eixo y no frame 0.

29
 Agora, vamos para a parte de quicar: no frame 12, com certeza você já sabe
qual eixo y definir, portanto é nele que iremos achatar a bola, para simular o contato
com o chão:

Imagem: Bola achatada no frame 12 e sua posição zerada nas propriedades.

Lembrando que a forma correta de achar um objeto de cima para baixo,

simulando um corpo com massa em física, é a expansão para os lados e a
contração de cima para baixo:

Imagem: Demonstração da forma correta de achar um objeto de acordo com conceitos de massa na
física.

Como a interpolação já é automatizada, o frame 24 não precisaremos definir,

pois automaticamente ele irá seguir o loop para iniciar no frame zero, que é a
posição máxima de altura que definimos da bola.
Portanto, se executarmos o play, a animação já funcionará de boa, porém a
parte da colisão dará “problemas” por questões de interpolação.

30
 Para isso devemos criar um novo frame antes do frame 12, 11 por exemplo,
com a bola ainda com sua escala normal, indicando que antes da colisão, ela não
tem sofrido nenhum efeito de contato.
Portanto, estamos dizendo ao programa que: do frame 0 até 0 11 a bola
muda apenas a posição e não a escala, para que a interpolação siga com a bola na
escala 1 que é o padrão do sprite:

Imagem: Bola com suas escalas padrões durante o frame 11.

Porém, se você executar, após o frame 12 será criada uma interpolação

alterando a escala da bola, pois se ela estava achatada, temos que dizer até que
frame ela permanece achatada. Dessa forma, já utilizando a questão também do
timing, vamos dizer que no frame 15 ela ainda está achatada, mas com a posição
próxima ao chão, ou seja, zere novamente o eixo y, para deixar assim um maior
tempo de contato.

Imagem: Bola na posição zerada e no frame 15.

31
 Com isso, a nossa animação fica finalizada. Agora, para ajustar mais a
aceleração e desaceleração da bola, em vez da interpolação seguir seu fluxo normal
automático, edite criando uma posição a mais no frame 2 e 6, deixando esses novos
extremos mais próximos da altura máxima que a bola atinge no frame 0.

Imagem: Bola na posição y: -1050 no frame 2.

Imagem: Bola na posição y: -950 no frame 6.

32
 Finalizada a nossa animação da bola e se for ativado o onion skinning,
observe que fica nítido onde é mais lento, mais quadros em posições próximas, e
onde é mais rápido, menos quadros em posições distantes.

Imagem: Bola com o onion skinning ativado demonstrando a aproximação das posições.

A seguir, você pode acessar o QRCode para visualizar a animação da bola

quicando conforme todos os quadros executados aqui neste e-book:

QRCode animação da bola quicando

12 - Conceito sobre rigging de personagem

Rigging é processo de colocar “ossos” fixados nos sprites para poder realizar
movimentações como se fosse uma articulação humana, por isso, muitas vezes são
chamados de “ossos digitais”, pois quando colocados em um sprite humanoide por
exemplo, a armadura (termo utilizado para um conjunto de ossos montados) de
ossos fica estruturada como se fosse um esqueleto. No Spriter 2D, chamamos
esses “ossos digitais” de bones.

33
 Na movimentação desses “ossos” temos dois termos que irão mudar a forma
como se movimentam.
O termo FK de Forward kinematics (Cinemática Direta) e IK, Inverse
Kinematics (Cinemática Inversa).
Por padrão todo software de animação que pode ser utilizado a técnica de
rigging, os movimentos destes “ossos” seguem na forma FK. Cada “osso” segue
uma hierarquia que chamamos de pai, e filho, onde um bone na função de pai,
carrega todos os filhos que estiverem vinculados a ele, já um bone em função de
filho, tem a movimentação individualizada, não podendo carregar nenhum outro
bone.
Vamos, por exemplo, utilizar um braço robótico, onde suas partes já foram
separadas e “grudadas” em cada bone.
Na imagem a seguir, realizamos a movimentação apenas do bone 1, e
observe que todo o restante segue conectado ao movimentar. Portanto dizemos que
agora o bone 1 está na hierarquia de pai em relação aos outros, que estão na
hierarquia de filho.

Imagem: Sprite de braço robótico com cinco bones conectados nas partes.

Agora, se formos mover o bone 2, o bone 1 passa a não ter mais nenhuma
hierarquia em relação aos demais, porém o restante abaixo fica agora como filho do
bone 2, e realizando a movimentação, segue de acordo com a imagem:

34
 Imagem: Exemplo de movimentação do bone 2 em hierarquia de pai.

E assim sucessivamente, para todos os bones, chegando até os últimos,

bone 4 e 5 que não terão mais ligação de hierarquia com os demais ao movê-los,
ficando apenas bones únicos.

Imagem: Movimentação dos bones 4 ou 5 sem hierarquia com outros bones.

Já com a ativação do método IK, cinemática inversa, como o próprio nome já

diz, ele irá executar a inversão dos movimentos, portanto se mover-mos o bone 3

35
por exemplo, os anteriores a ele irão tentar realizar movimentos automáticos que
evitem colisões com os demais.

Imagem: Movimentação do bone 3 com cinemática inversa.

Agora que você conhece essas técnicas, que tal aplicar no spriter 2D? Mais
abaixo vamos inserir os bones nos elementos.

13 - Inserindo os bones no elemento

Para inserirmos bones no spriter 2D, é muito simples. Basta segurar a tecla
alt clicar e arrastar para o local que você quer que fique o bone.
Nas animações de personagens, costumamos criar um bone principal que irá
arrastar todos os outros bones. Este em muitos softwares é chamado de bone root.
Assim, pegando como exemplo a nossa personagem Judite, iremos criar o
bone principal abaixo dela:

36
 Imagem: Personagem Judite com um bone principal criado abaixo dela.

Após criar este bone, iremos seguir a questão de hierarquia. Para que os
outros fiquem conectados a este, dexando como o pai de todos, precisamos
selecioná-lo primeiro antes de criar um novo bone. Neste próximo bone iremos criar
a coluna da personagem.
Ao criar o novo osso, observe que se o principal foi selecionado, uma linha
azul irá indicar a conexão do próximo.

37
 Imagem: Linha de conexão entre os dois bones criados.

Agora, se você arrastar o bone principal, o da coluna será arrastado também

conforme a hierarquia. O próximo passo é criar o braço direito da personagem.
Certifique-se de que agora o osso da coluna esteja selecionado para que crie a
conexão deles, e que o bone da coluna fique na hierarquia de pai para os próximos
bones do braço.

38
 Imagem: Conexão do bone da coluna para o bone do braço direito da personagem.

Siga os mesmo passos até concluir totalmente o braço direito da

personagem.

Imagem: Bones conectados no braço direito da personagem.

Para iniciar o próximo braço, atente-se a deixar o bone da coluna

selecionado, para que a hierarquia fique correta e o bone fique sendo agora pai
tanto do braço direito como do braço esquerdo.

39
 Imagem: Conexão dos bones do braço esquerdo da personagem.

Observe que ao selecionar o bone da coluna e deixar o mouse sobre ela, as

linhas de conexão estão de forma correta seguindo para ambos os braços.

Imagem: Conexão do bone da coluna com os dois braços da personagem.

Se você realizar uma rotação, ou mover o bone da coluna, verá que ele
arrasta corretamente os dois braços.
Para fazer o bone da cabeça, selecione novamente o bone da coluna e crie
arrastando de baixo para cima, pois a ponta é onde é realizada as rotações.

40
Imagem: Bone para movimentar a cabeça com destaque no ícone de rotação.

41
 Para iniciar as pernas, novamente deixe o bone da coluna selecionado, e
crie os bones completos de uma delas, seguindo conforme passos anteriores.

Imagem: Conexão da perna esquerda ficando como hierarquia de filho do bone da coluna.

E para finalizar a outra perna, selecione novamente o bone da coluna e faça

os mesmos passos.
Estando tudo correto, as pernas ficarão conectadas ao bone da coluna,
conforme linhas de conexão exibidas na imagem abaixo:

42
 Imagem: Linhas de conexão das dos bones das duas pernas para o bone da coluna.

Ao finalizar, abrindo a aba de hierarchy no lado esquerdo do programa,

vemos todos os bones colocados na cena em uma hierarquia, porém com nenhum
sprite conectado ainda.

Imagem: Janela de Hierarchy exibindo os bones e os sprites inseridos no palco.

43
 Agora basta apenas fixar os bones ao sprite, para isso, selecione um bone, e
com a telca B pressionada, basta clicar no sprite que deseja e ele ficará fixado.
Após isso se você mover o bone, automaticamente ele irá arrastar o sprite fixado a
ele.

Imagem: Bone selecionado após a tecla B ser pressionada

Imagem: Bone sendo conectado ao sprite de nome bracoD.

44
 Observe que no lado direito nas hierarquias, ao passar o mouse por cima do
sprite que você vai conectar, ele fica destacado na janela.

Imagem: Janela de hierarquia mostrando o sprite de bracoD destacado.

Caso haja dificuldade em conectar os bones a alguns sprites, por exemplo, o

óculos e os olhos, que são um na frente do outro. Veja na hierarquia qual osso é o
que você está conectando e arraste os sprites para baixo dele, ficando exibido como
um submenu:

Imagem: Arrastando o sprite de nome olho1 e colocando no submenu do bone_008.

Observação: Não é necessário renomear os bones, mas caso queira

deixar mais organizado, é só clicar duas vezes e renomear.

45
 Caso você tenha conectado errado, para desconectar é só realizar o mesmo
procedimento: selecione o bone, pressione a tecla B e clique no sprite que quer
desconectar. Com isso mova e veja se está funcionando corretamente.
Se tudo estiver correto, seu personagem deve ser arrastando como um todo,
ao mover o bone principal.

Imagem: Personagem deslocado da posição A para posição B, arrastado pelo bone principal.

14 - Criando um ciclo de animação

Para executar uma animação, podemos tanto realizar com os próprios

conhecimentos, mas também, a ajuda de imagens de referência são de extrema
importância, pois nem sempre iremos conseguir fazer de forma fiel determinada
animação.
Por isso, até para lhe auxiliar também, temos uma imagem de referência do
ciclo de animação de uma caminhada disponível abaixo:

46
 Imagem: Referência para animação de caminhada (walk cycle).

Para ficar mais fácil de seguir a referência, altere a sua timeline como já
vimos anteriormente para seguir por frames e não por milissegundos.

Monte a primeira pose da personagem conforme imagem de referência, e

siga fazendo isso até o quadro 13. Lembre-se que agora você não utilizará os
sprites para realizar as movimentações, mas sim os bones. Portanto, um dica é
bloquear os sprites para não atrapalhar durante a seleção do bone:

Imagem: Ativado o bloqueio da seleção de sprites pelo menu Lock Sprites.

Outra dica bastante importante, é verificar antes de colocar a pose, se os

elementos estão nas sobreposições corretas. Por exemplo, o braço direito da
personagem deve passar por cima de todo o corpo e o braço esquerdo. Já o braço
esquerdo deverá passar por trás de todo o resto.
Para verificar isso realize movimentações nos bones e observe, caso esteja
errada a posição mude no Z-order antes de criar novos quadros.

47
 Imagem: Exemplo no Z-order da forma correta onde Perna Direita está acima da Perna
esquerda.

Veja que na referência temos algumas elevações no corpo do personagem,

realize o ajuste com o bone principal, pois com ele você irá arrastar todo o corpo
da personagem.

Imagem: Primeira pose da personagem seguindo uma referência.

48
 Imagem: Segunda pose da personagem seguindo imagem de referência.

Sempre vá observando um frame anterior ao outro, clicando e arrastando o

cursor vermelho da timeline, para ver se tudo está correto antes de seguir para os
próximos quadros.

Outro detalhe é que, se você observar um pouco mais, verá que a animação
de uma passada completa vai até o quadro 13, o restante é repetição de forma
invertida, infelizmente o software não tem opção de reconhecer e espelhar a
animação, porém em softwares 3D, saiba que essa técnica é bastante comum
utilizá-la. Dessa maneira, continue fazendo todas as poses até o frame 24, onde
este não precisará ser feito pois será o mesmo do primeiro.

Por fim, execute sua animação, e realize ajustes

finos em pequenos detalhes, para cada vez ela ficar mais
fluida e natural. Ao lado, você pode acessar como ficou a
animação final desta personagem com algumas
modificações extras:

49
 15 - Duplicando e reutilizando sua animação
É sempre bom aproveitar ao máximo nosso projeto, por isso, o ato de
duplicar uma animação já nos adianta toda a parte da inserção dos bones.
Para duplicar uma animação, basta clicarmos na própria animação do lado
direito na janela de Animations e clicar no ícone de clonar.

Imagem: Demonstração do ícone de clone de animações ou entidades.

Agora, com sua cópia, apague todos os frames deixando apenas o primeiro. E com
isso aproveitamos todo o rigging já feito do personagem. Para uma nova animação,
basta editar uma coisa ou outra e partir dela.

Imagem: Bones junto com sprites aproveitando para iniciar uma nova animação.

50
 Imagem: Janela de timeline com apenas o frame inicial reaproveitado.

16 - Exportando sua animação

Chegamos na hora de exportar nossas animações, e o spriter 2D nos dá
várias opções, cabe decidirmos qual será necessário para determinada finalidade.
Ao ir no menu File, Export Keyframes to PNG/GIF abrirá uma janela com
algumas opções e iremos destacar aqui as opções disponíveis que utilizamos da
versão gratuita.

Imagem: janela de exportação de animações.

Para exportar a animação completa, por padrão as opções já estão definidas

para isso, ou seja é só clicar em Export que você terá todos os quadros exportados

51
em imagens separadas. No caso da que utilizamos, temos 1 segundo de animação
e 24 imagens.
Sempre verifique se o FPS está de acordo com o que foi escolhido, como já
mencionamos anteriormente, 24 fps é o suficiente para uma animação 2D fluida.

Para exportar apenas os quadro-chaves, basta marcar a opção keyframes

only. Em vez de exportar todos os quadros, observe que automaticamente a janela
mostra o total de imagens que serão exportadas e, também, bloqueia para não ser
alterado imagens, intervalo e fps.

Imagem: Janela de exportação com a opção keyframes only ativada.

Outra opção que é utilizada bastante para o uso nos games, são as famosas
imagens no estilo sprite sheet, onde a animação fica em uma única imagem com
todos os quadros dentro, de forma horizontal ou vertical. A miniatura ao exportar
ficará desta forma por exemplo, com o nome que você definir:

52
 Imagem: Miniatura da exibição de uma imagem no estilo sprite sheet.

Já para o inverso, inverter a quantidade de imagens e ela sairá de forma

horizontal, que é o mais utilizado nos jogos digitais.

Imagem: Janela de exportação de animações com seleção de 24 imagens na horizontal e 1

na vertical.

53
 Imagem: Miniatura de sprite sheet na forma horizontal

A próxima opção é animated gif, que irá exportar sua animação em forma de
imagem GIF animada.
As próximas opções, são em relação ao retângulo recortado, que será
exportado as suas imagens, não aconselhamos alterar nenhuma dessas
configurações, pois pode ocasionar de imagens serem exportadas com cortes
indevidos. Portanto deixe sempre o padrão para exportar e não ter problemas:

Imagem: Janela exibindo opções dos tipos de cortes retangulares na animação.

A próxima parte é sobre a escala que sairá exportada, por padrão sua
animação é gerada com 100% da escala, mas caso queira suas imagens menores
ou maiores, basta editar os seus valores.

54
 Imagem: Janela de exportação de animações com a escala de largura e altura em
porcentagem.

E por último, caso queira que a animação saia com a cor de fundo padrão do
Spriter 2D, que no caso aqui utilizamos a cor cinza. Basta marcar a opção e as
imagens não sairão mais com o fundo transparente.

Imagem: Janela de exportação de animações com a opção de cor de fundo marcada.

A opção de marca d’água (watermak Output) é apenas disponível na versão

paga.

55
 Conclusão

E aí, Player! Gostou do que te ensinei? Tenho certeza que se você aplicar as
técnicas e deixar fluir toda essa criatividade que tem dentro de você, construirá
animações incríveis.
Sim a propósito, se você realmente curte o mundo dos games e não quer
apenas ser um player, mas um idealizador de projetos incríveis de jogos digitais,
continua no SENAI Play. Nós preparamos outros cursos SENAIcionais no ramo!
Opa, quase que esqueço… Separei uma novidade especialmente para você,
se liga aí que o SENAI Play também tem um canal no Youtube e você não vai dar
mole e ficar de fora, não é?
Acessa o QR Code e se inscreve lá!

Então é isso, Player! Valeu e até a próxima!

56
 Referências

SENAI, Serviço Nacional de Aprendizagem Industrial. Plano de curso de Animação

2D . Iniciação Profissional, PB, 2020.

SENAI/DN. Metodologia SENAI de Educação Profissional - MSEP. Brasília/DF,

2019.

SENAI/DN. Itinerário Nacional - TI Software, Brasília/DF, 2020

Spriter 2D. Disponível em: https://brashmonkey.com/. Acesso em: 02 de Agosto de

2021

57