GUI Aussehen

Oh, wunderschöne GUI!

In dieser Anleitung geht es um das erweiterte Aussehen einer Benutzeroberfläche. Die meisten Spiele benötigen dies im Allgemeinen nicht, da sie sich nur auf Folgendes verlassen Label, TextureRect, TextureButton und TextureProgress.

Viele Arten von Spielen benötigen jedoch häufig komplexe Benutzeroberflächen, wie MMOs, traditionelle Rollenspiele, Simulationen, Strategiespiele usw. Diese Arten von Schnittstellen sind auch in einigen Spielen üblich, wie Editoren zum Erstellen von Inhalten oder Schnittstellen für die Netzwerkverbindung.

Die Benutzeroberfläche von Godot verwendet diese Art der Steuerung mit dem Standardthema, sie kann jedoch so gestaltet werden, dass sie so ziemlich jeder Art von Benutzeroberfläche ähnelt.

Designvorlagen (Thema)

Das Aussehen der GUI wird durch die Ressource Theme bestimmt. Diese Designvorlage (Thema) enthält alle Informationen, die erforderlich sind, um das gesamte visuelle Design aller Steuerelemente zu ändern. Die Themen-Optionen sind benannt, daher ist es nicht offensichtlich, welcher Name was ändert (besondere im Code), es werden jedoch mehrere Tools hierfür bereitgestellt. Der ultimative Ort, um zu sehen, welche Themen-Optionen wofür zuständig sind, ist die Datei scene/resources/default_theme/default_theme.cpp (diese ist auch immer aktueller als jede Dokumentation). Im weiteren werden die verschiedenen Tools zum Anpassen des Themas erklärt.

Ein Thema kann auf jedes Steuerelement in der Szene angewendet werden. Infolgedessen verwenden auch alle untergeordneten Steuerelemente dasselbe Thema (es sei denn, ein anderes Thema wird weiter unten im Baum angegeben). Wenn ein Wert in einem Thema nicht gefunden wird, wird in Themen weiter oben in der Hierarchie in Richtung der Wurzel gesucht. Wenn nichts gefunden wurde, wird das Standardthema verwendet. Dieses System ermöglicht das flexible Überschreiben von Themen in komplexen Benutzeroberflächen.

Achtung

Verwenden Sie die benutzerdefinierte Themen-Option nicht in den Projekteinstellungen, da Fehler bei der Weitergabe von Themen bekannt sind. Wenden Sie Ihr Thema stattdessen auf die Thema-Eigenschaft des Wurzel-Kontroll-Nodes an. Es wird automatisch auf instanziierte Szenen übertragen. Um korrekte Themen im Editor für instanziierte Szenen zu erhalten, können Sie die Themenressource auch auf den Wurzel-Node der instanziierten Szene anwenden.

Themen-Optionen

Ein Thema bietet folgende Optionen:

  • ** Eine ganzzahlige Konstante **: Eine einzelne numerische Konstante. Wird im Allgemeinen verwendet, um den Abstand zwischen Komponenten oder die Ausrichtung zu definieren.
  • ** Eine Farbe **: Eine einzelne Farbe mit oder ohne Transparenz. Farben werden normalerweise auf Schriftarten und Symbole angewendet.
  • ** Eine Textur **: Ein einzelnes Bild. Texturen werden nicht oft verwendet, aber wenn dies der Fall ist, stellen sie zu wählende Handles oder Symbole in einem komplexen Steuerelement (z. B. einem Dateidialog) dar.
  • ** Eine Schriftart **: Jedem Steuerelement, das Text verwendet, können die zum Zeichnen von Zeichenfolgen verwendeten Schriftarten zugewiesen werden.
  • ** Eine StyleBox **: Stylebox ist eine Ressource, die definiert, wie ein Bedienfeld in verschiedenen Größen gezeichnet wird (weitere Informationen dazu später).

Jede Wahlmöglichkeit (Option) ist verbunden mit:

  • einem Namen (Name der Option)
  • einer Kontrolle (Name der Kontrolle)

ein Beispiel:

var theme = Theme.new()
theme.set_color("font_color", "Label", Color.red)

var label = Label.new()
label.theme = theme
var theme = new Theme();
theme.SetColor("fontColor", "Label", new Color(1.0f, 0.0f, 0.0f));

var label = new Label();
label.Theme = theme;

Im obigen Beispiel wird ein neues Thema erstellt. Die Option "font_color" wird geändert und dann auf ein Label angewendet. Daher ist der Text des Labels (und aller untergeordneten Elemente) rot.

Es ist möglich, diese Optionen zu überschreiben, ohne das Thema direkt und auch nur für ein bestimmtes Steuerelement zu verwenden, indem Sie die Überschreibungs-API verwenden in Control.add_color_override():

var label = Label.new()
label.add_color_override("font_color", Color.red)
var label = new Label();
label.AddColorOverride("fontColor", new Color(1.0f, 0.0f, 0.0f));

In der Inline-Hilfe von Godot (auf der Registerkarte "Skript") können Sie überprüfen, welche Themen-Optionen überschrieben werden können, oder sehen Sie in der Klassenreferenz Control nach.

Anpassen eines Steuerelements

Wenn nur wenige Steuerelemente entworfen werden müssen, ist es häufig nicht erforderlich, ein neues Thema zu erstellen. Steuerelemente bieten ihre Themen-Optionen als spezielle Arten von Eigenschaften an. Wenn diese Option aktiviert ist, wird Folgendes überschrieben:

../../_images/themecheck.png

Wie im obigen Bild zu sehen ist, haben Themen-Optionen kleine Kontrollkästchen. Wenn diese Option aktiviert ist, können sie verwendet werden, um den Wert des Themas nur für dieses Steuerelement zu überschreiben.

Ein Thema erstellen

Der einfachste Weg, ein Thema zu erstellen, besteht darin, eine Themen-Ressource zu bearbeiten. Erstellen Sie ein Thema aus dem Ressourcenmenü; der Editor wird sofort angezeigt. Speichern Sie es anschließend (z.B. mit dem Namen mytheme.theme):

../../_images/sb2.png

Dadurch wird ein leeres Thema erstellt, das später geladen und Steuerelementen zugewiesen werden kann.

Beispiel: eine Schaltfäche entwerfen

Laden Sie diese Assets herunter (skin_assets.zip) und fügen Sie sie Ihrem Projekt hinzu. Öffnen Sie den Themen-Editor, klicken Sie auf "Thema bearbeiten" und wählen Sie "Klassenelemente hinzufügen":

../../_images/themeci.png

Ein Menü wird angezeigt, in dem Sie aufgefordert werden, welche Art von Steuerelement erstellt werden soll. Wählen Sie "Schaltfläche":

../../_images/themeci2.png

Sofort werden alle Optionen für Schaltflächendesigns im Eigenschafteneditor angezeigt, wo sie bearbeitet werden können:

../../_images/themeci3.png

Öffnen Sie unter Styles das Dropdown-Menü "Normal" neben der Stelle, an der wahrscheinlich "null" steht, und erstellen Sie eine "Neue StyleBoxTexture", die Sie dann bearbeiten können. Eine Textur-Stylebox enthält eine Textur und die Größe der Ränder, die beim Strecken der Textur nicht gedehnt werden. Dies wird als Neuner-Muster oder "3x3"-Dehnung bezeichnet:

../../_images/sb1.png

Wiederholen Sie die Schritte und fügen Sie die anderen Assets hinzu. In den Beispieldateien befindet sich kein schwebendes oder deaktiviertes Bild. Verwenden Sie daher dieselbe Stylebox wie im Normalfall. Stellen Sie die mitgelieferte Schriftart als Schaltflächenschriftart ein und ändern Sie die Schriftfarbe in Schwarz. Bald wird Ihre Schaltfläche anders und retro aussehen:

../../_images/sb2.png

Speichern Sie dieses Thema in der .theme Datei. Gehen Sie zum 2D-Editor und erstellen Sie einige Schaltflächen:

../../_images/skinbuttons1.png

Gehen Sie nun zum Wurzel-Node der Szene und suchen Sie die Eigenschaft "theme". Ersetzen Sie sie durch das gerade erstellte Thema. Es sollte so aussehen:

../../_images/skinbuttons2.png

Herzliche Glückwünsche! Sie haben ein wiederverwendbare GUI-Designvorlage bzw. GUI-Thema erstellt!