Mixing canvas e elementi CSS3

Question

Sto implementando un gioco HTML5 utilizzando canvas. Ora sto pensando di creare tutti gli overlay di testo come tooltip, speechbubbles, infowindows e così via usando elementi HTML con posizione assoluta sulla tela. Quindi posso usare molti effetti e transizioni offerte CSS3.

Ma non sono sicuro delle prestazioni. Questi overlay devono essere aggiunti e rimossi in modo casuale (è qualcosa di simile a MMORPG, quindi ci saranno un sacco di speechbubbles e così via).

Probabilmente ci sono 2 domande per quanto riguarda le prestazioni:

1. DOM traversal per aggiungere/rimuovere. Forse una cache può aiutare?

2. HTML e CSS3 stesso.

L'altra opzione è di gestire questi elementi nell'area di disegno stesso, disegnandoli per ogni fotogramma. Ma forse ho ancora una volta una penalizzazione delle prestazioni, a causa del codice extra, dei timeout e cose che dovrei aggiungere, per ottenere effetti simili come in CSS3. E comunque la trasversalità di alcune strutture dati sarebbe necessaria.

Eventuali pareri, pareri, esperienze?

Grazie in anticipo.

Answer 1

Considerare l'utilizzo di una sola delle due tecnologie citate. Potrebbe essere possibile rilasciare quell'applicazione in mobile o tablet. Penso che su questi dispositivi ci sarebbero problemi con la gestione allo stesso tempo. E un'altra cosa: se rimani nella tela non ci sarebbero preoccupazioni per la compatibilità. Non è una risposta tecnica ma stimolante.

Answer 2

Un modo per avvicinarsi a questo è utilizzare una mappa immagine "dinamica" dietro il tuo oggetto canvas. Quindi puoi usare dom come richiesto. Nota che dovrai passare i clic sulla tela alla mappa immagine.

Answer 3

Il motivo migliore per utilizzare il DOM per gli elementi dell'interfaccia utente nei giochi HTML5 è la gestione degli eventi.

Se si disegna tutto su tela, sarà necessario scrivere la propria logica per gestire i clic e decidere su cosa è stato fatto clic, che può diventare presto molto complesso, soprattutto se si dispone di più livelli di interfaccia.

Con gli elementi DOM (soprattutto quando si utilizza una libreria come jQuery) questo è banale e si può creare un'interfaccia utente ricca e interattiva con il minimo sforzo.

L'unico lato negativo che posso pensare è che potresti incontrare incongruenze del browser, specialmente se usi CSS3, ma ancora una volta jQuery ti aiuterà in questo.

Suppongo che un altro svantaggio è che una volta che si passa alla rotta DOM, il gioco sarà sempre un browser game, mentre se fosse del 100% su tela, ci sarebbe sempre la possibilità di trasferire il codice in un'altra lingua e rendendolo nativo, ma suppongo che sarebbe solo un aspetto negativo per alcune persone.