Schmutziges 2D-Karten-Rendering

Ich höre immer wieder Leute über "Dirty Rendering" sprechen, wenn es um Map Rendering für HTML5 geht. Ich habe gegoogelt und das GameDev danach durchsucht, aber es gibt nicht viel darüber.

• Was genau ist das?
• Wie implementiere ich es richtig?

Dies bedeutet, dass beim Zeichnen des Hintergrunds nicht bei jedem Frame alles neu gezeichnet wird. Wenn sich etwas auf der Karte bewegt, wird der Bereich, den es früher einnahm, als schmutzig markiert . Wenn Sie dann zeichnen, wissen Sie, dass Sie nur diesen Teil des Hintergrunds neu zeichnen müssen. Dies ist vorteilhaft, da Sie dann nur die Bereiche neu zeichnen müssen, die zuvor nicht angezeigt wurden.

Dies ist also wirklich nur dann von Vorteil, wenn sich nicht viele Dinge bewegen. Andernfalls verbringen Sie mehr Zeit damit, herauszufinden, welche neuen Bereiche gezeichnet werden sollen, als wenn Sie nur den gesamten Hintergrund neu zeichnen. Dies ist nicht mehr allzu häufig, da die Plattform normalerweise schnell genug ist, um alles ohne Probleme neu zu zeichnen. Da dies wirklich nur eine Optimierungsfunktion ist, würde ich sie vorerst ignorieren und darauf zurückkommen, wenn Sie feststellen, dass die Leistung fehlt.

Das Rendern in den meisten Spielen erfolgt innerhalb einer Schleife (der Spielschleife) und in jeder Iteration der Spielschleife wird der gesamte Backbuffer (in diesem Fall Ihre Leinwand) gelöscht und von Grund auf neu gezeichnet.

Der Begriff Dirty Rendering bezieht sich auf eine Technik, bei der Sie nicht bei jedem Bild die gesamte Leinwand löschen, sondern nur bei Bedarf (dh nur, wenn sich etwas in der Szene geändert hat) und möglicherweise nur einen Teil davon (dh nur den Teil, bei dem sich etwas geändert hat) ).

Dieser Vorgang, bei dem nur ein Teil Ihrer Leinwand markiert wird, der neu gezeichnet werden soll, ist das, worauf sich schmutzig bezieht (dh dieser Teil der Leinwand ist schmutzig und muss neu gezeichnet werden, aber alles andere ist noch sauber und sollte nicht berührt werden ).

Ich habe keine Ahnung, ob es eine spezielle Möglichkeit für Sie gibt, dies in HTML5 zu implementieren, aber ich habe diese Ressource gefunden, die Ihnen einige Ideen geben könnte.