Aquecimento Global Game Jam Flixel Tácio Dias Palhão Mendes.
Transcript of Aquecimento Global Game Jam Flixel Tácio Dias Palhão Mendes.
![Page 1: Aquecimento Global Game Jam Flixel Tácio Dias Palhão Mendes.](https://reader035.fdocument.pub/reader035/viewer/2022062318/552fc0f8497959413d8b559f/html5/thumbnails/1.jpg)
Aquecimento Global Game Jam
Flixel
Tácio Dias Palhão Mendes
![Page 2: Aquecimento Global Game Jam Flixel Tácio Dias Palhão Mendes.](https://reader035.fdocument.pub/reader035/viewer/2022062318/552fc0f8497959413d8b559f/html5/thumbnails/2.jpg)
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
![Page 3: Aquecimento Global Game Jam Flixel Tácio Dias Palhão Mendes.](https://reader035.fdocument.pub/reader035/viewer/2022062318/552fc0f8497959413d8b559f/html5/thumbnails/3.jpg)
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
![Page 4: Aquecimento Global Game Jam Flixel Tácio Dias Palhão Mendes.](https://reader035.fdocument.pub/reader035/viewer/2022062318/552fc0f8497959413d8b559f/html5/thumbnails/4.jpg)
Adicionando a Flixel
2º Passo – Criando o projeto
![Page 5: Aquecimento Global Game Jam Flixel Tácio Dias Palhão Mendes.](https://reader035.fdocument.pub/reader035/viewer/2022062318/552fc0f8497959413d8b559f/html5/thumbnails/5.jpg)
Adicionando a Flixel
3º Passo - Crie uma pasta, no diretório do seu projeto chamada lib (pode ser qualquer nome na verdade...)
![Page 6: Aquecimento Global Game Jam Flixel Tácio Dias Palhão Mendes.](https://reader035.fdocument.pub/reader035/viewer/2022062318/552fc0f8497959413d8b559f/html5/thumbnails/6.jpg)
Adicionando a Flixel Power Tools
Passo Opcional – Copie esta pasta para dentro do caminho lib/org/flixel/plugin
![Page 7: Aquecimento Global Game Jam Flixel Tácio Dias Palhão Mendes.](https://reader035.fdocument.pub/reader035/viewer/2022062318/552fc0f8497959413d8b559f/html5/thumbnails/7.jpg)
Adicionando a Flixel
4º Passo - Cole esta pasta dentro da sua pasta lib.
![Page 8: Aquecimento Global Game Jam Flixel Tácio Dias Palhão Mendes.](https://reader035.fdocument.pub/reader035/viewer/2022062318/552fc0f8497959413d8b559f/html5/thumbnails/8.jpg)
Configurando o FlashDevelop
5º Passo – Crie uma pasta, no diretório do seu projeto chamada lib.
![Page 9: Aquecimento Global Game Jam Flixel Tácio Dias Palhão Mendes.](https://reader035.fdocument.pub/reader035/viewer/2022062318/552fc0f8497959413d8b559f/html5/thumbnails/9.jpg)
Configurando o FlashDevelop
6º Passo – Clique em
![Page 10: Aquecimento Global Game Jam Flixel Tácio Dias Palhão Mendes.](https://reader035.fdocument.pub/reader035/viewer/2022062318/552fc0f8497959413d8b559f/html5/thumbnails/10.jpg)
Configurando o FlashDevelop
7º Passo – Clique em Classpaths – Add Classpath
![Page 11: Aquecimento Global Game Jam Flixel Tácio Dias Palhão Mendes.](https://reader035.fdocument.pub/reader035/viewer/2022062318/552fc0f8497959413d8b559f/html5/thumbnails/11.jpg)
Configurando o FlashDevelop
8º Passo - Escolha a pasta lib dentro do seu projeto.
Selecione apply, depois OK.
![Page 12: Aquecimento Global Game Jam Flixel Tácio Dias Palhão Mendes.](https://reader035.fdocument.pub/reader035/viewer/2022062318/552fc0f8497959413d8b559f/html5/thumbnails/12.jpg)
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();
}
}
}
![Page 13: Aquecimento Global Game Jam Flixel Tácio Dias Palhão Mendes.](https://reader035.fdocument.pub/reader035/viewer/2022062318/552fc0f8497959413d8b559f/html5/thumbnails/13.jpg)
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);}
}
}
![Page 14: Aquecimento Global Game Jam Flixel Tácio Dias Palhão Mendes.](https://reader035.fdocument.pub/reader035/viewer/2022062318/552fc0f8497959413d8b559f/html5/thumbnails/14.jpg)
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!
![Page 15: Aquecimento Global Game Jam Flixel Tácio Dias Palhão Mendes.](https://reader035.fdocument.pub/reader035/viewer/2022062318/552fc0f8497959413d8b559f/html5/thumbnails/15.jpg)
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
}
}
}
![Page 16: Aquecimento Global Game Jam Flixel Tácio Dias Palhão Mendes.](https://reader035.fdocument.pub/reader035/viewer/2022062318/552fc0f8497959413d8b559f/html5/thumbnails/16.jpg)
Trocar Telas
Para trocar de telas, use: var novoState:MeuOutroFlxState = new MeuOutroFlxState();
novoState.create();
FlxG.switchState(novoState);
![Page 17: Aquecimento Global Game Jam Flixel Tácio Dias Palhão Mendes.](https://reader035.fdocument.pub/reader035/viewer/2022062318/552fc0f8497959413d8b559f/html5/thumbnails/17.jpg)
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!
![Page 18: Aquecimento Global Game Jam Flixel Tácio Dias Palhão Mendes.](https://reader035.fdocument.pub/reader035/viewer/2022062318/552fc0f8497959413d8b559f/html5/thumbnails/18.jpg)
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);
![Page 19: Aquecimento Global Game Jam Flixel Tácio Dias Palhão Mendes.](https://reader035.fdocument.pub/reader035/viewer/2022062318/552fc0f8497959413d8b559f/html5/thumbnails/19.jpg)
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()) {}
![Page 20: Aquecimento Global Game Jam Flixel Tácio Dias Palhão Mendes.](https://reader035.fdocument.pub/reader035/viewer/2022062318/552fc0f8497959413d8b559f/html5/thumbnails/20.jpg)
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
![Page 21: Aquecimento Global Game Jam Flixel Tácio Dias Palhão Mendes.](https://reader035.fdocument.pub/reader035/viewer/2022062318/552fc0f8497959413d8b559f/html5/thumbnails/21.jpg)
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ó.
}
![Page 22: Aquecimento Global Game Jam Flixel Tácio Dias Palhão Mendes.](https://reader035.fdocument.pub/reader035/viewer/2022062318/552fc0f8497959413d8b559f/html5/thumbnails/22.jpg)
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ó.
}
![Page 23: Aquecimento Global Game Jam Flixel Tácio Dias Palhão Mendes.](https://reader035.fdocument.pub/reader035/viewer/2022062318/552fc0f8497959413d8b559f/html5/thumbnails/23.jpg)
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.
![Page 24: Aquecimento Global Game Jam Flixel Tácio Dias Palhão Mendes.](https://reader035.fdocument.pub/reader035/viewer/2022062318/552fc0f8497959413d8b559f/html5/thumbnails/24.jpg)
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);
![Page 25: Aquecimento Global Game Jam Flixel Tácio Dias Palhão Mendes.](https://reader035.fdocument.pub/reader035/viewer/2022062318/552fc0f8497959413d8b559f/html5/thumbnails/25.jpg)
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);
}
![Page 26: Aquecimento Global Game Jam Flixel Tácio Dias Palhão Mendes.](https://reader035.fdocument.pub/reader035/viewer/2022062318/552fc0f8497959413d8b559f/html5/thumbnails/26.jpg)
Exemplo Partículasoverride public function update():void {
emissorParticulas.update();
}
![Page 27: Aquecimento Global Game Jam Flixel Tácio Dias Palhão Mendes.](https://reader035.fdocument.pub/reader035/viewer/2022062318/552fc0f8497959413d8b559f/html5/thumbnails/27.jpg)
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!)
![Page 28: Aquecimento Global Game Jam Flixel Tácio Dias Palhão Mendes.](https://reader035.fdocument.pub/reader035/viewer/2022062318/552fc0f8497959413d8b559f/html5/thumbnails/28.jpg)
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.
![Page 29: Aquecimento Global Game Jam Flixel Tácio Dias Palhão Mendes.](https://reader035.fdocument.pub/reader035/viewer/2022062318/552fc0f8497959413d8b559f/html5/thumbnails/29.jpg)
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
![Page 30: Aquecimento Global Game Jam Flixel Tácio Dias Palhão Mendes.](https://reader035.fdocument.pub/reader035/viewer/2022062318/552fc0f8497959413d8b559f/html5/thumbnails/30.jpg)
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