Primeiros passos para o desenvolvimento de jogos com Phaser

A chegada de HTML5 Mudou a forma como vemos a web, não só nos deu melhores ferramentas para o seu desenvolvimento, mas também nos abriu as possibilidades de desenvolvermos aplicativos que vão além, como é o caso dos videogames.
A vantagem de fazer um videogame em HTML5 é que é compatível com praticamente qualquer dispositivo que tenha navegador e o que é melhor, sem a necessidade de baixar ou fazer instalações adicionais.
Graças a esta nova popularidade, os frameworks para o desenvolvimento de videogames proliferaram, cada um com suas características e vantagens, desta vez vamos nos concentrar em Phaser, os motivos são vários e podemos vê-los na seguinte lista:

• Tem uma grande comunidade e é ativa.
• Ele é atualizado periodicamente.
• É de uso gratuito.
• Possui ferramentas de física que tornam a vida mais fácil para nós.

Então, visto que vemos que ele tem algumas vantagens interessantes, vamos instalá-lo, mas primeiro vamos ver alguns requisitos que o framework requer.
1- Precisamos de acesso à Internet para poder baixar todos os recursos que surgem durante a instalação do framework, inclusive este.
2- Devemos ter instalado ou poder instalar um servidor web do estilo LUMINÁRIA ou WAMP ou MAMP dependendo do nosso sistema operacional, isso porque Phaser usa HTML5 e também JavaScript Portanto, devido a medidas de segurança, nosso navegador não aceitará execuções locais.
3- Precisamos de permissões para acessar as pastas e serviços necessários que são definidos durante a instalação do framework.
4- Precisamos de um navegador compatível com HTML5 e que possui ferramentas de depuração, no caso deste tutorial usaremos Firefox Developer Edition em sua versão mais recente no momento, no entanto, eles são livres para escolher aquela que lhes parecer melhor.
5- Por fim, precisamos de um editor de texto para poder escrever o código dos exemplos, pois pode ser sempre o que tivermos, embora recomendamos Texto Sublime o NotePad ++ devido ao grande número de plugins que ambos possuem que facilitam nossa vida como desenvolvedores.
A primeira coisa que faremos para poder instalar Phaser é ir ao seu site oficial e aqui encontraremos vários recursos, porém por enquanto iremos para a seção que diz Baixar:

PROLONGAR

Temos várias opções de download, as duas que podemos usar são para baixar o .zip compactado ou .tar.gz, também podemos fazer um clone a partir de Github do projeto, no nosso caso vamos baixar o projeto em .zip para agilizar o processo. Depois de fazer o download ou clonar o projeto, os diretórios mais importantes são os seguintes:
docs / index.htmlAqui temos a entrada para a documentação off-line e oficial da versão que acabamos de baixar, pode nos ajudar a revisar alguns detalhes, embora se tivermos a opção de ir à Internet e nos documentarmos, sempre teremos opções melhores.
build / phaser.min.jsEsta é a nossa estrutura como tal, é a biblioteca minimizada e compactada que contém todas as ferramentas de que precisaremos para iniciar nossos primeiros projetos.
Já que baixamos o projeto, para verificar se tudo está correto basta copiar a pasta descompactada onde podemos acessá-la com nosso servidor web, geralmente é o diretório www ou public_html, tudo realmente depende do nosso ambiente.
Uma vez lá, devemos ir para o nosso navegador e executar o nosso localhost / phaser ou o nome que colocamos e veremos a lista de arquivos, aqui devemos navegar para a seguinte pasta: resources / tutorials / 01 Getting Started / hellophaser / index.html e podemos apreciar o que vemos na seguinte captura de tela:

PROLONGAR

Nosso primeiro jogoUma vez que verificamos que nosso ambiente funciona perfeitamente é hora de fazer nosso primeiro jogo, para isso vamos estabelecer uma meta alcançável para nosso nível neste momento, onde ao final do exemplo devemos ser capazes de mostrar um Sprite na tela.
Na pasta que temos o framework em nosso servidor web vamos criar uma nova pasta, neste caso a chamaremos exemplo de phaser, dentro vamos colocar o arquivo phaser.min.js na raiz dele, vamos criar um arquivo chamado index.html e outro arquivo chamado main.js, devemos também colocar uma imagem chamada logo.png.webp qual será o sprite que iremos mostrar, que pode ser encontrado nos recursos do framework e este pode ter um tamanho recomendado de 180 por 64 pixels. No final, nosso diretório deve ser assim:

Uma vez que temos nossa estrutura estabelecida agora devemos começar a escrever o código para nosso primeiro projeto, para isso o que devemos fazer é abrir nosso arquivo index.html e lá vamos incluir os arquivos .js que criamos, além de criar um que terá como identificador a palavra gameDiv. Vamos ver como é o nosso código:

 Nosso primeiro jogo no Phaser
Nosso primeiro jogo =)

Esta será a base sobre a qual nosso jogo será suportado para que o usuário possa visualizar o conteúdo. A próxima etapa na construção de nosso primeiro jogo é escrever o código para main.js, que tratará de toda a lógica do nosso jogo e contém três métodos principais, vejamos:
pré-cargaEste método é responsável por pré-carregar todos os recursos de que nosso jogo necessita, sejam imagens, áudio, vídeos, etc. Ele sempre é executado na inicialização.
crioEste método é executado após terminar pré-carga e sua função é incorporar os recursos carregados ao nosso jogo, além de nos dar a possibilidade de estabelecer a configuração inicial do mesmo.
atualizarFinalmente, este método roda 60 vezes por segundo e contém a verdadeira lógica do nosso jogo, é o que nos dá o movimento, por assim dizer.
Como podemos ver, cada um desses métodos é responsável por um estado do jogo, os dois primeiros são anteriores ao início do jogo, enquanto o atualizar ocorre durante a execução. Depois de definir o que cada método faz, só precisamos ver o código de que precisamos:

 var mainState = {preload: function () {// Carregamos a imagem game.load.image ('logo', 'logo.png.webp'); }, criar: function () {// Mostramos nossa imagem no jogo this.sprite = game.add.sprite (200, 150, 'logo'); }, update: function () {// alteramos o ângulo em uma unidade 60 vezes por segundo // isso nos dará um efeito de rotação da imagem this.sprite.angle + = 1; }}; // aqui começamos nosso jogo e o configuramos // para usar o div gameDiv que colocamos em nosso HTMLvar game = new Phaser.Game (400, 300, Phaser.AUTO, 'gameDiv'); game.state. add ('main', mainState); game.state.start ('main');

Como podemos ver no final dos métodos, criamos uma variável chamada jogos e nisso executamos uma instância de Phaser.Game onde passamos alguns parâmetros, no momento não é necessário saber muito sobre eles, simplesmente os copiamos como os vemos. Mas mais ou menos esta é a parte em que dizemos ao nosso aplicativo para procurar Phaser para que diga o que fazer com os métodos que criamos acima e no final com game.state.start é onde dizemos ao framework para iniciar nosso jogo.
Agora, se tudo correu bem, vamos executar nosso projeto no navegador e veremos a imagem selecionada girando na tela:

No caso deste exemplo, usamos uma imagem que vem dentro dos recursos de PhaserNo entanto, não é realmente um requisito, com qualquer imagem poderíamos obter os mesmos resultados. Outra coisa que podemos notar em nosso exemplo é que abaixo temos o console de depuração do navegador aberto, esta ferramenta é a melhor amiga que teremos, pois é nela que podemos depurar os diversos erros que podemos encontrar no desenvolvimento de nossos jogos.
Com isso terminamos este tutorial, instalamos com sucesso Phaser, conhecemos algumas das características iniciais deste grande framework e com isso criamos um pequeno aplicativo ou jogo. É importante tomar este tutorial como um ponto de partida para fazer uma pesquisa um pouco mais aprofundada sobre Phaser, já que não é nem 1% de tudo o que ela nos oferece, porém é um primeiro passo que tantas vezes nos custa de dar.