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 Dir den Einstieg in das Design der Benutzeroberfläche erleichtern. Du wirst folgendes lernen:

• Die fünf nützlichsten Control-Nodes, um die Benutzeroberfläche Deines Spieles zu erstellen
• Wie man Anchor (Bezugspunkte) in Benutzeroberflächen-Elementen verwendet
• Wie Du Deine Benutzeroberfläche effizient arrangierst indem Du Container verwendest
• 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 deine Oberfläche zu erstellen, verwendest du 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 dein Leben einfach zu machen solltest du so oft wie möglich Control-Nodes verwenden, um deine 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 Du die Grundlagen des Control-Nodes verstanden hast, wird es Dich 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 Dir zu helfen Editor Plugins und Anwendungen zu erstellen.

Für die meisten Spiele benötigst Du 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 kannst Du die Farbe des TextureRect modulieren. Klicke auf die Modulate Eigenschaft und verwende die Farbpipette.

TextureRect moduliert mit einer roten Farbe

TextureButton (Textur-Knopf)

TextureButton is like TextureRect, except it has 6 texture slots: one for each of the button's states. Most of the time, you'll use the Normal, Pressed, and Hover textures. Focused is useful if your interface listens to the keyboard's input. The sixth image slot, the Click Mask, lets you define the clickable area using a 1-bit, pure black and white image.

In der Button Sektion findest du 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. Setzt du sie auf Radial, lassen dich die Initial Angle und Fill Degrees Eigenschaften die Reichweite der Spur begrenzen.

Um den Balken zu animieren, wirf einen Blick auf die "Range" Sektion. Setze die Min und Max Eigenschaften um die Länge der Skala zu definieren. Um Beispielsweise einen Lebensbalken darzustellen, sollest du Min auf 0, und Max auf die maximalen Leben des Charakters setzen. Ändere die Value Eigenschaft um den Balken zu aktualisieren. Wenn du Min und Max auf ihren Werten 1 und 100 lässt, und Value auf den Wert 40 stellst, werden 40% der Progress Textur angezeigt und 60% bleiben verborgen.

TextureProgress Balken, zwei drittel gefüllt

Label

Label gibt Text an den Monitor aus. Du findest all seine Eigenschaften in der Label Sektion, im Inspektor. Schreibe den Text in die Text Eigenschaft und aktiviere Autowrap wenn du möchtest das die Größe der Textbox vom Text bestimmt wird. Wenn Autowrap nicht aktiv ist, kannst du diese Node nicht skalieren. Du kannst den Text mit 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 du die Textur skalierst, es skaliert jedoch niemald die Ecken. Hilfreich um Paneele, Dialogboxen und skalierbare Hintergründe für deine 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. Du hast viele Container Nodes zur Verfügung, welche für dich UI Elemente skalieren und platzieren. Sie übernehmen die Kontrolle über ihre Children.
2. Auf der anderen Seite hast du das Layout Menü. Es hilft dir beim verankern, platzieren und verändern der Größe eines UI Elementes innerhalb seines Parent.

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

Während du Benutzeroberflächen für deine Spiele und Tools erschaffst wirst du 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 du eine Control Node auswählst, 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 du eine Control Node auswählst.

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 wirst du die Seitenränder häufig von Containern aktualisieren lassen

Seitenränder ändern sich mit dem Anker

Seitenränder werden automatisch aktualisiert, wenn du eine Control Node bewegst oder die Größe änderst. 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 deine 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

Versuche die Anker zu ändern, oder verschachtele deine Control Nodes innerhalb von Containern: die Seitenränder werden aktualisiert. Nur selten musst die Seitenränder manuell editieren. Versuche immer zunächst einen Container zu finden der dir hilft; Godot kommt mit Nodes für alle Normalfälle. Du brauchst Platz zwischen dem Lebensbalken und dem Rand des Bildschirms? Verwende den MarginContainer. Du möchtest ein vertikales Menü bauen? Verwende 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 du die "Fill" Einstellung zur Horizontal oder Vertikal Eigenschaft hinzufügst, 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

Du wirst etwas Übung brauchen um die Größen Einstellungen zu verstehen, da ihr Effekt ziemlich stark variieren kann, je nachdem wie du deine Benutzeroberfläche gestaltest.

Arrangiere Control Nodes automatisch mit Containern

Container arrangieren alle children Control Nodes automatisch, inklusive andere Container in Reihen, Spalten und mehr. Benutze sie um Polster um deine Oberfläche zu legen, oder zentriere Nodes in ihrem Begrenzungsrechteck. Alle eingebauten Container aktualisieren im Editor, du kannst 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 du Werkzeuge baust, benötigst du möglicherweise alle Container. Für die meisten Spiele aber sind eine handvoll ausreichend:

• MarginContainer, um Seitenränder um Teile der Benutzeroberfläche zu legen
• 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 du möchtest dass die Optionen in der Mitte des Ansichtsfensters bleiben. Da es alles zentriert, möchtest du oft einen einzigen Container darin verschachtelt. Wenn du 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. Verwende einen MarginContainer der die gesamte Ansicht umschließt, um einen Abstand zwischen den Kanten des Fensters und der Benutzeroberfläche zu erhalten. Du kannst einen Seitenrand oben, links, rechts oder unter am Container einstellen. Du musst die Checkbox nicht aktivieren, klicke auf das jeweilige Wertefeld und tippe 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. Du kannst die BoxContainer Node selbst nicht verwenden, denn sie fungiert nur als Hilfsklasse, aber du kannst vertikale und horizontale BoxContainer verwenden. Sie 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 du sie zu deinem eigentlichem Inhalt hin verschachteln kannst.

Der HBoxContainer arrangiert Benutzeroberflächen Elemente horizontal

VBoxContainer arrangieren ihre children automatisch in Spalten. Es platziert sie eines nach dem anderen. Wenn du den seperation Parameter benutzt, 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 dich Benutzeroberflächen Elemente in einem Gitter ähnlichem Muster arrangieren. Du kannst nur kontrollieren wie viele Spalten er hat und er wird die Anzahl der Reihen selbst festlegen, basierend auf der Anzahl seiner children. Wenn du neun children hast, und drei Spalten, wirst du 9÷3 = 3 Reihen erhalten. Füge weitere drei children hinzu und du erhältst vier Reihen. Mit anderen Worten, er erschafft neue Reihen wenn du mehr Texturen und Buttons hinzu fügst. 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 du fortgeschrittenere Oberflächen kreierst, wende dich GUI section in der Dokumentation zu.