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

2º Passo – Criando o projeto 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

4º Passo - Cole esta pasta dentro da sua pasta lib. 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-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.com Twitter: @Foxtacy CaraLivro: /tacio.mendes MSN: taciomendes@hotmail.com Portfolio de Musicas: www.foxtacy.newgrounds.com/audio Dúvidas e feedbacks por favor me procurem! Obrigathankyou Gosaimasu! :D