Velocità di grandi quantità di bitmap animati in EaselJS

Question

Mi sembra di avere un po 'di problemi con l'utilizzo di una grande quantità di bitmap animati (tutti basati sullo stesso sprite) quando si utilizza EaselJS. Quando corro un paio di questi allo stesso tempo sul mio palco, non c'è nessun problema, ma quando si esegue una quantità maggiore di essi contemporaneamente (a partire da circa 30 a 40) mentre li muovo intorno comincio ad averli " sfarfallio "un po ', anche a un fps di circa 10.

Non sto usando alcuna ombra o qualsiasi altra cosa su quelle linee. Basta usare bitmap animate e spostarle.

Qualcuno ha qualche buon consiglio in merito all'incremento di questa prestazione?

Answer 1

provare a utilizzare più oggetti Stage allo stesso tempo.

Answer 2

Senza vedere il tuo codice, è difficile sapere esattamente dove si trova il collo di bottiglia. Ma qui ci sono alcuni punti per iniziare a guardare (a partire dalle correzioni più banali):

1. Assicurarsi di utilizzare un browser moderno. Per lo meno, controlla su alcuni altri browser/piattaforme per vedere se questo ha qualche cambiamento significativo nelle prestazioni. Da quello che ho capito, le prestazioni di EaselJS sono significativamente peggiori su implementazioni di canvas accelerate non hardware.

2. Se è possibile, utilizzare la versione di TweenJS di createJS su altre librerie di tweening. TweenJS si collegherà alla classe Ticker di EaselJS, che è più efficiente.

3. Non chiamare stage.update() se non strettamente necessario. Dal stage.update() è una telefonata così costosa, dovresti essere il meno avaro possibile. In realtà, non dovresti chiamarlo affatto se stai usando il Ticker per aggiornare regolarmente il palco.

4. Cache saggiamente e aggressivamente. Se sullo stage sono presenti elementi statici complessi, la loro memorizzazione nella cache salverà alcuni cicli. Tuttavia, esiste un sovraccarico per la memorizzazione nella cache, quindi salvalo per contenitori con molti elementi statici o forme complesse.

5. Ridurre la frequenza che EaselJS controlla per il passaggio del mouse. Se è stato abilitato il passaggio del mouse sul tavolino, passare una frequenza più bassa (documentation). Se non ne hai bisogno (se stai ascoltando solo i clic), non abilitarlo affatto. Monitorare i mouse over è piuttosto costoso, specialmente se hai un sacco di elementi sul palco.

6. impostato su stage.snapToPixelsEnabled su true. Questo può o non può aiutare. Teoricamente, il rendering di bitmap su interi pixel è molto più efficiente, tuttavia questo potrebbe causare l'animazione di alcune animazioni e non ho giocato abbastanza con esso per sapere quali sono gli altri pro e contro.

sono stato in grado di ottenere prestazioni decenti con circa 600-800 spritesheets a 30FPS e l'interpolazione di base che utilizzano Chrome su un iMac di 4 anni (solo un rapido test).