Blog Patrick Espake

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.