Gioco HTML5 (Canvas) - Tecniche di interfaccia utente?

Sto costruendo un gioco JavaScript / HTML5 (usando Canvas) per dispositivi mobili (Android / iPhone / WebOS) con PhoneGap. Attualmente sto cercando di capire come dovrebbero essere costruite l'interfaccia utente e il tavolo da gioco e come dovrebbero interagire, ma non sono sicuro di quale sia la soluzione migliore. Ecco cosa mi viene in mente -

Costruisci l'interfaccia utente direttamente nell'area di disegno usando cose come drawImage e fillText Costruisci parti dell'interfaccia utente all'esterno dell'area di disegno usando oggetti DOM normali e quindi sposta un div sull'area di disegno quando gli elementi dell'interfaccia utente devono sovrapporsi all'area di gioco. Ci sono altre possibili tecniche che posso usare per creare l'interfaccia utente del gioco a cui non ho pensato? Inoltre, quale di questi sarebbe considerato il modo "standard" (so che i giochi HTML5 non sono molto popolari, quindi probabilmente non esiste ancora un modo "standard")? E infine, in che modo consiglieresti / utilizzeresti?

Molte grazie in anticipo!

Entrambe le soluzioni (disegno sulla tela VS. HTML / CSS tradizionale) sono totalmente valide e funzioneranno perfettamente. Alcune cose da considerare:

• Se stai già utilizzando una libreria basata su canvas, il tuo codice potrebbe essere più pulito / più organizzato continuando a utilizzare canvas invece di avere metodi aggiuntivi (basati su DOM) per l'interfaccia utente.
• Se la tua interfaccia utente è estremamente ricca di testo (con finestre di dialogo ecc.), Potrebbe essere più semplice implementarla tramite HTML / CSS. Ad esempio, è abbastanza banale che il testo scorra in un elemento DOM (con elementi come il wrapping e la spaziatura dei paragrafi) e relativamente difficile da implementare in canvas.
• A seconda della libreria in uso, potrebbe essere molto più semplice implementare la gestione dei clic sugli elementi DOM che all'interno dell'area di disegno. Ad esempio, se si desidera rilevare un clic su un pulsante "Ok", è un'attività banale nel mondo HTML / JS. Ma su tela dovresti ascoltare il clic su un altro elemento e controllare le sue coordinate per vedere dove si è verificato il clic.
• Alcuni programmi utente (in particolare i dispositivi mobili) possono essere complicati quando si utilizzano elementi DOM contenenti testo. Ad esempio, Mobile Safari potrebbe voler far apparire un modale con gli strumenti per copiare / incollare. Prevenire questo comportamento potrebbe essere difficile e probabilmente sarebbe più facile nella terra di tela.

Alcuni di questi saranno soggettivi; uno sviluppatore che conosco preferisce sempre usare canvas poiché trova solo DOM brutto e prolisso. Poiché entrambe le soluzioni funzioneranno correttamente, sceglierei una semplice schermata singola nella tua app, la svilupperei rapidamente separatamente utilizzando entrambi i metodi e vedrei quale è più facile / migliore.

Buona fortuna!

Ho usato easeljs per la mia interazione con la tela.

È abbastanza buono e facilita il design solido. Una delle caratteristiche chiave che mi ha fatto scegliere è stata la possibilità di sincronizzare la posizione dei tuoi oggetti canvas ed elementi dom.

Ciò semplifica l'esecuzione di bolle di discorso CSS e elementi dell'interfaccia utente statici come il frame hud e quel tipo di cose.

Il vantaggio che questo ha per i browser è che si ottiene la ricca tela ma si riescono a rendere le cose più piccole e statiche sulla dom per mantenere sotto controllo le prestazioni.

La tela è lenta su piattaforme mobili, almeno lo è Safari mobile, quindi ti consigliamo di utilizzare il posizionamento basato su CSS di oggetti su quelle. Utilizzare in particolare "translate3d" che attiverà il rendering con accelerazione hardware degli oggetti.

Dai un'occhiata alla libreria CAAT per canvas, è veloce e puoi usare "attori" con supporto CSS e non cambiare la logica del gioco.

Non riesco ancora a postare link ma qui ci sono alcuni pseudo link http://labs.hyperandroid.com/animation

Devo essere d'accordo sulla lentezza della tela su iPhone 4. Abbastanza sicuro che la tela safari non sia supportata da GL. Il mio gioco sfacciato funziona velocemente su iPhone 3GS e Android, ma su iPhone 4 penso che il display della retina abbia troppi pixel, o se la tela non corre su GL, questo spiegherebbe perché si trascina. Mi piace il modello di sviluppo della tela, non ho ancora provato l'opzione css translate3d. In particolare ho usato GWT e il wrapper di tela gwt-g2d (ottimizzazione / offuscamento). http://www.photonjunky.com/shootout.html

Suggerirei di mantenere i controlli come elementi html come menue commandper motivi di accessibilità. Usando un po 'di CSS puoi visualizzare elementi su una tela e non perdere la funzionalità pre-costruita di HTML.

So che questa è una vecchia domanda, ma oggi (marzo 2013) lo sappiamo meglio. Ho deciso di rispondere nel caso in cui qualcun altro fosse inciampato qui come ho fatto io. Non sono d'accordo con la maggior parte delle altre risposte. Probabilmente sono validi per lo sviluppo di browser Web, ma non per dispositivi mobili. Fa una grande differenza quale percorso scegli (animazione DOM o canvas). La webview Android è completamente inutile (lenta, balbuzie) in sé, il che rende Phonegap inutile per lo sviluppo di giochi Android, a meno che non sia possibile applicare l'accelerazione hardware, che attualmente è possibile solo utilizzando l'animazione canvas e un framework adatto. Per maggiori informazioni, vedi questa risposta .

Puoi farlo in milioni di modi. Comunque ti senti più a tuo agio e i tuoi ingegneri si sentono più sicuri.

Se stai cercando ispirazione o un esempio di codice, ecco un modo in cui lo faccio. Ho una funzione che disegna ripetutamente un menu fino a quando non viene premuto un pulsante. Quando si preme il pulsante, il gioco si carica e vengono rimossi i vecchi listener di eventi clic sui menu e vengono aggiunti nuovi listener di eventi clic sui giochi. Termino anche il vecchio ciclo di sorteggio del menu e inizio un nuovo ciclo di sorteggio del gioco. Ecco alcuni frammenti selezionati per darti l'idea di come è fatto:

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) {
  // ...
}

In questo modo sono in grado di separare il disegno del gioco e gli eventi di gioco dal disegno del menu e dagli eventi del menu. Mi dà anche la possibilità di utilizzare elementi di gioco / animazione nei miei menu se voglio renderli davvero belli.