Colocando SpritesSHeets em Seus Jogos

[Newot 0]

<div align="center">Colocando SpriteSheets em seus jogos</div></span>

 

 

Esta é uma pergunta feita por muitos usuários que estão come´ando: como transformar spritesheets em sprites reais para serem utilizados dentro dos games? Esta matéria abordará exatamente esse tema. Estarei trabalhando com o The Games Factory aqui, mas o procedimento nos outros programas da linha "click" (mfx por exemplo) é basicamente o mesmo.

 

 

1. Definindo o SpriteSheet

 

Nesta matéria, estarei colocando um spritesheet do Yoshi dentro de um game. Salve a figura abaixo em seu computador (clique para ampliar):

 

 

Nesta matéria irei trabalhar com as seguintes anima´ões: Stopped, Walking, Jumping e Falling.

 

 

2. Importando o conteúdo

 

Abra o TGF, vá até o Frame Editor e crie um novo objeto ativo, conforme a foto abaixo:

 

 

Agora você está Animation Editor. Dê dois cliques no quadro 1*.

 

* Lembre-se que estamos trabalhando com a anima´ão Stopped na dire´ão da direita!

 

A figura abaixo mostra o Picture Editor do TGF. É nele que todo o trabalho come´a.

 

 

Veja que você pode clicar no ícone da pasta para importar uma figura. No entanto, no caso das figuras, você poderá apenas importar imagens no formato .bmp (bitmaps). O spritesheet que estamos trabalhando é um .gif, mas o TGF não aceita esse formato [diretamente] (o MMF aceita).

 

Mas espere! Para colocar GIFs no TGF, podemos utilizar um simples artifício. Abra o spritesheet utilizando o famoso Microsoft Paint que vem no Windows. Para que o truque funcione, é necessário converter a imagem para um bitmap comum. Vá em Arquivo - Salvar como. Em seguida, salve a imagem em qualquer lugar do seu computador (com qualquer nome), marcando a caixa "Salvar como tipo" com o valor Bitmap de 24 bits. Confira a foto abaixo:

 

 

Agora, o spritesheet está no formato .bmp, podendo ser lido pelo TGF.

 

 

3. Transferindo os quadros

 

Volte ao Picture Editor do The Games Factory. Agora sim, clique na pasta de importa´ão e selecione o arquivo que acabou de salvar como .bmp no MS Paint.

 

 

Uma tela com o SpriteSheet aparecerá. Neste momento, certifique-se de que a op´ão Capture - Transparent Mode* esteja ativada, conforme figura abaixo:

 

* Com a op´ão Transparent Mode ativada, o TGF reconhece a cor do primeiro pixel selecionado como transparente.

 

Em seguida, selecione o primeiro quadro da anima´ão Idle.

 

 

Então, ele será copiado para o Picture Editor. Clique no botão Shrink para retirar as áreas transparentes.

 

 

Pronto! Você copiou o passou quadro da anima´ão para o TGF! Agora falta configurar o Hot Spot... Mas espere! Estamos trabalhando com a dire´ão da direita da anima´ão Stopped, mas o Yoshi está olhando para a esquerda. Nesse caso, clique no botão Flip Horizontally. Problem solved.

 

 

4. Posicionando o Hot Spot

 

O Hot Spot* é basicamente o ponto onde o personagem se apóia. Todos os frames da anima´ão trabalham em cima dele. Apesar de não ser estritamente necessário, o ideal é colocá-lo sempre nos pés do personagem (no caso de jogos de plataforma). Primeiramente, devemos mostrá-lo na tela. Confira a foto abaixo:

 

 

Um cursor aparecerá. Arraste-o para os pés do sprite.

 

 

Pronto, o Hot Spot está configurado! O primeiro frame da anima´ão também está pronto! Clique no botão OK para voltar ao Animation Editor.

 

 

5. Terminando a anima´ão

 

Para terminar de transferir a anima´ão, é necessário copiar os outros quadros. No nosso caso, ainda faltam 2. Clique no segundo quadro e repita os mesmos passos, mas desta vez copie o segundo frame do spritesheet. O mesmo vale para o terceiro quadro. O resultado será o seguinte:

 

 

Agora, vamos configurar a anima´ão:

 

• Na barra de rolagem Repeat, dê um clique na seta para trás. A caixa de texto ao lado que antes estava marcada com o número

1 passou a mostrar a palavra Looping.

 

A op´ão Repeat controla o número de vezes que a anima´ão será repetida. 1, 2, 3, 4, 5, (...), ou até mesmo 100 vezes. No entanto, se quisermos que ela fique sempre se repetindo, devemos colocá-la como Looping.

 

• Esta anima´ão "Idle" do spritesheet parece ser um pouco estranha... Se você não configurar mais nada, vai parecer que o sprite está andando, ou algo assim. Para deixá-la mais bonita, arraste o quadro 2 para o quadro 4. O frame será copiado. Você também pode deixar apenas 1 único quadro, deletando todos os outros. Mas nesse caso o Yoshi ficará totalmente parado, o que não é muito bonito (bem, depende do gosto de cada um). No meu caso, estou deixando a anima´ão com os 4 quadros.

 

• A op´ão Anim Speed controla a velocidade da anima´ão. Neste caso, estipulei o valor 9. Quanto menor o valor, mais lenta a anima´ão ficará.

 

• Você pode prever a anima´ão clicando no ícone da câmera, ao lado do botão OK do Animation Editor. Caso ela fique um pouco trêmula, é um problema no posicionamento do Hot Spot. Tente posicioná-lo na mesma posi´ão em todos os quadros.

 

Veja como ficou:

 

 

Terminamos a dire´ão da direita, mas agora falta fazer a da esquerda. Vá em Edit (menu) - Select all - Frames and copy. Na área Direction, você pode ver que há uma seta apontada para um ponto que fica na direita, sinalizando a dire´ão em que estamos. Clique no ponto da esquerda. Todos os quadros terão desaparecido... Mas espere! Na verdade eles continuam lá, mas na dire´ão da direita. Lembre-se que agora estamos na da esquerda.

 

Feito isso, vá em Edit - Paste. Você terá copiado os quadros para a dire´ão da esquerda. No entanto, o sprite está olhando para a direita, e não para a esquerda como devería estar. Para resolver esse impasse, clique no botão Reverse Horizontally, conforme foto abaixo:

 

 

Pronto! Terminamos esta anima´ão!

 

"Ei @leX, o spritesheet vem originalmente com o personagem olhando para a esquerda. Aqui, fizemos a dire´ão da direita primeiro; tivemos que 'flipar' o sprite para ele olhar para aquela dire´ão. Agora, tivemos que 'flipá-lo' novamente para que ele voltasse a olhar para a esquerda. Não sería mais fácil come´ar pela esquerda?"

 

Sería, e você deve prestar aten´ão nesses detalhes quando estiver trabalhando em seus sprites. No entanto, comecei dessa forma para poder explicar a op´ão Flip Horizontally num primeiro momento.

 

Agora, falta fazer ele andar (anima´ão Walking) e pular (Jumping/Falling). Clique na caixa de sele´ão Animation (onde está escrito "* Stopped"), vá em Walking e fa´a a anima´ão para que o personagem possa andar. O mesmo vale para Jumping e Falling.

 

Pode parecer trabalhoso à primeira vista, mas com um pouco de prática é possível terminar esse trabalho em pouco mais de 1 minuto.

 

 

Clique em OK para salvar seu sprite. Tenha aten´ão, pois se clicar em Cancel, terá perdido o trabalho!

 

... e vualá! O sprite foi terminado!

 

 

<span style="color:#0000FF">6. Considera´ões finais

 

 

• Caso você tenha terminado um sprite anteriormente e precise adicionar e/ou alterar anima´ões já existentes, basta clicar com o botão direito do mouse nele e ir em Edit Animations.

 

• Você __não__ precisa repetir todo esse processo para diferentes jogos. Basta criar uma lib. Para isso, simplesmente salve o arquivo .gam na pasta libs\ do The Games Factory* e reinicie o programa. Assim, você terá seus sprites sempre disponíveis.

 

* Supondo que seu TGF esteja na pasta C:\GFactory, salve o arquivo .gam na pasta C:\GFactory\libs

 

• Você também pode colocar fundos/plataformas/outros objetos em geral usando o mesmo esquema. No entanto, quando for criar um novo objeto no Frame Editor, ao invés de selecionar Active Object, selecione Backdrop (ou Quick Backdrop) Object.

 

Termino a matéria por aqui. Espero que tenham gostado.