Criando um Jogo Multiplataforma, Flash/Android, Usando a Flixel

Para esse meu primeiro tutorial resolvi mostrar o que já andei mexendo na Flixel para criar jogos em Flash e Android.

Pré-Requisitos / Ambiente de Desenvolvimento

• Android SDK – Se você ainda não o tiver instalado, siga o passo-a-passo no link ao lado. Não é complicado, talvez só demore um pouco para baixar o SDK e as plataformas escolhidas
• FlashDevelop – Esta vai ser a IDE que vou usar, em princípio você pode usar qualquer uma, até mesmo o bloco de notas. Mas o FD é gratuito e resolve muito bem, se não o conhecer, pode baixar que eu recomendo
• Flex/Air SDK – Esta é a nossa principal plataforma de desenvolvimento. Se você escolher usar o FlashDevelop, pode optar para que ele instale, e configure, automaticamente o Flex/AIR durante a instalação. Não tem mistério e ele já deixa tudo pronto
• Flixel – Esta API proverá a nós toda base de código para criarmos o nosso jogo. Ela é gratuita e open-source
• Template da Flixel para o FlashDevelop – Depois de ter instalado o FlashDevelop, clique duas vezes veste arquivo que o template será instalado

Eu não pretendo falar aqui como configurar todo esse ambiente, mas quem quiser, neste link tem um tutorial bem simples e ilustrado. Confere lá e depois volta aqui. 🙂

Criando o Projeto

Primeiro precisamos configurar as pastas onde vamos trabalhar. Crie uma pasta “workspace_flixel” onde achar mais conveniente (ex.: d:\workspace_flixel), este vai ser, como o nome já sugere, o nosso workspace. Extraia o arquivo da Flixel para uma pasta chamada flixeldentro do workspace. Observe que não deve haver outras pastas dentro dela a não ser “docs” e “org” (vide Figura 1).

Figura 1 – Estrutura de pastas do workspace

Uma vez com o nosso ambiente configurado, vamos criar o nosso projeto. Com o FlashDevelop aberto vá em “Project > New Project”. Na janela que aparece, role até o final onde deve ter uma segunda categoria “ActionScript 3” e dentro dela haverá um template chamado “Flixel 2.5 Project”. Selecione este último, e preencha os campos “Name” com o nome do projeto, “Location” com o caminho para o workspace, se quiser, preencha “Package” com a estrutura de pacotes que você deseja utilizar e por fim, porém importante, marque a opção “Create directory for project”. Confira na Figura 2.

Figura 2 – Configuração de um novo projeto

Ao clicar em OK você deve ver a tela a seguir, Figura 3, com o projeto criado, juntamente com 5 arquivos dentro da pasta “src” e uma referência à Flixel (se houver algum problema aqui, certifique-se que a pasta “flixel” esteja na estrutura correta dentro do workspace).

Figura 3 – Projeto recém-criado

Entendendo o Projeto

O arquivo marcado com uma setinha verde indica o “Document Class”, que vai ser o nosso ponto de entrada. Se o abrirmos (duplo clique) vamos ver que ele extende a classe FlxGame, que é a base de qualquer jogo na Flixel. Por padrão a janela do jogo é criada com a resolução de 640×480 (veja os parâmetros na tag SWF, logo no começo da classe), porém você deve perceber que os valores informados no construtor da mesma estão diferentes, mais precisamente são a metade (320×240), e não há nenhum problema aí, pois o número “2”, passado como o quarto parâmetro, indica o nível de zoom a ser aplicado, de forma que no final da conta teremos o mesmo valor do SWF. O terceiro parâmetro, MenuState, representa o primeiro FlxStatea ser exibido. Cada state representa uma tela do nosso jogo, e este primeiro corresponde ao menu.

Figura 4 – Detalhes da classe de entrada

(É, eu sei que não expliquei tudo que tem na classe, mas depois é só dar uma fuçada que não é difícil de descobrir, confie em mim)

Executando o Projeto

Vamos agora fazer o build do nosso projeto padrão, para isso basta apertar F8 (ou aperte na engrenagem cinza na barra de ferramentas, ou vá em “Project > Build Project”). Na primeira vez em que você for fazer o build de um projeto depois de ter aberto o FlashDevelop é normal demorar um pouco, mas tenha paciência que logo termina, e nas outras vezes será mais rápido. Ao terminar o build você deve ter percebido que foram acusados dois erros:

Figura 5 – Erro de compilação

Estes erros se devem à uma mudança na Flixel, que este template não contempla. Para corrigir basta remover o último parâmetro no construtor dos botões (linhas 17 e 22), onOverem ambas as linhas. Como eu já adiantei, nestas linhas são criados dois botões, um para começar o jogo e outro para abrir o browser e levar para o site do criador do template. Além disso, é setada uma cor para o background, antes da criação dos botões, e por fim é solicitado que o ponteiro do mouse seja exibido. Vamos novamente compilar o projeto, porém desta vez vamos executá-lo usando F5, que é o atalho para testar o projeto, e que antes de executar já faz a compilação. Provavelmente você vai ver a tela que aparece na Figura 6.

Figura 6 – Menu principal

Clicar no botão “Click to Play” nos leverá ao PlayState, o state onde vamos implementar, de fato, o nosso jogo. E vamos começar!

Implementando o Jogo

Lembrando que o foco deste tutorial é a parte de multiplataforma, a única funcionalidade que vamos fazer é mover uma imagem na tela. Para tanto, pegue a imagem a seguir e coloque-a dentro da pasta “src” do projeto:

Figura 7 – Sprite da nave

(Por sinal, esse sprite eu peguei aqui, junto com todos os sprites do jogo Tyrian, de graça) 🙂 Feito isto, e com o PlayState aberto, clique com o botão direito na imagem e escolha “Generate Embed Code” (Figura 8), mas certifique-se que o cursor do texto esteja no lugar certo, logo abaixo da declaração da classe (Figura 9).

Figura 8 – Opção para gerar código embed

Figura 9 – Local de inserção do código embed

Complete a linha inserida com o seguinte:

[Embed(source = "nave_24x25.png")] private const IMG_NAVE:Class;

Depois vamos definir e criar um objeto do tipo FlxSprite para exibir a nossa nave. Vale dizer que apesar de criá-lo como um sprite animado, criar e executar uma “animação” de um frame apenas, nós não vamos explorar mais o assunto de animação. O código seria este:

private var nave:FlxSprite;

 override public function create():void
 {
 nave = new FlxSprite(FlxG.width / 2, FlxG.height / 2);
 nave.loadGraphic(IMG_NAVE, true, false, 24, 25);
 nave.addAnimation("idle", [2]);
 nave.play("idle");

 add(nave);
 }

Com isso a nave vai aparecer na tela! Pode fazer o teste executando o projeto. Agora vamos fazê-la se mexer!

Na nossa classe PlayState, devemos sobrescrever o método “update”, e dentro dele é que vamos implementar a verificação da entrada de dados. Neste primeiro momento vamos utilizar as setas laterais para movimentar a nave. A maneira de fazer isso é verificar se as teclas LEFT e RIGHT estão sendo pressionadas e aplicar uma velocidade à nave. Vale salientar que esta é uma das propriedades do objeto FlxSprite, que também tem aceleração, colisão, etc. Não devemos esquecer de zerar a velocidade quando nenhuma das teclas estiver pressionada, caso contrário a nave não pararia nunca de se mexer. O código para fazer isso é:

override public function update():void 
 {
 if (FlxG.keys.pressed("LEFT")) {
 nave.velocity.x = -100;
 } else if (FlxG.keys.pressed("RIGHT")) {
 nave.velocity.x = 100;
 } else {
 nave.velocity.x = 0;
 }

 super.update();
 }

Ao executar o projeto a nossa nave já estará sendo controlada pelas setas! Agora vamos assumir que o nosso jogo vai ser só isso mesmo, e vamos prepará-lo para rodar no Android!

Colocando no Android

As informações que vou repassar aqui eu peguei neste post, no blog de Andy Moore, criador de Steambirds e desenvolvedor independente que adora compartilhar informações! Se o meu guia não estiver muito claro, dá uma conferida lá.

Vou assumir que o seu ambiente Android já está OK, e que o seu dispositivo já está configurado. Vamos começar fechando o projeto atual, “Project > Close Project”, e criando um novo. Desta vez este novo projeto vai ser do tipo “AIR Mobile AS3 App”. Preencha com o nome que achar melhor, lembrando das opções marcadas, e clique em OK.

Figura 10 – Criando um projeto Air Mobile

Feito isto, você vai ter no seu projeto apenas a classe “Main.as”. Agora nós vamos referenciar o nosso projeto desktop, para isso vamos em “Project > Properties > Classpaths”, e escolhemos “Add Classpath”. Na janela que abre, vamos escolher a pasta “src” que está dentro do nosso projeto original. Ao final, teremos estas configurações:

Figura 11 – Configuração do classpath

Você vai perceber, na árvore de arquivos do projeto, no lugar onde a Flixel ficava no projeto original, nós teremos os arquivos do nosso projeto original. Desta forma nós poderemos mexer neles, alterando o código-base do jogo em um mesmo lugar, para das duas plataformas!

Para fazermos o nosso primeiro teste, vamos copiar a classe de entrada do nosso projeto original (MultipTuto.as no meu caso) para o projeto mobile, depois temos que clicar com o botão direito nela e escolher “Set Document Class” para que ela funcione como ponto de entrada.

Agora vamos compilar o projeto (F8). Você vai ver que alguns erros vão aparecer, porque o compilador não vai estar achando as classes da Flixel. E elas não estão lá mesmo! Elas estavam sendo referenciadas no projeto anterior, porém para podermos usá-las no novo projeto basta adicionar a Flixel como uma referência, do mesmo modo que fizemos antes, apontando para a pasta “flixel” dentro do nosso workspace.

Ao final, a estrutura do nosso projeto será esta:

Figura 12 – Projeto mobile após configuração inicial

Estamos quase lá, falta pouco para vermos o nosso jogo rodando no aparelho.

Agora vamos alterar o código para garantir a melhor visualização do jogo. Eu estou usando para testes aqui um Galaxy S, que possui resolução de tela de 480×800. Portanto, vamos começar alterando estas informações na nossa classe de entrada, no projeto mobile.

A resolução atual está como 640×480, então vamos manter a orientação em Paisagem, mas modificar os valores para o nosso aparelho (800×480, no caso). Além de modificar na linha do SWF, vou alterar no construtor também, e como estou usando o fator de 2x Zoom, os valores serão 400 e 240. O código final seria este:

package
{
import org.flixel.*;
[SWF(width="800", height="480", backgroundColor="#000000")]
[Frame(factoryClass="Preloader")]

public class MultipTuto extends FlxGame
{
public function MultipTuto()
{
super(400,240,MenuState,2, 60, 60);
 forceDebugger = true;
 }
}
}

Agora vamos alterar as configurações relativas ao AIR. Basta acessar “Project > AIR App Properties”, na aba “Initial Window”, sub-aba “Non-Windowed Platforms”. Escolha “Aspect Ratio > Landscape” e cerifique-se que a opção “Fullscreen” esteja marcada.

Figura 13 – Propriedades do AIR

Por fim, vamos em “Project > Properties” e colocamos as dimensões desejadas (800×480).

Agora vamos à parte final, configurar o deploy da aplicação no aparelho. Nós vamos seguir as instruções que constam no arquivo “AIR_Android_readme.txt”, localizado na raiz do nosso projeto. Inclusive depois você pode dar uma conferida nele caso tenha alguma dúvida. Os passos a fazer são:

1. Editar o arquivo “bat\SetupSDK.bat”, colocando os caminhos para o Flex SDK e o Android SDK. O primeiro, se você já não o tinha instado, deve estar dentro da pasta “Tools”, do próprio FlashDevelop
2. Configurar o seu aparelho Android com o SDK (este passo estou considerando já feito)
3. Instalar o runtime do AIR no aparelho, através da execução do arquivo “bat\InstallAirRuntime.bat'”. Você pode fazer isso diretamente do FlashDevelop, basta clicar com o botão direito nele e escolher “Execute”
4. Edite o arquivo “Run.bat” e mude o target, ao invés de “goto desktop”, deixe como “goto android-test” (para tal, faça uso de “::” para comentar a primeira entrada, e os remova para a segunda)
5. Pode testar!

Provavelmente você vai ver o jogo rodando no aparelho nesta hora. Vai estar um pouco estranho, com o cursor do mouse aparecendo, mas é isso mesmo. Você pode clicar no botão “Click to Play” e vai ver a nossa nave na tela! Mas… não vai ter como mexê-la, não é? Afinal, nós implementamos a movimentação usando o teclado.

Vamos mudar isso?

Mudando a Forma de Interação

Vamos abrir a classe “PlayState.as”, que está no projeto original, através do projeto atual. Na função “update” nós vamos monitorar, além das teclas o clique do “mouse” (que neste caso serão os toques na tela). Na cláusula “else” onde estamos apenas parando a nave (nave.velocity.x = 0), nós vamos adicionar outro if, que irá testar se o jogador está tocando na tela, através do método “pressed()”, do objeto “mouse” que pertence à classe “FlxG”.

Em seguida, nós pegamos a posição do mouse no eixo X e comparamos à posição da nave. Se for menor, move para a esquerda, se for maior, para a direita, e caso o jogador não esteja tocando na tela, pare a nave. O código fica assim:

 if (FlxG.keys.pressed("LEFT")) {
    nave.velocity.x = -100;
 } else if (FlxG.keys.pressed("RIGHT")) {
    nave.velocity.x = 100;
 } else {
    if (FlxG.mouse.pressed()) {
       if (FlxG.mouse.x < nave.x) {
          nave.velocity.x = -100;
       } else if (FlxG.mouse.x > nave.x) {
          nave.velocity.x = +100;
       }
    } else {
       nave.velocity.x = 0;
    }
 }

Pode testar novamente e você vai poder movimentar a nave usando o toque! 🙂

Espero que tenham aproveitado o tutorial, e no próximo vamos explorar um pouco mais a diferença entre as plataformas (desktop/mobile) e dar uma organizada no projeto.

Falando em projeto, aqui estão os links para os códigos-fonte dos dois projetos feitos neste tutorial:

• MultipTuto
• MultipTutoAndroid

Até a próxima!