Preparando o ambiente de desenvolvimento phaser

O que veremos aqui?

Basicamente como criar um ambiente de desenvolviento para jogos em html5 com Phaser. O ambiente que construiremos é simples: instalaremos um servidor web (o wamp no windows), colaremos a pasta do framework dentro, por fim acessaremos via browser os exemplos!

Montando o servidor web

Por questões de segurança de requisições javascript, os arquivos do jogo precisam ser hospedados em um servidor. Para iniciar o desenvolvimento, precisamos então instalar um servidor web em nossa máquina.

Baixe e instale o wamp em seu windows, ou no linux, apenas instale o apache.

Existem excelentes tutoriais para instalação do wamp server no windows, portanto não veremos aqui como fazê-lo. Veja aqui uma sugestão de tutorial para instalação do wamp server.

Escolhendo um editor de texto

Qualquer programa de computador (jogo é um exemplo dele) precisa ser escrito com linhas de código. Essas linhas nada mais são que textos, os quais contém instruções para o computador operar.

Um editor de texto para programação é qualquer programa que edite textos e traga alguma ou muitas facilidades. Você pode fazer um programa completo usando bloco de notas, mas é muito mais fácil (e produtivo!) usar um editor especializado para isso.

Netbeans e Eclipse são os mais famosos para desenvolvimento de software em geral. Porém, existem alternativas “mais leves” e simples de começar. Uma sugestão que o próprio site do Phaser oferece é o sublime, que também recomendo!

Lembre-se: a melhor IDE é aquela que você mais gosta e lhe permite produzir mais!

Baixando o framework Phaser com um jogo de exemplo – modo simples

Aqui pretendo simplificar o processo e em vez de baixarmos todos os fontes do framework (como no tutorial original) você precisará baixar apenas um zip contendo duas pastas e um arquivo html:

  • A pasta assets possui as imagens, sons e arquivos visuais usados no jogo
  • A pasta js, contém o framework phaser minificado (ou seja, compactado)
  • O arquivo jogo.html é um exemplo simples, que entenderemos no próximo tutorial desta série

Baixe este arquivo, que contém tudo que você precisa para começar de um modo simples, crie uma pasta chamada meujogo em c:\wamp\www\meujogo (para windows) ou /var/www/meujogo (para linux).

Dentro da pasta criada extraia os dados baixados no arquivo do link anterior.

Agora basta acessar: http://localhost/meujogo e você verá o game funcionando!

Você deverá ver algo assim:

Tela inicial jogo em html5 com phaser
Tela inicial jogo em html5 com phaser

Para quem deseja baixar o framework Phaser completo – modo avançado

Se você quer algo mais avançado, sugiro olhar o projeto Phaser que  encontra-se no github: https://github.com/photonstorm/phaser. Desta forma, você vai baixar os fontes do framework e poderá entender sua estrutura interna, bem como participar contribuindo no projeto!

Se você não está acostumado com git, apenas escolha “Download ZIP” no canto direito da tela. Se domina versionamento, faça um git clone https://github.com/photonstorm/phaser.git

Crie uma pasta pasta chamada “phaser” na pasta www do seu servidor e extraia o arquivo .zip:

No windows esta pasta estará (por padrão) em c:\wamp\www

No linux em /var/www

Exemplos do framework Phaser

Se você quer ver o poder deste framework, não deixe de conferir o site oficial dos exemplos: http://examples.phaser.io/. Veja na seção GAMES os jogos já prontos e funcionando!

O que vem pela frente?

No próximo post vou mostrar como este jogo funciona, passo a passo. Entenderemos um pouco da dinâmica html5 de construção de games, e você perceberá que construir games em html5 é divertido!

Referências

Tutorial oficial do site Phaser: http://phaser.io/getting-started-js.php
Jogo inicial: http://www.photonstorm.com/phaser/tutorial-making-your-first-phaser-game

5 Comments

Leave a Reply

%d