Tutorial FP 7 – Animando
Autor: Luiz Eduardo da Silva | Publicado: 2011-11-25T08:39:00-08:00

Em "O Básico", nós incorporamos uma imagem e atribuimos ela a uma Entity como objeto de imagem. Porem, a Classe Image é para imagens de um único frame, este tutorial irá lhe mostrar como criar graficos animados usando a Classe Spritemap.

CRIANDO UM SPRITEMAP

A primeira coisa que devemos fazer é criar um objeto spritemap para nosso Entity, da mesma forma como criamos uma Image anteriormente. Por examplo, Eu irei animar este mapa de sprites:



O tamanho total do mapa de sprites é 288x64 pixels, mas cada frame individual tem 48x32 pixels, que é o que precisamos saber para criar nosso objeto spritemap.
Então para este exemplo, vamos criar a classe Player e encorporar o PNG:


package
{
 import net.flashpunk.Entity;

 public class Player extends Entity
 {
  [Embed(source = 'assets/swordguy.png')]
  private const SWORDGUY:Class;

  public function Player()
  {

  }
 }
}

Proximo passo, iremos criar um objeto Spritemap e atribuir ele a uma variavel:


package
{
 import net.flashpunk.Entity;
 import net.flashpunk.graphics.Spritemap;

 public class Player extends Entity
 {
  [Embed(source = 'assets/swordguy.png')]
  private const SWORDGUY:Class;

  public var sprSwordguy:Spritemap = new Spritemap(SWORDGUY, 48, 32);

  public function Player()
  {

  }
 }
}

O que fizemos acima? Criamos um objeto e atribuimos o arquivo de imagem a ele. Mas como um Spritemap não mostra somente uma imagem, mas sim frames individuais de um mapa de sprites, ele precisa saber o tamanho deste frame. Então passamos a altura e largura tambem.

CRIANDO ANIMAÇÕES

Agora, nos queremos atribuir uma animação para nosso Spritemap. Então nossso mapa de sprites tem 2 animações, uma animação parada e uma correndo, ambos tem o tamanho de 6 frames. Adicionamos animações usando a função add(), assim:


package
{
 import net.flashpunk.Entity;
 import net.flashpunk.graphics.Spritemap;

 public class Player extends Entity
 {
  [Embed(source = 'assets/swordguy.png')]
  private const SWORDGUY:Class;

  public var sprSwordguy:Spritemap = new Spritemap(SWORDGUY, 48, 32);

  public function Player()
  {
   sprSwordguy.add("stand", [0, 1, 2, 3, 4, 5], 20, true);
   sprSwordguy.add("run", [6, 7, 8, 9, 10, 11], 20, true);
  }
 }
}

Aqui, eu criei duas animações, "stand" e "run". A função add() recebe 4 parametros:

Nome : Name (uma string)
Frames : Frames (um array de frames para rodar)
Velocidade : Speed (frames por segundo)
Repete : Looping (verdadeiro ou falso)

Damos nomes para nossas animações para podermos acessa-las mais tarde, quando querermos rodar ou trocar uma animação. 
Então, atribuimos um conjunto de frames. O frame superior esquerdo de um mapa de sprites tem a posição 0, e continua contando da esquerda para direita e de cima para baixo.




O terceiro valor é a velocidade da animação, em frames por segundo. Eu escolhi 20 para estas animações em particular.
E Finalmente, com o ultimo parametro sabemos se você quer ou nao que sua animação repita.

Não esqueça de atribuir seu Spritemap para sua Entity.


package
{
 import net.flashpunk.Entity;
 import net.flashpunk.graphics.Spritemap;

 public class Player extends Entity
 {
  [Embed(source = 'assets/swordguy.png')]
  private const SWORDGUY:Class;

  public var sprSwordguy:Spritemap = new Spritemap(SWORDGUY, 48, 32);

  public function Player()
  {
   sprSwordguy.add("stand", [0, 1, 2, 3, 4, 5], 20, true);
   sprSwordguy.add("run", [6, 7, 8, 9, 10, 11], 20, true);
   graphic = sprSwordguy;
  }
 }
}

RODANDO ANIMACOES

Agora que já criamos nossas preciosas animações, podemos dizer qual delas deve rodar usando a função play() do spritemap assim:


sprSwordguy.play("stand");

Dica: Se voce mandar rodar uma animação que já está rodando, nada vai acontecer. Mas se você quiser reiniciar a animação, indique o parametro para tal, assim:

sprSwordguy.play("stand", true);



Fonte : FlashPunk

Créditos : ChevyRay