HTML5 - O guia completo para a criação de jogos HTML5 com Canvas e SVG

David Rousset

Technical Evangelist

Atualmente estou passando a maior parte de meu tempo explicando a estudantes, hobbistas, desenvolvedores profissionais e professores como criarem jogos usando HTML5. Então pensei recentemente: em vez de manter todos esses detalhes para públicos pequenos, não setia mais inteligente estrututar tudo que sei para compartilhar em uma postagem em meu blog?

Este artigo se baseia em minha própria experiência. Provavelmente omitirei algumas coisas importantes que alguns de vocês sabem. Mas tentarei atualizar esta postagem no blog junto com minhas novas descobertas e, é claro, baseado nos comentários que você oferecerá gentilmente ou via Twitter.

Mas por que há tanta gente interessada em jogos HTML5?

Bem, simplesmente porque, hoje, nós podemos realmente usar HTML5 para visarmultiplatformas usando o mesmo código: para máquinas:desktop é claro (com IE9/IE10, Firefox, Chrome, Opera e Safari), paratablets e telefones e Windows 8, e seus milhões de tablets e computadores associados futuros, está abraçando carinhosamente jogos HTML! E vejo frequentemente projetos de jogos em HTML5 transferidos para cada uma dessas plataformas quase sem nenhum esforço.

E mais, o desempenho dos mecanismos JavaScript modernos aliado com as camadas de elementos gráficos acelerados por hardware de GPU nos permitem criar jogos ótimos em HTML5 com confiança.

Canvas e SVG: 2 maneiras de desenhar na tela

A primeira coisa que você precisa entender antes de criar seu primeiro jogo em HTML5 é como desenhar objetos bonitos na tela. Existem duas maneiras de fazer isso e, para entender melhor as diferenças, você deve começar lendo este artigo de Patrick Dengler (membro do Grupo de trabalho em SVG do W3C): Reflexões sobre quando usar Canvas e SVG

De minha parte, reutilizei partes dos materiais de Patrick para criar uma sessão interna de 45 minutos para meus colegas da Microsoft no ano passado. Você pode assisti-la através deste vídeo que eu fiz (usando <video> HTML5, é claro!):

Baixar o vídeo: MP4, WebM
HTML5 Video Player de VideoJS

E aqui estão os slides:

Finalmente, você pode baixar o código-fonte que demonstro nesse vídeo aqui: Mix11SVGCanvas.zip

Você também pode dar uma olhada nessas 2 ótimas sessões do MIX11:

• Modernização de seu site: O melhor do SVG e do HTML5
• Mergulho profundo no HTML5 <canvas>

Depois de analisar todo esse conteúdo, você provavelmente entenderá melhor por que quase todos os jogos em HTML5 estão usando o Canvas em vez de SVG. O Canvas oferece um modelo de desenvolvimento bem conhecido para desenvolvedores de jogos (APIs de desenho de nível baixo) e agora é muito bem acelerado por hardware pela maioria dos navegadores recentes. Ainda assim, o SVG, e sua tecnologia baseada em vetores, é naturalmente mais bem armado para dimensionamento entre dispositivos sem perder a qualidade. Você só precisa usar a propriedade mágica ViewBox do SVG que tratará disso para você. Seus jogos se dimensionarão de telas de 3 a 80 polegadas de uma forma bem fácil!

Às vezes, é até mesmo possível se obter o mesmo jogo usando as duas tecnologias. Por exemplo, aqui está o mesmo jogo simples primeiro usando o SVG e depois o Canvas: SVG Racketball e Canvas RacquetballAmbos resultaram desta documentação do MSDN: Programação de jogos simples usando Canvas ou SVG

Neste caso, analisar o desempenho de cada tecnologia pode ajudá-lo a decidir qual delas usar para o seu jogo. Por exemplo, aqui estão 2 experimentos interessantes que exibirão 1.000 pequenas bolas em sua tela usando o SVG: 1000 bolas em SVG e usando o Canvas: 1000 bolas em Canvas. Teste os dois experimentos em seu navegador favorito. Em geral, o desempenho do Canvas é melhor para desenhar muitos objetos na tela neste caso particular. Mas isso também o que geralmente gostaríamos de conseguir em nossos videogames. Para uma visão geral melhor da comparação de desempenho, aqui está um diagrama interessante para examinar:

Mas nada o impede de misturar as duas tecnologias. De fato, podemos imaginar perfeitamente usar uma primeira camada baseada no SVG para exibir os menus do jogo com uma segunda camada no fundo usando uma tela para o jogo propriamente dito. Então você usará o que chamados de mecanismo de composição de navegador. Contudo, você deve prestar atenção real nos resultados finais de desempenho, pois os navegadores e dispositivos estão longe de ser iguais nesse campo. Não se esqueça de que o interesse principal do HTML5 é visar todas as plataformas.

Meu colega David Catuhe realizou um pequeno jogo de quebra de tijolos há poucos meses usando esse princípio de composição: Como escrever um pequeno jogo usando HTML5 e JavaScript–BrikBrok . A primeira camada usa SVG para os tijolos a quebrar e o fundo pode exibir um efeito de túnel usando a marca canvas. Você pode imitar perfeitamente esse conceito para exibir o jogo no fundo (hospedando um jogo de plataforma ou de tiro, etc.) em vez do túnel e sua primeira camada simplesmente exibirá os menus e as opções de configuração em SVG.

Bibliotecas e ferramentas úteis

Elementos gráficos

Escrever os nós XML do SVG manualmente ou até mesmo jogar com as APIs de nível baixo do Canvas pode ser divertido por algum tempo, mas não é muito produtivo. Aqui está, então, um conjunto útil de ferramentas e bibliotecas que podem ajudá-lo a criar partes de seu jogo em HTML5.

Para gerar um pouco de SVG, aqui estão algumas ferramentas legais:

• InkScape: um software de área de trabalho de código aberto e gratuito
• SVG Editor: um software online executado diretamente dentro de seu navegador

O Adobe Illustrator também suporta SVG como um destino de exportação, mas é um pouco mais caro.

Se você estiver procurando seus ativos de jogos (para menus e controles), deve dar uma olhada nesta biblioteca de ícones gratuita: The Noun Project. Assim, se não tiver a sorte de trabalhar com um designer, ela pode salvá-lo. Há outra biblioteca com algum conteúdo SVG gratuito aqui: Open Clip Art Library

Para concluir o SVG, A biblioteca definitiva que você tem de conhecer chama-se RaphaelJS. É uma biblioteca JavaScript que o ajudará a gerar SVG dinâmico com poucas linhas de código. Você encontrará muitas demonstrações legais no site usando, por exemplo, funções não lineares de animação em elementos SVG, gráficos animados, etc. Mas sse estiver procurando especificamente por gráficos .(digamos para exibir algumas estatísticas dos jogadores), A biblioteca definitiva de gráficos se chama HighCharts. Essas duas bibliotecas são tão impressionantes que até mesmo implementam fallbacks de VML para o IE8 ou versões anteriores. Mas isso não deve ser algo para se preocupar se você estiver criando jogos em HTML5. Você provavelmente visará o IE9 e acima.

Se quiser exibir gráficos usando Canvas, sou um grande fã da biblioteca JavaScript InfoVis Toolkit. Dê uma olhada nas demonstrações deles no site; é espantosa e simples de usar.

Continuemos no lado dos elementos gráficos. Existe uma biblioteca bem conhecida criada para simplificar o uso de 3D em JavaScript chamada ThreeJS. Na maior parte do tempo, ela é usada para renderizar 3D acelerado por hardware via WebGL. Mas você pode pedir uma renderização dentro do elemento de tela 2d do HTML5. Para isso, simplesmente consulte a seção "exemplos de “CanvasRenderer” do site. Essa é a biblioteca que usamos, por exemplo, para criar nossa demo galática no test-drive do IE. Usando o “CanvasRenderer”, você pode criar cenas 3D que funcionam em todos os navegadores HTML5. Algo que pode ser bom saber.

Mecanismo de física

É claro que exibir elementos gráficos está longe de ser a única tarefa que você precisa fazer em um jogo. Também há a IA (inteligência artificial) que você precisa codificar para dar vida a seus personagens. Infelizmente, você precisará criar esse código sozinho e ser criativo. Mas você ficará contente em saber que não precisa se preocupar com a parte de física e de colisões em seu jogo. Simplesmente aprenda a usar o Box2D JS. Vá brincar com as várias amostras e ficará espantado:

Se estiver interessado nesse tópico, deve ler a excelente série de tutoriais de Seth Ladd aqui: Orientação de Box2D para o desenvolvedor em JavaScript. Seth usou até mesmo o Web Workers para computar a física nos vários núcleos disponíveis em sua CPU. Se você não souber o que são Web Workers, eu escrevi uma introdução a essas novas APIs aqui: Introdução aos Web Workers HTML5: a abordagem multithread JavaScript . Ela pode ser útil em certos cenários para seus jogos.

Tratamento dos eventos multitoque

Se você quiser criar um jogo entre multidispositivo, terá de suportar toque. Atualmente, existem 2 especificações que tratam de Eventos de toque. Então ainda não existe um padrão oficial. Se quiser conhecer um pouco mais o motivo, aqui está um artigo interessante: Getting Touchy About Patents

Você precisará escrever código que funcione bem no IE10 e no Windows 8, assim como na implementação vindo de dispositivos Apple. Para isso, decididamente deve dar uma olhada nessa amostra que demonstra um padrão possível apra suporte os dois tipos de eventos de toque: Pintura com os dedos e seu artigo associado: Lidando com entradas multitoque e de mouse em todos os navegadores. Mas se estiver interessado em ver até onde pode ir lidando com multitoque dentro do IE10, teste esta demo: Superfície do navegador . Você precisará de uma versão recente do IE10 e de um hardware multitoque executando-a.

BorisSmus começou a trabalhar nesse lado em uma biblioteca chamada Pointer.js. A ideia é consolidar todos os tipos de toques (IE10, similar ao iOS, mouse e caneta) para simplificar sua vida de desenvolvedor. Você pode ler o artigo a esse respeito aqui: Entrada generalizada na Web multidispositivo . Atualmente, a biblioteca é apenas um esboço e ainda não suporta o MSPointer* do IE10. Sinta-se à vontade para contribuir com o projeto para ajudá-lo. (Planejo tentar ajudá-lo quando tiver algum tempo livre).

Insert Caption

Criação de jogos conectados

Se quiser criar jogos multijogador ou simplesmente um jogo conectado a um servidor por qualquer motivo, você ficará naturalmente interessado em usar WebSockets. Essa especificação do W3C (e o protocolo subjacente manipulado pelo IETF) é realmente estável o suficiente para começar a ser usada em produção.

Mas se quiser suportar o maior número possível de usuário, precisa considerar um fallback para navegadores ou dispositivos que não ainda não suportam WebSockets ou suportavam uma versão mais antiga obsoleta. Bem, podemos até mesmo sonhar com soluções que fazem fallback automaticamente para métodos mais antigos de pooling ou pooling longo para navegadores como o IE9 e com oferecer Web Sockets para navegadores mais recentes como o IE10. E, sim, também seria possível te um único código para tratar isso?

Bem, pare de sonhar, porque a comunidade o fez. Existem 2 soluções que eu conheço fazendo isso.

• a biblioteca Socket.IO para Node.js
• SignalR trabalhando em IIS e ASP.NET

As duas ajudarão você a lidar com todos os navegadores e dispositivos com sua variedade de níveis de suporte.

Algumas estruturas de jogo

Para se criar um jogo HTML5 2D, você precisa fazer várias coisas:

1. Lidar com seus sprites: dividi-los em uma sequência, animá-los, efeitos, etc.
2. Lidar com seus sons e música (e isso não é algo fácil em HTML5!)
3. Carregar seus ativos de forma assíncrona a partir de um servidor Web através de um carregador dedicado/gerenciador de ativos.
4. Criar um mecanismo de colisão, uma lógica de alto nível para os objetos de seu jogo, etc.

Bem, você pode fazer isso começando do zero ou pode testar e avaliar o que outros desenvolvedores brilhantes já fizeram na Web. Eu decididamente aconselharia a segunda opção, já que estruturas de jogos em JS começam a se tornar realmente maduras e testadas em jogos em produção.

Como existe uma infinidade de estruturas JS na Web (bem, há uma infinidade de qualquer coisa.JS, na verdade), aqui estão as estruturas mais famosas que eu conheço para se criarem jogos HTML5 2D funcionando em todos os navegadores:

• MelonJS: - MelonJS : uma estrutura gratuita que expõe muitos serviços úteis. Sua grande vantagem é que funciona bem com a ferramenta Tiled Map Editor.
• CraftyJSque eu infelizmente não conheço muito bem
• ImpactJS: uma estrutura de alta qualidade e bem conhecida. Ela não é gratuita, mas tembém não é muito cara.
• EaselJS : minha favorita! Escrita por um velho desenvolvedor em Flash. Então, se você tiver escrito alguns jogos em Flash, deve sentir-se em casa com essa estrutura. Ela faz parte do pacote CreateJS. É bastante completa, bem documentada e... gratuita.

Agora você já foi avisado: como o EaselJS é a estrutura que eu conheço mais, não serei imparcial. Cabe a você testar a outra e formar sua própria opinião.

Alguns tutoriais para iniciantes

Bem, como puro megalomaníaco que eu sou, deixe-se começar compartilhando meus próprios tutoriais. Um ano atrás, me diverti transferindo um jogo XNA C# para HTML5/JavaScript graças ao EaselJS. Então eu decidi escrever 3 primeiros tutoriais para partilhar essa experiência:

• Jogos em HTML5: animação de sprites em Canvas com EaselJS
• Jogos em HTML: criação dos objetos centrais e tratamento de colisões com o EaselJS
• Jogo HTML5 de plataforma: a transferência completa do jogo XNA para <canvas> com EaselJS

Vários meses depois, escrevi outros 3 artigos melhorando/estendendo o mesmo jogo:

• Tutorial: como criar aplicativos HTML5 no Windows Phone graças ao PhoneGap em que eu mostro como trasnferir o mesmo jogo no Windows Phone graças ao PhoneGap/Cordova. Mas você poderá seguir as mesmas instruções para seu dispositivo Android ou iOS.
• Modernização de seus jogos HTML5 Canvas Parte 1: dimensionamento de hardware e CSS3 em que uso transformação, transições e layout de grade 3D CSS3 para aprimorar a experiência de jogar 

• Modernização de seus jogos HTML5Canvas Parte 2: API offline, arrastar e soltar e API de arquivoem que habilitamos o jogo no modo oflline. Você poderá até mesmo criar seus próprios níveis e arrastar e soltá-los diretamente no jogo.

E, depois disso, você criará este jogo:

Bem, logicamente, graças a esses 6 tutoriais, você deve poder escrever seu próprio jogo HTML5 para qualquer navegador ou dispositivo que estiver visando.

Você também encontrará várias demos simples para entender e ótimos tutoriais no site do EaselJS: http://www.createjs.com/#!/EaselJS, assim como nos sites de cada estrutura mencionada acima.

Você também encontrará tutoriais mais genéricos nestes sites:

• Tutoriais de desenvolvimento de jogos HTML5
• 10 jogos HTML5 legais e como criar os seus próprios

Para concluir, eu gostaria de recomendar 2 artigos mais "avançados", mas muito instrutivos. O primeiro foi escrito por David Catuhe, da Microsoft: Libere o poder do HTML 5 Canvas para jogos . Nós compartilharemos com você alguma otimização que ele descobriu enquanto trabalhava em uma "demo" como a que estávamos escrevendo na "cena demo". As disca podem dar algumas ideias para os seus próprios jogos em HTML5. O segundo foi escrito por Boris Smus do Google: Melhorando o desempenho do HTML5 Canvas, e contém uma série de bons conselhos.

Jogos online e comentários de experiências interessantes

Novamente, esses são meus favoritos pessoais. Você provavelmente encontrará outros exemplos legais na Web. Quaisquer que sejam os jogos de que gostar, é interessante analisar como os desenvolvedores os fizeram. Graças à magia da Web, você tem apenas de clicar com o botão direito do mouse e "ver o código-fonte". Mesmo o código estando minimizado, você ainda pode aprender algumas coisas interessantes simplesmente olhando a arquitetura global do jogo.

Vamos começar com algumas produções usando a estrutura EaseJS. O primeiro foi Pirates Love Daisies, escrito por Grant Skinner:

Grant começou essa estrutura EaselJS enquanto criava esse jogo HTML5.

Outro jogo que usa o EaselJS é BKOM ROBOT GAME, que usa sprites 3D que eu adoro:

Os dois jogos HTML5 atualmetne mais famosos são, é claro, o Angry Birds, (que usa a biblioteca Box2D que eu mencionei acima):

E Cut The Rope:

Você também encontrará uma versão Windows 8 dele na Windows Store aqui: Cut The Rope para Windows 8

Foi muito simples transferi-lo para o Windows 8. Veja o processo:

1. Copie/cole a versão Web em um projeto de aplicativo HTML5 estilo MEtro para Windows 8
2. Adicione suporte para toque
3. Adicione suporte para o modo de exibição encaixado e pause o jogo
4. Crie alguns ativos de alta resolução (1366x768 e 1920x1080) para propor a melhor experiência para todos os tablets e computadores Windows 8 que surgirem.

Eu também gosto da história de "Cut the Rope". É muito interessante de ler. Esse foi um jogo de sucesso escrito em Objective-C para os dispositivos Apple iOS. Ele foi transferido para HTML5/Canvas e os desenvolvedores que fizeram isso detalham seu feedback neste artigo: Cut The Rope - nos bastidores . Dê uma olhada; você provavelmente aprenderá alguns pontos interessantes.

Também tive prazer lendo este feedback de experiência: Aventura HTMOL5 de Wooga

Por fim, aqui está uma lista de 40 jogos HTML5 mais ou menos bons: 40 jogos Web viciantes da plataforma HTML5, com alguns outros disponíveis aqui: HTML5games.com

Agora espero que todos esses recursos ajudem você a criar seu próprio jogo HTML5. Se estiver fazendo isso e/ou tiver qualquer sugestão para estruturas/tutoriais/conceitos bons que queira compartilhar, acrescente um comentário neste artigo!

| Home | Artigos Técnicos | Comunidade