Godot-SVG-Import: Texture2D, DPITexture und scharfe Icons

Beim SVG-Import wandelt Godot das SVG normalerweise bereits beim Importieren des Assets in Pixel um. Wenn du diese Textur vergrößerst, kann sie deshalb unscharf wirken, selbst wenn die Vorlage saubere Vektorpfade enthält. Für SVG-Icons, die sich an die Skalierung des Viewports anpassen müssen, bietet der aktuelle Importer außerdem DPITexture. Damit lässt sich die Vorlage für einen anderen Oversampling-Faktor erneut rastern. Godot dokumentiert beide Wege in seiner Anleitung zum Bildimport.

Prüfe zuerst die importierte Ressource und die Art, wie dein Projekt sie skaliert. Eine erneute Nachzeichnung eines bereits gültigen SVGs behebt keine niedrig aufgelöste Textur, die über einen größeren Bildschirm gestreckt wird.

Den SVG-Importtyp nach dem Anzeigeverhalten wählen

Die beiden folgenden Optionen bezeichnen die Ressourcentypen im Import-Dock. DPITexture selbst erbt von Texture2D; es handelt sich also nicht um voneinander unabhängige Klassenfamilien. Die DPITexture-Referenz kennzeichnet die Klasse zudem als experimentell. Prüfe vor dem Einsatz die Dokumentation für die Godot-Version deines Projekts.

Der Texturimport liefert eine Texturressource. Betrachte Pfadbearbeitung, Kollisionsformen und Leistung als eigene Anforderungen; eine SVG-Dateiendung beweist nicht, dass diese erfüllt sind. Für eine Browserszene kannst du die Geometrie- und Texturwege in PixiJS vergleichen, um zu sehen, wie dasselbe SVG auf einem anderen Weg in den Renderer gelangen kann.

Die SVG-Vorlage und ihre dargestellten Pixel

Zuerst einen Standardimport als Texture2D prüfen

Nutze ein repräsentatives Asset, bevor du einen ganzen Icon-Ordner änderst. Wähle eine Form mit einer gebogenen Kante, einer schmalen Lücke und kleinen Details, die in der Oberfläche wichtig sind.

1. Lege das SVG im Projekt ab und wähle es im FileSystem-Dock aus.
2. Öffne das Import-Dock und bestätige, dass der Importtyp Texture2D ist.
3. Prüfe SVG > Scale und Process > Size Limit und importiere nach einer Optionsänderung erneut.
4. Platziere die Textur im vorgesehenen Sprite oder UI-Element und prüfe ihre Anzeigegröße.

SVG > Scale ändert die Rasterisierungsgröße; ein höherer Wert erzeugt ein größeres Bild. Er beeinflusst auch die Größe der Textur in 2D. Prüfe daher nach einer Änderung die Knoten- oder Layoutabmessungen. Process > Size Limit kann die importierten Abmessungen begrenzen. Beide Regler beschreibt die Referenz zum Texturimporter.

Ein einfaches Größenbeispiel: Ein 32 Pixel breites Raster, das über 128 Bildschirmpixel angezeigt wird, wird vergrößert. Die Vektorkurven der Vorlage ergänzen dieses bereits importierte Raster nicht um neue Pixel. Erzeuge entweder eine für diese Verwendung geeignete Textur oder teste DPITexture, wenn Oversampling zur Oberfläche passt.

Erhöhe nicht bei jedem SVG den Maßstab um einen beliebig großen Faktor. Ermittle zuerst die größte tatsächliche Verwendung und prüfe anschließend auch die kleinste. Eine Ressource, die in einer großen Inventarvorschau gut aussieht, kann auf einer winzigen Schaltfläche eine schmale Lücke verlieren.

DPITexture mit den passenden Oversampling-Einstellungen verwenden

Um den anpassungsfähigen Weg zu testen, wähle das SVG im FileSystem-Dock aus, ändere seinen Importtyp auf DPITexture und importiere es erneut. Nutze dieselbe Platzierung in der Oberfläche, damit der Vergleich eine konkrete Frage beantwortet: Behebt der andere Rasterisierungsweg die Abweichung bei den vorgesehenen Maßstäben?

DPITexture behält SVG-Quelldaten und kann ein zum Oversampling passendes Raster erzeugen. base_scale steuert den Maßstab der Ausgangstextur; dadurch wird die Ressource nicht zu bearbeitbaren Szenenpfaden. Siehe die Dokumentation der Klasse DPITexture.

Prüfe zwei Skalierungsfälle:

• Viewport-Skalierung: Godots Bild-Oversampling kann die Vektorvorlage neu rendern, wenn sich der Skalierungsfaktor des Viewports ändert. Aktiviere es für ein SVG, indem du das Bild als DPITexture importierst.
• Knotenskalierung: Oversampling anhand der Scale eines Node2D oder Control ist standardmäßig deaktiviert. Aktiviere Oversampling with Scale am betreffenden Knoten, wenn du dieses Verhalten brauchst.

Godots Anleitung zum Oversampling erklärt diesen Unterschied. Sie weist außerdem darauf hin, dass häufige Skalierungsänderungen CPU-Arbeit erfordern können, weil die Textur erneut gerendert wird. Teste animierte Skalierung in der auszuliefernden Szene, bevor du die Option breit einsetzt.

Der 2D-Editor kann beim Zoomen automatisch neu abtasten und bietet dadurch eine hilfreiche Vorschau. Starte zusätzlich das Projekt und teste sein tatsächliches Viewport-Verhalten. Im Streckmodus Viewport wird die Szene zunächst in der Basisgröße des Viewports gezeichnet und anschließend auf das Fenster skaliert; diese abschließende Skalierung kann weiterhin das Aussehen der Oberfläche bestimmen. Die Dokumentation zu Streckmodi beschreibt den Unterschied zum Modus Canvas Items.

Grafik vorbereiten, die Godot reproduzieren kann

Eine Änderung des Importers löst ein Problem mit der Darstellungsgröße. Fehlende Objekte oder eine veränderte Silhouette verlangen eine Prüfung der Ausgangsgrafik.

Nach tatsächlichen Pfaden suchen

Öffne das SVG in einem Vektoreditor und wähle die sichtbare Grafik aus. Wenn das gesamte Icon aus einer einzelnen platzierten Bitmap besteht, gehe dem nach, bevor du Godot anpasst. Das SVG-Element <image> kann Rasterinhalte enthalten, wie die MDN-Elementreferenz erklärt. Das erneute Rastern einer solchen Hülle rekonstruiert keine sauberen Kurven, die ein kleines eingebettetes PNG nie enthielt.

Nutze die Checkliste für eingebettete Rasterbilder, um platzierte Pixel von bearbeitbaren Formen zu unterscheiden. Wenn eine Vektormasterdatei existiert, exportiere daraus. Wenn du ein Set vorbereitest, halte Zeichenfläche und Innenabstände mit der SVG-Anleitung für UI-Kits einheitlich.

Dekorative Schrift in Pfade umwandeln

Godots SVG-Importer rendert keinen bearbeitbaren SVG-Text. Wandle dekorative Schrift in der Auslieferungskopie in Pfade um und behalte eine Masterdatei mit bearbeitbarem Text. In Inkscape heißt der entsprechende Befehl Path > Object to Path. Godot beschreibt den Vorgang unter SVG-Bilder mit Text importieren.

Für eine Schaltflächenbeschriftung, die lokalisiert oder häufig bearbeitet werden muss, behalte die Beschriftung als Oberflächentext und importiere das Icon separat. Eine ganze Oberfläche in Pfade umzuwandeln würde spätere Änderungen erschweren.

Komplexe Effekte separat testen

Godot verwendet ThorVG zum SVG-Rendering. Der SVG-Interpreter von ThorVG hat einen definierten Unterstützungsumfang; die SVG-Übersicht nennt Animation, Interaktivität und Multimedia als nicht unterstützte Funktionen. Allgemeine Fähigkeiten der ThorVG-Engine garantieren nicht, dass eine bestimmte SVG-Funktion über Godots Importer funktioniert.

Wenn ein Abzeichen ein Detail verliert, vergleiche das exportierte SVG mit einer Kopie aus einfachen gefüllten Formen. Ergänze benötigte Effekte einzeln. Behalte einen Rasterexport, wenn er komplexe Grafik zuverlässiger erhält und das Projekt keine skalierbaren Ausgangsformen braucht.

Vereinfache keine schmale Öffnung weg, nur um die Datei weniger komplex zu machen. Der Abnahmetest ist die gewünschte Silhouette einschließlich ihrer Negativräume.

Die erste sichtbare Abweichung untersuchen

Notiere Quelldatei, Importtyp, SVG-Skalierung, Knotenskalierung, Viewport-Einstellungen und erwartete Anzeigegröße. Ändere anschließend die zum Symptom passende Einstellung.

In Godot 4 wird die 2D-Texturfilterung über CanvasItem-Eigenschaften mit einem Projektstandard eingestellt. Eine ältere Anleitung verweist womöglich auf eine Importeinstellung, die dort nicht mehr hingehört. Das Handbuch zum Bildimport dokumentiert die Änderung. Filterung kann das Aussehen vorhandener Pixel ändern; sie repariert keine fehlenden Details in der Vorlage.

Für Unschärfe, die auch außerhalb von Godot auftritt, folge der allgemeinen Diagnose pixeliger SVGs. Sie hilft dir zu erkennen, ob die schlechte Kante bereits vorliegt, bevor die Engine die Datei verarbeitet.

Das Icon in seiner tatsächlichen Oberfläche abnehmen

Teste die kleinste und größte vorgesehene Icon-Platzierung auf hellem und dunklem Hintergrund. Prüfe die Kurve, die schmalste Lücke und die Transparenz an der Kante. Ändere die Größe des laufenden Fensters, betätige vorhandene UI-Skalierungsregler und teste Animationen der Knotenskalierung, falls die Oberfläche sie verwendet.

Wiederhole die Prüfung in einem Build für die Zielplattform. Bewahre die gewählten Importeinstellungen beim Quellasset auf, damit andere Mitwirkende das Ergebnis reproduzieren können. Teste bei einem Icon-Set mehr als die einfachste Silhouette: Nimm das detailreichste Icon und das mit dem dünnsten wichtigen Detail hinzu.

Eine kleine SVG-Quelldatei belegt keinen geringeren GPU-Speicherverbrauch. Beide hier beschriebenen Wege erzeugen Rastertexturen für die Anzeige. Messe die importierten Ressourcen und die tatsächliche Szene, wenn Speicher oder Frame-Zeit die Wahl bestimmen.

So funktioniert es mit PerfectVector

PerfectVector passt vor den Godot-Import, wenn deine einzige Vorlage ein flächiges PNG oder JPG ist und du bearbeitbare SVG-Formen brauchst. Lade ein repräsentatives Icon in PerfectVectors Bild-zu-Vektor-Konverter hoch, vergleiche nachgezeichnete Kontur und innere Lücken mit dem Original und prüfe das heruntergeladene SVG, bevor du den Godot-Importtyp wählst.

Akzeptiere die Nachzeichnung erst, wenn die Form stimmt. Entferne eine unerwünschte Hintergrundform, prüfe, ob gewünschte Bereiche bearbeitbar bleiben, und bestätige, dass kleine Öffnungen die Bereinigung überstehen. Führe anschließend dieselben Größen- und Oversampling-Prüfungen in Godot durch wie bei einem vorhandenen SVG.

Behalte Fotos, weiche gemalte Effekte und bewusste Pixel-Art als Rasterbilder, wenn das dem gewünschten Ergebnis entspricht. Ein einfaches geometrisches Icon lässt sich möglicherweise leichter direkt zeichnen. Nachzeichnen hilft beim Rekonstruieren von Ausgangsformen; es konfiguriert weder Godots Importer noch validiert es das fertige Spiel.

FAQ

Kann Godot SVG-Dateien importieren? Ja. Der Standardimport als Texture2D rastert ein SVG beim Importieren. Der aktuelle Importer bietet außerdem DPITexture für SVG-Bilder, die mit Oversampling erneut gerastert werden sollen. Prüfe die Dokumentation für deine Projektversion; DPITexture ist als experimentell gekennzeichnet.

Warum ist mein SVG in Godot unscharf? Prüfe, ob ein festes importiertes Raster größer als seine Pixelabmessungen angezeigt wird. Prüfe auch Viewport-Streckung, Filterung, Oversampling für die Knotenskalierung und eingebettete Rasterinhalte. Behebe die Ursache, bevor du die Vorlage nachzeichnest oder ersetzt.

Erhält DPITexture bearbeitbare SVG-Pfade in der Szene? Es behält die SVG-Quelle zum erneuten Rastern, ist aber eine Texturressource. Sein Import liefert weder einen Arbeitsablauf zur Pfadbearbeitung in der Szene noch automatisch die benötigte Kollisionsgeometrie für dein Spiel.

Quellen

1. Godot — Bilder importieren — Definiert SVG-Importtypen, Textvorbereitung, Renderer-Grenzen und Texturfiltereinstellungen.
2. Godot — DPITexture — Dokumentiert Vererbung, erhaltene SVG-Quelle, Skalierung und experimentellen Status.
3. Godot — Mehrere Auflösungen — Erklärt Viewport-Streckung, Bild-Oversampling, Knotenskalierungseinstellungen und Kosten wiederholter Rasterisierung.
4. Godot — ResourceImporterTexture — Beschreibt Rastermaßstab und Größenbegrenzung für den Standard-Texturimporter.
5. ThorVG — Über ThorVG — Definiert den Unterstützungsumfang des SVG-Interpreters.
6. MDN — SVG-Element image — Erklärt, wie ein SVG Rastergrafik enthalten kann.

---

Wenn dein Godot-Icon als flächiges PNG oder JPG vorliegt und bearbeitbare Formen benötigt, wandle dein Bild mit PerfectVector um. Prüfe Silhouette, kleine Lücken und unerwünschte Hintergrundpfade und teste das SVG anschließend in den Anzeigegrößen und Skalierungseinstellungen deines Projekts.