[GIF] LSW Sprite Tutorial

[align=center]

Nesse tutorial eu vou mostrar o básico da animação de sprites LSW, o modelo de
sprites de Dragon Ball mais comum no GB, GBC e GBA. Hoje os modelos existentes são em ge-
ral versões remixadas melhores que os originais. Vocês podem encontrar esses sprites em con-
juntos chamados sprite sheets, que podem ser encontrados procurando por:

nome personagem + lsw + sprite sheet

Ou em sites como DBZ VORTEX , que possuem grandes acervos de sprites lsw.

PS. Como esse tutorial pode ficar grande e complicado, vou adicionar posteriormente um sumário que utilizará provavelmente Crontol + F para buscar na página.

---

[size=large]Cap. 1 - Introdução aos gifs no PS [/size]

Para os que não estão acostumado a fazerem gifs, nessa parte vou explicar os botões principais, os tamanhos, e as ferramentas necessárias. Começando pela janela Animation que dever ser ativado em Window > Animation antes dos passos seguintes.



Novo frame > Duplica o frame atual, na verdade. Nesse novo frame é que devem ser feitas as modificações do atual.
Excluir frame > Exclui o frame atual. Corrige erro causados por uma modificação errada.

► = Play
|►= Próximo frame
◄| = Frame anterior
◄◄ = Voltar ao início

1- Crie um novo documento. Eu recomendo, para pequenos gifs, um tamanho 64x64 e para mais largos, 300x64. Para grandes ataques, em torno de 450x250. Mas pode ser maior, embora os sprites pareçam minúsculos em algo de 500px e fundos desse tamanho sejam raros. E em tamanhos menor que esse é quase impossível explorar um sprite com fundo, mas pode ficar bem em alguns casos.

2- Vou usar esse sprite do Kurilin com um fundo simples para explicar a adição de quadros.



Cada movimento precisa de um quadro. Se eu quiser que o Kurilin deve dar 6 socos e parar, esperar 0,5 segundo e dar mais 6 socos, devo ter as imagens de Kurilin parado, socando com a mão direita, socando com a mão esquerda. Logo devo ter somente 3 Sprites mas 7 Quadros.



3- Para isso, copio e colo, individualmente (e sem fundo) na minha imagem, as três posições do Kurilin, uma sobre a outra. Elas devem estar as três sobre o fundo. Então, oculte todas as camadas (clique no olho ao lado delas), menos o fundo, e deixe visível a imagem do primeiro quadro. Novo quadro, deixe visível a camada desse segundo quadro. Faça o mesmo com o terceiro. No primeiro clique na pequena setinha e ajuste para 0,5. No segundo e teceiro, 0,2. Agora, para economizar tempo, selecione os quadros 2 e 3 com shift e duplique duas vezes. Você terá isso:





4-Aperte ► para ver se está tudo certo com seu trabalho. Se estiver, vá a File > Save for Web and Devices e clique em Save. Seu trabalho deve estar assim:

---

[size=large]Cap. 2 - Movimentação do personagem [/size]

Uma parte importante e divertida, além de rápida. Deve explicar como movimentar o personagem no espaço. Ocupará bem mais frames que o capítulo anterior, já que cada movimento exige um quadro para si.

1- Nesse caso, usarei um sprite sheet do Goku no pequeno planeta de Kaio-Sama. Para explicar o movimento melhor, usei um quadro mais largo:



Lembre-se disso:

• Cada quadro representa um movimento de um personagem/ataque/camera (veremos mais tarde)
• Podemos dividir esses movimentos em deslizar (os sprites de Dragon Ball não correm, deslizam pelo ar), parar e tele-transportar
• Quantos mais quadros, mais fluido o movimento. Quanto menor a velocidade, mais quadros serão precisos.

- Deslizar -

Cada "fantasma" abaixo representa um movimento/quadro de Goku. Todos eles exibidos em sequencia dão a ideia de movimento. Quase como um filme em stop-motion.




1- Vamos começar com o Goku dado uma volta no planeta. Mova todos os sprites (selecione as camadas deles com shift) para onde você quer que comece. Goku executa apenas dois movimentos: deslizar e parar no início e fim. Eu quero uma volta rápida, afinal, não quero que ele fique dez segundos sem aparecer. Coloco, no primeiro quadro, ele parado. No segundo, ele começa a deslizar, então oculto ele parado e deixo visível ele deslizando. Coloco esse sprite ao lado direito do anterior, nem muito próximo nem muito longe. Faço o mesmo nos quadros seguintes, até Goku sair da tela totalmente. Então começo a move-lo pelo outro lado, o esquerdo, até chegar no ponto inicial. Isso resulta, para mim, em 13 Quadros e 2 Sprites (4 camadas: Fundo, Sprite 1, Sprite 2 e Borda)

[img=640x99]https://2img.net/r/ihimizer/img263/9929/tgyt.png[/img]



2- Reparem que na janela Animation os quadros tem tempos diferentes e que não aparecem diretamente ao apertar a setinha ao lado do tempo. Então cliquem na seta e definam tempos que pareçam fluidos, mas não rápidos demais, para seus quadros, como se fosse uma sequencia de movimentos "natural".



PS. Há ainda movimentos de ré, subida e descida, mas eles funcionam da mesma maneira que esses, só que em outras direções.

- Tele-transportar -

Não é o verdadeiro Shunkan Idou, é somente aquilo do guerreiro ir tão rápido que se torna invisível por um instante. Pode acontecer parado, para fugir de um ataque (também fica bem para resetar a cena, voltando o personagem ao início), ou logo após um pequeno deslizamento, desaparecendo e aparecendo na frente do inimigo para ataca-lo.

1- Para o primeiro exemplo, comece com o personagem parado. No segundo quadro, o sprite de tele transporte. Quadro vazio. Nesse quarto quadro, mova ambos os sprites para o local de destino, mantendo só o tele-transporte visível agora. Quinto quadro, oculte o tele-transporte e deixe visível o sprite parado. Para voltar, repita o movimento. É simples pois só ocupa 5 frames (de ida) e 2 sprites.



2- Para o segundo exemplo, que é mais complexo, adicionei um chute no fim. Esse meio é como se fosse a mistura entre o deslizar e o tele-transporte. O pequeno impulso no início da uma atitude mais agressiva e prepara quem vê para um ataque. Comece do mesmo jeito que o deslizar nos primeiros 2 frames. Mas, no terceiro, use o tele-transporte, tela vazia, tele-transporte no destino e reapareça nesse novo local, só que dando um chute ao invés de parado. Então, finalmente, pare. Pode resetar a cena com um tele-transporte ou deslizar de ré agora e acabar a sequencia!

---

[size=large]Cap. 3 -Dominando o Ki[/size]

[size=x-large][EM CONSTRUÇÃO][/size]
[/align]

Feito por Finger do fórum DB-PT.

Qual progama você usa para fazer o gifs?E qual é o site para baixar?

Laura voltou! Foi feito pelo Finger do DB-PT logo penso que Laura pode ou não ter esse progama...