Aquecimento Global Game Jam Flixel Tácio Dias Palhão Mendes.
30
Aquecimento Global Game Jam Flixel Tácio Dias Palhão Mendes
Transcript of Aquecimento Global Game Jam Flixel Tácio Dias Palhão Mendes.
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: [email protected]: @FoxtacyCaraLivro: /tacio.mendesMSN: [email protected] de Musicas:
www.foxtacy.newgrounds.com/audio
Dúvidas e feedbacks por favor me procurem!
Obrigathankyou Gosaimasu! :D
