Benutzeroberflächen gestalten mit Kontroll-Nodes

Monitore, Displays und Fernseher existieren in allen Formen und Größen. Um ein Spiel zu veröffentlichen, muss es verschiedene Bildschirmseitenverhältnisse und -auflösungen unterstützen. Es kann schwierig sein adaptive Benutzeroberflächen zu erstellen, welche sich an alle Plattformen anpassen. Glücklicherweise kommt Godot mit robusten Werkzeugen, um adaptive Benutzeroberflächen zu gestalten und zu verwalten.

Der Godot Editor wurde mittels Godots UI-Framework erstellt.

Dieses Anleitung wird Ihnen den Einstieg in das Design der Benutzeroberfläche erleichtern. Sie werden folgendes lernen:

• Die fünf nützlichsten Control-Nodes, um die Benutzeroberfläche Ihres Spieles zu erstellen

• Wie man Anchor (Bezugspunkte) in Benutzeroberflächen-Elementen verwendet

• So platzieren und ordnen Sie Ihre Benutzeroberfläche effizienter mithilfe von Containern

• Die fünf häufigsten Container (mehr dazu in der Dokumentation unter GUI Containers).

Um zu lernen, wie man Benutzeroberflächen anlegt und diese mit Code verknüpft, lies Build your first game UI in Godot.

Um Ihre Oberfläche zu erstellen verwenden Sie Control-Nodes. Diese Nodes werden mit grünen Icons im Editor dargestellt. Es gibt Dutzende von ihnen, um alles Mögliche darzustellen wie Lebensleisten und komplexe Anwendungen. Godots Editor selbst ist mit diesen Control-Nodes gebaut.

Control-Nodes haben einzigartige Eigenschaften, die es erlauben gut miteinander zu arbeiten. Andere visuelle Nodes wie Node2D und Sprite haben diese Fähigkeiten nicht. Um Ihr Leben einfach zu machen sollten Sie so oft wie möglich Control-Nodes verwenden, um Ihre Oberfläche zu erstellen.

Alle Control-Nodes teilen die selben Haupteigenschaften:

1. Anchor (Bezugspunkte)

2. Bounding rectangle (Begrenzungsrahmen)

3. Focus and focus neighbor (Fokus und Fokus Nachbar)

4. Size flags (Größeneinstellungen)

5. Margin (Außenabstand)

6. Das optionale Benutzeroberflächen-Thema

Wenn Sie die Grundlagen des Control-Nodes verstanden haben, wird es Sie weniger Zeit kosten all die Nodes zu erlernen die davon abstammen.

Die 5 häufigsten UI Elemente

Godot wird mit dutzenden Control-Nodes geliefert. Viele von ihnen sind da, um Ihnen zu helfen Editor Plugins und Anwendungen zu erstellen.

Für die meisten Spiele benötigen Sie nur fünf Arten von UI Elementen und ein paar Container. Diese fünf Control-Nodes sind:

1. Label: um Text darzustellen

2. TextureRect: hauptsächlich für Hintergründe oder statische Bilder

3. TextureProgress: für Lebensanzeigen, Ladebalken, horizontal, vertikal oder radial

4. NinePatchRect: für skalierbare Paneele

5. TextureButton: um Schaltflächen zu erstellen

Die 5 häufigsten Control-Nodes für UI Design

TextureRect (Textur-Rechteck)

TextureRect zeigt eine Textur oder ein Bild innerhalb einer Benutzeroberfläche an. Es scheint dem Sprite-Node ähnlich zu sein, bietet jedoch mehrere Skalierungsmodi. Lege die Stretch-Mode-Eigenschaft fest, um sein Verhalten zu ändern:

• Scale on Expand (compat) skaliert die Textur um sich an den Begrenzungsrahmen des Nodes anzupassen, allerdings nur wenn die expand Eigenschaft true ist; ansonsten verhält es sich wie der Keep Modus. Dem Standardmodus für Abwärtskompatibilität.

• Scale skaliert die Textur, um sich dem Begrenzungsrahmen des Nodes anzupassen.

• Tile wiederholt die Textur, sie wird allerdings nicht skaliert.

• Keep und Keep Centered zwingt die Textur ihre ursprüngliche Größe beizubehalten und platziert sie in der linken oberen Ecke bzw. in der Mitte des Rahmens.

• Keep Aspect und Keep Aspect Centered skaliert die Textur, aber erzwingen das originale Seitenverhältnis und platziert sie in der linken oberen Ecke bzw. in der Mitte des Rahmens.

• Keep Aspect Covered funktioniert genau wie Keep Aspect Centered allerdings wird die kürzere Seite in den Begrenzungsrahmen eingepasst und die längere an der Node-Begrenzung abgeschnitten.

Wie mit Sprite Nodes können Sie die Farbe des TextureRect modulieren. Klicken Sie auf die Modulate Eigenschaft und verwende die Farbpipette.

TextureRect moduliert mit einer roten Farbe

TextureButton (Textur-Knopf)

TextureButton ist wie TextureRect, außer dass er 5 Textur Slots hat: einen für jeden Button Status. Meistens werden Sie die Texturen Normal, Pressed und Hover verwenden. Focused ist hilfreich wenn Ihre Benutzeroberfläche Tasteneingaben erwartet. Der sechste Textur Slot, die Click Mask, lässt Sie mithilfe eines 1-bit Schwarz-Weiß Bildes die anklickbare Fläche definieren.

In der Button Sektion finden Sie einige Check-boxen die das Verhalten der Buttons verändern. Wenn der Toggle Mode aktiv ist, wechselt der Button zwischen den Modi active und normal. Disabled deaktiviert den Button standardmäßig und zeigt die Disabled Textur an. TextureButton teilt einige Eigenschaften mit dem TextureFrame: er hat eine modulate Eigenschaft, um seine Farbe zu ändern, sowie Resize und Stretch Modi um sein skalierungs Verhalten zu ändern.

TextureButton und seine 5 Textur Slots

TextureProgress (Texturfortschritt)

TextureProgress stapelt bis zu 3 Sprite Ebenen um einen Fortschrittsbalken zu erstellen. Die Under und Over Texturen nehmen die Progress Textur in ihre Mitte, wo der Wert des Balkens angezeigt wird.

Die Mode Eigenschaft kontrolliert in welche Richtung der Balken wächst: Horizontal, Vertikal oder Radial. Setzen Sie sie auf Radial, lassen Sie die Initial Angle und Fill Degrees Eigenschaften die Reichweite der Spur begrenzen.

Um den Balken zu animieren, werfen Sie einen Blick auf die "Range" Sektion. Setzen Sie die Min und Max Eigenschaften um die Länge der Skala zu definieren. Um Beispielsweise einen Lebensbalken darzustellen, sollen Sie Min auf 0, und Max auf die maximalen Leben des Charakters setzen. Ändern Sie die Value Eigenschaft um den Balken zu aktualisieren. Wenn Sie Min und Max auf ihren Werten 1 und 100 lassen und Value auf den Wert 40 stellen, werden 40% der Progress Textur angezeigt und 60% bleiben verborgen.

TextureProgress Balken, zwei drittel gefüllt

Label

Label gibt Text an den Monitor aus. Sie finden all seine Eigenschaften in der Label Sektion, im Inspektor. Schreiben Sie den Text in die Text Eigenschaft und aktivieren Autowrap wenn Sie möchten das die Größe der Textbox vom Text bestimmt wird. Wenn Autowrap nicht aktiv ist, können Sie diesen Node nicht skalieren. Sie können den Text horizontal und vertikal mit Hilfe von Align, respektive Valign einrücken.

Bild eines Labels

NinePatchRect (Rechteck)

NinePatchRect teilt eine Textur in 3 Reihen und Spalten. Die Mitte und die Seiten werden gekachelt wenn Sie die Textur skalieren, es skaliert jedoch niemals die Ecken. Hilfreich um Paneele, Dialogboxen und skalierbare Hintergründe für Ihre Benutzeroberfläche zu entwerfen.

NinePatchRect skaliert mit der min_size Eigenschaft

Es gibt zwei Arbeitsroutinen um zugängliche Benutzeroberflächen zu entwerfen

Es gibt zwei Arbeitsroutinen um skalierbare und flexible Benutzeroberflächen mit Godot zu erstellen:

1. Place UI elements precisely with anchors: Use the Layout menu to place and resize a UI element relative to its parent.

2. Arrange control nodes automatically with containers: Use container nodes to automatically scale and place UI elements.

Die beiden Ansätze sind nicht immer miteinander kompatibel. Weil ein Container seine Children kontrolliert, können Sie das Layout-menü nicht für sie verwenden. Jeder Container hat einen spezifischen Effekt, Sie müssen also eventuell mehrere von ihnen verschachteln um eine funktionierende Benutzeroberfläche zu erhalten. Mit dem Layout Ansatz arbeiten Sie sich von den Children aus nach oben. Da Sie keine extra Container zur Szene hinzufügen müssen kann dies zu einer saubereren Hierarchie führen, es ist allerdings schwieriger Dinge in Reihen, Spalten oder Gittern anzuordnen.

Während Sie Benutzeroberflächen für Ihre Spiele und Tools erschaffen werden Sie einen Sinn dafür entwickeln, was in welcher Situation am besten passt.

Platziere UI Elemente präzise mit Ankern

Control Nodes haben eine Position und Größe, aber sie haben außerdem Anker und Seitenränder. Anker definieren den Ursprung oder den Referenzpunkt für die linke, obere, rechte und untere Kante der Node. Ändere einen dieser 4 Anker um den Referenzpunkt des Seitenrandes zu ändern.

Die Anker Eigenschaft

Wie man den Anker ändert

Wie jede Eigenschaft, lassen sich die 4 Anker Punkte im Inspektor editieren, dies ist allerdings nicht die bequemste Möglichkeit. Wenn Sie eine Control Node auswählen, erscheint das Layout Menü über der Hauptansicht in der Werkzeugleiste. Es enthält eine Liste von Symbolen um alle 4 Anker mit einem einzigen Klick zu setzen, anstatt die 4 Eigenschaften im Inspektor zu verwenden. Das Layout Menü erscheint nur wenn Sie eine Control Node auswählen.

Das layout Menü im Ansichtsfenster

Anker sind relativ zum parent Container

Jeder Anker ist ein Wert zwischen 0 und 1. Für den linken und oberen Anker bedeutet ein Wert von 0, dass die Kanten der Node ohne Abstand an der oberen und linken Kante ihres parent platziert wird. Für die rechte und untere Kante bedeutet ein Wert von 1, dass diese Kanten an die rechte und untere Kante des parent Containers angepasst werden. Andererseits repräsentieren margins die Abstände zur Anker Position in Pixeln, während Anker relativ zur Größe des parent Containers sind.

Seitenränder sind relativ zur Anker Position, welche relativ zu den Ankern ist. In der Praxis werden Sie die Seitenränder häufig von Containern aktualisieren lassen

Seitenränder ändern sich mit dem Anker

Seitenränder werden automatisch aktualisiert, wenn Sie eine Control Node bewegen oder die Größe ändern. Sie repräsentieren die Distanz von der Kante der Control Node zu ihrem Anker, welcher relativ zu dem parent Container oder zur Control Node ist. Deshalb sollten Ihre Control Nodes immer in einem Container sein, wie wir gleich sehen werden. Wenn es kein parent gibt, verhalten sich die Seitenränder relativ zum Begrenzungsrechteck der Node, siehe Rect Sektion im Inspektor.

Seitenränder eines CenterContainers auf "Full Rect" Anker gesetzt

Versuchen Sie die Anker zu ändern, oder verschachteln Sie Ihre Control Nodes innerhalb von Containern: die Seitenränder werden aktualisiert. Nur selten müssen Sie die Seitenränder manuell editieren. Versuchen Sie immer zunächst einen Container zu finden der Ihnen hilft; Godot kommt mit Nodes für alle Normalfälle. Sie brauchen Platz zwischen dem Lebensbalken und dem Rand des Bildschirms? Verwenden Sie den MarginContainer. Sie möchten ein vertikales Menü bauen? Verwenden Sie den VBoxContainer. Mehr dazu unten.

Verwende Größenmarkierungen um zu verändern, wie Benutzeroberflächen Elemente den verfügbaren Platz ausfüllen

Jede Control Node hat Größeneinstellungen. Sie sagen Containern wie Benutzeroberflächen Elemente skaliert werden sollen. Wenn Sie die "Fill" Einstellung zur Horizontal oder Vertikal Eigenschaft hinzufügen, wird das Begrenzungsrechteck der Node soviel Platz einnehmen wie möglich, aber es wird weiterhin seine Geschwister respektieren und ihre Größe unverändert lassen. Wenn 3 TextureRect Nodes in einem HBoxContainer sind, und "Fill" für beide Achsen eingestellt ist, wird jedes TextureRect bis zu einem drittel des verfügbaren Platzes einnehmen, aber nicht mehr. Der Container übernimmt die Node und ändert ihre Größe automatisch.

3 Benutzeroberflächen Elemente in einem HBoxContainer, sie reihen sich horizontal auf

Die "Expand" Einstellung lässt ein Benutzeroberflächen Element soviel Platz einnehmen wie möglich, und dabei gegen seine Geschwister zu drücken. Das Begrenzungsrechteck wird gegen die Kanten des parent wachsen, oder bis es von anderen Benutzeroberflächen Nodes blockiert wird.

Das gleiche Beispiel wie oben, diesmal hat die mittlere Node die "Expand" einstellung

Sie werden etwas Übung brauchen um die Größen Einstellungen zu verstehen, da ihr Effekt ziemlich stark variieren kann, je nachdem wie Sie Ihre Benutzeroberfläche gestalten.

Arrangiere Control Nodes automatisch mit Containern

Container ordnen automatisch alle untergeordneten Control Nodes einschließlich anderer Container in Zeilen, Spalten und mehr an. Benutzen Sie sie um Polster um Ihre Oberfläche zu legen, oder zentrieren Nodes in ihrem Begrenzungsrechteck. Alle eingebauten Container aktualisieren im Editor, Sie können den Effekt also sofort sehen.

Container haben einige spezielle Eigenschaften um zu kontrollieren wie Benutzeroberflächen Elemente arrangiert werden. Um sie zu ändern, navigiere nach unten zur Custom Constants Sektion im Inspektor.

Die 5 nützlichsten Container

Wenn Sie Werkzeuge bauen, benötigen Sie möglicherweise alle Container. Für die meisten Spiele aber sind eine handvoll ausreichend:

• MarginContainer, to add margins around parts of the UI

• CenterContainer, um sein children im Begrenzungsrechteck zu zentrieren

• VboxContainer und HboxContainer, um Benutzeroberflächen Elemente in Reihen oder Spalten zu arrangieren

• GridContainer, um Kontroll-Nodes in einem gitterartigen Muster anzuordnen

CenterContainer zentriert alle children innerhalb des Begrenzungsrechtecks. Üblicherweise wird er für Titelbildschirme verwendet, wenn Sie möchten dass die Optionen in der Mitte des Ansichtsfensters bleiben. Da es alles zentriert, möchten Sie oft einen einzigen Container darin verschachtelt. Wenn Sie stattdessen Texturen und Buttons benutzt, stapeln sich diese.

CenterContainer in Aktion. Der Lebensbalken ist im parent Container zentriert.

Der MarginContainer fügt Seitenabstände zu beliebigen Seiten der child Nodes hinzu. Verwenden Sie einen MarginContainer der die gesamte Ansicht umschließt, um einen Abstand zwischen den Kanten des Fensters und der Benutzeroberfläche zu erhalten. Sie können einen Seitenrand oben, links, rechts oder unter am Container einstellen. Sie müssen die Checkbox nicht aktivieren, klicken Sie auf das jeweilige Wertefeld und tippen irgendeine Zahl ein. Die Aktivierung erfolgt automatisch.

Der MarginContainer fügt einen 40px Seitenrand um die Benutzeroberfläche hinzu

Es gibt zwei BoxContainer: VBoxContainer und HBoxContainer. Sie können die BoxContainer Node selbst nicht verwenden, denn sie fungiert nur als Hilfsklasse, aber Sie können vertikale und horizontale BoxContainer verwenden. Diese arrangieren Nodes entweder in Reihen oder Spalten. Verwende sie um Gegenstände in einem Laden auf zu reihen, oder baue komplexe Gitter mit Reihen und Spalten verschiedener Größen, da Sie sie zu Ihrem eigentlichem Inhalt hin verschachteln können.

Der HBoxContainer arrangiert Benutzeroberflächen Elemente horizontal

VBoxContainer arrangieren ihre children automatisch in Spalten. Es platziert sie eines nach dem anderen. Wenn Sie den seperation Parameter benutzen, wird eine Lücke zwischen den children gelassen. HBoxContainer arrangieren Benutzeroberflächen Elemente in einer Reihe. Er ähnelt dem VBoxContainer, mit einer extra add_spacer Methode um eine Spacer Control Node vor seinem ersten oder nach seinem letzten children, aus einem Script heraus hinzu zu fügen.

Der GridContainer lässt lässt Sie die Benutzeroberflächen Elemente in einem Gitter ähnlichem Muster arrangieren. Sie können nur kontrollieren wie viele Spalten er hat und er wird die Anzahl der Reihen selbst festlegen, basierend auf der Anzahl seiner children. Wenn Sie neun children haben, und drei Spalten, werden Sie 9÷3 = 3 Reihen erhalten. Fügen Sie weitere drei children hinzu und Sie erhalten vier Reihen. Mit anderen Worten, er erschafft neue Reihen wenn Sie mehr Texturen und Buttons hinzu fügen. Wie auch der BoxContainer, hat er zwei Eigenschaften um den horizontalen und vertikalen Abstand der Reihen, respektive Spalten einzustellen.

Ein GridContainer mit 2 Spalten. Es legt die Größe jeder Spalte automatisch fest.

Godots Benutzeroberflächen System ist komplex, und hat noch einiges mehr zu bieten. Um zu lernen wie Sie fortgeschrittenere Oberflächen kreieren, wenden Sie sich GUI section in der Dokumentation zu.