Tutorial FP 3 – O Básico
Autor: Luiz Eduardo da Silva | Publicado: 2011-11-25T08:25:00-08:00

Nota: Este tutorial lhe ensina a fazer games usando FlashPunk(FP), mas não lhe ensina o básico de ActionScript3 ou como usa-lo. Existe muitos materiais na internet para aprender a usa-lo.Neste tutorial iremos cobrir o básico sobre FP. Este é o tutorial principal para continuar os proximos tutoriais, assim que você tiver terminado a tutorial 1 e 2, continue neste.

PASSO 1 : INICIANDO A ENGINE 

O ponto inicial de qualquer game um Flash eh sua classe Main, e tambem será nosso ponto inicial para os projetos FP. Normalmente, sua classe Main extende a Classe Flash Sprite, e deve parecer assim:


package
{
 import flash.display.Sprite;
 public class Main extends Sprite
 {
  public function Main()
  {

  }
 }
}

Mas o FP tem um monte de operações internas a fazer, então ele já tem uma classe especializada que substituira a classe Sprite. Ela é a classe Engine. então para começar nosso game, sua classe Main deve parecer assim:


package
{
 import net.flashpunk.Engine;

 public class Main extends Engine
 {
  public function Main()
  {
   super(800, 600, 60, false);

  }
 }
}

Vamos prestar atenção para a linha dentro do contrutor Main(), que é o ponto inicial para o FP. esta função super() chama o contrutor da Engine e instancia algumas variaveis importantes para nosso game, que são:
Largura (Width) para a tela ( em pixels)&nbsp;
Altura (Height) para a tela ( em pixels)&nbsp;
Taxa de frame do game ( em frames por segundo)&nbsp;
Taxa de frame fixa ( padrão falso)Este ultimo parametro é importante, é ele que decide qual tipo de tempo  queremos em nosso game. Mas agora vamos deixa-lo como falso, diferentes tempos serão discutidos com mais detalhes em outros tutoriais.
Agora, vamos testar se o FP está iniciando corretamente com trace(). Para isto, iremos sobrescrever a função init() de Engine, assim:


package
{
 import net.flashpunk.Engine;
 import net.flashpunk.FP;

 public class Main extends Engine
 {
  public function Main()
  {
   super(800, 600, 60, false);
   FP.world = new MyWorld();
  }

  override public function init():void
  {
   trace("FlashPunk iniciou corretamente!");
  }
 }
}

A função init() de Engine é a função chamada pelo FP quando( e somento neste momento) o game inicia pela primeira vez, e tudo está pronto para rodar. Imeditamente depois que esta função é chamada, a recursividade do game começa e seu game irá rodar. Então teste seu game e veja se o trace aparece no console, se tudo estiver certo passe para o próximo passo.

Passo 2: CRIANDO MUNDOS

Quando FP inicia, a recursividade atualiza uma classe World especifica. World é um classe de orginazação do FP: você pode ter a quantidade de Worlds que querer, mas somente um pode estar ativo por vez, e quando um World está ativo, ele ira atualizar e renderenizar todas e qualquer objetos Entidades adicionados a ele. Então um game simples deve ter um World para o Menu e outro para o Gameplay. Games mais complexos, assim como games de plataforma, devem tor um World para o menu e então Worlds separados para cada level do game. É decisão do desenvolvedor como seu game estará organizado.

Então iremos criar um novo World chamado MyWorld, iremos criar uma nova classe e extender World, assim:


package
{
 import net.flashpunk.Engine;
 import net.flashpunk.FP;

 public class Main extends Engine
 {
  public function Main()
  {
   super(800, 600, 60, false);
   FP.world = new MyWorld();
  }

  override public function init():void
  {
   trace("FlashPunk iniciou corretamente!");
  }
 }
}

E para mudar o World ativo no FP, só temos que criar uma instancia do World que queremos e apontar a variavel FP.world para o World que queremos. Então agora, para colocar a classe MyWorld como inicio do nosso game, vamos para a nossa classe Maind e adicionar as seguintes linhas:


package
{
 import net.flashpunk.Engine;
 import net.flashpunk.FP;

 public class Main extends Engine
 {
  public function Main()
  {
   super(800, 600, 60, false);
   FP.world = new MyWorld();
  }

  override public function init():void
  {
   trace("FlashPunk iniciou corretamente!");
  }
 }
}

Agora, MyWorld est'a sendo atualizado pela Engine de nossa classe Main, e irá atualizar qualquer Entidade que você adicionar a ela, iremos cobrir este assunto no próximo passo. NOTA Apontando FP.world para um World não o ativa imediatamente, mas intancia um chamado interno para ativar o mundo no fim do frame atual. É importante escrever seus códigos em inglês para quando precisar de alguma ajuda em foruns ou quiser disponibilizar seus códigos, todos entendam.
NOTA:Apontando FP.world para um World não o ativa imediatamente, mas intancia um chamado interno para ativar o mundo no fim do frame atual.
É importante escrever seus códigos em inglês para quando precisar de alguma ajuda em foruns ou quiser disponibilizar seus códigos, todos entendam.PASSO 3: CRIANDO ENTIDADES

Agora temos nossa Engine rodando, e fazendo nosso mundo atualizar, mas não temos nenhum objeto em nosso programa. Então nosso proximo passo será trabalhar com a classe mais comum que você irá usar com FP, a classe Entity. Uma Entity representa qualquer objeto no seu game que pode:

Atualizar (mover, IA, controlar alguma logíca do game)
Renderenizar (desenhar gráficos na tela)
Colidir (interagir com outras Entidades)

Por exemplo, uma simples Entidade Jogador pode se mover pelo game com sua função de atualizar, desenhar um sprite na tela em sua função de renderenizar, e morrer quando colidir com uma Entidade espinho. Mas para as Entidades fazer qualquer dessas coisas elas precisam ser adicionadas ao World. Então primeiro devemos criar uma classe Entity chamada MyEntity(lembrando, sempre em inglês), assim:


package
{
 import net.flashpunk.Entity;
 public class MyEntity extends Entity
 {
  public function MyEntity()
  {

  }
 }
}

Agora que criamos nossa classe Entity, podemos adiciona-la ao nosso World. Abra o MyWorld novamente e adicione esta linha ao seu construtor:


package
{
 import net.flashpunk.World;
 public class MyWorld extends World
 {
  public function MyWorld()
  {
   add(new MyEntity());
  }
 }
}

Este código usa a função add() da classe World para adicionar uma nova instancia de nossa classe MyEntity para o mundo quando ele é criado.
NOTA:você pode remover um objeto do World usando a função remove().Agora, quando nosso World está criado e ativo, iremos dizer para nossa Entity atualizar e renderenizar. Vamos testar, vá para MyEntity e sobrescreva a função update(), assim:


package
{
 import net.flashpunk.Entity;
 public class MyEntity extends Entity
 {
  public function MyEntity()
  {

  }

  override public function update():void
  {
   trace("MyEntity atualiza.");
  }
 }
}

Quando a função update() do World é chamada, ele consequentemente chama a função update() de todas as Entidades adicionadas. para adicionar uma ação especifica para sua Entity quando ela atualiza, você deve sobrescrever a função update() como fizemos aqui. Neste caso, Eu só adicionei um simples trace() para dizer no console que nossa Entity está atualizando. Se você testar seu game, a mensagem de trace() deve aparecer uma vez a cada frame, com a taxa de frames especifidada no construtor de nossa classe Main( neste tutorial, especificames 60 frames por segundo)

PASSO 4: INCORPORANDO GRÁFICOS

Desde que FP foi arquitetado para gráficos bitmap, os tipos de imagens que você irá trabalhar geralmente são PNG, GIF e JPEGs. Uma vez que tiver a imagem preparada, ache um lugar no diretorio de seu projeto para guardad seu gráficos e mova a imagem para lá. Por exemplo, Eu estou usando este pequeno sprite:



E eu coloco na pasta chamada assets. Agora, para coloca-lo em nosso game, temos q incorpora-lo na classe do game. Por example, eu irei abrir nossa classe MyEntity e incorpora\la desta forma:


package
{
 import net.flashpunk.Entity;
 public class MyEntity extends Entity
 {
  [Embed(source = 'assets/player.png')]
  private const PLAYER:Class;

  public function MyEntity()
  {

  }
 }
}

Esta linha incorpora o arquivo encontrado no local especificado(relativo a esta classe), e a segunda linha atribui o arquivo para a propriedade. A propriedade não precisa divider o mesmo nome com o arquivo, pode ser o que você quiser, assim como PLAYER_IMG, PLANE_SPRITE, ou somente PLAYER como eu usei. Só para ter certeza que o arquivo tem uma unica propriedade de referencia.

Mas somente incorporar o arquivo não o mostra na tela de nosso game, para fazer isto, nós teremos que dizer para nossa classe MyEntity para rendereniza-lo na tela. No FP, o jeito mais usual para fazer isto é criar um objeto gráfico e fixa-lo na propriedade gráfica da Entity. FP tem muitos tipos de classes gráficas disponiveis para diferentes propósitos. For this example, since our graphic is just a single, non-animated plane sprite, we will use the Image class, like so:


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

 public class MyEntity extends Entity
 {
  [Embed(source = 'assets/player.png')] private const PLAYER:Class;

  public function MyEntity()
  {
   graphic = new Image(PLAYER);
  }
 }
}

Se você salvar e rodar seu game, sua Entity irá renderenizar o gráfico em seu local atual, que é (0, 0) por padrão (canto esquerdo superior da tela).E este é o basico do basico para começar a programar seu game!

Fonte : FlashPunk

Créditos : ChevyRay