Aquecimento Global Game Jam

Flixel

Tácio Dias Palhão Mendes

Sumário

Configurando o FlashDevelop

Configurando o FlashPlayer debug

Adicionando a Flixel (e seus plugins)

Configurar Preloader

Classe Main

Trocar telas

Criando uma sprite (estática ou animada)

Tratando Inputs.

Desenhando Texto

Criando Botões

Tocar Sons e Musica

Efeitos Interessantes

Exemplo Partículas

Recomendações de arquitetutra

Referencias

Configurando o FlashDevelop

1º Passo - Baixar TODAS AS COISAS: http://www.flashdevelop.org/community/viewtopic.php?f=11&t=9252

http://flixel.org/download.html

http://www.photonstorm.com/flixel-power-tools

Adicionando a Flixel

2º Passo – Criando o projeto

Adicionando a Flixel

3º Passo - Crie uma pasta, no diretório do seu projeto chamada lib (pode ser qualquer nome na verdade...)

Adicionando a Flixel Power Tools

Passo Opcional – Copie esta pasta para dentro do caminho lib/org/flixel/plugin

Adicionando a Flixel

4º Passo - Cole esta pasta dentro da sua pasta lib.

Configurando o FlashDevelop

5º Passo – Crie uma pasta, no diretório do seu projeto chamada lib.

Configurando o FlashDevelop

6º Passo – Clique em

Configurando o FlashDevelop

7º Passo – Clique em Classpaths – Add Classpath

Configurando o FlashDevelop

8º Passo - Escolha a pasta lib dentro do seu projeto.

Selecione apply, depois OK.

Configurando o preloader

Crie uma nova classe e coloque este código nela. Você também tem a opção de sobrescrever o método create() e update() se quiser personalizar o seu preloader

package {

import org.flixel.system.FlxPreloader;

public class MyPreloader extends FlxPreloader{

public function MyPreloader(){

//Alterar o className. //Ele deve ser o nome da classe main do projeto

className = "Main";super();

}

}

}

Classe Main

Sua classe main deve se parecer com isto:

package {

import org.flixel.*;

//Resolução do .swf[SWF(width = "800", height = "600", backgroundColor = "#000000")]

//Nome do seu PreLoader aqui[Frame(factoryClass="MyPreloader")]/** * Main.as * @author Tacio */public class Main extends FlxGame{

public function Main(){ //Se quiser gráficos pixelados, divida os valores de altura e largura por 2 por exemplo //E no último parâmetro coloque o último parâmetro (zoom) como 2

super(800, 600, GameManager, 1);}

}

}

Trocar Telas

As suas telas de jogo, são conhecidas na Flixel como classes do tipo FlxState.

Sempre que você precisar estender algum tipo flixel (FlxState, FlxSprite) você sempre terá que reescrever 2 métodos: create() e update()

Para criar uma tela, primeiro faça com que sua classe de tela extenda FlxState

NUNCA REESCREVA O CONSTRUTOR DAS CLASSES!

Trocar Telas

Seu código deverá se parecer com isto:package {

import org.flixel.FlxState;/** * ... * @author ... */public class MyFlixelState extends FlxState{

public function MyFlixelState() {//DEIXE SEMPRE VAZIO, //Do contrário! Você conhecerá o inferno dos problemas aleatórios de memória, etc.

}

override public function create():void {super.create();//Suas inicializações Aqui

}

override public function update():void {super.update()//Seu código aqui

}

}

}

Trocar Telas

Para trocar de telas, use: var novoState:MeuOutroFlxState = new MeuOutroFlxState();

novoState.create();

FlxG.switchState(novoState);

Criando Sprites (animadas ou não)

No corpo de atributos da sua state, você deve colocar a imagem como um recurso Embed, que será carregado pelo preloader:

[Embed(source = "../resources/minhaSprite.png")]

public static var spriteSheetClass:Class;

var minhaSprite:FlxSprite = new FlxSprite();

// 1 2 3 4 5 6

minhaSprite.loadGraphic(spriteSheetClass, true, false, 32, 32, false);

add(minhaSprite);//Adiciona a sprite ao State, ela será atualizada automáticamente!

Criando Sprites (animadas ou não)

Explicando melhor cada parâmetro do loadGraphic:

// 1 2 3 4 5 6

minhaSprite.loadGraphic(spriteSheetClass, true, false, 32, 32, false);

1. Seu embed com a spritesheet

2. Se a sua sprite é animada ou não (caso ela seja, deverá seguir o padrão:

3. Se o FlxSprite deve gerar automáticamente versões flipadas dos gráficos.

4.Largura do Quadro

5.Altura do Quadro

6.Se a sprite será única ou não (default: false);

Tratando InputsCheca se a tecla A está pressionada

if (FlxG.keys.pressed("A")) {

}

Checa se a tecla A acabou de ser pressionada

if (FlxG.keys.justPressed("A")) {

}

//Checa se a tecla A acabou de ser solta

if (FlxG.keys.justReleased("A")) {

}

//Checa se o botão Esquerdo acabou de ser pressionado

if (FlxG.mouse.justPressed()) {

}

//Checa se o botão Esquerdo acabou de ser solto

if (FlxG.mouse.justReleased()) {

}

//Checa se o botão Esquerdo está pressionado

if (FlxG.mouse.pressed()) {}

Desenhando Texto

var texto:FlxText = new FlxText(x, y, largura, "seuTexto");

texto.height = 16;

add(texto);

texto.text = "novoTexto";

Quando você configura a altura, a largura é calculada automáticamente!

Para mudar o valor do seu texto sem precisar reinstanciar um FlxText, é só mudar a propriedade text do seu texto

Criando Botões var botao:FlxButton = new FlxButton(x, y, "labelBotao",

tratarEventoDeBotao);

add(botao);

TratarEventoDeBotao, no caso é uma função de callback que será chamada quando seu botão for clicado, como no exemplo:

private function tratarEventoDeBotao():void {

//Destruir o Michel Teló.

}

Criando Botões var botao:FlxButton = new FlxButton(x, y, "labelBotao",

tratarEventoDeBotao);

add(botao);

TratarEventoDeBotao, no caso é uma função de callback que será chamada quando seu botão for clicado, como no exemplo:

private function tratarEventoDeBotao():void {

//Destruir o Michel Teló.

}

Tocar Sons e Musica Para tocar um som (ou musica), ele precisa estar como um

embed no seu FlxState da mesma maneira como na sprite.

E para tocar um Som:

FlxG.play(som, volume, tocadoEmLoop, destruirAutomaticamenteAposTocar);

Para tocar uma musica:

FlxG.playMusic(musica, volume);

Volume, tanto para som quanto para musica, varia de 0 a 1;

Tocado em loop e destruir automaticamente após tocar, são variáveis booleanas.

Efeitos Interessantes Tremer a tela:

FlxG.shake(intensidade, duracao, callbackAoCompletar, forcar, direcao);

Dar um flash na tela

FlxG.flash(cor, duracao, callbackAoCompletar, forcar);

Dar um fade na tela

FlxG.fade(cor, duracao, callbackAoCompletar, forcar);

Exemplo Partículasprivate var emissorParticulas:FlxEmitter = null;

override public function create():void {

emissorParticulas = new FlxEmitter(300, 300, 10);

emissorParticulas.setXSpeed(300, 5);

emissorParticulas.setYSpeed(0, 2);

var explodir:Boolean = true;

var tempoDeVida:Number = 500.0;

var frequenciaDeEmissaoDeParticulas:Number = 0.1;

var quantidadeEmitida:int = 30;

add(emissorParticulas);

emissorParticulas.start(explodir, tempoDeVida, frequenciaDeEmissaoDeParticulas, quantidadeEmitida);

}

Exemplo Partículasoverride public function update():void {

emissorParticulas.update();

}

Recomendações de Arquitetura Coloque todos os seus Embed como publicos e estáticos em

uma classe que você só colocara os Embeds do seu projeto (ResourceManager)

Crie uma classe onde estarão contidos todos as referencias públicas e estáticas dos seus objetos de jogo, e funções utilitárias necessárias. (GameData).

Evite instanciar objetos, use a ideia de pool de objetos. Crie todas as instancias no create(), armazene-as num FlxGroup, e adicione o FlxGroup no seu FlxState.

As variáveis exist e dead estão presentes em todos os tipos Flixel, e servem para dizer se o objeto está vivo e/ou se ele existe. Qualquer objeto que você faça dead = true, deixará de ser desenhado e atualizado pela Flixel, mesmo que esteja adicionado a um FlxState! (É LINDO!)

Recomendações de Arquitetura Evite usar herança, sério, é um pé-no-saco. Se for criar algum

tipo Flixel que dependa de outros tipos Flixel, prefira composição à herança. Quando você tiver mais de 2 tipos na sua hierarquia de objetos por exemplo: Personagem filho de Player filho de FlxSprite, você corre o risco de ter sérios problemas de acesso de propriedades e/ou performance.

Referências Flixel Power Tools, um Ótimo plugin para a Flixel criado por

Richard Davey: www.photonstorm.com/flixel-power-tools

Ótimas dicas de Flixel: www.photonstorm.com/topics/flash-game-dev-tips

API da Flixel: http://www.flixel.org/docs/

API da Flixel Power Tools: http://www.photonstorm.com/flixel-power-tools

Flash Game Dojo, Várias dicas relacionadas tanto à flixel quanto à flashpunk: www.flashgamedojo.com

Google (bom, você saber porque né?): www.google.com.br

Fim!Contato:

E-Mail: Tacio.mendes@gmail.comTwitter: @FoxtacyCaraLivro: /tacio.mendesMSN: taciomendes@hotmail.comPortfolio de Musicas:

www.foxtacy.newgrounds.com/audio

Dúvidas e feedbacks por favor me procurem!

Obrigathankyou Gosaimasu! :D