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:

1. Wie man flexible UI-Komponenten erstellt

2. Wie man Szenenvererbung benutzt

3. 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:

1. Links die Zähler für Leben und Energie

2. Die Lebens- und Energieleisten

3. 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:

1. Links die Lebens- und Energieleisten

2. 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:

1. Ein NinePatchRect namens Background

2. Ein TextureRect namens Title

3. Und ein Label namens Number

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-Node 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-Node. Verwenden Sie Unter-Ressource einzigartig machen, damit Änderungen an den Ressourcen nicht den Original-Node 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 Node "EnergyBar", um die Szene zu öffnen. Wählen Sie den Node 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.