Aquecimento Global Game Jam
Flixel
Tácio Dias Palhão Mendes
Sumário

Configurando o FlashDevelop
Tratando Inputs.

Configurando o FlashPlayer debug
Desenhando Texto

Adicionando a Flixel (e seus plugins)
Criando Botões

Configurar Preloader
Tocar Sons e Musica

Classe Main
Efeitos Interessantes

Trocar telas
Exemplo Partículas
Criando uma sprite (estática ou
animada)
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 Inputs
Checa 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ículas
private 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ículas
override 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-gamedev-tips
API da Flixel: http://www.flixel.org/docs/
API da Flixel Power Tools: http://www.photonstorm.com/flixelpower-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
Contato:
Fim!
E-Mail: [email protected]
Twitter: @Foxtacy
CaraLivro: /tacio.mendes
MSN: [email protected]
Portfolio de Musicas:
www.foxtacy.newgrounds.com/audio
Dúvidas e feedbacks por favor me procurem!
Obrigathankyou Gosaimasu! :D