Up to date

This page is up to date for Godot 4.2. If you still find outdated information, please open an issue.

2D-Antialiasing

Siehe auch

Godot unterstützt auch Antialiasing beim 3D-Rendering. Dies wird auf der Seite 3D-Antialiasing behandelt.

Einführung

Aufgrund ihrer begrenzten Auflösung können in 2D gerenderte Szenen Aliasing-Artefakte aufweisen. Diese Artefakte manifestieren sich in der Regel in Form eines "Treppen"-Effekts an Geometriekanten und sind am auffälligsten, wenn Nodes wie Line2D, Polygon2D oder TextureProgressBar verwendet werden. Manuelles Zeichnen in 2D kann ebenfalls Aliasing-Artefakte für Methoden aufweisen, die kein Antialiasing unterstützen.

Im folgenden Beispiel sehen Sie, wie die Kanten blockartig aussehen:

Das Bild wurde um das zweifache skaliert und mit einem Nearest-Neighbor-Filter versehen, um Aliasing deutlicher zu machen.

Das Bild wurde um das zweifache skaliert und mit einem Nearest-Neighbor-Filter versehen, um Aliasing deutlicher zu machen.

Um dem entgegenzuwirken, unterstützt Godot mehrere Methoden zur Aktivierung von Antialiasing beim 2D-Rendering.

Die Antialiasing-Property in Line2D und benutzerdefiniertes Zeichnen

Dies ist die empfohlene Methode, da sie in den meisten Fällen eine geringere Auswirkung auf die Performance hat.

Line2D hat eine Antialiased-Property, die Sie im Inspektor aktivieren können. Außerdem unterstützen mehrere Methoden für Manuelles Zeichnen in 2D einen optionalen antialiased Parameter, der beim Aufruf der Funktion auf true gesetzt werden kann.

Für diese Methoden muss MSAA nicht aktiviert sein, was die Kosten für die Basis-Performance niedrig hält. Mit anderen Worten, es gibt keine dauerhaften zusätzlichen Kosten, wenn Sie zu einem bestimmten Zeitpunkt keine Geometrie mit Antialiasing zeichnen.

Der Nachteil dieser Antialiasing-Methoden ist, dass sie durch die Erzeugung zusätzlicher Geometrie funktionieren. Wenn Sie komplexe 2D-Geometrie erzeugen, die bei jedem Frame aktualisiert wird, kann dies ein Bottleneck sein. Außerdem verfügen Polygon2D, TextureProgressBar und mehrere benutzerdefinierte Zeichenmethoden nicht über eine Antialiasing-Property. Für diese Nodes können Sie stattdessen 2D-Multisample-Antialiasing verwenden.

Multi-Sample Antialiasing (MSAA)

Bevor Sie MSAA in 2D aktivieren, ist es wichtig zu verstehen, worauf MSAA angewendet wird. MSAA unterliegt in 2D ähnlichen Einschränkungen wie in 3D. Es führt zwar keine Unschärfe ein, aber sein Anwendungsbereich ist begrenzt. Die wichtigsten Anwendungen von 2D MSAA sind:

  • Geometrische Kanten, wie z. B. Linien- und Polygonzeichnungen.

  • Sprite-Kanten nur für Pixel, die eine der Kanten der Textur berühren. Dies funktioniert sowohl für lineare als auch für Nearest-Neighbor-Filterung. Sprite-Kanten, die mit Hilfe von Transparenz auf dem Bild erstellt werden, sind von MSAA nicht betroffen.

Der Nachteil von MSAA ist, dass es nur auf Kanten wirkt. Das liegt daran, dass MSAA die Anzahl der Deckungs-Samples erhöht, aber nicht die Anzahl der Farb-Samples. Da sich jedoch die Anzahl der Farb-Samples nicht erhöht hat, werden Fragment-Shader weiterhin für jedes Pixel nur einmal ausgeführt. Infolgedessen hat MSAA keine Auswirkungen auf die folgenden Arten von Aliasing:

  • Aliasing innerhalb von Texturen mit Nearest-Neighbor-Filter (Pixel Art).

  • Aliasing verursacht durch benutzerdefinierte 2D-Shader.

  • Specular Aliasing bei Verwendung von Light2D.

  • Aliasing beim Rendern von Schriftarten.

MSAA kann in den Projekteinstellungen aktiviert werden, indem der Wert der Einstellung Rendern > Kantenglättung > Qualität > MSAA 2D geändert wird. Es ist wichtig, den Wert der Einstellung MSAA 2D und nicht MSAA 3D zu ändern, da es sich um völlig separate Einstellungen handelt.

Vergleich zwischen keinem Antialiasing (links) und verschiedenen MSAA-Stufen (rechts). Die obere linke Ecke enthält einen Line2D-Node, die obere rechte Ecke enthält 2 TextureProgressBar-Nodes. Der untere Bereich enthält 8 Pixel Art-Sprites, von denen 4 die Kanten berühren (grüner Hintergrund) und 4 die Kanten nicht berühren (Godot-Logo):

../../_images/antialiasing_msaa_2x.webp ../../_images/antialiasing_msaa_4x.webp ../../_images/antialiasing_msaa_8x.webp