Aquecimento Global Game Jam

1. Flixel Tácio Dias Palhão Mendes Aquecimento Global Game Jam

2. Tratando Inputs. Desenhando Texto Criando Botões Tocar Sons e Musica Efeitos Interessantes Exemplo Partículas Recomendações de arquitetutra Referencias 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)

3. 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

4. Adicionando a Flixel • 2º Passo – Criando o projeto

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

6. Adicionando a Flixel Power Tools • Passo Opcional – Copie esta pasta para dentro do caminho lib/org/flixel/plugin

7. Adicionandoa Flixel • 4º Passo - Cole esta pasta dentro da sua pasta lib.

8. Configurando o FlashDevelop • 5º Passo – Crie uma pasta, no diretório do seu projeto chamada lib.

9. Configurando o FlashDevelop • 6º Passo – Clique em

10. Configurando o FlashDevelop • 7º Passo – Clique em Classpaths – Add Classpath

11. Configurando o FlashDevelop • 8º Passo - Escolha a pasta lib dentro do seu projeto. • Selecione apply, depois OK.

12. 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

13. Classe Main • Sua classe main deve se parecer com isto:

14. 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!

15. Trocar Telas • Seu código deverá se parecer com isto:

16. Trocar Telas • Para trocar de telas, use: var novoState:MeuOutroFlxState = new MeuOutroFlxState(); novoState.create(); FlxG.switchState(novoState);

17. 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!

18. 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);

19. 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()) {}

20. 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

21. 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ó. }

22. 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ó. }

23. 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.

24. 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);

25. 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); }

26. Exemplo Partículas override public function update():void { emissorParticulas.update(); }

27. 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!)

28. 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.

29. 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

30. 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 Fim!