HTML5 - 5 principais práticas recomendadas para a criação de jogos HTML5 em ação!

Kay Jäger

Microsoft Technical Evangelist

Março 2013

O HTML5 é ótimo porque é versátil—não é específico para um único caso de uso. Mais importante, o HTNL5 está em toda parte. Em seu computador, seu telefone, seu tablet—pelo que sei, pode estar até mesmo em seus utensílios de cozinha.

Tome essas duas propriedades do HTML5—versatilidade e onipresença—e deve se tornar bastante claro por que tantos desenvolvedores se inspiram nele. E, como diz o provérbio, “Quando desenvolvedores estão inspirados, geralmente escrevem jogos". (Ok, talvez eu tenha acabado de inventar isso.)

Felizmente, artigos aprofundamento em desenvolvimento de jogos HTML5 agora estão amplamente disponíveis. Em vez disso, eu gostaria de dar uma visão geral de coisas que você deveria considerar antes de escrever um jogo usando HTML5 e enquanto estiver trabalhando nele.

O que você aprenderá neste artigo? Falarei sobre estruturas de desenvolvimento de jogos HTML5, como você pode alcançar mais pessoas suportando smartphones e tablets, como deve gerenciar seu estado durante o jogo, como lidar com questões de desempenho e como tirar o máximo da plataforma que é o seu navegador.

Então, sem mais cerimônias, aqui estão as 5 principais práticas recomendadas para a criação de jogos HTML5 em ação! (“em ação" adicionado para efeito dramático).

Prática recomendada nº 1: Use uma estrutura

Escrever jogos simples em HTML5 é simples, mas, conforme você aumenta a aposta, precisa fazer certas coisas para garantir que seu jogo funcione suavemente.

Por exemplo, quando você usa muitas imagens, efeitos sonoros e outros recursos, leva algum tempo para seu navegador baixar tudo isso do servidor Web. Você vai ter uma surpresa se não levar isso em consideração quando escrever seu jogo. Como imagens e arquivos de som são carregados de forma assíncrona, a execução de seu código JavaScript começará antes que todos os recursos tenham sido carregados. Isso frequentemente resulta em "popping" (imagens aparecendo do nada) e em efeitos sonoros que não funcionam quando deveriam. Uma boa correção para isso é criar um pré-carregador que adie a execução do script até que todos os recursos tenham sido baixados.

Outro problema que você provavelmente enfrentará é que máquinas e/ou navegadores diferentes executarão seu jogo em velocidades diferentes. Embora não haja nada que possa fazer quanto a isso, você ainda deve se certificar de que as velocidades de animação e de movimento sejam independentes da taxa de quadros em que seu jogo é executado.

Essencialmente, há MUITOS códigos estereotipados de que todo jogo precisa para funcionar da maneira apropriada. Felizmente, você mesmo não tem de escrever todos esses códigos. Agora existe uma variedade de estruturas que permitem que você se concentre na lógica de seu jogo sem ter de se preocupar com todas as pequenas (e grandes) coisas necessárias para a execução suave de seu jogo.

O único senão de se usar uma estrutura é que há tantas para escolher. Estruturas como ImpactJS, por exemplo, são projetadas para ajudar com quase todos os aspectos do processo de desenvolvimento do jogo, enquanto estruturas como EaselJS enfocam primariamente o lado gráfico das coisas. No fim, cabe a você escolher a estrutura com que se sentir mais confortável. Pode parecer coisa simples, mas no mundo do JavaScript, escolher uma estrutura frequentemente implica em optar por um determinado estilo de programação.

ig.module( 
    'monster' 
)
.requires(
    'impact.game',
)
.defines(function(){
 
Monster = ig.Entity.extend({
    eyes: 42
});
 
});

Um bom exemplo disso é o ImpactJS, que não apenas fornece abstrações para exibir elementos gráficos ou reproduzir efeitos sonoros, mas também introduz seu próprio modelo de objeto e herança como ilustrado acima.

Dn189151.E2484EA42322EB08F467F64A423BC2D0(pt-br,MSDN.10).png

A Ascend Arcade lançou três jogos em três meses usando a estrutura ImpactJS.

Embora muitos jogos em HTML5 agora dependam de alguma forma de estrutura, muitos desenvolvedores ainda seguem o caminho mais difícil de tentar fazer tudo sozinhos. Embora isso possa ser uma ótima experiência de aprendizado, se você quiser terminar em um prazo razoável, usar estruturas é definitivamente o caminho a seguir. Um bom exemplo disso é o ótimo trabalho da Ascended Arcade, que conseguiu lançar três jogos bastante agradáveis (e um tanto aclamados) em apenas três meses usando a estrutura ImpactJS.

Prática recomendada nº 2: Considere dispositivos com tela pequena e de toque

Talvez um dos pontos de venda mais persuasivos do HTML5 é que ele funciona em computadores desktop, laptop, tablets e até mesmo em smarthphones (se não viu o IE9 executado no Windows Phone 7 Mango, veja este vídeo).

Essa qualidade multiplataforma exclusiva é intrínseca ao HTML5 e frequentemente requer pouco trabalho adicional do desenvolvedor. Entretanto, há algumas coisas que você deve considerer…

Dn189151.D0A9DF3DCAE1317CAA76593979352491(pt-br,MSDN.10).png

SpyChase executado no Windows Phone 7 Mango.

Acima de tudo, os tamanhos de tela podem variar muito entre diferentes categorias de dispositivo como acontece com resoluções de tela e tacas de proporção. Se você quiser que seus jogos em HTML5 funcionem bem em dispositivos móveis, deve certificar-se de que ou suportem múltiplas resoluções ou não excedam o tamanho 800x480 de quadros WGA

Além disso, já que dispositivos móveis não têm o tamanho de tela para renderizar uma página da Web inteira de uma só vez, frequentemente empregam técnicas sofisticadas de ampliação e exibição panorâmica que podem ser contraproducentes quando se escrevem jogos. Essas podem ser desativadas programaticamente usando a metatag viewport. O trecho de código a seguir fará com que o visor de seu jogo ocupe toda a área horizontal disponível na tela. Definir o parâmetro “user-scaleable” como “no” diz ao navegador móvel para desativar a ampliação por pinça, que, de outra forma, conflita com controles de jogo baseados em dedos.

<meta name="Viewport" 
  content="width=device-width; user-scaleable=no; initial-scale=1.0" />

Uma vez que seu jogo estiver sendo bem renderizado em dispositivos de tela pequena, você também deve pensar um pouco sobre entradas. A maioria dos dispositivos exclusivamente de toque tem um teclado virtual, mas este tende a ocupar espaço demais na tela para ser útil no controle de personagens de jogo. Se entradas estritamente baseadas em toque estão fora de questão, você deve criar um teclado virtual limitado contendo apenas os botões necessários para o seu jogo (por exemplo, as teclas de seta). Entretanto, é melhor ser criativo com meios alternativos para controlar seu jogo que não exijam elementos adicionais na tela. Um bom exemplo disso é o jogo Spy Chase, em que você dirige um veículo com um dedo (algo que não se deve tentar na vida real).

Prática recomendada nº 3: Salve automaticamente o progresso do jogador

Com recursos como fixação de sites, navegadores da Web tentam dar a aplicativos Web o mesmo status de aplicativos de área de trabalho regulares. Contudo, a ideia de sites funcionando como aplicativos é um tanto nova, assim como a ideia de páginas da Web retendo o estado no lado do cliente. Você pode pensar duas vezes antes de fechar uma instância do Microsoft Word, mas pode não ser tão cuidados com uma página da Web aberta. Na maior parte do tempo, isso não é um problema—a maioria das páginas da Web ou não tem estado ou mantém um registro de suas informações no servidor.

Jogos de navegador, entretanto, são ligeiramente diferentes. Como código JavaScript é executado no cliente, jogos em HTML5 tipicamente mantêm seu estado em memória temporária (vulgo RAM) Feche a janela do navegador e sua pontuação obtida com esforço se perde para sempre.

Agora você pode argumentar que uma pessoa sensata teria cuidado suficiente para não fechar o jogo que vem jogando há oito horas, mas acidentes acontecem, especialmente quando múltiplas guias estão envolvidas ou baterias se esgotam.

Resumindo: Quando se escrevem jogos em HTML5, é uma pratica absolutamente recomendada que se salve o progresso do jogador regularmente e que se permita que ele retome o jogo de onde parou quando voltar a uma página da Web que fechou.

Agora, onde se deve manter um registro do progresso do jogador? No passado, o local óbvio era ou um banco de dados no lado do servidor ou um cookie no lado do cliente. Nenhuma das soluções é especialmente atraente. Com uma abordagem no lado do servidor, solicitações HTTP têm de ser feitas sempre que informações precisarem ser armazenadas ou recuperadas. A abordagem do cookie oferece um espaço muito limitado com que se trabalhar e a longevidade dos cookies depende muito da configuração do navegador.

Uma solução muito mais viável é usar armazenamento DOM HTML5. O armazenamento DOM permite que se salvem vários megabytes de dados por site através de uma interface que lembra um repositório de valor de chave (ou um objeto expando JavaScript). É muito conveniente, mas no contexto de jogos em HTML5, você também deve se lembrar de estrutura de dados complexos—algo que o armazenamento DOM não suporta nativamente.

Felizmente, implementações modernas de JavaScript têm mecanismos embutidos que permitem a serialização de objetos em uma notação compacta conhecida como JSON. Usando essa abordagem, o armazenamento DOM também pode ser usado para lembrar-se de informações arbitrárias. As duas funções auxiliares a seguir ilustram como o estado do jogo pode ser armazenado e recuperado usando armazenamento DOM HTML5 e os recursos JSON embutidos em ECMAScript5:

function saveState(state) {
    window.localStorage.setItem("gameState", JSON.stringify(state));
}
 
function restoreState() {
    var state = window.localStorage.getItem("gameState");
    if (state) {
        return JSON.parse(state);
    } else {
        return null;
    }
}

Prática recomendada nº 4: Use um criador de perfis

Um dos maiores desafios quando se desenvolve um jogo é manter taxas de quadros altas à medida que se adicionam mais e mais recursos.

A boa notícia é que os navegadores em geral tornaram-se muito mais rápido nos últimos anos e jogos em HTML5 executados a 60 fps constantes já são uma realidade.

Não foi fácil. Para o Internet Explorer 9, isso significou escrever um mecanismo JavaScript completamente novo que pode utilizar vários núcleos de CPU e um pipeline de renderização totalmente acelerado por hardware baseado em Direct2D. Em outras palavras: Se você gastou bom dinheiro em seu simulador de carga de jogo, o Internet Explorer 9 fará bom uso dele.

Dn189151.54FD94EB73560054CDCA5373EE7042DB(pt-br,MSDN.10).png

O criador de perfil JavaScript embutido do Internet Explorer 9 ajuda você a localizar gargalos de desempenho.

Para jogos simples, isso significa que você não precisa se preocupar com o desempenho. Mas, como o HTML5 independe da plataforma, está desenvolvendo potencialmente para uma gama completa de dispositivos e navegadores, alguns dos quais não serão tão rápidos quanto você gostaria. Mesmo que você esteja visando apenas computadores de alta capacidade (algo que dissemos que não faríamos, lembra-se?), desempenho ainda assim pode tornar-se um problema.

Se quiser que seu jogo seja executado a 60 fps, você tem não mais que 16 milésimos de segundo para renderizar qualquer quadro individual. No tempo que leva para você piscar, tem de renderizar pelo menos 6 quadros completos. Essa pode parecer uma tarefa amedrontadora... e, com qualquer jogo não trivial, certamente pode ser.

Felizmente, existem ferramentas que podem ajudá-lo. No Internet Explorer 9 (e 10, aliás), pressione a tecla F12 para abrir as ferramentas de desenvolvedor. Selecione a guia “Profiler” e clique em “Iniciar criação de perfil".

Agora navegue até onde sente que o desempenho deva ser melhor, dê cerca de 30 segundos para o criador de perfil coletar dados e, em seguida, clique em "Parar criação de perfil". Você terá uma visão geral de quanto tempo de execução acumulado é consumido por cada uma das funções de seu jogo. Na maioria das vezes, você descobrirá que há várias funções que tomam a maior parte do tempo de execução total. Otimizar essas funções lhe dará melhores resultados e, quando você analisar seu código, sub-rotinas lentas se destacarão imediatamente.

Mas não confie muito cegamente em seus instintos—código que parece lento pode, na verdade, ser executado bem rápido com os mecanismos JavaScript de hoje. A melhor abordagem à otimização é recriar o perfil frequentemente e sempre medir se as alterações que fizer em seu código realmente têm um impacto positivo no desempenho.

Dn189151.4B92BC31F8F4E22C9DE8BFEDBC64FDE6(pt-br,MSDN.10).png

Entrada de jogos no social: Warimals se baseia em HTML5 e permite que você jogue com seus amigos do Facebook.

Prática recomendada nº 5: Seja criativo!

Poder escrever jogos executados nativamente em seu navegador é impressionante, mas o que é mais legal ainda é que o HTML5 permite que você escreva jogos que SÃO EXECUTADOS NO SEU NAVEGADOR! O HTML5 não é interessante apenas do ponto de vista de tecnologia, um navegador é também uma plataforma perfeita para se jogar.

Pense nisso... navegadores existem em muitos dispositivos diferentes, estão (quase) sempre online e são uma ferramenta que as pessoas usam para conectar-se entre si via email, chat e redes sociais. Como um desenvolvedor de jogos, você pode criar jogos que são divertidos e reúnem pessoas do mundo todo.

Se for novato em desenvolvimento de jogos em HTML5, pode ser tentador escrever clones de jogos que você jogou offline. Não há absolutamente nada de errado com essa abordagem/ Mas, se pensar em seu jogo executado dentro de um "aplicativo de comunicação", há uma boa chance de que acabará tendo ideias totalmente novas e altamente criativas para jogos. Um exemplo interessante disso é o Warimals, um dos primeiros jogos baseados em HTML5 do Facebook. Em Warimals, você joga como cães ou gatos e pode convidar amigos do Facebook para jogar com você. Como não gostar?

Resumindo

Graças ao ótimo trabalho de desenvolvedores de estrutura e pioneiros do JavaScript, o HTML5 já se tornou uma plataforma bastante madura para se escreverem jogos. Isso é uma ótima notícia, pois a Web é o tempo de execução mais onipresente para aplicativos de qualquer tipo. Com as ferramentas certas (muitas das quais estão convenientemente integradas no Internet Explorer 9 e 10 ou podem ser baixadas gratuitamente) e a estrutura certa, a experiência de desenvolvimento de jogos em HTML5 pode ser agradável e altamente recompensadora, especialmente quando se criam experiências conectadas de maneiras interessantes e inovadoras.

Ferramentas para você começar:

Sobre o autor

Kai Jäger é um desenvolvedor Web de longa data, entusiasta de JavaScript, autor de livros e agora um Evangelista desenvolvedor acadêmico da Microsoft na Alemanha. Quando não fala a plateias de estudantes sobre as virtudes do HTML5, trabalha em seus projetos favoritos ou aprecia a vida ao ar livre da Bavária.

Mostrar: