Wie optimiert man eine HTML5 Canvas- und JavaScript-Webanwendung für Mobile Safari?

Ich habe ein HTML5 Canvas- und JS-Spiel erstellt, das auf einem Desktop oder Laptop in Chrome (30 fps) großartig läuft, aber auf einer mobilen Safari bekomme ich nur ungefähr 8 fps. Gibt es einfache Tipps oder Tricks, um die Framerate zu erhöhen?

Leider lautet die Antwort, weniger zu zeichnen. Ich habe festgestellt, dass der Engpass bei Canvas-basierten Anwendungen (eigentlich auf jeder Plattform) die Zeit ist, die zum tatsächlichen Zeichnen von Pixeln erforderlich ist.

Hier sind einige Dinge, die Sie ausprobieren sollten:

1. Verwenden Sie mehrere Leinwandebenen. Zeichnen Sie Ihren Hintergrund auf eine Ebene, während Sie Ihre Objekte auf eine andere Ebene zeichnen (absolut über der Hintergrundebene positioniert). (Hinweis: Ich habe dies auf einer mobilen Safari noch nicht ausprobiert, aber es kann auf anderen Plattformen hilfreich sein.)

2. Nur geänderte Sprites neu zeichnen. Das ist knifflig, erhöht aber definitiv die Leistung. Die Idee ist, zu speichern, ob ein Sprite neu gezeichnet werden muss oder nicht, und nur Sprites neu zu zeichnen, die es zusammen mit dem Hintergrund dahinter benötigen. (Dies muss auch auf andere Objekte übertragen werden, bei denen sich das Sprite möglicherweise überlappt.)

Die Sache mit der Entwicklung auf Chrome ist, dass a) seine JavaScript-Engine (V8) verdammt schnell ist und b) die neuesten Versionen (7,8,9) alle eine GPU-Beschleunigung haben, wenn es um Canvas-Rendering geht. Zusammen mit der Tatsache, dass mobile Hardware nicht so leistungsfähig ist wie Ihr Desktop / Laptop, wird es sehr schwierig sein, auf mobilen Safaris annähernd die gleiche Leistung zu erzielen.

Ich denke, vorerst ist der beste Ansatz, Ihr Spiel von Anfang an auf mobile Safari auszurichten und zu versuchen, ein Spiel zu entwickeln, das nicht so aufwändig für das Neuzeichnen ist.

Dies ist ein bisschen langwierig, aber kann Ihr Spiel stattdessen auf DIV-Sprites mit CSS-Transformationen laufen? Ich sage das, weil ich mit CSS-Transformationen und -Übergängen eine wunderbare Leistung erhalte, wenn ich Dinge auf iOS-Geräten bewege.

Diese scheinen richtig hardwarebeschleunigt zu sein, mit der bizarren Einschränkung, dass Sie das 3D-Formular für die Transformationen verwenden müssen (dh translate3D statt translate), damit die Beschleunigung einsetzt bilden, wo Sie gerade eine 16-Element-Gleitmatrix direkt einstellen, die für mich sehr bequem ist.

Ich bin so beeindruckt, wie reibungslos es endet, dass ich ein einfaches Spielprojekt ausprobieren wollte, das auf diese Weise geschrieben wurde.

Kombinieren Sie beim Strichzeichnen so viele lineTo-Befehle, bevor Sie stroke aufrufen.

Dies und einige andere Tipps: http://dt.deviantart.com/blog/38471599/

alles @ Gosub sagte plus:

Sehen Sie sich an, was auch immer Sie in der Mathematik tun, und prüfen Sie, ob es überhaupt Möglichkeiten gibt, effizientere Algorithmen zu verwenden.

Verwenden Sie kleinere Bilder. Versuchen Sie, die Dimensionen der Bildkräfte von 2 zu bestimmen

Sehen Sie nach, ob Sie die Alpha-Überblendung auf der Leinwand entfernen oder die CSS-Opazitätseigenschaft nicht verwenden können.

Bitte senden Sie Ihre Ergebnisse zurück. Es wäre interessant zu wissen, was am meisten geholfen hat.

Ich würde es hassen, einem alten Thread eine Antwort hinzuzufügen - aber ich bin überrascht, dass dies niemand erwähnte.

Wenn Sie Ihre ersten Spiele schreiben, schreiben Sie sie einfach so, wie Sie es von ihnen erwarten würden. Die obigen Techniken sind gute Ausgangspunkte, um die Leistung hoch zu halten - aber der eigentliche Trick ist der Profiler. Wenn Sie Ihre Anwendung in Chrome oder Firefox profilieren (Tipp: Verwenden Sie eine Vielzahl von Methoden, um genaue Engpässe zu erkennen. Sie müssen also später keine Elemente verschieben - Sie sollten dies sowieso tun.), Profitieren Sie zusätzlich vom Sehen genaue zeitliche Ergebnisse. In meinem Fall habe ich festgestellt, dass das ständige Neuzeichnen des Hintergrunds 80% der Browserzeit in Anspruch nahm. Nachdem ich das aus dem Weg geräumt hatte, sah ich, dass andere Anrufe 40% bzw. mehr aufnahmen. Nach ein oder zwei Stunden sah ich einen deutlichen FPS-Gewinn.

Ich würde auch gerne von Ihren Ergebnissen hören. Ich habe versucht, das Gleiche zu tun. Ich fand, dass es in Ordnung ist, viel zu rechnen, aber sobald man eine Leinwand hineinsteckt, geht es mental und die Frameraten sinken.

Ich hatte eine Vordergrundüberlagerung, die Effekte anzeigte. Es war ein Bild von sehr hoher Qualität, aber das Alpha-Material hat es so verlangsamt, dass ich es komplett fallen ließ, um mehr Bilder pro Sekunde zu erhalten.

Eine andere Sache, die ich tat, war, PHP zu verwenden, um einige der schweren Mathe zu erarbeiten. Ich hatte große Datenmengen, aber anstatt JavaScript zum Berechnen und Anzeigen der Daten zu verwenden, entschied ich mich, PHP die Arbeit zu überlassen und JavaScript die Ergebnisse anzeigen zu lassen. Das hat nicht viel Zeit gespart, weil JavaScript mit Mathematik "sehr gut" ist.

Ich nehme an, Ihre gesamte Site ist in HTML5, also versuchen Sie, mit dem Background Worker zu spielen.

Hoffe, ich habe geholfen und bitte teilen Sie Ihre Ergebnisse.