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

23

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!

Jason L.
fonte
Lembre-se de que o Canvas ainda não é suportado no IE (supostamente o IE9 será) ... portanto, isso remove uma enorme fatia de mercado do seu jogo. Há um patch de javascript que tenta fazê-lo funcionar no IE, mas fica aquém de funcionar bem (LENTO como o inferno ... não vale a pena).
1
@Adam - Veja flashcanvas: flashcanvas.net
ehsanul
Eu uso elementos dom como gui, divs flutuantes múltiplos como "windows", com uma janela contendo o elemento canvas (jogo real). E há sempre esta opção: developer.mozilla.org/en-US/docs/HTML/Canvas/... :)
Kikaimaru

Respostas:

18

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!

richtaur
fonte
Obrigado pela sua resposta! Muito bons pontos. Na verdade, estou construindo meu próprio motor agora. Comecei usando o Canvas, mas vai modificá-lo um pouco para testar as coisas do CSS3 / WebKit. A única razão pela qual estou construindo o meu próprio é porque o jogo é muito "simples" para um mecanismo "real". Nós nem sequer temos um loop principal do jogo. A única razão é ainda existe para a animação, mas considerando como raramente aqueles acontecer provavelmente poderíamos apenas começar / temporizadores de parada conforme necessário :)
Jason L.
5

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.

G. Davids
fonte
4

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

onedayitwillmake
fonte
Acho que o link de repo na página do CAAT está apontando para o antigo, portanto, use este aqui! Repo
onedayitwillmake
(desculpe eu só pode adicionar um link por pós atualmente) Aqui está uma demonstração eu criei dos quais contém um modelo Olá mundo para CAAT - onedayitwillmake.com/CAATCirclePack
onedayitwillmake
Obrigado pelos links, eu vou def. Confira. Eu ouvi rumores de que o Canvas é lento, mas eu sou um que geralmente precisa ver as coisas :) Eu também devo observar que o jogo que estou criando é MUITO leve nas animações. Nunca mais de um ou dois correndo ao mesmo tempo e a intervalos de uma vez a cada 5 a 10 segundos por um minuto de cada vez. Nada maluco. Além disso, para verificar, você está sugerindo não usar o Canvas, mas usar objetos DOM antigos simples com CSS / translate3d?
Jason L.
Para ser sincero, não posso dizer para o seu cenário específico ou não. No entanto, se você deseja segmentar um safari móvel especificamente, então imo sim, você deseja usar CSS com divs. É muito rápido fazer isso comparado a redesenhar a tela da minha experiência. Consegui facilmente 45 sprites baseados em imagens movendo-se a 30FPS usando 'translate3d' para movê-los no lugar. Coloque isso no CSS para os objetos que você planeja mover com 'transform3d'; caso contrário, o webkit animará esses objetos para onde forem especificados, em vez de colocar. -webkit-transição: transform3d 0s linear;
precisa saber é o seguinte
2

É 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


fonte
1

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.

zzzzBov
fonte
1

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 .

Por Aronsson requerido
fonte
0

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.

Simon Sarris
fonte