quinta-feira, 17 de novembro de 2011

Dica de desenvolvimento em Flash: Instalando FlashDevelop e Flixel pela primeira vez

Vou trazer para o blog uma série de tutoriais traduzidos do blog PhotonStorm, com permissão e incentivo do autor, sobre desenvolvimento de jogos para a web.


Hello World


A popularidade de Flixel atrai muitos novos desenvolvedores. Muitas vezes eles vem não do Flash, mas sim de outras linguagens e ferramentas de desenvolvimento de jogos. Não há nada de errado nisso, mas é muito fácil cair no primeiro obstáculo: conseguir um ambiente de desenvolvimento limpo e instalado. Um que você pode apertar "compilar" e ver toda a mágica do "Hello World" aparecer, em vez de uma tela branca ou mensagem de erro.

Há muitos tutorias sobre como instalar FlashDevelop (olhar "Sugestão de Leituras" para alguns), e algun sobre como começar com Flixel. Mas a maioria deles são antigos, e nenhum deles caso os dois juntos. Então, eu espero conseguir resolver isto. Eu vou manter estas dicas atualizadas assim que major versions de FlashDevelop e Flixel forem lançadas.

Pessoal do OS X toma um caminho diferente


As coisas mais importantes em primeiro lugar. Você precisa usar Windows. FlashDevelop está chegando ao OS X logo. Você também pode rodar sobre o Parallels. E há builds em desenvolvimento que você pode baixar do fórum, mas não vou cobri-los aqui. Lamento se isto te excluí. Você é bem vindo a voltar aqui se juntar a nós quando integrarmos Flixel.
Pessoal do Windows, vamos continuar...

O processo de desenvolvimento


É importante que você entenda cada parte que o seu ambiente de desenvolvimento faz. É fácil se confundir com terminologia, e não saber ao certo onde determinada peça se encaixa.
O seguinte diagrama mostra o processo de build:



FlashDevelop é o nosso editor, nosa IDE. É onde você digita todo o código, e gasta a maior parte do seu tempo.

Quando chega a hora de testar o seu código, FlashDevelop vai rodar um programa chamado mxmxlc.exe que parte do Flex SDK. É o trabalho deste programa pegar tudo que precisa, e mandar para o compilador. O compilador principal é escrito em Java, daí o requerimento de Java 1.6 estar instalado no seu PC.

Neste ponto é muito fácil confundir a palavra "Flex" ou até mesmo o envolvimento de Java. Tradicionalmente Flex esteve associado ao Flex Builder, o aplicativo da Adobe usado para criação em sua maioria sem graça... me desculpem, para a criação de aplicações ricas em internet (ria). Flex Builder usa arquivos MXML para controlar o layout da UI entre outras coisas. Adobe então renomeou-o para FlashBuilder (Eu acho que Adobe tem prazer em confundir as pessoas). Mas você não precisa se importar com isso. Tudo que você precisa saber é que o Flex SDK tem o compilador, e que é isto que o FlashDevelop usa. Para a presença do Java na equação: o compilador é escrito em Java, mas isto não cria Java apps.

O que o compilador faz é pegar o seu código fonte Flixel / ActionScript 3 e processa-lo.

Desde que não existam erros, o compilador vai transformar o seu código em código de máquina (N.T. bytecode, neste caso) e retornar um arquivo SWF.

Arquivos SWF precisam ser carregados no Flash Player para serem vistos. A maioria das pessoas está acostumada a experienciar o flash dentro de seus navegadores web, mas você pode (e deve!) também fazer o downloade de um Flash Player stand-alone (N.T. arquivo executável) para rodar arquivos SWF no Windows, sem a necessidade de um navegador.

SWF files need to be loaded into Flash Player to be viewed. Most people are familiar with experiencing flash within their web browser, but you can (and will!) also download a stand-alone Flash Player to run SWF files from Windows, without needing a browser.

Assim que o seu SWF estiver carregado no Flash Player, o seu jogo começa!

Todo este processo é repetido várias e várias vezes durante o desenvolvimento. Então, vamos criar um ambiente local, juntar um conjunto de arquivos Flixel em um padrão que vai nos permitir conduzir projetos futuros fácil e rápido.

Downloading spree

Java 1.6


Como nós vimos acima, o Flex SDK requer pelo menos Java 1.6 instalado para compilar. Isto não é padrão no Windows, então ao menos que você seja um desenvolvedor Java e tenha alguma IDE como o Eclipse ou Netbeans, você vai precisar baixar e instalar o Java primeiro.

Vá aqui: http://www.oracle.com/technetwork/java/javase/downloads/index.html

Você precisa do Java Platform SE (SE de "Standard Edition" ou "Edição Padrão"). A versão mais atual é o Java SE 6 Update 24, mas qualquer versão mais nova deve funcionar muito bem. Baixe a versão JRE (Java Runtime Enviroment). Pegue a versão 32-bits mesmo que o seu Windows seja 64-bits. Instale e desabilite todos os irritante alertas de atualizada do Sun Java.


FlashDevelop

Baixe e instale o FlashDevelop. Eu não vou mostrar todo o processo, porque pra ser franco, se você não consegue cliar "Next, next, next" você provavelmente ainda não está pronto pra programar jogos. A única parte importante de todos o processo, e não se esqueça disso: Quando o FlashDevelop perguntar se você quer baixar e instalar o Flex SDK - DIGA SIM!

Flash Player

Flash Player é típicamente instalado como plugin na maioria dos navegadores. Isto significa que se você arrastar um arquivo SWF no seu navegador, ele deve ser executado. Entretanto, este não é o jeito ideal de testar os seus jogos, então nós vamos baixar o Flash Player stand-alone em duas versões: Release e Debug.

Vá aqui: http://www.adobe.com/support/flashplayer/downloads.html

e pegue estes dois arquivos:

Download the Windows Flash Player 10.2 Projector content debugger (EXE, 6.36MB) and
Download the Windows Flash Player 10.2 Projector (EXE, 5.37MB)

Se alguma versão mais nova do Flash Player está disponível quando você ler isto, pegue-as ao invés destas.

Você agora vai ter dois arquivos EXE. Copie-os em algum lugar que você não vá os pagar por engano!

Debug Player vs Release Player


Se você arrastar o arquivo SWF em algum desses exes dos Flash Player, ele vai abrir e tocar. O motivo para ter os dois é que um é o Player de Debug, e outro é o de Release. O player de Debug (o que tem _sa_debug em seu nome) contém a habilidade dos seus jogos poderem lançar erros em tempo de execução, ver regiões de redraw e reportar de volta par ao Flash Debugger (fdb) que o FlashDevelop utiliza. Esta última parte é vital para a sua sanidade, uma vez que ira reportar e capturar erros durante o teste pra você (onde o Player Release típicamente falha silenciosamente).

Você sempre vai desenvolver usando o Debug Player, e depois então testar no Release Player antes de mandar a ver. O Player Release lhe dá um aumento de velocidade gratuito, pois como este não vem com toda a bagagem do debugging, então ele pode rodar mais rápido. É também o que a maioria das pessoas vendo Flash na web usa. Se o seu jogo está um pouco lento no Debug, ele pode rodar direitinho no Release.

Configure o Flash Player para abrir SWFs

Por padrão se você der dois cliques em um arquivo SWF, o Windows provavelmente vai lhe perguntar em que programa você quer rodar o arquivo, ou talvez ele pode abrir o seu navegador. Para mudar este comportamento para que ele abra o Debug Player que acabamos de baixar, faça o seguinte:

Encontre algum arquivo SWF, clique com o botão direito e selecione propriedades. Você vai ver uma caixa similar a esta:


Clique em "Change ..." para aparecer isto:



Clique em "Browse ..." e selecione o EXE do Flash Player Debugger que você baixou agora pouco. Segure-se de que o "Sempre usar este programa para abrir este tipo de arquivo" esteja marcado e clique em OK. Assim que você estiver pronto a janela vai se parecer com a de cima. Agora, clicando-se duas vezes em arquivos SWF vai abrir automaticamente o Flash Player. Não se preocupe isto não vai mudar o jeito que o seu navegador web roda o Flash.

flixel

Adam (o criador de flixel) mantém o fonte no github.com - um site de compartilhamento de fontes social. Há três branches do flixel no momento: Master, Dev e Beta. Atualmente a versão 2.5 de flixel está em dev e beta, mas logo vai ser promovida a Master (onde a versão final fica). Por enquanto vamos baixar a versão 2.5 do branch beta.ta branch.

Vá para o link https://github.com/AdamAtomic/flixel/tree/beta

.. e clique no botão grade Downloads e baixe o pacote .zip.

Você vai ter um arquivo zip pronto pra usar em alguns momentos.

Pasta de Projeto


Agora você precisa decidir onde vai criar todos os seus projetos Flash.

Eu pessoalmente tenho uma pasta chamada "Flash" em um dos meus discos, que é então divida em "Games", "Demos", e várias outras coisas. Por causa deste tutorial vou assumir que você escolheu algum lugar para manter todo o seu trabalho, e vou chamar este lugar de Pasta de Projetos.

Extraia o arquivo zip do flixel que você acabou de baixar na Pasta de Projetos. Isto vai criar uma pasta AdamAtomic-flixel-719aabe 0 renomeia para "flixel 2.43". Você agora tem o último lançamento de flixel. Na pasta docs você vai encontrar a documenteção. Na pasta org está tudo que precisamos para criar o nosso primeiro projeto flixel.

Crie o seu primeiro projeto FlashDevelop.


Nota: Se você sabe que o FlashDevelop funciona muito bem em seu PC, pule este passo.

Se tudo ocorreu bem anteriormente você deve ter um novo brilhante ícone do FlashDevelop no seu desktop. Dê um duplo-clique nele e a janela "New Project" deve aparecer (se não aparecer, clique no menu Project e escolha New)

À você será apresentado isto:


Escolha "AS3 Project", dê um nome (Eu usei "Testing Flex Compiles" acima) e escolha a localização para ser a sua Pasta de Projetos. Deixe marcado "Create directory for project" e clique OK. Agora ele deve te perguntar alguns detalhes como o seu nome, preencha-os e ele os lembrará.

Um grande projeto FlashDevelop em branco vai abrir. Na janela Project você deve ver três pastar, como abaixo:


As pastas são:

bin - É onde o arquivo final SWF é colocado
lib - Onde você coloca bibliotecas externas compiladas, como SWCs (não coloque código AS3 aqui)
src - A pasta fonte, onde todo o seu código de projeto fica

Eu, automaticamente, crio três novas pastas no mesmo nível (N.T. pastas irmãs de src, bin e lib, não filhas):

assets - Onde todos os assets que o jogo precisar ficarão, esta é sub-divida em graphics, music, maps e sound
dame - Quando se está criando tilemaps de fases eu empre uso o editor DAME, e guardo os meus tilemaps aqui
psds - Arquivo gráficos inacabados e de alta resolução são guardados aqui. Eu chamo de psds porque eu só uso Photoshop

Óbviamente você não precisa criar estas três pastas, mas eu sugiro fortemente que você crie pelo menos a pasta assets. A diferença entre a pasta assets e psds é que a psds contém os gráficos em desenvolvimento e arquivos Photoshop. Onde assets contém os PNGs exportados do Photoshop para o uso final no jogo.

Se você expandir a pasta src encontrará um arquivo chamado Main.as. Abra-o.

Este arquivo é gerado automaticaemnte pelo FlashDevelop e é onde você começa a sua jornada em flash coding. Queremos ver se o compilador Flex está funcionando, então nós adicionamos alguma linhas de código. Modificamos a função init para que se pareça com:

private function init(e:Event = null):void

{

 removeEventListener(Event.ADDED_TO_STAGE, init);

 var redbox:Sprite = new Sprite;
 redbox.graphics.beginFill(0xFF0000, 1);
 redbox.graphics.drawRect(0, 0, 100, 100);
 addChild(redbox);
}

O que nós estamos fazendo aqui é criar um novo Sprite chamdo redbox, e fazendo com que ele tenha 100x100 pixels de cor vermelha. Nós então adicionamos ao display list para que o flash renderize-o (N.T. renderizar é converter pra pixels)

Pressione F5 e o FlashDevelop vai compilar e tentar rodar o seu SWF.

Se tudo ocorreu bem (nenhum erro de digitação, nenhum engano na instalação, etc) então o Flash Player vai abrir uma janela de 800x600 com um quadrado vermelho no topo esquerdo. Ok, dificilmente é um Super Mario, mas todos têm que começar de algum lugar, certo?!


Seu primeiro projeto flixel


Crie um novo projeto FlashDevelop, mas desta vez escolha o tipo de Projeto "AS3 Project with Preloader", chame de "Goodbye Cruel World" e clique OK.

As mesas três pastas vão ser criadas como anteriormente. Crie quantas mais precisar (dica: assets!)

Antes de codificarmos qualquer coisa nós vamos configurar as Propriedades do Projeto. Para fazer isso clique no menu Projeto e escolha Propriedades. Mude a dimensão para 640 x 840, a cor do fundo (Background) para preto e o framerate para 60 fps. Também certifique-se que o Target é o Flash Player 10 e o painel Test Movie diz "Play (FlashViewer default)". Deve ser semelhante a isto:



Isto disse ao FlashDevelop que nós queremos um jogo 640x480 em tamanho, com um fundo preto por padrão, rode a 60 quadros por segundo e que nós vamos testar no Flash Player associado aos arquivos SWF (que nós preparamos anteriormente)

Agora lembre que do arquivo zip baixado do github? Aquele que realmente contém o flixel? Volte para onde você o extraiu e copie a pasta org para a pasta src do seu novo projeto. NÃO inclua a pasta docs, build_docs.sh, flx.py ou license.txt. Só leve a pasta org e nada mais.

Se você fizer isto corretamente a janela de estrutura de Projeto vai ser parecida com:



É muito importante nota a estrutura aqui. A pasta org fica na raiz (no topo) da pasta src. Isto é vital. Se você colocou em qualquer outro lugar a compilação vai falhar. Na figura acima eu expandi a pasta org/flixel para você ver o conteúdo. Você também vai perceber o arquivo Main.as como antes, e um novo arquivo, Preloader.as

Clique com o botão direito na pasta src e selecione "Add - New Class ...":



No painel que aparece ignore tudo menos o Nome (que por padrão vai ser NewClass). Mude para FirstGame e clique OK.

Repita este processo novamente, só que ao invés de chamar a classe de FirstGame, chame-a de MenuState.
Repita o processo uma última vez, e chame-a de PlayState.
No final disso a nossa janela de Projeto tem os seguintes arquivos,



Antes de mergulharmos, vale a pena falar sobre a estrutura de flixel. Isto é melhor ilustrado com o seguinte diagrama:



Quando o SWF é carregado no Flash Player o código do Preloader vai rodar. Isto vai continuar rodando até que o SWF esteja completamente carregado.

Neste ponto a classe Main é criada.

Main, por sua vez, cria a nova class: FlxGame - esta é a classe inicial para o flixel, ela diz ao flixel o tamanho do seu jogo, se deve aplicar zoom e qual é o estado que deve rodar por padrão.

FlxGame então chama FlxState que você nomeou, e o pontapé é dado daqui.

Técnicamente Main e FlxState podem ser juntas em um mesmo arquivo de classe. Eu pessoalmente não gosto disso onde irei explicar em um futuro tutorial o porquê, mas não há nada de errado em faze-lo.

Certo, tempo de colocar algum código nestes arquivos que criamos!

Edite Main.as


Abra Main.as no FlashDevelop e edite-o para isto:

package
{
 import flash.display.Sprite;
 import flash.events.Event;

 [Frame(factoryClass="Preloader")]
 public class Main extends Sprite
 {
  public function Main():void
  {
   if (stage)
   {
    init();
   } else {
    addEventListener(Event.ADDED_TO_STAGE, init);
   }
  }

  private function init(e:Event = null):void
  {
   removeEventListener(Event.ADDED_TO_STAGE, init);

   var game:FirstGame = new FirstGame;

   addChild(game);
  }
 }
}


Este é o arquivo padrão criado pelo FlashDevelop com duas linhas extras. Ele espera o pre-loader termianr e então cria uma nova variável local chamada game, que é uma instância da classe FistGame. Isto é então adicionada a lista de display.the display list.

Resumindo, isto apenas fez o seu jogo flixel visível.

Edite FirstGame.as


Abra FirstGame.as no FlashDevelop e edite-o para isto:

package
{
 import org.flixel.FlxGame;

 public class FirstGame extends FlxGame
 {
  public function FirstGame()
  {
   super(320, 240, MenuState, 2);
  }
 }
}

De maneira simples isto cria a nossa instância de FlxGame. A chamada para super toma quatro parâmetros. A largura e altura do nosso jogo, a chamada a FlxState quando FlxGame estiver pronto, e o nível de zoom que estamos usando. v2.5 de flixel também adiciona dois novos parâmetros: o framerate do jogo e o framerate do Flash Player. Não há problema em deixar os valores padrões agora.

Neste caso a dimensão do nosso SWF era 640x480, mas o tamanho aqu é 320x240 com um nível de zoom de 2. Então, básicamente cada pixel vai aparecer duplicado em tamanho, para este estilo 8-bit retro, MenuState será o primeiro FlxState a ser chamado.

Edite MenuState.as


Abra o Menustate.as no FlashDevelop e edite-o para isto:

package
{
 import org.flixel.*;

 public class MenuState extends FlxState
 {
  private var startButton:FlxButton;

  public function MenuState()
  {
  }

  override public function create():void
  {
   FlxG.mouse.show();
   startButton = new FlxButton(120, 90, "Start Game", startGame);
   add(startButton);
  }

  private function startGame():void
  {
   FlxG.mouse.hide();
   FlxG.switchState(new PlayState);
  }
 }
}

Isto parece mais complicado, mas tudo que está fazendo é criar um botão que o usuário pode clicar para começar o jogo. FlxStates têm uma função chamada create que você dever over-ride e então preencher com o seu código. No nosso caso nós dissemos ao flixel para mostrar o ponteiro do mouse e criar o novo botão de começar o jogo.

Olhe a documentação do flixel para detalhes do que todas essas coisas fazem. Ou, como agora você está cozinhando com o poder de FlashDevelop você pode conseguir ajuda sensível ao contexto na maioria das funções do flixel simplesmente clicando dentro dos parênteses e pressionando CTRL+SHIFT+ESPAÇO. Você vai ver um pop-up como este aqui, e assim que você vai andando pelo parâmetros, ele vai lhe dizer o que cada um faz.



Edite PlayState.as


Abra o PlayState.as no FlashDevelop e edite-o para isto:

package
{
 import org.flixel.*;

 public class PlayState extends FlxState
 {
  public function PlayState()
  {
  }

  override public function create():void
  {
   add(new FlxSprite);
  }
 }
}

Aqui nós criamos um único FlxSprite e adicionamo-os ao display. Como nós não carregamos nenhum gráfico ele vai aparecer como um pequeno lgo flixel. Isto não é muito, mas nos permite saber que o nosso Menustate está ligado ao nosso PlayState corretamente.

F5: O momento da verdade


Aperte F5 para testar o jogo.

FlashDevelop vai invocar o compilador e se tudo estiver certo, vai disparar o Flash Player com o seu SWF dentro. Tenho esperanças de que você veja isto:



E clicando em Start Game uma tela preta com um pequeno quadrado branco aparece nela.

Sucesso! Você acaba de compilar e rodar o seu primeiro projeto flixel

Você também tem um bom template FlashDevelop para usar em jogos futuros. Apenas copie toda a pasta projeto, dê a outro nome e você está pronto pra outra.

Antes de você perceber vai estar criando jogos como este aqui também:



Se você teve qualquer problema em qualquer parte deste tutorial, por favor poste sobre isto no fórum oficial do Flixel: http://flixel.org/forums


Leituras Sugeridas


Para aprender sobre o design do compilador do Flex 3 há este ótimo white-paper no site da Adobe.

Para entender como mxmlc funciona, leia este artigo do Senocular (N.T. Senocular é um renomado programador Flash)

Um guia para iniciantes ao FlashDevelop é um ótimo artigo se você quiser aprender mais sobre o que o FlashDevelop pode fazer (N.T. Caso queira a tradução, basta pedir nos comentários)

E a página Flash Game Dev Tips no Google Code contém muitas outras dicas que você pode usar com as suas recém-adquiridas habilidades de flixel.

Notas do Tradutor


Caso tenham gostado da tradução, compartilhem no twitter, facebook, orkut, google+, ou qualquer outro meio que preferirem. Se quiserem mais traduções basta pedirem nos comentários ou me mandando um email para o endereço que pode ser encontrado no rodapé desta página, obrigado.

domingo, 6 de novembro de 2011

Diddy Kong Racing - Game Design, análise


Diddy Kong Racing é um jogo carismático e desafiante da lendária Rare. É interessante revisitar alguns jogos antigos e ver o que se pode aprender da época em que os jogos não eram tão atrativos graficamente e tinham que sobreviver basicamente de gameplay.

A mecânica principal deste jogo é o ato de curvar. Se você curva na hora certa e no lugar certo será bem recompensado, se não o fizer, será punido.
      Para deixar a mecânica mais divertida e colocar os jogadores em posições não ótimas em relação à uma corrida tradicional, existem as flechas vermelha e amarela que dão turbo. Além disso, foi dado aos jogadores um balão verde de armadilhas, que se pode colocar nos melhores lugares, forçando os outros jogadores a ficarem sempre atentos à mudanças.

Para explorar essa mecânica mais ainda, foi criado o desafio das oito moedas de prata, sempre colocando-as em locais não ótimos, forçando o jogador, novamente, a reaprender quais curvas ele tem que fazer. Com este desafio, extende-se o tempo de jogo com pouca criação de conteúdo.
      Em seu level design, é aproveitado o fato de que algumas moedas só podem ser pegas se você tomar determinada rota na corrida, assim em cada volta você deve tomar uma rota, o que te faz ainda mais ter que aprender toda a fase, mas os elementos são introduzidos aos poucos. O jogo se mostra sempre justo para o jogador, com exceção dos chefes, eles parecem trapacear!


Olha o tamanho desse dinossauro!

Um outro elemento de mecânica são os foguetinhos e o escudo. Em alguns momentos pode ser frustrante, mas é a marca registrada da corrida maluca que só existe no mundo virtual, onde ao invés de sempre buscar a curva perfeita pode-se ganhar o jogo com outras habilidades como mira e gerência de recursos dos itens dos balões.

Foi colocado um story mode, e diversos prêmios como animações bonitas e falas do tipo "Good job kid!" para incentivar o jogador a continuar jogando. Cria um mundo para o jogo que passa a ser algo mais que apenas corridas. Para se explorar esse mundo, o seu amigo bruxo elefante ainda o desafia para algumas corridas, uma em cada veículo disponível no jogo.

Apesar da aparência infantil, o jogo pode ser facilmente frustrante se você não está sempre tentando entender o que está fazendo de errado, além de esconderem alguns itens do jogo de maneira vil. Mas ao mesmo tempo, essa dificuldade é uma das coisas que torna vencer no jogo algo muito gratificante.

Um clássico do Nintendo 64, com muitas lições sobre grau certo de dificuldade, aproveitamento dos assets artísticos, e, exploração das mecânicas básicas ao limite através de seu level design. Além de é claro, a marca registrada da Rare, o jogo é todo polido, nenhuma falha aparente, tudo é muito bem feito.