HTML 5 – futuro dos jogos para web?

Com a geração atual de navegadores, e com a atualização do padrão HTML, já é possível criar jogos web sem depender de nenhum plugin. Isto permite jogos que podem ser executados em todos navegadores atuais, inclusive em smartphones e tablets.

Há quem diga, até, que o futuro dos webgames seja o HTML 5 em detrimento do Flash, mas embora isso seja discutível, é fato que a tecnologia merece consideração e tem aplicação imediata nos projetos atuais.

HTML é a linguagem utilizada na criação de páginas web. Durante muito tempo a criação de jogos para web podia ser feita apenas com tecnologias separadas do HTML, como Flash, applets Java, Untity3D ou outra, todas embutidas nas páginas por meio de plugins. Estes plugins são a saída que o programador web tem para a criação de aplicativos e jogos para web, mas ao mesmo tempo que permitem isso, possuem também uma fraqueza: sua implementação é inconsistente nas várias plataformas existentes. Mesmo plugin do Flash, o mais difundido de todos, apresenta diferenças em sua versão para Linux, sem falar que não esta presente nos smartphones e tablets da Apple – tablets que estão substituindo o netbook entre os executivos e profissionais liberais – e sim, eles são consumidores de jogos!

A última especificação do HTML, a versão 4.01, tem mais de 10 anos – já era hora de ter uma atualização. A versão 5 ainda está em desenvolvimento nesta data, mas alguns recursos já são considerados estáveis e seguros para uso. Este é o caso do elemento <canvas>, que oferece uma área onde podemos desenhar livremente e assim cai como uma luva para o desenvolvimento de jogos. Este é o recurso do HTML 5 que propiciou uma grande onda de jogos em HTML puro, alguns indistinguíveis de jogos em Flash.

No entanto a atualização do padrão, por si, não serviria de nada se os navegadores não implementassem ele. Felizmente desde as versões do ano passado dos navegadores, vários recursos do HTML 5 já estão disponíveis. Com relação ao <canvas>, a exceção é o Internet Explorer. Enquanto os demais (Chrome, Firefox, Safari e até mesmo o Opera) já oferecem o <canvas> até mesmo com aceleração por hardware (WebGL), o IE ainda sequer oferece o elemento.

Mas isto não quer dizer que usuários do IE ficam de fora, já que é possível adicionar suporte a <canvas> nele. Ninguém fica de fora mesmo! Esta tem sido uma das principais vantagens dos jogos em HTML 5, principalmente para quem trabalha com jogos criados sob encomenda, para o mercado de advergames por exemplo. O cliente espera que o jogo que ele encomendou funcione em todas plataformas, e falamos aqui de navegadores, sistemas operacionais, smartphones e tablets. Não é ficção a situação onde o cliente (executivo) avisa que vai revisar o jogo no final de semana, em casa, e na segunda feira vem reclamando que o jogo nem abriu. “Mas como, qual seu navegador?”, você pergunta e ele responde: “Heim? Não sei… é um iPad 2!”.

E aí, como explicar que o gadget do momento, que custa milhares de reais, e pelo qual ele trocou o antigo netbook, não roda seu jogo? Como fazer para rodar? Flash não vai… applet java? Também não. Programar tudo de novo em objective-C? Pode ser impossível porque, além do trabalhão que vai dar (para suportar apenas uma plataforma), você precisaria ter um computador Mac e um iPad ou iPhone para testar – se esta não é sua plataforma atual de desenvolvimento, é um investimento grande.

Nem preciso falar que a solução é o HTML 5. Embora os smartphones mais comuns não sejam os melhores exemplos de desempenho, os dispositivos Android mais modernos, o iPhone e iPad possuem capacidade para rodar este tipo de jogo. Android pode rodar jogos em Flash, mas os dispositivos da Apple não. Aliás, se tomarmos por base o post do leitor Fabricio Boemeke, ele cita duas desvantagens dos web games: no caso de baseados em plugins, são mais rápidos mas mesmo assim não tanto quanto jogos nativos. Com aceleração por hardware do WebGL, o HTML 5 deixa isso no passado. E no caso de jogos baseados apenas no navegador, cita a desvantagem de serem apenas on-line, de forma que a pessoa precisa estar conectada para jogar. O Angry Birds que está na loja de aplicativos do Chrome mostra que isso também não é mais uma limitação, sendo instalado localmente, ficando acessível dentro do Chrome mesmo quando levamos o notebook para férias na praia, onde fica desconectado.

Mas falar apenas em HTML é metade da história. O HTML é uma linguagem de marcação, que permite incluir elementos em uma página. Campos de formulário, texto, imagens, vídeos, etc. Mas isso tudo é estático, ou seja, com o HTML você especifica onde uma coisa é inserida e lá ela fica. A ação toda precisa ser escrita em uma linguagem de programação – e aí entra o Javascript (JS). Com sintaxe baseada em C++ e Java, porém com suporte apenas parcial à orientação a objetos, o Javascript é uma linguagem poderosa o suficiente para a criação de jogos.

Novamente o papel dos navegadores é importantíssimo. Sendo o Javascript uma linguagem interpretada (em oposição a compilada), sua velocidade de execução depende da máquina interpretadora que o navegador possui. Atualmente o Chrome talvez seja o navegador mais rápido para execução de código em Javascript, mas nenhum dos outros vai fazer feio, Internet Explorer, Firefox, Safari ou Opera.

E no quesito bibliotecas e frameworks? Existe facilidades para criação de  jogos em HTML 5? Sim, existe. Ainda não temos uma grande quantidade de frameworks completos e como isto é um diferencial no mercado, os melhores são pagos. Mas bibliotecas específicas, como bibliotecas de física, existem – geralmente são bibliotecas conhecidas que foram portadas para o Javascript. Inclusive nosso leitor Luiz Otávio Afonso, que mexe bastante como Game Maker, já nos informou que este software vai gerar jogos em HTML 5.

Mas veja que a programação de um jogo em Javascript não é nada complicada. Pode ser comparada a Java ou Action Script 3 – em certos casos, é ainda mais fácil, porque permite que alguns elementos, como HUD e outras partes da interface sejam feitas diretamente com HTML padrão.

Quer ter uma idéia do que é possível fazer com HTML 5? Abaixo cito alguns links que vão mostrar isso.

  • Existem muitos “joguinhos” por aí, mas vamos começar com os produtos mais bem acabados. Quem está por dentro de jogos certamente já ouviu falar de Angry Birds, o sucesso do iPhone e depois do Android. Já faz um tempo que é sucesso também na loja de aplicativos do Chrome e hoje é um dos melhores exemplos de jogo em HTML 5:
  • Outro exemplo de produto bem acabado é este jogo de bilhar. Ele faz bom uso do HTML puro para elementos da interface:

Ficou interessado?

Bem, este post serviu para apresentar a tecnologia para quem não conhecia e talvez motivar quem conhecia mas não tinha dado a devida importância. Estamos planejando também um tutorial sobre a criação de jogos em HTML 5 – se você está interessado, e gostaria de ver esse tutorial o mais rápido possível, faça seu comentário! Com uma quantidade maior de interessados, o tutorial sai mais cedo…

Autor: Luiz Nörnberg Ver todos os posts de
Sou Bacharel em Ciência da Computação pela Universidade Católica de Pelotas (UCPel), onde também atuei como professor. Desde a época da faculdade (mais de quinze anos atrás) a paixão por jogos tem sido importante no meu direcionamento profissional. Sou sócio-fundador do Izyplay Game Studio, onde exerço o cargo de Diretor de Tecnologia. Sempre tive grande foco em desenvolvimento em Java, embora tenha migrando para a tecnologia Adobe AIR em função de sua portabilidade. Ah, e é claro, dou meus palpites no game design.

16 Comentários em "HTML 5 – futuro dos jogos para web?"

  1. Bruno Rafante 27/10/2011 at 01:54 - Reply

    olha muito bom o post, um dos mais completos que vocês já fizeram até hoje. Vou confessar que sempre via o tal do angry birds tão falado e nunca tinha me interessado em dar uma olhada acabei viciando e só consegui parar depois de um longo período jogando também gostei muito do jogo de bilhar achei que a iniciativa foi muito boa e eu particularmente tenho muita curiosidade sobre HTML5 eu sou um que gostaria muito do tutorial
    Obrigado.

    • luiz.nornberg 27/10/2011 at 18:57 - Reply

      Aí Bruno, não era intenção te viciar no jogo… mas isso sempre acontece. A culpa é do jogo mesmo. Já estou começando a pensar no tutorial, vamos ver se o interesse aumenta…

  2. Cosmo 27/10/2011 at 08:48 - Reply

    Luiz, coincidentemente ontem mesmo eu tava dando uma olhada no Google PlayN, que tem a proposta de fornecer uma camada que gera build para Java desktop, Android, Flash e HTML5. Dá uma conferida:
    https://developers.google.com/playn/

    • luiz.nornberg 27/10/2011 at 18:53 - Reply

      Legal Cosmo! Já ouvisse o podAbrir #7? Citamos o PlayN nele. Eu vou escrever um tutorial sobre como configurar o ambiente, porque é meio chato. Assim, de repente o pessoal começa a mexer e comenta aqui sua experiências.

      • Cosmo 27/10/2011 at 21:32 - Reply

        opa, seria otimo um tuto sobre configuração do ambiente, achei muito interessante a proposta do PlayN, resta-nos testar..

  3. Diogo Moraes 27/10/2011 at 14:25 - Reply

    Opa, como desenvolvedor Flash, devo dizer que fiquei interessado no HTML5, até pq achei que era outra coisa totalmente diferente.
    Estou esperando ansiosamente o tutorial :D

  4. Yulan 29/10/2011 at 11:29 - Reply

    Opa, me interessei muito no tutorial! Sigam o baile!

  5. Marco 29/10/2011 at 23:33 - Reply

    Excelente post Luis! O tutorial vai ser muito útil e bem vindo sim! A proposito, sera que rola um curso de vcs sobre games com HTML5??

    Abs

  6. Marcelo Martins 02/11/2011 at 18:29 - Reply

    Luiz,

    Parabéns pelo post super completo e muito compreensível!

    Espero realmente que o HTML 5 venha para ficar. A facilidade de integração com arquivos de mídia é impressionante. Não dá mais pra gente ficar dependendo de plug-ins e instalações. E essa história da Apple não aceitar Flash nos seus aparelhos é uma das coisas mais bizarras que já ví na indústria da informática…

  7. Alipio 08/11/2011 at 00:15 - Reply

    Oi, hoje foi meu aniversario… Você não querer mê dar o post sobre a PlayN de presente não?
    estou muito ansioso pelo o Post que comentaram que iriam fazer sobre ela…

    • everton.vieira 08/11/2011 at 11:38 - Reply

      Olá Alípio!

      O presente pode vir um pouquinho atrasado, mas vai chegar viu ;)

  8. Ricardo 12/02/2012 at 17:17 - Reply

    Muito bom o post…acho que o html vai dominar sim… resta saber quatro tempo vai levar… Como voce compara o google playn e o game maker html5 da yoyogames? Abraços!

    • Luiz Nörnberg 13/02/2012 at 10:50 - Reply

      Olá Ricardo.

      PlayN e Game Maker possuem objetivos diferentes, por isso não podemos comparar diretamente. Se você vai fazer um jogo apenas para HTML5, Game Maker é mais rápido e tão bom quanto. Pessoalmente tenho gostado mais do Construct2 da Scirra, mais rápido, mais barato, baseado totalmente em objetos/componentes e com uma arquitetura criada do zero para HTML5 (Game Maker foi adaptado). Se é só HTML5, e é jogo simples, até recomendo eles.

      Mas se você precisa publicar seu jogo também para Android (e por algum motivo, Flash), nenhum dos dois vai lhe ajudar. Aí entram tecnologias como a PlayN, que oferecem cross-compilação para outras plataformas (Android, Flash, Java e no futuro outras), ao custo de maior complexidade no desenvolvimento. Então, se você precisa de HTML5 e Android simltaneamente, PlayN é uma das pouquíssimas opções.

      E mesmo assim, a PlayN não é algo que se instale e use facilmente. É realmenta chata até ficar certa e ainda está em fase de estabilização.

      Eu acredito que o futuro esteja em plataformas completas, com editores de telas, fases e objetos, que abstraiam totalmente o engine e deixem o desenvolvedor com foco apenas no jogo em sí. E gerem automaticamente o produto final para todas plataformas possíveis.

      E existem muitos SDKs excelentes que geram o jogo para PC, Android, iOS, WindowsPhone e até mesmo consoles e outros tablets, tudo ao mesmo tempo. Elas só deixam de fora o HTML5. Por enquanto.

  9. jonas 17/08/2012 at 13:18 - Reply

    Esse post me fez gostar mais ainda d html 5! PRECISO do tutorial!! Quando sai, Luiz??

  10. Caio 27/01/2013 at 19:32 - Reply

    Se fizerem alguma extensão de navegador ou programa que permita baixar jogos feitos em HTML de uma página, eu apoio, se não puder baixa-los, então prefiro jogos flash.

Deixar um Comentário