Flixel é uma game engine escrita em ActionScript 3, facilita bastante a construção de alguns tipos e formatos de jogos, especialmente jogos de plataforma. Já possuí classes e métodos para lidar com:
- Texto;
- Colisão;
- Imagens
- Efeitos
- Mapa;
- Pontos;
- Estados;
- Fases;
- Inimigos;
- Vidas;
- Câmera
- e muitas outras coisas.
Esse post tem o objetivo de construir um Hello World, esse exemplo será o passo inicial para a construção de jogos mais complexos no futuro.
Em primeiro lugar você precisa conhecer o site do Flixel: http://www.flixel.org lá você encontra a game engine para download, fórum, wiki e outros games já desenvolvidos pela comunidade.
Primeiro passo: Instalação do FlashDevelop
Faça o download do FlashDevelop, nós vamos usar ele como IDE de desenvolvimento. Para fazer o download: http://www.flashdevelop.org/downloads/releases/FlashDevelop-3.2.1-RTM.exe.
Faça a instalação seguindo o padrão next next finish be happy! :)
Segundo passo: Flex SDK
Para construir o jogo nós precisamos do Flex SDK, que são as bibliotecas padrões do ActionScript 3, a game engine Flixel utiliza essas bibliotecas internamente e você provavelmente vai precisar de alguma delas para as customizações ou necessidades do seu jogo.
Faça o download: http://opensource.adobe.com/wiki/display/flexsdk/download?build=4.1.0.16248&pkgtype=1 e descompacte em algum diretório da sua preferência, daqui a pouco nós vamos usar ele.
Terceiro passo: Download do Flixel
Vamos precisar dele para a construção do jogo, ele na verdade é um framework de desenvolvimento de jogos. Já possui muitas bibliotecas prontas que facilitam e aceleram o desenvolvimento. Faça o download em: http://github.com/AdamAtomic/flixel/archives/master e descompacte também em algum diretório da sua preferência.
Criando um Novo Projeto
- Abra o FlashDevelop;
- Clique no menu “Project”;
- Clique na opção “New Project”;
- Em “Installed Templates” selecione “AS3 Project”;
- Em “Name:” digite HelloWorld;
- Marque o checkbox na opção “Create directory for project”;
- Clique no botão “Ok”.
Configurando o Flex SDK e Flixel no Projeto
- Clique no menu “Project”;
- Clique na opção “Properties…”;
- Clique na aba “Compiler Options”;
- No campo “Custom Path to Flex SDK” clique no botão “…” e selecione o diretório onde você descompactou o Flex SDK;
- Clique na aba “Classpaths”;
- Clique no botão “Add Classpaths…” e selecione o diretório onde você descompactou o Flixel, mas você precisa entrar na pasta e selecionar a pasta “org”;
- Clique no botão “Ok”.
Programando o HelloWorld
HelloWorld.as
- No diretório src do projeto existe o arquivo Main.as, apague esse arquivo;
- Clique com o botão direito do mouse na pasta “src” depois “add” e “New Class…“;
- Digite para o campo “Name:” o valor: HelloWorld.
Será gerando um código inicial como esse:
package { /** * ... * @author Patrick Espake */ public class HelloWorld { public function HelloWorld() { } } }
Vamos alterar para ficar dessa forma:
package { // Importa a game engine Flixel import org.flixel.*; // Tamanho da tela e cor de fundo [SWF(width = "640", height = "480", backgroundColor = "#000000")] // Classe HelloWorld // herda a classe FlxGame para incorporar as funcionalidades do Flixel public class HelloWorld extends FlxGame { // Método construtor public function HelloWorld() { // Tamanho da área útil // classe inicial a ser chamada depois do jogo carregar // e nível de zoom super(640, 480, PlayState, 1); } } }
Através dos comentários acima você deve ser capaz de entender a maioria do código, basicamente nós definimos a dimensões do swf que será gerado, a cor de fundo, e qual classe de estado deve ser chamada após o jogo terminar de carregar, nesse exemplo PlayState que não criamos ainda.
E importante notar que nós herdamos no código a classe FlxGame, através desse herança podemos adquirir métodos e atributos da game engine Flixel.
Agora precisamos dizer para o FlashDevelop sempre compilar essa classe que acabamos de criar, clique com o botão direito do mouse sobre a classe “HelloWorld.as” e clique na opção “Always Compile“.
PlayState.as
Crie uma nova classe no diretório src chamada PlayState.
Altere o seu código para ficar da seguinte forma:
package { // Importa a game engine Flixel import org.flixel.*; // Classe inicial do jogo // herda de FlxState public class PlayState extends FlxState { // Método do Flixel // usado para criar os elementos do jogo override public function create():void { // Criação do texto com o Hello World! var t1:FlxText = new FlxText(0, 0, FlxG.width, "Hello World!"); t1.alignment = "center"; t1.size = 48; // Adiciona o texto na tela add(t1); } } }
A classe PlayState representa o estado de jogo do Flixel, a game engine possui uma máquina de estados, você pode ter vários estados, por exemplo: menu, créditos, primeira fase, segunda fase, game over e vitória. O Flixel já possui alguns métodos para realizar facilmente essa transição de estados.
Nessa classe nós herdamos de FlxState que possui vários métodos e atributos para lidar com estados do jogo, através do método create é criado os elementos do jogo, nesse exemplo simples apenas um texto com “Hello World!”.
Você pode pressionar a tecla F5 para testar, caso você tenha o Flash Debugger instalado ele já vai abrir a tela com o jogo, caso contrário você terá que ir na pasta bin e abrir o arquinvo index.html no navegador.
