Attention: Here be dragons

This is the latest (unstable) version of this documentation, which may document features not available in or compatible with released stable versions of Godot.

Checking the stable version of the documentation...

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

The icons must be created in a vector graphics editor in SVG format. There are three main requirements to follow:

  • 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.

  • If the user has configured their editor to use a light theme, Godot will convert the icon's colors based on a set of predefined color mappings. This is to ensure the icon always displays with a sufficient contrast rate. Try to restrict your icon's color palette to colors found in the list above. Otherwise, your icon may become difficult to read on a light background.

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.

Tipp

You can also browse all existing icons on the Godot editor icons website.

Import options for custom icons

For custom icons that are present in projects (as opposed to the engine source code), there are two import options you should enable:

Scaling for hiDPI displays

Icons need to be scaled properly on hiDPI displays to ensure they remain crisp and large enough to be readable.

To ensure the icon is rendered at a correct scale on hiDPI displays, select the SVG file in the FileSystem dock, enable the Editor > Scale with Editor Scale option in the Import dock and click Reimport. Note that this option is only available for icons in SVG format, as it requires the use of a vector format to work.

Farbkonvertierung für helle Editor-Themes

To ensure the icon has its colors converted when the user is using a light theme, select the SVG file in the FileSystem dock, enable the Editor > Convert Colors with Editor Theme option in the Import dock and click Reimport. Note that this option is only available for icons in SVG format, as it requires the use of a vector format to work.

Icon-Optimierung

Because the editor renders SVGs once at load time, they need to be small in size so they can be efficiently parsed. When the pre-commit hook runs, it automatically optimizes the SVG using svgo.

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.

For specific instructions on how to create module icons, refer to Creating custom module 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. The svg module is enabled at compile-time (it is enabled by default). Without this module, icons won't appear in the editor at all.

Referenzen