Jogo HTML5 (Tela) - Técnicas de interface do usuário?

Estou no processo de construção de um jogo JavaScript / HTML5 (usando o Canvas) para celular (Android / iPhone / WebOS) com o PhoneGap. Atualmente, estou tentando projetar como a interface do usuário e o tabuleiro de jogo devem ser construídos e como eles devem interagir, mas não tenho certeza qual é a melhor solução. Aqui está o que eu consigo pensar -

Crie a interface do usuário diretamente na tela usando coisas como drawImage e fillText Crie partes da interface do usuário fora da tela usando objetos DOM regulares e, em seguida, flutue uma div sobre a tela quando os elementos da interface do usuário precisarem se sobrepor à tela do tabuleiro. Existem outras técnicas possíveis que eu possa usar para criar a interface do jogo que eu ainda não pensei? Além disso, qual deles seria considerado o caminho "padrão" (eu sei que os jogos HTML5 não são muito populares, então provavelmente ainda não existe um caminho "padrão")? E, finalmente, de que maneira você recomendaria / usaria?

Muito obrigado antecipadamente!

Ambas as soluções (desenhando na sua tela versus o tradicional HTML / CSS) são totalmente válidas e funcionarão perfeitamente. Algumas coisas a considerar:

• Se você já estiver usando uma biblioteca baseada em tela, seu código poderá ser mais limpo / mais organizado, continuando a usar tela em vez de ter métodos adicionais (baseados em DOM) para a interface do usuário.
• Se sua interface do usuário for extremamente pesada em texto (com caixas de diálogo etc.), pode ser mais simples de implementar via HTML / CSS. Por exemplo, é bastante trivial que o texto flua em um elemento DOM (com itens como quebra automática e espaçamento entre parágrafos) e comparativamente difícil de implementar na tela.
• Dependendo muito da biblioteca que você está usando, pode ser muito mais fácil implementar o tratamento de cliques nos elementos DOM do que na tela. Por exemplo, se você deseja detectar um clique em um botão "Ok", essa é uma tarefa trivial no mundo HTML / JS. Mas, na tela, você precisa ouvir o clique em um elemento diferente e verificar suas coordenadas para ver onde o clique ocorreu.
• Alguns agentes de usuário (especialmente dispositivos móveis) podem ser complicados ao usar elementos DOM que contêm texto. Por exemplo, o Mobile Safari pode exibir um modal com as ferramentas para copiar / colar. Prevenir esse comportamento pode ser difícil e provavelmente seria mais fácil em terrenos de lona.

Parte disso será subjetiva; um desenvolvedor que eu conheço sempre prefere usar canvas, pois ele acha que o DOM é feio e detalhado. Como qualquer solução funcionará bem, eu escolheria uma única tela simples no seu aplicativo, desenvolveria rapidamente rapidamente separadamente usando os dois métodos e veria qual deles se sente mais fácil / melhor.

Boa sorte!

Eu tenho usado easeljs para minha interação de tela.

É muito bom e facilita o design sólido. Um dos principais recursos que me fez escolher foi a facilidade de sincronizar a posição dos seus objetos de tela e elementos dom.

Isso facilita a realização de bolhas de fala CSS e elementos estáticos da interface do usuário, como o quadro hud e esse tipo de coisa.

A vantagem que isso tem para os navegadores é que você obtém a tela rica, mas consegue separar as coisas menores e estáticas para o domínio para manter o desempenho sob controle.

O Canvas é lento em plataformas móveis, pelo menos o safari móvel é assim mesmo, então você deve usar o posicionamento de objetos com base em CSS. Especificamente, use "translate3d" que ativará a renderização acelerada de objetos por hardware.

Confira a biblioteca CAAT para ver as telas, porém, é rápido e você pode usar "atores" suportados por CSS e não alterar a lógica do jogo.

Ainda não posso postar links, mas aqui estão alguns pseudo-links http://labs.hyperandroid.com/animation

É necessário concordar com a lentidão da tela no iPhone 4. Certamente, a tela de safari não está sendo apoiada pela GL. Meu jogo de cheezy roda rápido no iPhone 3GS e no Android, mas no iPhone 4 acho que a tela da retina tem muitos pixels ou, se a tela não estiver rodando no GL, isso explicaria por que ele se arrasta. Eu gosto do modelo de desenvolvimento de tela, ainda não tentei a opção css translate3d. Em particular, usei o GWT e o wrapper de tela gwt-g2d (otimização / ofuscação). http://www.photonjunky.com/shootout.html

Eu sugeriria manter seus controles como elementos html, como menue commandpor razões de acessibilidade. Usando um pouco de CSS, você pode exibir elementos sobre uma tela e não perder a funcionalidade pré-criada do HTML.

Sei que essa é uma pergunta antiga, mas hoje (março de 2013) sabemos mais. Decidi responder caso alguém mais aparecesse aqui como eu. Eu tenho que discordar da maioria das outras respostas. Eles provavelmente são válidos para o desenvolvimento de navegadores da web, mas não para dispositivos móveis. Faz uma grande diferença qual caminho você escolhe (DOM ou animação de tela). A visualização da web do Android é completamente inútil (lenta, gaguejante), o que torna o Phonegap inútil para o desenvolvimento de jogos para Android, a menos que você possa aplicar a aceleração de hardware, que atualmente só é possível usando animação de tela e uma estrutura adequada. Para mais informações, consulte esta resposta .

Você pode fazer isso de um milhão de maneiras. No entanto, você se sente mais confortável e seus engenheiros se sentem mais confiantes.

Se você está procurando inspiração ou um exemplo de código, aqui está uma maneira de fazê-lo. Eu tenho uma função que desenha repetidamente um menu até que um botão seja pressionado. Quando o botão é pressionado, o jogo é carregado e os ouvintes de evento de clique no menu antigos são removidos e novos ouvintes de evento de clique em jogo são adicionados. Também encerro o loop de empate antigo do menu e inicio um novo loop de empate no jogo. Aqui estão alguns trechos selecionados para ter uma idéia de como isso é feito:

Game.prototype.loadMenu = function() {
  var game = this;
  var can = this.canvas;

  // now we can use the mouse for the menu
  can.addEventListener('click', game.menuClickEvent, false);
  can.addEventListener('touchstart', game.menuClickEvent, false);

  // draw menu
  this.loop = setInterval(function() { game.drawMenu() }, 30);
};

Game.prototype.drawMenu = function() {
  // ... draw the menu
}

Game.prototype.loadLevel = function(levelstring) {
  // unload menu
  var can = this.canvas;
  var game = this;
  can.removeEventListener('click', game.menuClickEvent, false);
  can.removeEventListener('touchstart', game.menuClickEvent, false);

  if (this.loop) clearInterval(this.loop);

  // ... other level init stuff


  // now we can press keys for the game
  //can.addEventListener('click', game.gameClickEvent, false);
  can.addEventListener('touchstart', game.gameClickEvent, false);
  can.addEventListener('keydown', game.gameKeyDownEvent, false);

  this.loop = setInterval(function() { game.tick() }, 30);
}

// called from tick()
Game.prototype.draw = function(advanceFrame) {
  // ...
}

Dessa forma, sou capaz de separar o desenho do jogo e os eventos do desenho e do menu. Também me dá margem de manobra para usar elementos de jogo / animação em meus menus, caso eu queira torná-los realmente bonitos.