Up to date

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

Verwendung des Theme-Editors

Dieser Artikel erklärt, wie man mit dem Godot-Editor und seinem Theme-Editor-Tool UI-Themes erstellt und verwaltet. Wir empfehlen, sich mit den Grundlagen des GUI-Skinning/Theming vertraut zu machen, indem Sie Einführung in GUI-Skinning lesen, bevor Sie beginnen.

Der Theme-Editor ist ein Tool im unteren Panel, das automatisch aktiviert wird, wenn eine Theme-Ressource zur Bearbeitung ausgewählt wird. Er enthält die notwendige Benutzeroberfläche zum Hinzufügen, Entfernen und Anpassen von Theme-Typen und -Elementen. Es verfügt über einen Vorschaubereich, in dem Sie Ihre Änderungen live testen können, sowie über ein Dialogfenster, in dem Sie Massenoperationen an den Theme-Elementen durchführen können.

Erstellen eines Themes

Wie jede andere Ressource können Themes direkt im Dateisystem-Dock erstellt werden, indem Sie mit der rechten Maustaste klicken und Neue Ressource... auswählen, dann Theme auswählen und auf Erstellen klicken. Dies ist besonders nützlich für die Erstellung projektweiter Themes.

Themes können auch von jedem Control-Node aus erstellt werden. Wählen Sie einen Control-Node in der Szenenhierarchie aus, dann gehen Sie im Inspektor auf die Property``Theme``. Von dort aus können Sie Neues Theme wählen.

../../_images/new_theme.png

Dadurch wird ein leeres Theme erstellt und der Theme-Editor geöffnet. Beachten Sie, dass die auf diese Weise erstellten Ressourcen standardmäßig mit der Szene verknüpft werden. Verwenden Sie stattdessen das Kontextmenü, um das neue Theme in einer Datei zu speichern.

Während der Theme-Editor die Tools zum Verwalten von Theme-Typen und -Elementen bereitstellt, enthalten Themes auch die Default-Fallback-Schrift, die Sie nur über das Inspektor-Dock bearbeiten können. Das Gleiche gilt für den Inhalt komplexer Ressourcentypen, wie z.B. StyleBoxes und Icons — Sie lassen sich im Inspektor bearbeiten.

../../_images/default_font.png

Übersicht über den Theme-Editor

../../_images/theme_editor.png

Der Theme-Editor besteht aus zwei Hauptteilen. Der Haupteditor für Themes, der sich am unteren Rand des Godot-Editors befindet, soll den Benutzern Tools zum schnellen Erstellen, Bearbeiten und Löschen von Theme-Elementen und -typen an die Hand geben. Er bietet visuelle Tools zum Auswählen und Ändern von Controls und abstrahiert die zugrunde liegenden Theme-Konzepte. Das Dialogfeld Theme-Elemente verwalten ist dagegen auf die Bedürfnisse derjenigen ausgerichtet, die Themes manuell ändern möchten. Er ist auch nützlich, um ein neues Editor-Theme zu erstellen.

Theme-Vorschau

Die linke Seite des Haupteditors enthält eine Reihe von Vorschau-Tabs. Der Tab Default-Vorschau ist standardmäßig sichtbar und enthält die meisten der häufig verwendeten Controls in verschiedenen Zuständen. Die Vorschauen sind interaktiv, so dass auch Zwischenzustände (z. B. Hover) in der Vorschau angezeigt werden können.

../../_images/default_preview.png

Zusätzliche Tabs können aus beliebigen Szenen in Ihrem Projekt erstellt werden. Die Szene muss einen Kontroll-Node als Root haben, um als Vorschau zu funktionieren. Um einen neuen Tab hinzuzufügen, klicken Sie auf den Button Vorschau hinzufügen und wählen Sie die gespeicherte Szene aus Ihrem Dateisystem aus.

../../_images/scene_preview.png

Wenn Sie Änderungen an der Szene vornehmen, werden diese nicht automatisch in die Vorschau übernommen. Um die Vorschau zu aktualisieren, klicken Sie auf den Button "Neu laden" in der Toolbar.

Vorschauen können auch verwendet werden, um schnell den zu bearbeitenden Theme-Typ auszuwählen. Wählen Sie das Picker-Tool aus der Toolbar und bewegen Sie den Mauszeiger über den Vorschaubereich, um die Control-Nodes zu markieren. Hervorgehobene Control-Nodes zeigen ihren Klassennamen an. Wenn Sie auf das hervorgehobene Control klicken, wird es auf der rechten Seite zur Bearbeitung geöffnet.

../../_images/theme_preview_picker.png

Themen-Typen und Elemente

Auf der rechten Seite des Theme-Editors finden Sie eine Liste der in der bearbeiteten Theme-Ressource verfügbaren Theme-Typen sowie den Inhalt des ausgewählten Typs. Die Liste der Elemente des Typs ist in mehrere Tabs unterteilt, die den einzelnen im Theme verfügbaren Datentypen entsprechen (Farben, Konstanten, Stile usw.). Wenn die Option Default anzeigen aktiviert ist, werden für jeden Built-in-Typ die Default-Werte des Themes in grauer Schrift angezeigt. Wenn die Option deaktiviert ist, werden nur die im bearbeiteten Theme selbst verfügbaren Elemente angezeigt.

../../_images/theme_type_editor.png

Einzelne Elemente aus dem Default-Theme können zum aktuellen Theme hinzugefügt werden, indem Sie auf den Button Überschreiben neben dem Element klicken. Sie können auch alle Default-Elemente des ausgewählten Theme-Typs überschreiben, indem Sie auf die Schaltfläche Alle überschreiben klicken. Überschriebene Propertys können dann mit dem Button Element entfernen entfernt werden. Propertys können auch über den Button Element umbenennen umbenannt werden, und vollständig benutzerdefinierte Propertys können der Liste über das Textfeld darunter hinzugefügt werden.

Überschriebene Theme-Elemente können direkt im rechten Panel bearbeitet werden, sofern es sich nicht um Ressourcen handelt. Ressourcen verfügen über rudimentäre Controls, müssen aber stattdessen im Inspektor-Dock bearbeitet werden.

../../_images/theme_item_inspector.png

Styleboxen verfügen über eine einzigartige Funktion, bei der Sie eine einzelne Stylebox aus der Liste anheften können. Die angeheftete Stylebox fungiert als Anführer der Gruppe, und alle Styleboxen desselben Typs werden mit ihr aktualisiert, wenn Sie ihre Propertys ändern. So können Sie die Propertys mehrerer Styleboxen gleichzeitig bearbeiten.

../../_images/theme_pin_the_stylebox.png

Theme-Typen können aus einer Vorschau ausgewählt werden, sie können aber auch manuell hinzugefügt werden. Wenn Sie auf den Plus-Button neben der Typ-Liste klicken, öffnet sich das Menü Elementtyp hinzufügen. In diesem Menü können Sie entweder einen Typ aus der Liste auswählen oder einen beliebigen Namen eingeben, um einen eigenen Typ zu erstellen. Das Textfeld filtert auch die Liste der Control-Nodes.

../../_images/add_item_type.png

Verwalten und Importieren von Elementen

Wenn Sie auf die Button Elemente verwalten klicken, wird das Dialogfeld Themenelemente verwalten angezeigt. Auf dem Tab Elemente bearbeiten können Sie Theme-Typen anzeigen und hinzufügen sowie die Theme-Elemente des ausgewählten Typs anzeigen und bearbeiten.

../../_images/manage_items.png

Sie können hier einzelne Theme-Elemente erstellen, umbenennen und entfernen, indem Sie auf das entsprechende X-Element hinzufügen klicken und den Namen angeben. Sie können auch Theme-Elemente entweder nach ihrem Datentyp (über das Pinselsymbol in der Liste) oder nach ihrer Qualität in großem Umfang löschen. Mit Klassenelemente entfernen werden alle Built-in-Theme-Elemente entfernt, die Sie für einen Control-Node-Typ angepasst haben. Mit Benutzerdefinierte Elemente entfernen werden alle benutzerdefinierten Theme-Elemente für den ausgewählten Typ entfernt. Schließlich werden mit Alle Elemente entfernen alle Elemente des Typs entfernt.

Auf dem Tab Elemente importieren können Sie Theme-Elemente aus anderen Themes importieren. Sie können Elemente aus dem Default-Godot-Theme, dem Godot-Editor-Theme oder einem anderen benutzerdefinierten Theme importieren. Sie können einzelne oder mehrere Elemente importieren und entscheiden, ob Sie deren Daten kopieren oder weglassen wollen. Es gibt mehrere Möglichkeiten, die Elemente auszuwählen und die Auswahl aufzuheben, z.B. von Hand, nach Hierarchie, nach Datentyp und nach allem. Wenn Sie sich dafür entscheiden, die Daten einzuschließen, werden alle Theme-Elemente so, wie sie sind, in Ihr Theme kopiert. Wenn Sie die Daten weglassen, werden die Elemente mit dem entsprechenden Datentyp und Namen erstellt, bleiben aber leer, so dass gewissermaßen eine Vorlage für ein Theme entsteht.

../../_images/import_items.png