Gestaltung der Oberfläche

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

Das Endergebnis

Du wirst 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

Du kannst dir 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.

Erstelle eine neue Szene und füge einen MarginContainer hinzu. Wähle den Node aus und nenne ihn GUI.

Wir wollen, dass die Oberfläche am oberen Bildschirmrand verankert ist. Wähle den GUI-Node aus und klicke auf die Schaltfläche Layout oben im Fenster. Wähle 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, gehe zum Abschnitt "Custom Constants" im Inspektor. Klappe ihn aus und klicke jeweils auf das Feld neben der Eigenschaft Margin. Setze alle Werte auf 20 Pixel. Füge 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üge einen VBoxContainer als Kind von HBoxContainer hinzu und nenne ihn Bars. Wähle den übergeordneten HBoxContainer wieder aus und füge diesmal noch einen HBoxContainer als Kind hinzu. Nenne ihn Counters. Diese vier Container stellen die Grundlage unserer GUI-Szene dar.

Du solltest 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 du einer Anleitung wie dieser hier folgst, mag dir das unverständlich vorkommen. Aber wenn du erstmal an echten Spielen arbeitest, wirst du 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ähle den Node Bars aus und füge darin einen neuen HBoxContainer ein. Nenne 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 Elternknoten 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ähle die Bar aus und füge einen MarginContainer hinzu. Nenne ihn Count. Füge darin drei Knoten ein:

1. Ein NinePatchRect namens Background
2. Ein TextureRect namens Title
3. Und ein Label namens Number

Wähle vorher den Node Count aus, damit sie als Kinder hinzugefügt werden.

Dein 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.

Du solltest eine Liste an Texturen sehen, die wir über unsere Oberfläche legen werden.

Wähle den Background im Szenenfenster. Im Inspektor solltest du die Eigenschaft Texture sehen. Ziehe label_HP_bg.png aus dem Dateibrowser in das Textur-Feld. Es bleibt gequätscht. Der übergeordnete MarginContainer zwingt seine Größe auf 0 herunter bis wir für die untergeordneten Elemente eine minimale Größe erzwingen. Wähle den Node Background aus. Gehe im Inspektor hinunter zum Bereich Rect. Setze MinSize auf (100, 40). Du solltest sehen, wie der Background seine Größe zusammen mit seinen übergeordneten Containern ändert.

Wähle dann den Title aus und ziehe label_HP.png in sein Texture``Feld. Wähle den ``Number-Node, klicke 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 du beide Nodes auswählst, solltest du 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. Versuche die Nodes im Fenster umherzubewegen und ihre Größe zu ändern. Wähle dann eine der drei Texturen aus und drücke 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 musst du 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ähle Title und Number beide aus und ziehe 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ähle den Node Number und gehe im Inspektor runter zur Control-Klasse und finde die Kategorie Custom Font. Klicke auf das Feld neben der Eigenschaft Font und klicke auf New Dynamic Font. Klicke nochmals auf das Feld und wähle Edit aus.

Du musst die Ressource Dynamic Font eingeben. Klappe die Kategorie Font aus und klicke auf das Feld neben Font Data. Klicke auf die Fläche Load. Gehe im Dateibrowser herunter zum Ordner assets/font und klicke zweimal auf Comfortaa-Bold.ttf, um es zu öffnen. Du solltest im Ansichtsfenster sehen, dass der Font aufgefrischt wird. Klappe das Einstellungsmenü auf, um die Schriftgröße zu ändern. Setze 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 kannst du 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. Klicke auf den Node Number im Szenenfenster, um zurück zu den Node-Eigenschaften zu kommen, und ändere Valign zu Bottom. Um die Grundlinie des Texts anzupassen, klicke wieder auf das Fontfeld unter der Kategorie Custom Font ändere die Eigenschaft Bottom bis der Text mit dem Title-Node abschließt. Ich habe 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ähle die Leisten Node aus und füge ihr ein TextureProgress hinzu. Nenne es Gauge. In dem Inspector öffne nun die Textures Abschnitt. Gehe nun weiter zum FileSystem-Dock und ziehe die Lifebar_bg.png``Textur auf dem ``Under slot. Mache das gleiche mit dem lifebar_fill.png Bild und ziehe es auf den Progress slot. Nun ändere 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.

Bennene 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ähle in dem Szenenbaum Title aus und bennene es zu Icon um.

So sollten deine Nodes bis jetzt aufgebaut sein

Wähle die Icon Node aus und scrolle nach oben um den Texture Slot zu sehen. Nun gehe zum File System Bereich auf der linken Seite und ziehe das bombs_icon.png in den Texture Slot. In dem Szenenbaum wähle die Icon und Number Nodes aus. Clicke auf das Layout-Menu in der Symbolliste oben im Ansichtsfenster und wähle 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ähle die Number Node aus, setzen Sie ihre Align Eigenschaft auf links und die Valign Eigenschaft auf zentriert. Ändere 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ähle die GUI Node oben im Szenenbaum aus und reduziere seine vertikale Größe, damit es so dünn wie möglich wird. Du wirst sehen, dass die Anzeige dich 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ähle das Icon aus, klicke das Layout Menü an und wähle Full Rect aus um es wieder zu zentrieren. Wir müssen es mit dem rechten Rand vom Background verankern. Öffne erneut das Layout Menü und wähle Center Right aus. Bewege 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ähle wieder die Number Node aus, gehe zur Font Eigenschaft und klicke sie an um Zugriff auf die DynamicFont Ressource zu erhalten. Setze 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ähle den Bars-Nodes aus und gehe hinunter zum Bereich Size Flags. Im Bereich Horizontal, setze 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ähle den HBoxContainer Bar. Mache darauf einen Rechtsklick und klicke auf Speichere Verzweigung als Szene. Speichere 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. Mache einen Rechtsklick auf einen beliebigen Node im Szenenfenster und wähle Speichere Verzweigung als Szene oder Aus Szene zusammenführen.

Dann, markiere das Counter Node und mache dasselbe. Rechtsklick, Speichere Zweig als Szene, und speichere es als Counter.tscn. Eine new bearbeitbares Szenenicon erscheint auf der Rechten Seite der Nodes auf dem Szenenzweig. Klicke auf das nächste von Bar, um die korrespondierende Szene zu öffnen. Verändere 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

Wechsle zu Szene -> Neue geerbte Szene, um eine neue Variante des Balkens zu erstellen. Wähle die Balkenszene aus und öffne sie. Du solltest nun einen neuen [ungespeichert] Reiter sehen, welcher identisch zu deinem Balken ist, jedoch sind alle Nodes bis auf den Wurzel-Node grau. Drücke nun Meta+S um die neue geerbte Szene zu speichern und benenne 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 Meta+D), 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ähle die TextureProgess node. Ziehe die energy_bar_bg.png Datei in den Under Teil und mache das selbe für energy_bar_fill.png und ziehe es in den Progress Texturteil.

Du kannst 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, wirst du 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. Du könntest diesen auch verkleinern.

Zu guter Letzt, der Background Container hat die minimale Größe so, dass er ein bisschen zu groß ist. Wähle ihn aus und in der Rect Auswahl, ändere 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. Gehe zu Szene -> Neue vererbte Szene und wähle Counter.tscn aus als eine Basis. Benenne die root node auch als BombCounter. Speichere die Szene als BombCounter.tscn. Das ist alles für diese Szene.

Der Bomben Zähler ist äquivalent zu der originalen Zähler Szene

Gehe erneut zu Szene -> Neue vererbte Szene und wähle erneut Counter.tscn. Benenne das Wurzelk Node in EmeraldCounter um und speicher 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. Verschiebe das Smaragd-Symbol ein wenig nach rechts und nach unten. Benutz die Pfeiltasten auf der Tastatur, um seine Position zu verschieben. Speichern, 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ähle Counters aus und öffne die Size Flags Sektion im Inspektor. Deaktiviere den Fill Tag für die Vertical Eigenschaften und wähle 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.

Springe zum Dateisystembereich und öffne 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 Du am Ende dieser langen Anleitung angekommen bist. Du kannst das finale Projekt hier finden: ui_gui_design.zip.

Das Endergebnis

Bemerkung

A final note about Responsive Design. If you resize the GUI, you'll see the nodes move, but the textures and text won't scale. The GUI also has a minimum size, based on the textures inside of it. In games, we don't need the interface to be as flexible as that of a website. You almost never want to support both landscape and portrait screen orientations. It's one or the other. In landscape orientation, the most common ratios range from 4:3 to 16:9. They are close to one another. That's why it's enough for the GUI elements to only move horizontally when we change the window size.