Ho creato un gioco HTML5 Canvas e JS che funziona alla grande su un desktop o laptop in Chrome (30fps), ma su Safari mobile ottengo solo circa 8 fps. Ci sono semplici suggerimenti o trucchi per aumentare il framerate?
Ho creato un gioco HTML5 Canvas e JS che funziona alla grande su un desktop o laptop in Chrome (30fps), ma su Safari mobile ottengo solo circa 8 fps. Ci sono semplici suggerimenti o trucchi per aumentare il framerate?
Risposte:
Sfortunatamente, la risposta è disegnare di meno. Ho scoperto che il collo di bottiglia con applicazioni basate su tela (su qualsiasi piattaforma, davvero) è il tempo necessario per disegnare effettivamente i pixel.
Ecco alcune cose da provare:
Usa diversi strati di tela. Disegna lo sfondo su un livello mentre disegni gli oggetti su un altro livello (assolutamente posizionato sopra il livello di sfondo). (Nota: non ho provato questo su Safari mobile, ma può aiutare su altre piattaforme)
Ridisegna solo gli sprite che sono cambiati. Questo è difficile ma aumenta sicuramente le prestazioni. L'idea è quella di memorizzare se uno sprite deve essere ridisegnato o meno e ridisegna solo gli sprite che ne hanno bisogno insieme allo sfondo dietro di loro. (Questo deve anche passare ad altri oggetti che lo sprite potrebbe sovrapporsi.)
Il fatto con lo sviluppo su Chrome è che a) il suo motore JavaScript (V8) è veloce come l'inferno eb) le versioni più recenti (7,8,9) hanno tutte una certa accelerazione GPU per quanto riguarda il rendering su tela. Ciò, unito al fatto che l'hardware mobile non è così potente come il tuo desktop / laptop, significa che sarà davvero difficile arrivare ovunque vicino alle stesse prestazioni su Safari mobile.
Penso che, per il momento, l'approccio migliore potrebbe essere quello di indirizzare il tuo gioco al safari mobile fin dall'inizio e provare a costruire un gioco che non sia così intenso da ridisegnare.
Questo è un po 'lungo, ma il tuo gioco può operare su sprite DIV con trasformazioni CSS? Dico questo perché sto ottenendo alcune prestazioni meravigliose spostando le cose sui dispositivi iOS con trasformazioni e transizioni CSS.
Questi sembrano essere adeguatamente accelerati dall'hardware, con il bizzarro avvertimento che è necessario utilizzare il modulo 3D per le trasformazioni (cioè translate3D, piuttosto che tradurre) per consentire l'accelerazione. È davvero molto burrascoso e l'implementazione del browser iOS supporta il forma dove hai appena impostato direttamente una matrice float a 16 elementi, il che è molto conveniente per me.
Sono così impressionato da quanto sia liscio, che ho intenzione di provare un semplice progetto di gioco scritto in questo modo.
In caso di disegno al tratto, combinare tutti i comandi LineTo prima di chiamare il tratto.
Questo e altri suggerimenti: http://dt.deviantart.com/blog/38471599/
tutto ciò che @Gosub ha detto più:
guarda qualunque cosa tu stia facendo, vedi se c'è comunque modo di usare algoritmi più efficienti.
usa immagini più piccole. prova a rendere le dimensioni dei poteri dell'immagine di 2
vedi se riesci a sbarazzarti della fusione alfa sulla tela o non usare la proprietà di opacità CSS.
si prega di inviare nuovamente i risultati. sarebbe interessante sapere quali cose hanno aiutato di più.
Odierei aggiungere una risposta a un vecchio thread, ma sono sorpreso che nessuno l'abbia menzionato.
Quando scrivi i tuoi primi giochi, scrivi loro come ti aspetteresti che funzionino saggiamente. Le tecniche sopra sono buoni punti di partenza per mantenere alte le prestazioni, ma il vero trucco è il profiler. Se esegui il profilo dell'applicazione in Chrome o Firefox (suggerimento: utilizza molti metodi in modo da poter vedere i colli di bottiglia esatti; quindi non devi spostare cose in seguito - dovresti farlo comunque.), Otterrai il vantaggio aggiuntivo di vedere risultati esatti di temporizzazione. Nel mio caso, ho visto ridisegnare costantemente lo sfondo impiegando l'80% del tempo del browser. Dopo averlo rimosso, ho visto altre chiamate occupare rispettivamente il 40% e più. Dopo un'ora o due, ho visto un sostanziale guadagno FPS.
Vorrei anche sentire i tuoi risultati. Ho provato a fare la stessa cosa. Ho scoperto che fare molta matematica va bene, ma non appena metti una tela dentro diventa mentale e i frame rate diminuiscono.
Ho avuto un overlay in primo piano che mostrava effetti. Era un'immagine di altissima qualità ma la roba alfa l'ha rallentata così tanto che l'ho lasciata cadere completamente in cambio di più fotogrammi al secondo.
Un'altra cosa che ho fatto è stato usare PHP per elaborare alcuni dei pesanti calcoli matematici. Avevo set di dati di grandi dimensioni ma piuttosto che ottenere JavaScript per calcolare e mostrare i dati, ho deciso di lasciare che PHP facesse il lavoro e lasciare che JavaScript mostrasse i risultati. Questo non ha risparmiato molto tempo perché JavaScript è "sehr gut" con la matematica.
Suppongo che tutto il tuo sito sia in HTML5, quindi prova a giocare con il lavoratore in background.
Spero di averti aiutato e per favore condividi i tuoi risultati.