Hero background image
Optimierungstipps für Unity UI
Informieren Sie sich über die vollständige Optimierung Ihrer Benutzeroberfläche mit Tipps zum Aufteilen von Canvases und Layoutgruppen, zum Pooling von Benutzeroberflächenobjekten und vielem mehr.

Dies ist eine von mehreren Seiten mit ausführlichen Anleitungen zur Optimierung Ihrer PC- und Konsolenspiele. Die vollständige Sammlung finden Sie im kostenlosen E-Book „ Optimieren Sie die Leistung Ihrer Konsole und Ihres PC-Spiels“, das über 80 umsetzbare Tipps und Best Practices zur Leistungsoptimierung enthält.

Teilen Sie Ihre Leinwände auf

Problem: Wenn sich ein einzelnes Element auf der UI-Leinwand ändert, wird die gesamte Leinwand verschmutzt.

Das Canvas ist die grundlegende Komponente der Unity-Benutzeroberfläche. Es generiert Netze, die die darauf platzierten UI-Elemente darstellen, generiert die Netze neu, wenn sich UI-Elemente ändern, und gibt Draw Calls an die GPU aus, damit die Benutzeroberfläche tatsächlich angezeigt wird.

Das Erstellen dieser Netze kann teuer sein. UI-Elemente müssen in Stapeln gesammelt werden, damit sie mit möglichst wenigen Draw Calls gezeichnet werden. Da die Batchgenerierung teuer ist, möchten wir sie nur bei Bedarf neu generieren. Das Problem besteht darin, dass, wenn sich ein oder mehrere Elemente auf einem Canvas ändern, der gesamte Canvas noch einmal analysiert werden muss, um herauszufinden, wie seine Elemente optimal gezeichnet werden.

Viele Benutzer erstellen die gesamte Benutzeroberfläche ihres Spiels auf einer einzigen Leinwand mit Tausenden von Elementen. Wenn sie ein Element ändern, kann es zu einer CPU-Spitze kommen, die mehrere Millisekunden kostet. Um mehr darüber zu erfahren, warum der Wiederaufbau so teuer ist, gehen Sie in dieser Unite-Sitzungzu Marke 24:55.

Lösung Teilen Sie Ihre Leinwände auf.

Jedes Canvas ist eine Insel, die ihre Elemente von denen anderer Canvases isoliert. Nutzen Sie die Fähigkeit von UGUI, mehrere Canvases zu unterstützen, indem Sie Ihre Canvases aufteilen, um die Batching-Probleme mit Unity UI zu lösen.

Sie können Canvases auch verschachteln, wodurch Designer große hierarchische Benutzeroberflächen erstellen können, ohne darüber nachdenken zu müssen, wo sich die verschiedenen Elemente auf den Canvases auf dem Bildschirm befinden. Untergeordnete Canvases isolieren außerdem Inhalte von ihren übergeordneten und gleichgeordneten Canvases. Sie verwalten ihre eigene Geometrie und führen ihre eigene Batchverarbeitung durch. Eine Möglichkeit zur Entscheidung über die Aufteilung besteht darin, zu bestimmen, wie häufig sie aktualisiert werden müssen. Behalten Sie statische UI-Elemente auf einem separaten Canvas und dynamische Elemente, die gleichzeitig auf kleineren Unter-Canvases aktualisiert werden. Stellen Sie außerdem sicher, dass alle UI-Elemente auf jedem Canvas dieselben Z-Werte, Materialien und Texturen haben.

Graphic Raycaster-Schnittstelle
Begrenzen Sie grafische Raycaster und deaktivieren Sie Raycast-Ziele

Problem: Unzureichende Nutzung des Graphic Raycaster

Der Graphic Raycaster ist die Komponente, die Ihre Eingaben in UI-Ereignisse übersetzt. Genauer gesagt übersetzt es Bildschirmklicks oder Touch-Eingaben auf dem Bildschirm in UI-Ereignisse und sendet sie dann an interessierte UI-Elemente. Sie benötigen einen grafischen Raycaster auf jedem Canvas, der Eingaben erfordert, einschließlich untergeordneter Canvases. Es durchläuft jedoch auch alle Eingabepunkte auf dem Bildschirm und prüft, ob sie sich innerhalb der RectTransform einer Benutzeroberfläche befinden, was zu potenziellem Overhead führen kann.

Trotz seines Namens ist der Graphic Raycaster kein echter Raycaster. Standardmäßig werden nur UI-Grafiken getestet. Es nimmt die Menge der UI-Elemente, die an der Eingabe auf einem bestimmten Canvas interessiert sind, und führt Schnittpunktprüfungen durch. Beispielsweise wird überprüft, ob der Punkt, an dem das Eingabeereignis gegenüber dem RectTransform jedes UI-Elements auf der Canvas des Graphic Raycaster auftritt, als interaktiv markiert ist.

Die Herausforderung besteht darin, dass nicht alle UI-Elemente an Updates interessiert sind.

Lösung Entfernen Sie grafische Raycaster von nicht interaktiven UI-Canvases und deaktivieren Sie das Raycast-Ziel für statische oder nicht interaktive Elemente.

Insbesondere wird durch Text auf einer Schaltfläche zum Ausschalten des Raycast-Ziels direkt die Anzahl der Schnittpunktprüfungen reduziert, die der grafische Raycaster für jedes Frame durchführen muss.

Problem: Manchmal fungiert der Graphic Raycaster als Raycaster.

Wenn Sie den Rendermodus auf Ihrer Leinwand auf „Worldspace Camera“ oder „Screen Space Camera“ einstellen, können Sie eine Blockierungsmaske hinzufügen. Die Sperrmaske legt fest, ob der Raycaster Strahlen mithilfe von 2D- oder 3D-Physik aussendet, um festzustellen, ob ein physikalisches Objekt die Möglichkeit des Benutzers zur Interaktion mit der Benutzeroberfläche blockiert.

Lösung Das Auswerfen von Strahlen mittels 2D- oder 3D-Physik kann aufwändig sein. Verwenden Sie diese Funktion daher sparsam.

Minimieren Sie die Anzahl der grafischen Raycaster, indem Sie sie von nicht interaktiven UI-Canvases ausschließen, da in diesem Fall kein Grund besteht, nach Interaktionsereignissen zu suchen.

Erfahren Sie in dieser Dokumentationmehr über den Graphic Raycaster.

Grid-Schnittstelle
Vermeiden Sie teure UI-Elemente

Problem: Große Listen- und Rasteransichten sowie zahlreiche überlagerte UI-Elemente sind kostspielig.

Große Listen- und Rasteransichten sind teuer und das Überlagern zahlreicher UI-Elemente (z. B. gestapelte Karten in einem Kartenkampfspiel) führt zu einer Überlastung.

Lösung Vermeiden Sie zahlreiche überlagerte UI-Elemente.

Passen Sie Ihren Code an, um geschichtete UI-Elemente zur Laufzeit in weniger Elemente und Stapel zusammenzuführen.

Wenn Sie eine große Listen- oder Rasteransicht erstellen müssen, z. B. einen Inventarbildschirm mit Hunderten von Elementen, sollten Sie die Wiederverwendung eines kleineren Pools von UI-Elementen anstelle eines einzelnen UI-Elements für jedes Element in Betracht ziehen.

Sehen Sie sich dieses GitHub-Projekt für ein Beispiel einer optimierten Bildlaufliste an.

Schnittstelle für Layout-Gruppen
Vermeiden Sie wenn möglich Layoutgruppen

Problem: Jedes UI-Element, das versucht, sein Layout zu verunstalten, führt mindestens einen GetComponent-Aufruf aus.

Wenn sich ein oder mehrere untergeordnete UI-Elemente in einem Layoutsystem ändern, wird das Layout „schmutzig“. Die geänderten untergeordneten Elemente machen das Layoutsystem, dem sie gehören, ungültig.

Ein Layoutsystem ist eine Reihe zusammenhängender Layoutgruppen direkt über einem Layoutelement. Ein Layoutelement ist nicht nur die Layoutelementkomponente (UI-Bilder, Texte und Scroll Rects), sondern umfasst auch Layoutelemente – genau wie Scroll Rects auch Layoutgruppen sind.

Nun zu dem vorliegenden Problem: Jedes UI-Element, das sein Layout als „schmutzig“ markiert, führt mindestens einen GetComponent-Aufruf aus. Dieser Aufruf sucht nach einer gültigen Layoutgruppe im übergeordneten Element des Layoutelements. Wenn es eine findet, durchläuft es die Transform-Hierarchie weiter nach oben, bis es die Suche nach Layoutgruppen beendet oder die Hierarchiewurzel erreicht, je nachdem, was zuerst eintritt. Somit fügt jede Layoutgruppe dem Dirtying-Prozess jedes untergeordneten Layoutelements einen GetComponent-Aufruf hinzu, was die Leistung der verschachtelten Layoutgruppen extrem verschlechtert.

Lösung Vermeiden Sie nach Möglichkeit Layoutgruppen.

Verwenden Sie Anker für proportionale Layouts. Erwägen Sie bei Hot-UIs mit einer dynamischen Anzahl von UI-Elementen das Schreiben Ihres eigenen Codes zum Berechnen der Layouts. Stellen Sie sicher, dass Sie dies nur bei Bedarf und nicht bei jeder einzelnen Änderung verwenden.

Erfahren Sie mehr über Layoutgruppen in unserer Dokumentation.

Schnittstelle Objektpooling
Poolen Sie UI-Objekte auf intelligente Weise

Problem: Pooling von UI-Objekten auf die falsche Weise

Benutzeroberflächenobjekte werden häufig zusammengefasst, indem sie neu zugeordnet und dann deaktiviert werden, was zu unnötiger Verschmutzung führt.

Lösung Deaktivieren Sie zuerst das Objekt und ordnen Sie es dann dem Pool neu zu.

Sie werden die alte Hierarchie einmal beschmutzen, aber wenn Sie sie neu zuordnen, vermeiden Sie, die alte Hierarchie ein zweites Mal zu beschmutzen – und Sie werden die neue Hierarchie überhaupt nicht beschmutzen. Wenn Sie ein Objekt aus dem Pool entfernen, ordnen Sie ihm zuerst ein neues Objekt zu, aktualisieren Sie Ihre Daten und aktivieren Sie es dann.

Erfahren Sie mehr über die Konzepte des grundlegenden Objekt-Poolings in Unity.

Die UI-Canvas-Komponente in Unity
So verbergen Sie eine Leinwand

Problem: Sie sind sich nicht sicher, wie Sie eine Leinwand ausblenden können

Manchmal ist es nützlich, UI-Elemente und Canvases auszublenden. Aber wie können Sie dies effizient tun?

Lösung Deaktivieren Sie die Canvas-Komponente selbst.

Durch das Deaktivieren der Canvas-Komponente wird verhindert, dass Canvas Zeichenaufrufe an die GPU sendet. Auf diese Weise ist die Leinwand nicht mehr sichtbar. Allerdings verwirft das Canvas seinen Scheitelpunktpuffer nicht, sondern behält alle seine Netze und Scheitelpunkte. Wenn Sie es dann wieder aktivieren, wird kein Neuaufbau ausgelöst, sondern es wird einfach erneut mit dem Zeichnen begonnen.

Darüber hinaus werden durch das Deaktivieren der Canvas-Komponente nicht die aufwändigen OnDisable/OnEnable-Rückrufe über die Canvas-Hierarchie ausgelöst. Achten Sie jedoch darauf, untergeordnete Komponenten zu deaktivieren, die teuren Code pro Frame ausführen.

Erfahren Sie hiermehr über die Canvas-Komponente.

Optimaler Einsatz von Animatoren auf UI-Elementen

Problem: Verwenden von Animatoren auf Ihrer Benutzeroberfläche

Animatoren verschmutzen ihre UI-Elemente in jedem Frame, auch wenn sich der Wert in der Animation nicht ändert.

Lösung Verwenden Sie Code für UI-Animation.

Setzen Sie Animatoren nur auf dynamische UI-Elemente ein, die sich ständig ändern. Schreiben Sie für Elemente, die sich selten ändern oder sich vorübergehend als Reaktion auf Ereignisse ändern, Ihren eigenen Code oder verwenden Sie ein Tweening-System. Im Asset Storesind hierfür zahlreiche großartige Lösungen verfügbar.

Wenn Sie eine Vollbild-Benutzeroberfläche verwenden, blenden Sie alles andere aus

Problem: Schlechte Leistung mit Vollbild-Benutzeroberfläche

Wenn Ihr Spiel einen Pausen- oder Startbildschirm anzeigt, der die gesamte Szene abdeckt, wird der Rest des Spiels weiterhin im Hintergrund gerendert, was die Leistung beeinträchtigen kann.

Lösung Alles andere ausblenden.

Wenn Ihr Bildschirm alles andere in der Szene abdeckt, deaktivieren Sie die Kamera, die die 3D-Szene rendert. Deaktivieren Sie auf ähnliche Weise Canvas-Elemente, die hinter dem oberen Canvas verborgen sind.

Erwägen Sie, die Application.targetFrameRate während einer Vollbild-Benutzeroberfläche zu verringern, da bei 60 fps keine Aktualisierung erforderlich sein sollte.

Weitere Ressourcen
Spielleistung optimieren
Holen Sie sich das kostenlose E-Book für mehr

Bieten Sie Ihren Spielern das bestmögliche Spielerlebnis. Mit über 80 umsetzbaren Tipps und Best Practices der erfahrenen Ingenieure von Unity können Sie Ihre PC- und Konsolenspiele optimieren.

Genauer gesagt: Diese detaillierten Praktiken, die von den Entwicklungsteams für Success und Accelerate Solutions von Unity entwickelt wurden und auf der Zusammenarbeit mit Top-Studios basieren, werden dazu beitragen, die Gesamtleistung Ihres Spiels zu steigern.

War dieser Inhalt hilfreich?