Geschwindigkeit einer großen Menge von animierten Bitmaps in EaselJS

Question

Ich habe ein paar Probleme mit der Verwendung einer großen Anzahl von animierten Bitmaps (alle basierend auf dem gleichen Spritesheet) bei der Verwendung von EaselJS. Wenn ich auf meiner Bühne ein paar davon auf einmal starte, gibt es überhaupt kein Problem, aber wenn ich eine größere Menge von ihnen gleichzeitig (von etwa 30 bis 40) laufe, während ich sie herumschlage, fange ich an, sie zu haben. " flackern "ziemlich, sogar bei einem fps von etwa 10.

Ich verwende keine Schatten oder sonst etwas in diesen Zeilen. Einfach animierte Bitmaps verwenden und sie verschieben.

Hat jemand gute Ratschläge, um diese Leistung zu erhöhen?

Answer 1

versuchen Sie mit mehreren Stage Objekte gleichzeitig.

Answer 2

Ohne Ihren Code zu sehen, ist es schwer zu wissen, wo genau der Engpass liegt. Aber hier sind ein paar Orte, um zu beginnen (beginnend mit den trivialen Fixes):

1. Stellen Sie sicher, dass Sie einen modernen Browser verwenden. Überprüfen Sie zumindest einige andere Browser/Plattformen, um festzustellen, ob sich dadurch die Leistung signifikant verändert hat. Soweit ich weiß, ist die Leistung von EaselJS bei nicht hardwarebeschleunigten Canvas-Implementierungen deutlich schlechter.

2. Wenn Sie können, verwenden Sie createJS Version von TweenJS über andere Tweening-Bibliotheken. TweenJS wird sich an die Ticker Klasse von EaselJS binden, was effizienter ist.

3. Rufen Sie nicht stage.update(), wenn nicht unbedingt erforderlich. Da stage.update() so ein teurer Anruf ist, sollten Sie so geizig wie möglich sein. Eigentlich solltest du es gar nicht nennen, wenn du den Ticker benutzt, um die Bühne regelmäßig zu aktualisieren.

4. Cache weise und aggressiv. Wenn Sie komplexe statische Elemente auf der Bühne haben, spart das Zwischenspeichern einige Zyklen. Es gibt jedoch einen Overhead für das Caching, also speichern Sie es für Container mit vielen statischen Elementen oder komplex gezeichneten Formen.

5. Verringern Sie die Häufigkeit, mit der EaselJS nach Mouseovers sucht. Wenn Sie die Maus auf der Bühne aktiviert haben, geben Sie eine niedrigere Frequenz ein (documentation). Wenn Sie es nicht benötigen (wenn Sie nur auf Klicks hören), aktivieren Sie es überhaupt nicht. Die Überwachung von Maus-Overs ist ziemlich teuer, besonders wenn Sie viele Elemente auf der Bühne haben.

6. Setzen Sie stage.snapToPixelsEnabled auf true. Dies kann oder kann nicht helfen. Theoretisch ist das Rendern von Bitmaps auf ganzen Pixeln viel effizienter, jedoch kann dies dazu führen, dass einige Animationen gezackt werden und ich nicht genug herumgespielt habe, um zu wissen, was die anderen Vor- und Nachteile sind.

Ich konnte mit rund 600-800 spritesheets bei 30FPS und Grund tweening auf einem 4 Jahre alten iMac (nur ein kurzer Test) mit Chrome ordentliche Leistung bekommen.