Desenvolvendo jogos HTML5 com o Phaser

Neste artigo vamos analisar alguns recursos úteis para quem deseja aprender a utilizar o Phaser e vamos testar alguns exemplos de utilização desta game engine para ver o que ela tem a oferecer.

Este post faz parte do projeto que participo de tradução dos artigos dos blogs da Envato, Webdesigntuts+, Gamedevelopmenttuts+ e Nettuts+.

Link para artigo original: How to Learn the Phaser HTML5 Game Engine
Autor do artigo original: Richard Davey
Link da envato para o artigo traduzido: Aprenda a Utilizar a Game Engine Phaser Para Desenvolvimento de Jogos HTML5


O Phaser é um framework open source para desenvolvimento de jogos em HTML5 criado por Photon Storm. Seu foco é criar jogos que rodam em navegadores tanto para mobile quanto para desktops. Tem se dado muita atenção para a performance de navegadores mobile, uma área crescente e importe para o desenvolvimento de jogos para web. Se o dispositivo for compatível então ele utiliza WebGL se não é feito um fallback com Canvas.

Aprenda a Utilizar a Game Engine Phaser Para Desenvolvimento de Jogos HTML5 - Web Social Dev - Traduções Envato

Mais um Framework para desenvolvimento de jogos em HTML5?

É justo dizer que toda semana parece surgir um novo framework para desenvolvimento de jogos em HTML5, devido a proliferação dos mesmos. Então porque você deve considerar o Phaser dentre tantos? Eu gosto de pensar que talvez seja algo relacionado a equipe que cuida do desenvolvimento do framework.

Aqui na Photon Storm alguns anos atras nos dedicamos a desenvolver apenas jogos em HTML5, quando nem existiam opções de frameworks e você podia contar o número de jogos disponíveis em HTML5. Atuando neste segmento, percebemos a necessidade de utilizar ferramentas de auxilio assim como Flash auxiliava o desenvolvimento com AS3.

Nós eramos grandes fans e contribuidores do Flixel e alcançamos certo sucesso com alguns jogos e com a ferramenta de auxilio Flixel Power Tools. Era muito bacana ver outros desenvolvedores utilizando nossas ferramentas para ajudar a lançar seus próprios jogos, e isso foi algo que desejamos que duplicasse com a utilização do HTML5.

Aprenda a Utilizar a Game Engine Phaser Para Desenvolvimento de Jogos HTML5 - Web Social Dev - Traduções Envato

Nós não estávamos preparados, no entanto, para a velocidade com que o HTML5 estava evoluindo. Até hoje, eu tenho um slide nas minhas apresentações que diz “Se prepare para desaprender tudo que você aprendeu nos ultimos seis meses“, e ainda acredito que isso é um realidade. Hoje as empresas responsáveis por navegadores como a Mozilla e o Google interagem e muito com as comunidades de desenvolvimento. Hoje leva cerca de semanas que para que alguma novidade seja disponibilizada para o publico na web, então se você está preso a algum framework para desenvolvimento de jogos que é mantido no tempo livre ou com um ciclo baixo de manutenção no código, logo não vai levar muito tempo para essa ferramenta se tornar obsoleta.

Outro sinal desta mudança estava no tipo de trabalho que estavamos produzindo para os clientes. Como uma empresa nós exercíamos duas funções: criar jogos em HTML5, e criar o Phaser. Nós criamos jogos em HTML5 para algumas das maiores marcas de entretenimento do mundo, e isso nos deu uma visão no tipo recursos que eles poderiam vir a precisar. A area que mais solicitava nossos serviços era a de games para navegadores de dispositivos móveis; vários frameworks HTML5 para desenvolvimento de jogos estavam voltados apenas para desktops, onde não precisam se preocupar tanto com a performance e a velocidade da internet que é rápida e estável, se esquecendo dos dispositivos móveis. Mesmo assim nos enxergamos uma grande demanda de clientes nesta área. Então isso foi vital para decirdirmos utilizar o Phaser para desenvolvimento dos jogos de nossos clientes ao invés de outra plataforma.

Desde o lançadmento do Phaser 1.0, as atualizações tem sido constantes com vários recursos novos e correções em tempo. Nos trabalhamos em um turno de aproximantade um mês do desenvolvimento até a versão final – você pode acompanhar as mudanças do changelog no GitHub. É interessante ver que hoje a demanda por jogos no ambiente web (no navegador) tem crescido, então nosso trabalho é garantir que o Phaser atue corretamente neste ambiente.

Tão bom quanto manter o Phaser atualizado é construir uma ferramenta realmente fácil de usar. Vocês podem notar isso por todo o framework. Foi o que sobrou da nossa experiência com o Flixel Power Tools, e mais tarde quando costumavamos atuar no The Game Creators ajudando a definir qual a linguagem utilizada em seus jogos. Acho que sempre foi algo meu querer contribuir para o desenvolvimento de jogos mais simples possível, algo que pretendo dar continuidade conforme o Phaser cresce.

Adianto o pedido de desculpas caso algo no artigo pareça “marketing”. O Phaser é um produto grátis, nós não ganhamos dinheiro com ele, então se me empolgo a seu respeito é porque sou realmente apaixonado pelo que eu criei. Então tente me entender!


Em que plataforma posso utilizar o Phaser?

Navegadores Desktop

O Phaser é uma biblioteca JavaScript criada para rodar nos principais navegadores desktops. Isso inclui o Internet Explorer 9 pra cima, Firefox, Chrome e Safari. Versões anteriores ao IE9 não suportam canvas, então você vai precisar de outra ferramenta que de suporte a renderização do DOM para então utilizar o Phaser. No mais, a demanda por este tipo de jogos está muito próxima do mínimo, caminhando em direção ao WebGL.

Navegadores Mobile

Em dispositivos móveis, o Phaser é suportado no iOS5 pra cima no navegador Safari. No Android, ele é suportado a partir da versão 2.2 pra cima tanto no navegador padrão quanto no Chrome mobile. Hoje o Chrome é o navegador padrão do Android, com sua ultima versão já com suporte ao WebGL, mas você não gostaria (isso não é uma boa prática para qualquer projeto voltado para web) de ignorar a grande massa com dispositivos desatualizados ainda em uso.

Aprenda a Utilizar a Game Engine Phaser Para Desenvolvimento de Jogos HTML5 - Web Social Dev - Traduções Envato

Firefox OS, Tizen, e Kindle

Graças a Mozilla, nós recebemos vários dispositivos para teste com FFOS, e estamos trabalhando para garantir que o Phaser opere corretamente neste sistema. Estamos preparando a produção de guias de implantação para o próximo ano.

Nós também vimos o Phaser rodar bem em dispositivos que utilizam o sistema Tizen e perfeitamente no Kindle com ajuda do HTML5 Wrapper, o que significa que você pode utilizar os jogos nestes dispositivos sem problemas. Nosso objetivo é garantir que o Phaser opere em qualquer dispositivo baseado na web que for introduzido no mercado.


Aplicativos nativos e executaveis para Desktops

Exitem uma grande variedades de ferramentas para desenvolvimento de jogos que focam na criação de app´s nativos (Unity, Corona, Loom, entre outras), essa não é uma área que desejamos focar em por enquanto, ainda mais quando comparado ao mercado de navegadores mobile.

Mesmo assim, com o desenvolvimento de ferramentas como o CocoonJS e Ejecta, começamos a notar desenvolvedores utilizando o Phaser para desenvolvimento de games em apps nativos. Então, durante o ano de 2014 vamos adicionar o suporte nativo direto no core do Phaser ao CocoonJS assim como suporte para wrappers de navegadores desktio como o node-webkit.

Aprenda a Utilizar a Game Engine Phaser Para Desenvolvimento de Jogos HTML5 - Web Social Dev - Traduções Envato

Principais recursos

Nós destacamos o que consideramos os recuros mais importes do Phaser sob o ponto de vista de um desenvolvedor:

Apenas JavaScript puro

Isso pode soar como um recurso estranho, mas deveria atualmente ser considerado um dos principais recursos. O Phaser não utiliza nenhuma prática interna de orientação a objeto. Não possui heranças de código nem de componentes, e você não precisa forçar os objetos em nenhuma classe de estrutura fixa. Está é a maneira mais simples e prática para protótipos e a maneira como o JavaScript espera ser interpretado.

Isso não significa que você não pode desenvolver jogos estruturados; longe disso. Significa que não forçamos você a desenvolver desta maneira. Isso também significa que internamente é muito fácil alterar as funções do Phaser(ou hackear para outras utilizações como mods).

Mas eu curto TypeScript!

Isso é bom pois temos também definições de arquivos em TypeScript! Temos um guia de como utilizar este recurso no artigo Utilizando Phaser com TypeScript

Aprenda a Utilizar a Game Engine Phaser Para Desenvolvimento de Jogos HTML5 - Web Social Dev - Traduções Envato

Habilidade de carreganto simples

O Phaser tem um habilidade embutida de carregamento que suporta:

  • Imagens
  • Sprite Sheets
  • Texture Atlases (incluindo pack de texturas, JSON Hash, JSON Array, Flash CS6/CC, e formato XML Starling)
  • Arquivos de audio
  • Arquivos de dados (XML, JSON, texto)
  • Arquivos JavaScript (você pode carregar partes do seu jogo ou recuros baseados em JS)
  • Tilemaps (CSV e Tiled map)
  • Fontes Bitmap

Nós as vezes exportamos texturas diretamenta do Flash para jogos desenvolvidos com Phaser, que possui suporte a trimmed atlases. Assets podem ser carregados em partes, gravados em cache, e requisitados de diferentes URLs (para suporte a serviços CDN), e você pode com facilidade transformar qualquer sprite em uma barra de progresso com apenas uma linha de código.


Renderizando: WebGL e Canvas

Internamente, o Phaser utiliza o Pixi.js para renderização de gráficos. O Pixi é uma biblioteca JavaScript muito boa e rápida para renderização com foco no Canvas e no WebGL. É uma biblioteca que contribuimos para ajudar na evolução dos recursos.

Para seus jogos, isso significa que se o navegador do usuário suportar a tecnologia WebGL ele vai ter uma melhor experiência. WebGL é uma tecnologia comum nos desktops mas ainda está caminhando em dispositivos móveis; mesmo assim, os jogos em HTML5 caminham para este futuro, então o suporte a WebGL é primordial em dispositivos móveis e uma questão de tempo. A ultima versão do Phaser introduziu o suporte ao WebGL Shader e Filter, e as próximas versões devem implementar maps normais para você poder utilizar novas ferramentas como o Sprite Lamp.

Aprenda a Utilizar a Game Engine Phaser Para Desenvolvimento de Jogos HTML5 - Web Social Dev - Traduções Envato

Audio: Web Audio e Legacy Audio

O audio é a um bom tempo um dos pontos mais delicados do desenvolvimento de jogos em HTML5. Apenas a alguns anos atrás tivemos de encarar o fato de ter apenas um canel de audio de alta latência, o que podia danificar o dispositivo com o tempo ou nem mesmo tocar. Hoje temos a Web Audio API para nos ajudar. Ela permite uma integração apropriada do audio, com multiplos canais, rotas e todos os tipos de efeitos. E o Phaser tem suporte a Web Audio API.

No entento, muitos dispositivos Android continuam sem suporte talvez por serem aparelhos antigos sem atualização de sistema – para isso disponibilizamos suporte ao legacy Audio e a Audio Sprites: técnica que consiste em juntar todos os efeitos de audio em um unico arquivo com marcações para reproduzir determinado efeito em determinada ação. O Phaser pode alterar as capacidades de audio de acordo com a capacidade do dispositvo além de debloquear automaticamente o sub-sistema de audio (verificar documentação para maiores informações).

Aprenda a Utilizar a Game Engine Phaser Para Desenvolvimento de Jogos HTML5 - Web Social Dev - Traduções Envato

Inputs: Multi-Touch, Keyboard, Pointer, Mouse

Fornecer suporte para desktop e dispotivos móveis requer suporte a diferentes opções de inputs. O Phaser suporta teclados, mouse, toques, entre outros. Por exemplo, no Surface da Microsoft você pode alternar entre toque na tela e teclado, ou até mesmo utilizar os dois juntos.

Para toques na tela, o Phase conta com suporte single-touch e multi-touch. Você pode definir até 10 pontos ou mais e monitorar todos independentemente, utilizando eventos para acionar interações com Sprites.

Aprenda a Utilizar a Game Engine Phaser Para Desenvolvimento de Jogos HTML5 - Web Social Dev - Traduções Envato

Physics, Tweens, e Particles

Dentro do pacote do Phaser temos os sistemas ArcadePhysics e o ArcadeParticles. Bibliotecas AABB simples que permitem adicionar efeitos como gravity e motion para qualquer Sprite para teste.

Sabemos que todos esses recursos não são necessários para todos os jogos, por isso o sistema physics é bem fácil de ser alterado. Um sistema de tweening também está disponível no Phaser, permintindo que você alterne entre objetos e propriedades facilmente. E seu jogo precisa ter pause, então todos os tweens são pausados automaticamente e voltar a operar quando necessário.

Aprenda a Utilizar a Game Engine Phaser Para Desenvolvimento de Jogos HTML5 - Web Social Dev - Traduções Envato

Plugins

É um dos nossos objetivos garantir a estabilidade do Phaser enquanto o framework cresce, então tentamos não efetuar tantas atualizações além de correção de bugs e atualizações para navegadores. No entento, não queremos que o Phaser fique estagnado, então desenvolvemos um sistema de plugins, para que a ferramenta receba novas funcionalidades sem alterar o core da biblioteca.

Os plugins do Phases podem ser registrados com o core do framework, se manter atualizado com o jogo e auxiliar em qualquer tipo de tarefa adicional. Um bom exemplo é o EasyStar path finding plugin lançado recentemente. Pretendemos lançar mais plugins e esperamos que isso incentive a comunidade a desenvolver mais plugins para o Phaser no futuro.

Introdução

Agora vamos analisar como fazer download do Phaser e como configurar o ambiente de desenvolvimento para testes iniciais.

Baixando o Phaser

O projeto do Phaser está hospedado no GitHub no link https://github.com/photonstorm/phaser. O projeto possui dois branches (versões paralelas em desenvolvimento): master, que conta com as ultimas atualizações estáveis e dev, que conta com recursos ainda em desenvolvimento para a versão final. Se você é um estusiasta e deseja acompanhar as novidades do Phaser, pode utilizar a versão dev, se não o recomendado é sempre utilizar a versão estável (master).

Você pode utilizar o git para dar um fork no repositório, dessa maneira você pode atualizar o seu repositório de maneira simples. Se você não curte muito gerenciamento através do git, pode baixar o pacote zipado com todo o repositório.


Aprenda a Utilizar a Game Engine Phaser Para Desenvolvimento de Jogos HTML5 - Web Social Dev - Traduções Envato

Guia para iniciantes

Após baixar, recomendamos você a seguir o guia oficial para iniciantes (Getting Started Guide). O guia aborda a configuração de um servidor web local, do ambiente de desenvolvimento, e da programação na nuvem se este for seu interesse.

O guia percorre as seguintes seções:

Criando seu primeiro jogo

Com seu ambiente de desenvolvimento devivamente pronto, é hora de começarmos a programar. Nos recomendamos começar com o tutorial Making your first Phaser game (criando seu primeiro jogo com Phaser). Ele percorre o processo de criação de um jogo plataforma simples, introduzindo os pontos mais importantes do Phaser para entender como ele funciona e expandir seu projeto e aprender mais.

Aprenda a Utilizar a Game Engine Phaser Para Desenvolvimento de Jogos HTML5 - Web Social Dev - Traduções Envato

Exemplos do Phaser

Quando você efetuar download do Phaser, vai notar que no pacote contem um pacote de exemplos ou Examples suite. Este arquivo é uma pagina web com 170 exemplos de códigos diferentes, divididos em área chaves: Physics, Collision, Sprites, Texto, entre outras. Todos os exemplos estão funcionando com o código apresentado, que você pode copiar e editar facilmente. A idéia que é você possa absorver o máximo de conhecimento dos exemplos disponibilizados. Se utilizado em conjunto com a documentação da API, você pode obter um melhor desempenho no aprendizado do Phaser em algumas partes especificas.

Aprenda a Utilizar a Game Engine Phaser Para Desenvolvimento de Jogos HTML5 - Web Social Dev - Traduções Envato

Documentação da API

A documentação da API está disponível na pasta de documentações do Phaser. Nós trabalhamos muito na documentação e apesar de não estar perfeita, cobre todos os pontos do framework.


A ultima atualização (1.1.3) também trouxe várias mudanças e a documentação se tornou mais detalhada com base no esforço da equipe de melhorar o Phaser a cada nova versão.

JSHint

Desde a versão 1.1.3 o Phaser roda inteiramente com base no JSHint. Nós disponibilizamos nosso arquivo de configuração também com o repositório.

Utilizar o JSHInt é uma maneira de garantir que o framework vai seguir uma linha fixa em sua estruturação, desde a forma como tratamos tabs até a forma como identamos, entre nomes de variáveis e mais. Quem estiver interessado em contribuir com o Phaser deve checar suas atualizações em relação a configuração do JSHint.

Próximos passos

Se você acompanhou todo o artigo deu pra notar porque o Phaser é um ótima ferramenta, o que esperado fazer com e como podemos aprender a desenvolver jogos com ele, que é o intuito. Mas o aspecto mais importante em relação a frameworks de games (e em geral, vide Bootstrap) é a comunidade de desenvolvedores por trás.

Criar um jogo é um trabalho árduo. É mais dificil ainda se for desenvolvido isolado, com um framework novo na praça que certamente opera diferente de qualquer outro framework que você utilizou. Ainda bem que o Phaser tem uma comunidade solida de suporte ao framework.

Making a game is hard work, period. And it’s even harder to do in isolation, with a brand new framework that almost certainly works differently from anything you’ve used in the past. Thankfully, Phaser has a thriving community based around it.

Aprenda a Utilizar a Game Engine Phaser Para Desenvolvimento de Jogos HTML5 - Web Social Dev - Traduções Envato

Fóruns para desenvolvimento de jogos HTML5

Nós montamos o HTML5 Game Devs forum um tempo atrás, não especificamente para o Phaser, mais simplimente porque desenvolvimento de jogos em HTML5 era uma novidade e nós precisamos falar com outras pressoas sobre. Desde então, segue cada vez mais forte, com discussões ativas, 250,000 visualizações de páginas por mês uma base de usuário bem profissional e amigável.

Faz sentido querermos utilizar esta comunidade como comnunidade oficial do Phaser, lá você vai encontrar vários desenvolvedores para tirar dúvidas ou debater assuntos sobre o framework. O fórum também é comunidade de outras bibliotecas 3D como Pixi.js e Babylon.js e tem uma área bem legal de Games Showcase para você apresentar o que quer que você tenha criado. É realmente muito gratificante e inpirador ver o que outrs desenvolvedores estão criado.

Aprenda a Utilizar a Game Engine Phaser Para Desenvolvimento de Jogos HTML5 - Web Social Dev - Traduções Envato

Newsletter

A Newsletter do Phaser é disponibilizada uma vez por mês e contém informações sobre novos lançamentos, artigos sobre seções do Phaser e topicos sobre plugins e tutoriais. A inscrição é gratuita e livre de spam.

Contribua

Você pode ajudar o Phaser a crescer. Se você encontrar um bug, por favor reporte para a equipe. Não demora muito e nós temos uma taxa de 91% de erros solucionados através de bus reportados (e estamos trabalhando pelos 9% restantes). Você também pode fazer pull requests no GitHub no branch Dev, e até mesmo criar plugins ou filtros.


Mostre seus jogos!

Nós passamos horas trabalho no Phaser porque queremos que ele seja a melhor ferramenta para desenvolvimento de jogos em HTML5 que existe. Nós entendemos que não podemos agradar a todos, e aceitamos isso. Mas se você criar algo utilizando o Phaser, não importa o projeto, nos informe. Você não sabe o quanto isso nos motiva na criação do framework, ver o que os desenvolvedores estão criando com a nossa ferramenta. Entre em contato conosco através do Fórum, Twitter (@photonstorm) ou por email.

Acima de tudo, desejamos que você realmente se divirta criando jogos.