Doppio buffering sul gioco HTML5 Canvas?

Il mio semplice gioco su tela sembra funzionare bene su Chrome e FF su Mac / Linux. Non ho ancora avuto occasione di testarlo su smartphone o ambienti Windows. Non utilizza il doppio buffering ma ho visto alcuni esempi di JS Canvas che lo utilizzano.

Quando è consigliato l'uso del doppio buffering? Fa differenza solo per browser specifici? C'è un significativo calo delle prestazioni?

Grazie!

— Petteri Hietavirta
fonte

OT: questo gioco regola, è molto promettente, funziona bene (spesso devi lavorare molto di più sull'interfaccia, alcune cose non sono chiare, ecc.)

— o0 '.

È davvero piuttosto dolce. Raccomandazione però: il livello della mappa passa a qualcosa di diverso dallo spazio. È un po 'fastidioso far scorrere la finestra del mio browser ogni volta.

— michael.bartnett,

inoltre non uso i tasti freccia per sterzare. Sono attualmente in modalità provvisoria e su un piccolo schermo continua a scorrere dappertutto ... fyi: p

— Tor Valamo

Penso che sia possibile acquisire le chiavi in modo che le finestre del browser non agiscano su di esse.

— Attacco di

Grazie! A, W, D e ritorno funzionano anche adesso. Invia un tweet a momentumracer o invia un'email a petteri@momentumracer.com per ulteriori commenti o idee in modo che questo non diventi una bacheca di chat :-).

— Petteri Hietavirta,

Risposte:

Il doppio buffering di un gioco basato su tela sarà sicuramente un successo per le prestazioni. Disegneresti una quantità extra di pixel pari alla dimensione della tua tela per ogni fotogramma. Nei giochi basati su tela, disegnare su una tela rappresenta il più grande collo di bottiglia nella maggior parte dei casi e si desidera limitarlo il più possibile, soprattutto sui dispositivi mobili.

Chrome ha un'accelerazione GPU (a partire dalle ultime versioni) e un motore JavaScript veloce (V8) malvagio che non vedrai abbinato in un ambiente mobile. Anche in Chrome vedrai un rallentamento implementando il doppio buffering.

Per farla breve, il vantaggio del doppio buffering (gestione della "lacerazione") non vale il colpo prestazionale che prenderete molto probabilmente.

— Geoff
fonte

Tuttavia, quando noti uno sfarfallio o qualcosa di simile, molto probabilmente un doppio buffer risolverà questo problema. Per rispondere alla tua domanda: se noti uno sfarfallio, ti suggerisco di utilizzare un doppio buffer. Altrimenti non c'è motivo. Si noti che un doppio buffer è facile da implementare o rimuovere (nel caso in cui si noti che la perdita di prestazioni supera lo sfarfallio).

— user8363

Non è necessario raddoppiare il buffer dei giochi html5. Il browser lo gestisce già per te aggiornando l'oggetto canvas solo dopo l'esecuzione dello script. http://www.mail-archive.com/whatwg@lists.whatwg.org/msg19969.html

— G1i1ch
fonte

Ho notato che usando il doppio buffering in questo modo:

disegna tutto su una tela invisibile
copia tela invisibile sulla tela reale

rallenta effettivamente il rendering (fps più bassi), invece di accelerarlo

— Luna d'argento
fonte