Up to date

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

Editor-Icons

Wenn eine neue Klasse erstellt und der Skripterstellung zugänglich gemacht wird, zeigt die Benutzeroberfläche des Editors sie mit einem Default-Icon an, das die Basisklasse darstellt, von der sie erbt. In den meisten Fällen ist es dennoch empfehlenswert, Icons für neue Klassen zu erstellen, um die Benutzerfreundlichkeit zu verbessern.

Icons erstellen

Um neue Icons zu erstellen, muss zunächst ein Vektorgrafik-Editor installiert sein. Zum Beispiel können Sie den Open-Source Editor Inkscape verwenden.

Klonen Sie das godot-Repository mit allen Editor-Icons:

git clone https://github.com/godotengine/godot.git

Die Icons müssen in einem Vektorgrafik-Editor im SVG-Format erstellt werden. Es sind zwei Hauptanforderungen zu beachten:

  • Icons müssen 16×16 sein. In Inkscape können Sie die Dokumentgröße unter Datei -> Dokumenteigenschaften konfigurieren.

  • Linien sollten nach Möglichkeit auf Pixel ausgerichtet werden, um bei niedrigeren DPI-Werten scharf zu bleiben. Um dies zu vereinfachen, können Sie in Inkscape ein 16×16-Raster erstellen.

Wenn Sie mit dem Design des Icons zufrieden sind, speichern Sie das Icon im Ordner editor/icons des geklonten Repositorys. Der Name des Icons sollte mit dem beabsichtigten Namen übereinstimmen, wobei Groß- und Kleinschreibung zu beachten sind. Um zum Beispiel ein Icon für CPUParticles2D zu erstellen, nennen Sie die Datei CPUParticles2D.svg.

Farbkonvertierung für helle Editor-Themes

Wenn der Benutzer seinen Editor so konfiguriert hat, dass er ein helles Theme verwendet, konvertiert Godot die Farben des Icons auf der Grundlage eines Satzes von vordefinierten Farbzuordnungen. Dadurch wird sichergestellt, dass das Icon immer mit einem ausreichenden Kontrastverhältnis angezeigt wird. Versuchen Sie, die Farbpalette Ihres Icons auf die Farben aus der obigen Liste zu beschränken. Andernfalls kann Ihr Icon auf einem hellen Hintergrund schwer zu lesen sein.

Icon-Optimierung

Da der Editor SVGs einmalig zur Ladezeit rendert, müssen sie klein sein, damit sie effizient geparst werden können. Editor-Icons müssen zuerst optimiert werden, bevor sie der Engine hinzugefügt werden. Um dies zu tun:

  1. Installieren Sie svgcleaner, indem Sie eine Binärdatei vom Tab Releases herunterladen und an einem Ort in Ihrer PATH-Umgebungsvariablen ablegen.

  2. Führen Sie den folgenden Befehl aus und ersetzen Sie vg_source.svg durch den Pfad zu Ihrer SVG-Datei (dies kann ein relativer oder absoluter Pfad sein):

    svgcleaner --multipass svg_source.svg svg_optimized.svg

Das Argument --multipass verbessert die Komprimierung, stellen Sie also sicher, dass es aktiviert ist. Das optimierte Icon wird unter dem Namen svg_optimized.svg gespeichert. Sie können auch den Ziel-Parameter in einen beliebigen relativen oder absoluten Pfad ändern, den Sie wünschen.

Bemerkung

Während dieser Optimierungsschritt die Qualität des Icons nicht merklich beeinträchtigt, werden dennoch Informationen, die nur für den Editor bestimmt sind, wie z.B. Hilfslinien, entfernt. Daher ist es empfehlenswert, das Quell-SVG zu behalten, wenn Sie weitere Änderungen vornehmen müssen.

Einfügen und teilen von Icons

Wenn Sie an der Engine selbst mitarbeiten, sollten Sie einen Pull Request stellen, um optimierte Icons zu editor/icons im Haupt-Repository hinzuzufügen. Kompilieren Sie die Engine neu, damit sie neue Icons für Klassen berücksichtigt.

Es ist auch möglich, benutzerdefinierte Icons innerhalb eines Moduls zu erstellen. Wenn Sie Ihr eigenes Modul erstellen und nicht vorhaben, es in Godot zu integrieren, müssen Sie keinen separaten Pull Request für Ihre Icons erstellen, damit sie im Editor verfügbar sind, da sie in sich geschlossen sein können.

Spezielle Anweisungen zum Erstellen von Modul-Icons finden Sie unter Erstellen von benutzerdefinierten Modul-Icons.

Fehlersuche

Wenn die Icons nicht im Editor angezeigt werden, stellen Sie sicher, dass:

  1. Der Dateiname jedes Icons den zuvor beschriebenen Namensanforderungen entspricht.

  2. modules/svg aktiviert ist (es sollte standardmäßig aktiviert sein). Ohne sie werden die Icons im Editor überhaupt nicht angezeigt.

Referenzen