Flipbook é um recurso do Paper 2D usado para criação de animação 2D com Sprites. Neste artigo veremos como usar Flipbooks para animar um lutador.
Vamos usar a imagem abaixo que contém os Sprites de um lutador fazendo diversos movimentos. Este lutador é de uma versão antiga do MUGEN.
 |
| Clique para aumentar |
Crie um novo projeto vazio sem usar o Starter Content e crie um novo nível vazio. No Content Browser, crie uma pasta com o nome "FighterSprites" e importe a imagem acima do lutador para dentro desta pasta. Renomeie a textura para "Fighter". Clique com o botão direito na textura e escolha a opção "Sprite Actions -> Apply Paper2D Texture Settings". Salve a textura.
 |
| (versão 4.8) |
Escolha a opção "Sprite Actions -> Extract Sprite" :
No "Sprite Extract Mode" selecione "Grid" e coloque no tamanho dos sprites 104x124:
 |
| Clique para aumentar |
Agora vamos criar os Flipbooks com algumas animações do lutador. Selecione os sprites com índices de 0 a 5 (Fighter_Sprite_0 a Fighter_Sprite_5). Clique com o botão direito e escolha a opção "Create Flipbook":
 |
| Clique para aumentar |
Renomeie o Flipbook criado para "IdleAnim". Esta é a animação que o lutador vai usar quando não estiver se movimentando. Dê dois cliques no flipbook para abrir o Flipbook Editor:
 |
| Clique para aumentar |
Na propriedade "Frames Per Second" coloque o valor 10. Isto precisa ser feito para todos os Flipbooks que vamos criar neste artigo.
É preciso fazer alguns ajustes na sequencia dos sprites da "IdleAnim". A animação usa os sprites nesta ordem { 0,1,2,3,4,5,4,3,2,1 }. Então é preciso duplicar os sprites 1 a 4 e colocá-los na ordem inversa no final na animação. Para duplicar, clique com o botão direito em um dos sprites da animação e escolha "Duplicate":
Depois basta clicar e arrastar os sprites para a posição correta. A "IdleAnim" ficará assim:
 |
| Clique para aumentar |
No Content Browser selecione os sprites com índices de 6 a 21 e crie um flipbook com o nome "WalkAnim". Mude o "Frames Per Second" para 10.
Selecione os sprites 34, 35 e 36 e crie o flipbook "PunchAnim". A sequência da "PunchAnim" é {34,35,36,36,35,34}. Observe que o sprite 36 ocupa dois frames da animação. O editor de Flipbook permite definir quantos quadros de animação um sprite ocupa:
 |
| Clique para aumentar |
O flipbook "KickAnim" é muito parecido com o "PunchAnim". Ele usa os sprites 37, 38 e 39 e a sequencia de animação é {37,38,39,39,38,37}.
Agora vamos criar o Blueprint do Lutador. Ele será do tipo "PaperCharacter":
 |
| Clique para aumentar |
Coloque o nome de "FighterCharacter" para este novo Blueprint e abra o editor de blueprints. Um "PaperCharacter" possui um componente flipbook com o nome Sprite. Selecione-o e escolha "IdleAnim" como "Source Flipbook":
Crie as seguintes variáveis Booleanas:
Para controlar o lutador, vamos usar as setas direita e esquerda para movimento, o Shift e Control esquerdos para soco e chute. A imagem abaixo mostra os eventos de input:
 |
| Clique para aumentar |
As animações que vamos usar possuem características diferentes. Uma será executada em modo reverso e algumas permanecem em loop. Para facilitar, crie uma Macro com o nome "Play2DAnimation" e coloque os seguintes parâmetros:
O parâmetro "Flipbook Component" é do tipo "Paper Flipbook Component". O parâmetro "Animation" é do tipo "Paper Flipbook".
A Macro tem as seguintes ações:
 |
| Clique para aumentar |
As ações do Lutador serão controladas no evento "Tick". Se o lutador estiver atacando, então nenhum comando novo será feito até que a animação de ataque termine. As imagens abaixo mostram as ações do Evento "Tick".
 |
| Clique para aumentar |
 |
| Clique para aumentar |
Você pode adicionar um background e uma câmera da mesma forma que foi feito no artigo "Jogo Paper 2D: Sprites e Câmera". O blueprint "Fighter" pode ser definido como "Default Pawn" em um "GameMode". Se fizer isso, não esqueça de colocar um "PlayerStart" no nível para indicar onde o jogador iniciará.
Um "PaperCharacter" já está configurado para usar a gravidade automaticamente. Se você não quiser usar a gravidade, basta colocar o valor "0.0" na propriedade "Gravity Scale" do Componente "CharacterMovement" :
Próximo: Níveis 2D com Tile Maps
Anterior: Jogo Paper 2D: GameManager e GameMode
Sumário