Inhaltsverzeichnis- Vorwort
- Was ist DrawCall
- Welchen Einfluss hat DrawCall auf die Leistung?
- So reduzieren Sie DrawCall
- Für Bildressourcen
- Für Etiketten
- Der einzige Weg – die UI-Hierarchiereihenfolge anpassen
- Zusammenfassen
Vorwort In der Spieleentwicklung ist DrawCall ein sehr wichtiger Leistungsindikator, der sich direkt auf die Gesamtleistung des Spiels auswirkt. Ob Cocos Creator, Unity, Unreal oder andere Game-Engines, DrawCall ist absolut unverzichtbar, wenn es um die Optimierung der Spieleleistung geht. In diesem Artikel wird erläutert, was DrawCall ist, warum Sie DrawCall reduzieren sollten und wie Sie DrawCall in Cocos Creator-Projekten reduzieren, um die Spieleleistung zu verbessern. Was ist DrawCall DrawCall ist der Aufruf der Grafikzeichenschnittstelle der Grafikbibliothek (wie DirectX oder OpenGL) durch die CPU, um der GPU den Befehl zum Ausführen von Rendering-Vorgängen zu geben. Welchen Einfluss hat DrawCall auf die Leistung? Lassen Sie mich Ihnen ein Beispiel geben: Was nimmt weniger Zeit in Anspruch: das Abrufen von 1024 1-KB-Dateien von einem Server über http oder das Abrufen einer einzelnen 1-MB-Datei? Antwort: Es ist definitiv schneller, eine einzelne 1-MB-Datei abzurufen. Der Grund dafür ist, dass http vor jeder Anfrage viele Vorbereitungen treffen muss, um sicherzustellen, dass die Datei normal übertragen werden kann. Und es ist dieser Mehraufwand, der einen großen Zeit- und Leistungsaufwand verursacht. Die CPU ruft DrawCall bei jedem Zeichnen auf, und vor dem Aufruf von DrawCall muss die CPU viele Vorbereitungsarbeiten erledigen: Erkennen des Rendering-Status, Senden der zum Rendering erforderlichen Daten und Senden des zum Rendering erforderlichen Status. Die GPU selbst verfügt über eine sehr starke Rechenleistung und kann Rendering-Aufgaben sehr schnell bewältigen. Im Allgemeinen dauert das Zeichnen von 100 Dreiecken ungefähr genauso lange wie das Zeichnen von 1000 Dreiecken. Wenn jedoch zu viele DrawCalls vorhanden sind, entsteht der CPU ein großer zusätzlicher Overhead für die Vorbereitungsarbeit, die CPU selbst wird belastet und die GPU ist zu diesem Zeitpunkt möglicherweise im Leerlauf. **Das heißt, es liegt gerade daran, dass die CPU vor jedem Rendern eine Reihe von Vorbereitungen treffen muss und jedes Lesen und Schreiben im Speicher, jede Datenverarbeitung und jeder Wechsel des Renderzustands der CPU einen bestimmten Leistungs- und Zeitaufwand mit sich bringt, der sich im Laufe der Zeit ansammelt, während die GPU die meiste Zeit nachlässt. Aus diesem Grund glauben wir, dass zu viele DrawCalls zu Verzögerungen führen. So reduzieren Sie DrawCall Wie oben erwähnt, können wir unser Ziel erreichen, indem wir der CPU mehr Arbeit gleichzeitig zuweisen, mehr Inhalte gleichzeitig rendern und die Anzahl der Zuweisungen reduzieren. Doch wie sollen wir es nun konkret umsetzen? Blick nach unten Für Bildressourcen Statisches Bild Dabei handelt es sich um die Integration fragmentierter Bilder zu einem Gesamtbild, das wir oft als Fotoalbum bezeichnen. Doch der Atlas entsteht nicht nach dem Zufallsprinzip und es ist auch nicht so, dass ein großes Bild umso besser ist, je mehr kleine Bilder es enthalten kann. Dabei kommen gewisse Tricks zum Einsatz. Versuchen Sie, benachbarte Fragmente mit demselben Rendering-Status in derselben Benutzeroberfläche (UI) in einen Atlas zu packen
Wenn das Spiel für Creator läuft, rendert die Engine von oben nach unten und von flach nach tief in der Reihenfolge der Knotenhierarchie. Theoretisch ist für jedes gerenderte Bild ein DrawCall erforderlich (Text ist letztendlich auch ein Bild). Der Rendering-Status bezieht sich auf: Texturstatus (Vormultiplikation, Loop-Modus und Filtermodus) oder Material, Mischung usw. Daher wird durch die Verwendung eines benutzerdefinierten Shaders auch die Stapelverarbeitung unterbrochen.
Der entscheidende Punkt ist also , dass sie nebeneinander angeordnet sind und denselben Rendering-Status aufweisen . Tipp: Es wird nicht empfohlen, dass die Größe einer Bildressource 2048*2048 überschreitet, da sonst Ladeprobleme auftreten können. Hier sind zwei Möglichkeiten zum Erstellen einer Bildersammlung: Auto Atlas Verwenden Sie die integrierte automatische Atlas-Ressource von Cocos Creator, um die Fragmente in einen Atlas zu packen. Beim Erstellen des Projekts verpackt der Editor alle Bilder, die die Anforderungen erfüllen, in dem Ordner, in dem sich alle automatischen Atlas-Ressourcen befinden, je nach Konfiguration in einen oder mehrere Atlanten. Automatische Atlasressourcen sind sehr flexibel in der Verwendung. Der Editor rekursiert beim Verpacken des Atlas automatisch in Unterverzeichnisse. Wenn sich im Unterverzeichnis auch automatische Atlasressourcen (z. B. PAC-Dateien) befinden, wird das Verzeichnis übersprungen, sodass wir für verschiedene Teile desselben Verzeichnisses unterschiedliche Parameter konfigurieren können. Einige Vorschläge zum automatischen Atlas Kontrollieren Sie die maximale Größe des Atlas sinnvoll, um lange Ladezeiten für ein einzelnes Bild zu vermeiden. Zu große Bilder müssen nicht in den Atlas aufgenommen werden (z.B. Hintergrundbilder). Durch die sinnvolle Nutzung von Sliced lässt sich viel Platz sparen (hierfür ist die Mitarbeit eines Kunstexperten erforderlich). Behalten Sie den Standardabstand von 2 bei und lassen Sie die Option zur Randerweiterung aktiviert, um Bildzuschneidefehler und schwarze Ränder zu vermeiden. Aktivieren Sie die Option „Keine nicht referenzierten Ressourcen einschließen“, um nicht verwendete Bilder automatisch auszuschließen und so Speicherplatz zu sparen (diese Option ist während der Vorschau ungültig). Zeigen Sie den Atlas während der Entwicklung in der Vorschau an und nehmen Sie anhand der Ergebnisse Anpassungen vor, um den besten Optimierungseffekt zu erzielen.
TexturePacker Wenn Sie TexturePacker zum Packen von Atlanten verwenden, müssen Sie „Shape Padding (entspricht dem Abstand im Auto Atlas)“ konfigurieren, um zu vermeiden, dass Pixel benachbarter Bilder in einem bestimmten Bild erscheinen.
Vergleichen Auto Atlas - Cocos Creator integriert, bequem
- Nicht viele Funktionen, aber alles was man braucht
- Der Atlas wird erst beim Erstellen des Projekts generiert und es besteht kein Druck, ihn während der Entwicklung nach Belieben zu ändern.
- Die Atlasgröße wird bei der Generierung adaptiv angepasst, um Platz zu sparen
- Unterstützt automatische Texturkomprimierung
TexturePacker - Software von Drittanbietern muss von Ihnen selbst installiert werden, was nicht bequem genug ist
- Es gibt viele kostenpflichtige Funktionen, die sehr professionell sind, aber im Grunde nicht benötigt werden, und die kostenlosen Funktionen reichen aus
- Generieren Sie zuerst den Atlas und verwenden Sie ihn dann. Wenn Sie das Bild ändern, müssen Sie den Atlas neu generieren.
- Die feste Größe muss von Ihnen selbst festgelegt werden
- Automatische Texturkomprimierung und dynamisches Zusammenführen werden nicht unterstützt
Offizielle Beschreibung des Erstellers: Cocos Creator bietet beim Erstellen eines Projekts eine statische Atlasmethode – „Auto Atlas“. Wenn das Projekt jedoch wächst, wird die Anzahl der Texturen sehr groß und es ist schwierig, die Texturen in eine große Textur zu packen. Zu diesem Zeitpunkt ist die statische Texturkombination schwierig, um die Nachfrage nach der Reduzierung von DrawCall zu erfüllen. Aus diesem Grund hat Cocos Creator in Version 2.0 die Funktion „Dynamic Atlas“ hinzugefügt, mit der Texturen während der Ausführung des Projekts dynamisch zu einer großen Textur zusammengeführt werden können. Beim Rendern einer Textur erkennt das dynamische Zusammenführungssystem automatisch, ob die Textur bereits in den Atlas (Bildersammlung) integriert wurde. Wenn nicht und die Textur die Bedingungen für die dynamische Zusammenführung erfüllt, wird sie in den Atlas integriert. Offizielle Dokumentation zur dynamischen Bildkombination: https://docs.cocos.com/creator/manual/en/advanced-topics/dynamic-atlas.html
Dynamische Atlanten unterliegen zwei Einschränkungen: - Die maximale Größe des dynamischen Atlas beträgt 2048 * 2048
- Die Größe des fragmentierten Bildes darf standardmäßig 512 nicht überschreiten und kann über die API geändert werden:
cc.dynamicAtlasManager.maxFrameSize = 512
Tipps: Das Aktivieren der dynamischen Bildzusammenführung erhöht den Speicherverbrauch und die Speichernutzung auf verschiedenen Plattformen ist inkonsistent. Standardmäßig ist die dynamische Bildsynthese in Minispielen und nativen Plattformen verboten. Sie können es selbst über die API aktivieren: cc.macro.CLEANUP_IMAGE_CACHE = false; cc.dynamicAtlasManager.enabled = true; Außerdem muss sichergestellt werden, dass Premulyiply Alpha, Wrap-Modus, Filtermodus und andere Informationen der Textur mit dem dynamischen Atlas übereinstimmen, bevor dynamisches Batching erreicht werden kann. Darüber hinaus können auch statische Atlanten an der dynamischen Zusammenführung teilnehmen , solange sie die Anforderungen der dynamischen Zusammenführung erfüllen. Tipp 1: Für Auto Atlas-Ressourcen müssen Sie die Option „Packbar“ in der Spalte „Textur“ im Eigenschafteninspektor aktivieren. Diese Option ist standardmäßig deaktiviert . Tipp 2: Um Bilder dynamisch zu kombinieren, müssen Sprites auch die Option „Packbar“ aktivieren. Diese Option ist standardmäßig aktiviert . Tipp 3: Wenn Sie Shader verwenden möchten, müssen Sie die Packable-Option des Sprites deaktivieren. Für Etiketten Bitmap-Schriftart (BMFont) In Creator unterbricht die Verwendung von Systemschriftarten oder TTF-Schriftarten in Labels den Rendering-Batch, insbesondere wenn Labels und Sprites überlappen und verschachtelt sind. Jedes Label unterbricht den Batch und fügt einen DrawCall hinzu. Daher wird empfohlen, BMFont anstelle von TTF oder Systemschriftarten zu verwenden und BMFont- und UI-Fragmente in denselben Atlas zu packen (oder die „dynamische Kombination zu aktivieren“), wodurch die durch die meisten Texte verursachte Zunahme von DrawCall vermieden werden kann.
Cache-Modus Die Version Creator 2.0.9 fügt der Label-Komponente eine Cache-Modus-Option hinzu, um die durch Systemschriftarten und TTF-Schriftarten verursachten Leistungsprobleme zu lösen. Es gibt drei Optionen für den Cache-Modus: - KEINE (Standard) Jedes Etikett wird als separates Bitmap generiert und nimmt nicht an der dynamischen Zusammenführung teil, sodass jedes Etikett den Rendering-Stapel unterbricht.
- BITMAP Nach dem Aktivieren des BITMAP-Modus wird der Text auch als Bitmap generiert. Solange er jedoch die Anforderungen für die dynamische Zusammenführung erfüllt, kann er an der dynamischen Zusammenführung teilnehmen und DrawCall mit den umgebenden Sprites zusammenführen. Es ist wichtig zu beachten, dass der BITMAP-Modus nur für Text geeignet ist, der sich nicht häufig ändert, da sonst der Speicher explodiert.
- CHAR: Wenn der CHAR-Modus aktiviert ist, speichert die Engine alle im Etikett erscheinenden Zeichen in einer global freigegebenen Bitmap zwischen, was der Generierung einer BMFont entspricht. Geeignet für Situationen, in denen sich der Text häufig ändert, und besonders leistungs- und speicherschonend. Tipp: Dieser Modus kann nur für Etiketten mit festem Schriftstil und fester Schriftgröße verwendet werden, und bei denen eine große Anzahl nicht verwendeter Zeichen nicht häufig vorkommt . Da die maximale Größe der gemeinsam genutzten Bitmap 2048 x 2048 beträgt, können keine neuen Zeichen gerendert werden, sobald sie voll ist, und die gemeinsam genutzte Bitmap wird erst beim Wechseln der Szene gelöscht.
Zusammenfassung: Bei großen Mengen sich häufig ändernden Textes ist die Leistungsverbesserung durch die Verwendung des CHAR-Modus sehr deutlich. Gleichzeitig sind auch die Einschränkungen des CHAR-Modus offensichtlich. Er wird im Allgemeinen verwendet, wenn in der Szene eine große Menge digitalen Textes erscheint, ähnlich wie bei Spezialeffekten wie Erfahrungswertsteigerung und Gesundheitsreduzierung. Der einzige Weg – die UI-Hierarchiereihenfolge anpassen grundsätzlich: Trennen Sie Bildknoten und Textknoten. Verwenden Sie die Optionen BMFont oder Cache-Modus für Text und vermeiden Sie, dass Text Rendering-Batches unterbricht. FBI-WARNUNG: Eine Maskenkomponente und die von ihr gesteuerten Rendering-Knoten erfordern mindestens drei Draw-Aufrufe. Das erste Mal, wenn der Vorlagentest eingeschaltet und ein Draw-Aufruf ausgeführt wird, um den Vorlagenpuffer zu aktualisieren. Die zweite Zeichnung legt den Bereich fest, der den Vorlagentest bestehen muss. Beim dritten Mal wird der eigentliche Unterknoteninhalt gezeichnet und der Vorlagentest nach Abschluss der Zeichnung geschlossen. Daher ist bei Verwendung der Maskenkomponente keine Stapelverarbeitung mit anderen benachbarten Knoten möglich . Die kontinuierlichen Knoten innerhalb der Maskenkomponente werden jedoch weiterhin in Stapeln verarbeitet, wenn die Zusammenführungsregeln erfüllt sind.
Zusammenfassen Das Ändern des Rendering-Status unterbricht den Rendering-Stapel, beispielsweise das Ändern des Textur-Status (Vormultiplikation, Loop-Modus und Filtermodus) oder das Ändern von Material, Mischung usw., sodass die Verwendung eines benutzerdefinierten Shaders auch den Stapel unterbricht. Standardmäßig nehmen Atlanten nicht an der dynamischen Zusammenführung teil. Wenn der endgültige Atlas die Anforderungen der dynamischen Zusammenführung erfüllt, kann er nach dem manuellen Aktivieren der Option „Packbar“ der automatischen Atlasressource ebenfalls an der dynamischen Zusammenführung teilnehmen. Nachdem die Option „Packbar“ für die Textur aktiviert wurde und sie an der dynamischen Zusammenführung teilnimmt, können Sie keinen benutzerdefinierten Shader verwenden, da durch die dynamische Zusammenführung die UV-Koordinaten der Originaltextur geändert werden. Beim Verwenden des BITMAP-Modus des Cache-Modus müssen Sie auf die Speichersituation achten. Beim Verwenden des CHAR-Modus müssen Sie darauf achten, dass der Textinhalt nicht zu groß ist. In Versionen vor Cocos Creator 2.0.7 wird das Batch-Rendering unterbrochen, wenn die Farbe oder Transparenz eines Knotens geändert oder Sliced in einer Sprite-Komponente verwendet wird. Oben finden Sie eine ausführliche Erläuterung der DrawCall-Optimierung durch CocosCreator. Weitere Informationen zur DrawCall-Optimierung durch CocosCreator finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM! Das könnte Sie auch interessieren:- So zeichnen Sie in CocosCreator ein cooles Radardiagramm
- Detaillierte Erklärung der CocosCreator MVC-Architektur
- Detaillierte Erläuterung des CocosCreator-Nachrichtenverteilungsmechanismus
- CocosCreator Erste Schritte Tutorial: Netzwerkkommunikation
- So erstellen Sie WeChat-Spiele mit CocosCreator
- Detaillierte Erklärung, wie CocosCreator-Systemereignisse generiert und ausgelöst werden
- Detaillierte Erklärung des digitalen Puzzles CocosCreator Huarongdao
- Detaillierte Erklärung des Fischschwarm-Algorithmus im CocosCreator-Spiel
- So erstellen Sie eine Liste in CocosCreator
|