Doppelte Pufferung auf HTML5 Canvas-Spiel?

Mein einfaches Canvas- Spiel scheint unter Chrome und FF unter Mac / Linux einwandfrei zu funktionieren. Ich hatte noch keine Gelegenheit, es auf Smartphones oder Windows-Umgebungen zu testen. Es wird keine doppelte Pufferung verwendet, aber ich habe einige JS Canvas-Beispiele dafür gesehen.

Wann wird die Verwendung der Doppelpufferung empfohlen? Macht es nur für bestimmte Browser einen Unterschied? Gibt es einen signifikanten Leistungseinbruch?

Vielen Dank!

— Petteri Hietavirta
quelle

OT: Dieses Spiel regelt, es ist sehr vielversprechend, gute Arbeit (natürlich muss man viel mehr an der Benutzeroberfläche arbeiten, einige Dinge sind nicht klar usw.)

— o0 '.

Es ist in der Tat ziemlich süß. Empfehlung: Kartenebene auf etwas anderes als Leerzeichen umstellen. Es ist ärgerlich, wenn mein Browserfenster jedes Mal gescrollt wird.

— michael.bartnett

benutze auch keine Pfeiltasten zum Lenken. Ich bin momentan im abgesicherten Modus und auf einem kleinen Bildschirm scrollt es überall herum ... fyi: p

— Tor Valamo

Ich denke, es ist möglich, Schlüssel zu erfassen, damit die Browserfenster nicht auf sie einwirken.

— AttackingHobo

Vielen Dank! A, W, D und Rückkehr arbeiten jetzt auch. Senden Sie einen Tweet an momentumracer oder senden Sie eine E-Mail an petteri@momentumracer.com, um weitere Kommentare oder Ideen zu erhalten, damit dies nicht zu einem Chat-Forum wird :-).

— Petteri Hietavirta

Antworten:

Das doppelte Puffern eines Canvas-basierten Spiels ist mit Sicherheit ein Leistungstreffer. Sie würden in jedem Frame eine zusätzliche Menge an Pixeln zeichnen, die Ihrer Leinwandgröße entspricht. In Spielen auf Leinwandbasis ist das Zeichnen auf einer Leinwand in den meisten Fällen der größte Engpass, und Sie möchten dies so weit wie möglich einschränken, insbesondere auf Mobilgeräten.

Chrome verfügt über eine GPU-Beschleunigung (ab den neuesten Versionen) sowie eine unglaublich schnelle JavaScript-Engine (V8), die Sie in einer mobilen Umgebung nicht finden werden. Selbst in Chrome werden Sie eine Verlangsamung feststellen, wenn Sie die doppelte Pufferung implementieren.

Um es kurz zu machen, der Vorteil der doppelten Pufferung (Umgang mit "Zerreißen") ist nicht die Leistung wert, die Sie mit größter Wahrscheinlichkeit erwarten.

— Geoff
quelle

Wenn Sie jedoch Flackern oder ähnliches bemerken, wird dies höchstwahrscheinlich durch einen doppelten Puffer behoben. Um Ihre Frage zu beantworten: Wenn Sie Flackern bemerken, empfehle ich die Verwendung eines Doppelpuffers. Ansonsten gibt es auch keinen Grund. Beachten Sie, dass ein doppelter Puffer leicht zu implementieren oder zu entfernen ist (falls Sie feststellen, dass der Leistungsverlust das Flackern überwiegt).

— user8363

Es ist nicht erforderlich, HTML5-Spiele doppelt zu puffern. Der Browser übernimmt dies bereits für Sie, indem er das Zeichenbereichsobjekt erst aktualisiert, nachdem Ihr Skript ausgeführt wurde. http://www.mail-archive.com/whatwg@lists.whatwg.org/msg19969.html

— G1i1ch
quelle

Mir ist aufgefallen, dass man mit Double Buffering wie folgt vorgeht:

Zeichne alles auf eine unsichtbare Leinwand
Kopiere unsichtbare Leinwand auf die echte Leinwand

verlangsamt tatsächlich das Rendern (niedrigere fps), anstatt es zu beschleunigen

— Silbermond
quelle