Gestaltung der Oberfläche¶
Jetzt, da Sie die Grundlagen drauf haben sehen wir uns an, wie wir die grafische Benutzeroberfläche (engl. Graphical User Interface, kurz GUI) aus wieder verwendbaren Bausteinen erzeugen können: einer Lebensleiste, einer Energieleiste, einer Bombe und einem Smaragdzähler. Am Ende dieser Anleitung werden Sie eine fertige GUI haben, die mit GDScript oder Visualscript gesteuert werden kann:

Das Endergebnis¶
Sie werden hier auch folgendes lernen:
Wie man flexible UI-Komponenten erstellt
Wie man Szenenvererbung benutzt
Wie man eine komplexe UI baut
Lade die Projektdateien herunter: ui_gui_design.zip
und entpacke das Archiv. Importiere das start/`-Projekt in Godot, um dieser Anleitung zu folgen. Der Ordner end/ enthält das fertige Ergebnis.
Bemerkung
Sie können sich diese Anleitung als Youtubevideo anschauen.
Aufbau der UI¶
Schauen wir uns die fertige UI an und planen wir, welche Container wir benutzen werden. Wie beim Erstellung eines Titelbildschirms beginnt es auch hier mit einem MarginContainer
. Dann sehen wir bis zu drei Spalten:
Links die Zähler für Leben und Energie
Die Lebens- und Energieleisten
Rechts die Bomben- und Smaragdzähler
Aber die Leist und ihre Beschriftung sind zwei Teile des gleichen UI-Elements. Wenn wir sie auf diese Weise betrachten, haben wir zwei Spalten:
Links die Lebens- und Energieleisten
Rechts die Bomben- und Smaragdzähler
Das erleichtert die Verschachtelung der Container: Wir haben einen Abstand um den Bildschirmrand dank des MarginContainer
, gefolgt von einem HBoxContainer
, der die beiden Spalten übernimmt. Die beiden Leisten werden in einem VBoxContainer
übereinander gestapelt. Und wir brauchen zuletzt noch einen HBoxContainer
in der rechten Spalte, wo sich die Zähler für Bomben und Smaragde nebeneinander befinden.

Wir erhalten ein sauberes UI-Layout mit nur vier Containern¶
Wir brauchen zusätzliche Container in den einzelnen UI-Komponenten, aber so haben wir die grobe Struktur der GUI-Szene. Mit diesem Plan im Kopf können wir uns Godot zur Brust nehmen und unsere GUI zusammenbauen.
Erstellen der grundlegenden GUI¶
Es gibt zwei mögliche Herangehensweisen an die GUI: Wir können Elemente in getrennten Szenen entwerfen und zusammenführen oder alles in einer einzigen Szene entwerfen und diese stückweise aufbauen. Ich empfehle mit einer einzigen Szene zu arbeiten, weil man so schneller mit den Abständen und Größenverhältnissen der UI spielen kann. Wenn es dann gut aussieht, kann man ganze Abschnitte des Node-Baums als wiederverwendbare Unterszenen speichern. Das werden wir gleich tun.
Aber fangen wir erst mit einigen Containern an.
Erstellen Sie eine neue Szene und fügen einen MarginContainer
hinzu. Wählen Sie den Node aus und nennen ihn GUI
.
Wir wollen, dass die Oberfläche am oberen Bildschirmrand verankert ist. Wählen Sie den GUI
-Node aus und klicken auf die Schaltfläche Layout oben im Fenster. Wählen Sie die Option Top Wide
. Der Node GUI
wird am oberen Rand seines übergeordneten Elements verankert, standardmäßig dem Ansichtsfenster. Die vertikale Skalierung erfolgt automatisch so, dass für die untergeordneten UI-Komponenten genug Platz vorhanden ist.
Speichere die Szene als GUI.tscn
ab. Die gesamte GUI wird dort hineinkommen.
Wenn der MarginContainer
ausgewählt ist, gehen Sie zum Abschnitt "Custom Constants" im Inspektor. Klappen Sie ihn aus und klicken jeweils auf das Feld neben der Eigenschaft Margin
. Setze alle Werte auf 20
Pixel. Fügen Sie als nächstes einen HBoxContainer
-Node hinzu. Dieser wird unsere beiden Leisten auf der linken Seite beinhalten und sie von den beiden Zählern auf der rechten Seite trennen.
Wir wollen die Leisten senkrecht im HBoxContainer
stapeln. Fügen Sie einen VBoxContainer
als Kind von HBoxContainer
hinzu und nennen ihn Bars
. Wählen Sie den übergeordneten HBoxContainer
wieder aus und fügen diesmal noch einen HBoxContainer
als Kind hinzu. Nennen Sie ihn Counters
. Diese vier Container stellen die Grundlage unserer GUI-Szene dar.

Sie sollten 4 Container haben, die so aussehen¶
Bemerkung
Wir können so vorgehen, weil wir uns vorher kurz Zeit genommen haben, um den Aufbau der UI zu umreißen und die passenden Container auszusuchen. Wenn Sie einer Anleitung wie dieser hier folgen, mag Ihnen das unverständlich vorkommen. Aber wenn Sie erstmal an echten Spielen arbeiten, werden Sie erkennen, dass es eine effiziente Arbeitsweise ist.
Erstellen der Grundlage der Leiste¶
Jede Leiste besteht aus zwei Unterelementen, die waagerecht ausgerichtet sind: die Beschriftung mit dem Gesundheitszähler links und die Anzeige rechts. Abermals ist hier der HBoxContainer
bestens geeignet. Wählen Sie den Node Bars
aus und fügen darin einen neuen HBoxContainer
ein. Nennen Sie ihn Bar
.
Die Beschriftung selbst bedarf mindestens dreier Nodes: ein NinePatchRect
für den Hintergrund, über den wir links eine Textur legen werden, entweder HP
oder EP
, und ein Label
rechts für den Wert. Control
-Nodes können wir verschachteln wie wir wollen. Wir könnten den NinePatchRect
als Eltern-Node für die beiden anderen Elemente wählen, da er sie umfasst. Allgemein sollten Container benutzt werden, da sie dafür da sind, die Organisation der UI-Elemente zu unterstützen. Wir brauchen sowieso später einen MarginContainer
, um etwas Platz zwischen dem Lebenszähler und der Anzeige einzufügen. Wählen Sie die Bar
aus und fügen einen MarginContainer
hinzu. Nennen Sie ihn Count
und fügen darin drei Nodes ein:
Ein
NinePatchRect
namensBackground
Ein
TextureRect
namensTitle
Und ein
Label
namensNumber
Wählen Sie vorher den Node Count
aus, damit sie als Kinder hinzugefügt werden.

Ihr Szenenbaum sollte so aussehen. Wir können nun einige Texturen ins Spiel bringen¶
Unsere Szene ist noch leer. Es wird Zeit, Texturen ins Spiel zu bringen. Um Texturen zu laden, gehe zum Dateibrowser links vom Hauptfenster. Navigiere dann bis zum Ordner res://assets/GUI folder.

Sie sollten eine Liste an Texturen sehen, die wir über unsere Oberfläche legen werden.¶
Wählen Sie den Background
im Szenenfenster. Im Inspektor sollten Sie die Eigenschaft Texture
sehen. Ziehen Sie label_HP_bg.png
aus dem Dateibrowser in das Textur
-Feld. Es bleibt gequetscht. Der übergeordnete MarginContainer zwingt seine Größe auf 0 herunter bis wir für die untergeordneten Elemente eine minimale Größe erzwingen. Wählen Sie den Node Background
aus. Gehen Sie im Inspektor hinunter zum Bereich Rect. Setzen Sie MinSize
auf (100, 40). Sie sollten sehen wie der Background
seine Größe zusammen mit seinen übergeordneten Containern ändert.
Wählen Sie dann den Title
aus und ziehen label_HP.png
in sein Texture
Feld. Wählen Sie den Number
-Node, klicken auf das Feld neben der Eigenschaft Text
und gebe 10
ein. Auf diese Weise können wir beide Nodes im Fenster sehen. Sie sollten sich links oben in der Ecke ihres übergeordneten MarginContainer
anordnen.

Wenn Sie beide Nodes auswählen, sollten Sie so etwas in der Art sehen¶
Da sie einen Container als direktes Elternobjekt haben, können wir sie nicht frei bewegen: das Count
-Node setzt ihre Anker sowie Größe und Position immer wieder zurück. Versuchen Sie die Nodes im Fenster umherzubewegen und ihre Größe zu ändern. Wählen Sie dann eine der drei Texturen aus und drücken Strg + Hoch oder Strg + Runter, um sie im Szenenfenster anders anzuordnen. Sie springen zurück zu ihren ursprünglichen Größen und Positionen.
Übergeordnete Container geben die Größe, Verhältnisse, Ränder und Anker ihrer unmittelbaren Kinder vor. Um die Nodes zu bearbeiten müssen Sie sie in einem gewöhnlichen Control- oder einem anderen UI-Element verschachteln. Wir werden den Background
als Elter für den Titel
und Number
. Wählen Sie Title
und Number
beide aus und ziehen sie auf Background
.

Indem wir den Background-Node als Elter der beiden Texturen benutzen, entziehen wir dem Count-MarginContainer die Kontrolle¶
Wählen Sie den Title
und änderen Sie seine Eigenschaft Stretch Mode
im Inspektor zu Keep Centered
. Finden Sie danach die Kategorie Rect
im Inspektor und änderen Sie die Eigenschaft Size
zu (50, 40), damit er nur die linke Hälfte des Hintergrunds einnimmt. Wählen Sie als nächstes den Node Number
aus. Klicken Sie im Hauptfenster das Layout
-Menü an und klicken auf Full Rect
. Die Größe des Nodes ändert sich und passt seine Größe dem Background
an. Gehen Sie zum Inspector und ändere seine Eigenschaft Align
zu Right
und VAlign
zu Center
. Der Text sollte in der Mitte des rechten Randes von Background
einrasten. Änderen Sie nun die Breite des Nodes, damit er die rechte Hälfte des Background
einnimmt und am rechten Rand noch etwas Raum bleibt.

So sollten die Bounding Boxes der Nodes im Ansichtsfenster aussehen. Vorerst reicht eine grobe Platzierung aus.¶
Ersetzen des Fonts fürs Label¶
Der Font des Labels ist zu klein, wir müssen ihn ersetzen. Wählen Sie den Node Number
und gehen im Inspektor runter zur Control
-Klasse und finden die Kategorie Custom Font
. Klicken Sie auf das Feld neben der Eigenschaft Font
und klicken auf New Dynamic Font
. Klicken Sie nochmals auf das Feld und wählen Edit aus.
Sie müssen die Ressource Dynamic Font
eingeben. Klappen Sie die Kategorie Font
aus und klicken auf das Feld neben Font Data
. Klicken Sie auf die Fläche Load
. Gehen Sie im Dateibrowser herunter zum Ordner assets/font und klicken zweimal auf Comfortaa-Bold.ttf
, um es zu öffnen. Sie sollten im Ansichtsfenster sehen, dass der Font aufgefrischt wird. Klappen Sie das Einstellungsmenü auf, um die Schriftgröße zu ändern. Setzen Sie die Eigenschaft Size
auf einen höheren Wert wie 24
oder 28
.
Nun muss die Grundlinie der Zahl, ihre untere Kante, bündig mit der HP-Textur links abschließen. Dafür können Sie in der Ressource DynamicFont
bleiben und die Eigenschaft Bottom
unter der Kategorie Extra Spacing
abändern. Das fügt etwas Platz unter dem Text hinzu. Klicken Sie auf den Node Number
im Szenenfenster, um zurück zu den Node-Eigenschaften zu kommen, und ändern Valign
zu Bottom
. Um die Grundlinie des Texts anzupassen, klicken Sie wieder auf das Fontfeld unter der Kategorie Custom Font
ändere die Eigenschaft Bottom
bis der Text mit dem Title
-Node abschließt. Wir haben einen Wert von 2
Pixeln eingestellt.

Bei einem unteren Wert von 2 Pixeln ist die Zahl bündig mit dem Titel¶
Damit haben wir den schwierigsten Teil der GUI abgeschlossen. Glückwunsch! Gehen wir weiter zu den einfacheren Nodes.
Hinzufügen der Fortschrittsleiste¶
Wir brauchen ein letztes Element, um unsere Lebensleiste zu vervollständigen: die Anzeige selbst. Godot bietet einen Node namens TextureProgress
, der alles hat was wir brauchen.
Wählen Sie die Leisten Node aus und fügen ihr ein TextureProgress
hinzu. Nennen Sie es Gauge
. In dem Inspector öffnen Sie nun die Textures
Abschnitt. Gehen Sie nun weiter zum FileSystem-Dock und ziehen die Lifebar_bg.png
Textur auf dem Under
slot. Machen Sie das gleiche mit dem lifebar_fill.png
Bild und ziehen es auf den Progress
slot. Nun ändern Sie in der Range
class im Inspektor die Value
Eigenschaft zu 50
um zu sehen, wie sich die Leiste füllt.
Mit nur fünf Control
Nodes ist unsere erste Leiste bereit.

Das war es, unsere Lebensleiste ist bereit. Das ging schnell, oder? Und nur dank unserem robustem Container Setup.¶
Das Design des Bomben- und Smaragdzählers¶
Der Bomben- und der Smaragdzähler sind wie die Count
Node. Also werden wir diese duplizieren und sie als Vorlage nutzen.
Unter der Bar
Node wählen wir nun Count
aus und nutzen die Tastenkombination Strg + D um das Node zu duplizieren. Ziehe das neue Node nun unter Counters
HBoxCointainer
an den unteren Rand des Szenenbaums. Nun sollte sich automatisch die Größe verändern. Keine Sorge, wir kümmern uns später darum.
Benenen Sie die Count2
Node zu Counter
um. Nicht so wie bei den Leisten, wollen wir die Number auf der linken Seite und ein Icon das auf rechten Seite sein soll. Der Aufbau ist der gleiche: Wir brauchen einen Hintergrund (ein NinePatchRect
), den Titel und die Number Nodes. Die Title
Node ist ein TextureRect
, es ist also das, was wir brauchen damit es das Icon anzeigt. Wählen Sie in dem Szenenbaum Title
aus und benennen es zu Icon
um.

So sollten Ihre Nodes bis jetzt aufgebaut sein¶
Wählen Sie die Icon
Node aus und scrollen nach oben um den Texture
Slot zu sehen. Nun gehen Sie zum Dateisystem Bereich auf der linken Seite und ziehe das bombs_icon.png
in den Texture
Slot. In dem Szenenbaum wählen Sie die Icon
und Number
Nodes aus. Klicken Sie auf das Layout-Menu in der Symbolliste oben im Ansichtsfenster und wählen Full Rect
aus. Beide Nodes passen sich nun der Größe von Background
an.

Die Noden sind mit dem gesamten Hintergrund verankert, aber ihre Position stimmt so noch nicht¶
Jetzt ändern wir die Ausrichtungseigenschaften der Number
, um sie mittig links im Background
anzuordnen. Wählen Sie die Number
Node aus, setzen Sie ihre Align
Eigenschaft auf links und die Valign
Eigenschaft auf zentriert. Ändern Sie dann die Größe der linken Kante ein bisschen, um etwas Abstand zwischen den linken Rand des ``Background``s und dem Text zu bekommen.

Der links zentriert ausgerichtete Nummer-Node¶
Damit sich das Icon und der Hintergrund überlappen, müssen wir ein paar Änderungen vornehmen. Erstens ist unser Hintergrund etwas zu groß. Das liegt daran, dass dieser in einem Margin-Container liegt, welcher von der obersten GUI Node kontrolliert wird. Wählen Sie den GUI-Node oben im Szenenbaum aus und reduzieren seine vertikale Größe, damit es so dünn wie möglich wird. Sie werden sehen, dass die Anzeige Sie davon abhält, es zu klein zu machen. Ein Container kann nämlich nicht kleiner sein, als die minimale Größe seiner Kinder. Die Spannweite des Containers spielt ebenfalls eine Rolle.
Wählen Sie das Icon aus, klicken das Layout Menü an und wählen Full Rect
aus um es wieder zu zentrieren. Wir müssen es mit dem rechten Rand vom Background
verankern. Öffnen Sie erneut das Layout Menü und wählen Center Right
aus. Bewegen Sie das Icon nach oben, sodass es vertikal zentriert zum Background
ist.

Das Bomben-Icon ist am rechten Rand des Background verankert. Passe die Größe des Counter-Containers an, sodass sich der Icon-Node an seine rechte Seite anschmiegt¶
Da wir den Counter
vom Count
der Leiste dupliziert haben, stimmt die Schrift der Number
Node nicht. Wählen Sie wieder die Number
Node aus, gehen zur Font
Eigenschaft und klicken sie an um Zugriff auf die DynamicFont
Ressource zu erhalten. Setzen Sie im Extra Spacing
Abschnitt den Bottom
Wert auf 0
um die Grundlinie der Schrift zurückzusetzen. Unser Zähler funktioniert nun wie erwartet.
Sorgen wir dafür, dass die Counters
am rechten oberen Rand des Sichtfelds verankert werden. Dafür müssen wir den Container Bars
so einstellen, dass der den ganzen horizontalen Platz einnimmt, der ihm zur Verfügung steht. Wählen Sie den Bars
-Nodes aus und gehen hinunter zum Bereich Size Flags
. Im Bereich Horizontal
setzen Sie einen Haken bei Expand
. Der Node Bars
sollte seine Größe ändern und den Zähler an den rechten Bildschirmrand verschieben.

Ein wachsender Container füllt den ganzen Platz aus, den er von seinem Eltern-Nodes bekommen kann, wobei er alles andere dabei verdrängt¶
Verwandel die Leiste und den Zähler in wiederverwendbare Komponenten für die grafische Oberfläche¶
Wir haben eine Leiste und einen Zähler. Aber wir brauchen jeweils zwei Stück. Später müssen die Gestaltung und Funktion gegebenenfalls noch geändert werden. Es wäre schön, wenn wir eine einzige Szene erstellen könnten, die als Vorlage eines UI-Elements dient, wir davon Szenen ableiten könnten, die abgeändert werden können. Godot lässt uns genau das mittels Vererbter Szenen (Inherited Scenes) tun.
Speichern wir also die beiden Zweige Counter
sowie Bar
als getrennte Szenen ab, die wir reduzieren um daraus die LifeBar
, die EnergyBar
, den BombCounter
und den EmeraldCounter
zu erzeugen. Wählen Sie den HBoxContainer Bar
. Machen Sie darauf einen Rechtsklick und klicken auf Speichere Verzweigung als Szene
. Speichern Sie die Szene als Bar.tscn
. Der ganze Zweig sollte sich daraufhin in einen einzigen Node namens Bar
verwandeln.
Tipp
Eine Szene ist ein Baum aus Knoten, Nodes genannt. Der oberste Node ist die Wurzel des Baums und die Kinder am Ende der Hierarchie sind Blätter. Jeder Node (außer der Wurzel) ergibt zusammen mit einem oder mehreren Kindern einen Zweig. Wie können Zweige in eigene Szenen auslagern oder sie laden und in andere aktive Szenen einfügen. Machen Sie einen Rechtsklick auf einen beliebigen Node im Szenenfenster und wählen Speichere Verzweigung als Szene
oder Aus Szene zusammenführen
.
Dann markieren Sie das Counter
Node und machen dasselbe. Rechtsklick, Speichere Verzweigung als Szene
und speichern es als Counter.tscn
. Ein neu bearbeitbares Szenenicon erscheint auf der Rechten Seite der Nodes auf dem Szenenzweig. Klicken Sie auf das nächste von Bar
um die korrespondierende Szene zu öffnen. Verändern Sie die Größe des Bar
Nodes, sodass ihre bounding box zum Inhalt passt. Für den Weg wie wir Controls benennen und platzieren sind wir jetzt fertig, um das Template zu vererben und erstellen eine Lebensbar. Es ist dasselbe für Counter
.

Ohne weitere Änderungen kann unsere Leiste jetzt verwendet werden¶
Verwenden von Szenenvererbung, um die verbleibenden Elemente zu erstellen¶
Wir brauchen zwei Leisten, die genauso funktionieren: Sie sollten links eine Beschriftung mit einem Wert beinhalten und rechts eine horizontale Anzeige. Der einzige Unterschied ist, dass eine mit HP beschriftet und grün ist und die andere EP heißt und gelb ist. Godot bietet uns ein mächtiges Werkzeug, mit dem wir eine allgemeine Leistenvorlage erstellen können, die für alle Leisten im Spiel genutzt werden kann: Szenenvererbung (scene inheritance).

Vererbte Szenen helfen uns, die GUI-Szene ordentlich zu halten. Am Ende haben wir nur Container und einen Node für jede UI-Komponente.¶
In einer geerbten Szene können wir neben dem Namen jede Eigenschaft jedes Nodes im Inspektor ändern. Wenn wir die übergeordnete Szene ändern und speichern, werden alle geerbten Szenen mit den Änderungen aktualisiert. Wenn wir einen Wert in der geerbten Szene ändern, wird die Eigenschaft des übergeordneten Objekts immer überschrieben. Dies ist nützlich für Benutzeroberflächen, da diese häufig Variationen derselben Elemente erfordern. Im Allgemeinen haben Schaltflächen, Bedienfelder usw. im UI-Design einen gemeinsamen Basisstil und Interaktionen. Wir möchten es nicht auf alle Variationen manuell kopieren.
Neben den Eigenschaften wird ein erneut-laden Icon erscheinen.
Bemerkung
Man kann sich die Szenenvererbung wie einen Nodebaum vorstellen, oder das ''extends'' Schlüsselwort von GDScript. Eine vererbte Szene macht alles genauso wie ihr Elternszene, allerdings kann man Eigenschaften und Ressourcen überschreiben und weitere Nodes und Skripte hinzufügen um ihre Funktionalität zu erweitern.
Erbe von der Leistenszene um einen Lebensbalken zu erstellen¶
Wechseln Sie zu Szene -> Neue geerbte Szene
, um eine neue Variante des Balkens zu erstellen. Wählen Sie die Balkenszene aus und öffnen sie. Sie sollten nun einen neuen [ungespeichert] Reiter sehen, welcher identisch zu Ihrem Balken ist, jedoch sind alle Nodes bis auf den Wurzel-Node grau. Drücken Sie nun Ctrl + S (Cmd + S auf MacOS) um die neue geerbte Szene zu speichern und benennen sie als ''LebensLeiste''.

Man kann keine ausgegrauten Nodes umbenennen. Dadurch wird kommuniziert, dass sie von einer Elternszene erben¶
Zuerst benennen Sie die Wurzel- oder Top-Level-Node in LifeBar
um. Wir wollen immer, dass die Wurzel genau beschreibt, was diese UI-Komponente ist. Der Name unterscheidet diese Bar von der EnergyBar
, die wir als nächstes erstellen werden. Die anderen Nodes innerhalb der Szene sollten die Struktur des Bauteils mit breiten Begriffen beschreiben, so dass es mit allen geerbten Szenen funktioniert. Wie unsere TextureProgress
und Zahl
-Nodes.
Bemerkung
Es ist das gleiche wenn Sie mit CSS arbeiten: sie erstellen eine Basis Klasse, und fügen eine Variation mit modifizierten Klassen hinzu. Bei der Knopf Klasse haben Sie grüne und rote Knöpfe, mit dieser kann der Benutzer Befehle akzeptieren und ablehnen. Die neue Klasse enthält den Namen des parental Elementes und ein extra Schlüsselwort, um zu erklären wie es zu modifizieren ist. Wenn wir eine vererbte Szene erstellen und wir den Namen des oberen Nodes ändern, machen wir das gleiche.
Entwerfe die Energieleiste¶
Wir haben schon den Entwurf für die Lebensleiste mit der Leistenszene eingerichtet. Nun brauchen wir die Energieleiste.
Erstellen wir nun eine neue vererbte Szene, und noch einmal selektieren wir die "Bar.tscn" Szene und öffnen es. Mit einem Doppelklick auf "Bar" ändern wir den Namen zu "EnergyBar". Nun speichern wir die Szene als "EnergyBar.tscn". Jetzt müssen wir die HP Textur ändern mit dem EP, und wir ändern es zu der Textur auf der Anzeige.
Gehen Sie zum Dateisystem-Dock auf der linken Seite, wählen Sie den Titel
-Node im Szenenbaum aus und ziehen Sie die Datei label_EP.png
per Drag & Drop auf den Textur-Slot. Wählen Sie den Nummer
-Node aus und ändern Sie die Eigenschaft Text
in einen anderen Wert wie 14
.
Sie werden feststellen, dass die EP-Textur wesentlich kleiner aussieht als die HP-Textur. Die Größe der Schrift vom Nummer
-Nodes sollte angepasst werden. Eine Schrift ist eine Ressource und alle Nodes im gesamten Projekt, die diese Ressource verwenden, werden durch Änderungen der Eigenschaften beeinflusst. Sie können diesen Effekt sehen, in dem Sie die Größe auf einen riesigen Wert wie 40
ändern und zurück zur Lebensleiste
oder zur Leisten
-Szene wechseln.

Wenn wir den Ort ändern, von der die Schriftart stammt, hat dies Auswirkungen auf alle Nodes, die sie verwenden¶
Um die Schriftgröße nur für diesen Node zu ändern, muss eine Kopie der Schriftressource angelegt werden. Wählen Sie dazu den Nummer
-Knoten aus und klicken Sie auf das Schraubenschlüssel-Icon in der oberen, rechten Ecke des Inspektors. Im Aufklappmenü den Punkt Unter-Ressource einzigartig machen
auswählen. Godot findet nun alle Ressourcen, die von diesem Node verwendet werden und erstellt einzigartige Kopien.

Benutze diese Option um einzelne Kopien von den Ressourcen einer Node zu erstellen¶
Tipp
Wenn ein Node aus dem Szenenbaum dupliziert wird (mit Ctrl + D bzw. Cmd + D auf MacOS), dann teilt dieser alle Ressourcen mit dem Original-Knoten. Verwenden Sie Unter-Ressource einzigartig machen
, damit Änderungen an den Ressourcen nicht den Original-Knoten beeinflussen.
Scollen Sie zum Bereich Custom Font
und öffnen Sie Font
. Ändern Sie Size
auf einen kleineren Wert wie zum Beispiel 20
oder 22
. Eventuell muss auch der Bottom
-Abstand geändert werden, um die Basislinie des Texts auf das EP-Label links anzugleichen.

Das Element, welches die Erfahrung zählt, jedoch mit einer kleineren Schriftart als ihr Gesundheitsgegenstück¶
Nun wählen Sie die TextureProgess
node. Ziehen Sie die energy_bar_bg.png
Datei in den Under
Teil und machen das selbe für energy_bar_fill.png
und ziehen es in den Progress
Texturteil.
Sie können die Node vertikal in ihrer Größe ändern, sodass das Bounds-Rechteck ihre gauge passt. Tue das selbe mit der Count
node bis ihre Größe mit der anderen Bar übereinstimmt. Weil die minimale Größe von TextureProgress
basierend auf ihren Texturen gesetzt wird, werden Sie nicht in der Lage sein, die Count
node unter diese Größe zu verkleinern. Das ist auch die Größe, die der Bar
Container haben wird. Sie könnten diesen auch verkleinern.
Zu guter Letzt, der Background
Container hat die minimale Größe so, dass er ein bisschen zu groß ist. Wählen Sie ihn aus in der Rect
Auswahl und ändern die Min Size
Eigenschaft runter auf 80
Pixel. Das sollte automatisch die Größe verändern und die Title
und Number
Nodes sollten auch ihre Position entsprechend verändern.

Der Zähler sieht nun besser aus, da er etwas kleiner ist als zuvor¶
Tipp
Die Größe des Zähler-Nodes beeinflusst die Positionierung von TextureProgress. Da wir unsere Leisten gleich senkrecht ausrichten werden, ist es ratsam den linken Abstand des Zählers zum Anpassen unserer EP-Anzeige zu verwenden. So ist dafür gesorgt, dass die Nodes des EnergieLeiste-Zählers sowie des LebensLeiste-Zählers einhundert Pixel breit sind und damit perfekt bündig sind.
Bereite die Zähler für die Bomben und die Smaragde vor¶
Lass und nun die Zähler beachten. Gehen Sie zu Szene -> Neue vererbte Szene
und wählen Counter.tscn
aus als eine Basis. Benennen Sie den Wurzel-Node auch als BombCounter
. Speichern Sie die Szene als BombCounter.tscn
. Das ist alles für diese Szene.

Der Bomben Zähler ist äquivalent zu der originalen Zähler Szene¶
Gehen Sie erneut zu Szene -> Neue vererbte Szene
und wählen erneut Counter.tscn
. Benennen Sie den Wurzel-Node in EmeraldCounter
um und speichern die Szene als EmeraldCounter.tscn
. Für diese Szene müssen wir hauptsächlich das Bombensymbol durch das Smaragd-Symbol ersetzen. Ziehen Sie im Reiter Dateisystem das emeralds_icon.png
auf das Icon
Node Texture
. Das Icon
verankert sich bereits am rechten Rand des Background
Nodes, so dass wir seine Position ändern können und es wird mit dem EmeraldCounter
Container skaliert und neu positioniert. Verschieben Sie das Smaragd-Symbol ein wenig nach rechts und nach unten. Benutzen Sie die Pfeiltasten auf der Tastatur, um seine Position zu verschieben. Speichern Sie, und wir sind mit allen UI-Elementen fertig.

Der Smaragdzähler sollte so aussehen¶
Füge nun die UI-Komponente der finalen Oberfläche hinzu¶
Es ist Zeit das wir alle Elemente zu der Haupt grafischen Benutzeroberfläche hinzufügen. Öffnen Sie GUI.tscn
nochmal, nun löschen Sie Bar
und Counter
. Im Dateissystem-Dock, suchen Sie LifeBar.tscn
ziehen Sie es auf den Bars
Container und legen Sie es dort ab. Das gleiche wird mit der EnegeryBar
gemacht. Sie sollten es aber Vertikal ausrichten.

Der Lebensbalken und der Energiebalken richten sich automatisch aus¶
Nun, ziehe und lege die BombCounter.tscn
und EmeraldCounter.tscn
Szene auf die Counters
node ab. Diese werden sich ebenfalls automatisch in ihrer Größe ausrichten.

Die Nodes ändern ihre Größe, um all den vertikalen verfügbaren Platz einzunehmen¶
Damit EmeraldCounter
und BombCounter
die in Counter.tscn
definierte Größe nutzen, müssen wir Counter.tscn
im Counters
Container ändern. Wählen Sie Counters
aus und öffnen die Size Flags
Sektion im Inspektor. Deaktivieren Sie den Fill
Tag für die Vertical
Eigenschaften und wählen Shrink Center
an, damit sich der Container im HBoxContainer
zentriert.

Nun haben beide Zähler eine angemessene Größe¶
Tipp
Ändere die Min Size
Eigenschaft des Counter
-Containers, um die Höhe des Hintergrunds des Counters zu arrangieren.
Wir haben noch ein kleines Problem mit dem EP-Etikett auf dem Energiebalken (EnergyBar): Die 2 Balken sollten vertikal ausgerichtet sein. Klicken Sie auf das Symbol neben dem Knoten "EnergyBar", um die Szene zu öffnen. Wählen Sie den Knoten Count
und scrollen Sie zum Abschnitt Custom Constants
. Fügen Sie ein Margin Left
von 20
hinzu. Setzen Sie im Abschnitt Rect
das Min Size
des Nodes auf 100 zurück, den gleichen Wert wie in dem Balken für Lebenspunkte (LifeBar). Das Count
sollte nun links einen Rand haben. Wenn Sie speichern und zur GUI-Szene zurückkehren, wird diese vertikal an der LifeBar
ausgerichtet.

Die beiden Leisten sind nun perfekt ausgerichtet¶
Bemerkung
Wir konnten die EnergieLeiste
mit diesem Weg ein paar Minuten zuvor aufsetzen. Aber das zeigt, dass Sie jederzeit zurück zu seiner Szene gehen können, es verstellen, und die Änderungen durch das Projekt propagieren können!
Platziere die Oberfläche auf den Spielentwurf¶
Zum Abschluss der Anleitung fügen wir die GUI in die Mockup-Szene des Spiels ein.
Springen Sie zum Dateisystembereich und öffnen LevelMockup.tscn
.
Ziehen Sie die Szene GUI.tscn
direkt unter den Node bg
und über die Characters
. Die GUI wird so skaliert, dass sie in das gesamte Ansichtsfenster passt. Gehen Sie zum Layout-Menü und wählen Sie die Option Center Top
, damit es am oberen Rand des Spielfensters verankert wird. Ändern Sie dann die Größe der Benutzeroberfläche, um sie vertikal so klein wie möglich zu gestalten. Jetzt können Sie sehen, wie die Benutzeroberfläche im Kontext des Spiels aussieht.
Glückwunsch dazu, dass Sie am Ende dieser langen Anleitung angekommen sind. Sie können das finale Projekt hier finden: ui_gui_design.zip
.

Das Endergebnis¶
Bemerkung
Ein letzter Hinweis zu anpassbarem Design. Wenn Sie die GUI in ihrer Größe ändern, werden Sie sehen wie sich die Nodes bewegen , aber die Texturen und der Text werden nicht neu skaliert. Die GUI hat auch eine minimale Größe, basierend auf den Texturen die in ihr enthalten sind. In Spielen benötigen wir kein so flexibles Interface wie bei einer Webseite. Sie brauchen meistens nicht beides zusammen, die Unterstützung von Querformat und Hochformat. Es ist entweder das eine oder das andere. Im Querformat gehen die meist verbreiteten Formate von 4:3 bis 16:9. Diese Formate liegen nah beieinander. Das ist der Grund, warum es nicht genug ist, die GUI Elemente nur horizontal zu bewegen, wenn wir die Fenstergröße ändern.