Erstelle einen Titelbildschirm

In den nächsten zwei Tutorials, wirst du mithilfe des Benutzeroberflächen Systems der Engine, Schritt für Schritt eine zugängliche Benutzeroberfläche erstellen:

  1. Ein Hauptmenü.
  2. Die Benutzeroberfläche eines Spiels, mit Lebensbalken, Energiebalken, Bomben- und Geldzähler.

Du wirst lernen wie man die Benutzeroberfläche eines Spiels effizient gestaltet, und wie man Godots Control Nodes verwendet. Diese Seite fokussiert sich auf den sichtbaren Teil: alles was du vom Editor aus machen kannst. Um zu lernen wie man einen Lebensbalken programmiert, ließ Kontrolliere das Spiele-UI mit Code.

../../_images/ui_main_menu_design_final_result.png

Die grafische Benutzeroberfläche die du erstellen wirst.

Lade die Projekt Dateien herunter: ui_main_menu_design.zip und extrahiere das Archiv. Importiere das start/ Projekt nach Godot um dem Tutorial zu folgen. Der end\ Ordner enthält das finale Ergebnis. Du findest alle Sprites im start/assets/main_menu` Ordner.

Bemerkung

Lesen Sie zuerst das Gestaltung von Benutzeroberflächen mit den Kontroll-Nodes, um zu erfahren, wie das UI-System von Godot funktioniert.

Wie du die Benutzeroberfläche deines Spiels gestaltest

Um eine gute Benutzeroberfläche zu gestalten, möchtest du zunächst eine grobe Skizze haben: eine flache gemalte Version die sich auf die Positionierung deiner Komponente, ihre Größe, und die Benutzer Interaktion fokussiert. Stift und Papier ist alles was du brauchst. Du solltest in dieser Phase keine spektakulären und finalen Graphiken verwenden. Dann benötigst du simple Platzhalter Sprites und kannst in Godot loslegen. Du möchtest sicherstellen das die Spieler sich mit den Platzhaltern in der Oberfläche zurecht finden.

../../_images/ui_design_rough.png

Das grobe Modell oder der Plan für die Benutzeroberfläche

Platzhalter muss nicht hässlich bedeuten, aber du solltest die Graphik einfach und sauber halten. Vermeide spezial Effekte, Animationen und detaillierte Illustrationen bevor Spieler deine Benutzeroberfläche getestet haben. Ansonsten:

  1. Die Grafik könnte die Wahrnehmung der Spieler verzerren und du verpasst wertvolles Feedback.
  2. Wenn die Benutzer-Erfahrung nicht gut ist, musst du einige Sprites neu anfertigen.

Tipp

Versuche immer die Oberfläche mit einfachem Text und Boxen zum laufen zu bekommen. Es ist einfach die Texturen später zu ersetzen. Professionelle UX-Designer arbeiten häufig mit einfarbigen Umrissen und Boxen in Grau-stufe. Wenn du Farbe und spektakuläre visuelle Effekte weg lässt, ist es viel einfach die Benutzeroberflächen Elemente richtig zu positionieren. Es hilft dir die Gestaltungsbasis zu verbessern, auf der du aufbaust.

Es gibt zwei Wege deine Benutzeroberfläche in Godot zu gestalten. Du kannst:

  1. Alles in einer einzigen Szene erstellen, und möglicherweise einige Zweige als wiederverwendbare Szenen speichern.
  2. Erstelle Vorlagenszenen für wiederverwendbare Komponenten und erstelle spezifische Komponenten, die von deinen Basisszenen erben.

Wir werden den ersten Ansatz verwenden, weil die erste Version deiner UI möglcherweise nicht so gut klappen wird wie du es gerne hättest. Du wirst wahrscheinlich Teile wieder verwerfen und Komponenten mit der Zeit überarbeiten. Wenn du dir sicher bist, dass alles funktioniert, kannst du sie ganz einfach wiederverwendbar machen, wie unten gezeigt.

../../_images/ui_main_menu_placeholder_assets.png

Die Dateien findest du in Godot. Die Grafik sieht sauberer als beim groben Entwurf aus, aber sie ist lediglich immernoch ein Platzhalter.

Entwerfe das Hauptmenü

Bevor wir in den Editor einsteigen, wollen wir planen, wie wir Container nach unserer Vorlage verschachteln werden.

Aufgliederung des UI-Entwurfs

Hier sind meine drei Faustregeln, wie man die richtigen Behälter findet:

  1. Unterteile die Benutzeroberfläche in verschachtelte Kästen, vom Größten, der alles umfasst, bis zum Kleinsten, der ein einzelnes Element beinhaltet, wie eine Leiste mit ihrer Beschriftung, ein Panel oder eine Schaltfläche.
  2. Wenn ein gewisser Abstand um eine Fläche eingehalten werden soll, verwende einen MarginContainer.
  3. Wenn die Elemente in Zeilen oder Spalten angeordnet sind, verwende einen HBoxContainer oder VBoxContainer.

Diese Regeln reichen für den Anfang aus und klappen bei einfachen Oberflächen recht gut.

Beim Hauptmenü ist der größte Kasten das gesamte Spielefenster. Zwischen den Rändern des Fensters und den ersten Komponenten ist ein Abstand: das sollte ein MarginContainer sein. Dann wird der Bildschirm in zwei Spalten unterteilt, also verwenden wir einen HBoxContainer. Die Reihen in der linken Spalte werden mit einem VBoxContainer angeordnet. Und in der rechten Spalte richten wir die Illustration mithilfe eines ``CenterContainer``s mittig aus.

../../_images/ui_mockup_break_down.png

Bausteine der Benutzeroberfläche, zusammengefasst mithilfe der drei Faustregeln.

Tipp

Behälter passen sich an die Auflösung und das Seitenverhältnis des Bildschirms an. Obwohl wir UI-Elemente händisch platzieren könnten, sind Behälter schneller, genauer und responsiv.

Vorbereitung der Hauptmenü-Szene

Erstellen wir das Hauptmenü. Wir bauen es in einer einzigen Szene. Um eine leere Szene zu erstellen, klicke auf das Menü Szene -> Neue Szene.

Wir müssen einen Wurzel-Node hinzufügen, bevor wir die Szene speichern können. Die Wurzel deiner UI sollte der alleräußerste Container oder das Element sein. In diesem Fall ist es ein MarginContainer. MarginContainer ist für die meisten Oberflächen ein guter Ausgangspunkt, da man oft einen Rand um sie herum braucht. Drücke Meta+S, um die Szene auf dem Datenträger zu speichern. Nenne sie MainMenu.

Wähle den MarginContainer wieder aus und gehe zum Inspektor, um die Größe des Randes einzustellen. Gehe zum Bereich Custom Constants der Control-Klasse. Klappe das Menü auf. Stelle die Ränder wie folgt ein:

  • Margin Right: 120
  • Margin Top: 80
  • Margin Left: 120
  • Margin Bottom: 80

Wir wollen, dass der Container das ganze Fenster einnimmt. Öffne das Menü Layout im Ansichtsfenster und wähle die letzte Option aus, Full Rect.

Hinzufügen der UI-Sprites

Wähle den MarginContainer aus und erzeuge die Oberflächenelemente als TextureRect-Nodes. Wir brauchen:

  1. Den Titel oder das Logo,
  2. die drei Textoptionen als einzelne Nodes,
  3. die Versionsangabe
  4. und die Darstellung des Hauptmenüs.

Drücke auf die Schaltfläche Add Node oder drücke Meta+A auf der Tastatur. Gib TextureRect ein, um den entsprechenden Node zu finden und drücke Enter. Wähle den neuen Node aus und drücke fünf Mal Meta+D, um fünf zusätzliche Instanzen davon zu erzeugen.

Wähle jeden der Nodes mit einem Klick darauf aus. Finde die Texture Eigenschaft im im Inspektor und klicke auf [leer] -> Lade. Eine Dateiauswahl öffnet sich und lässt dich ein Sprite auswählen, das in den Texture-Slot geladen wird.

../../_images/ui_texturerect_load_texture.png

Die Dateiauswahl lässt dich Texturen finden und laden.

Wende die Operation auf alle TextureRect-Nodes an. Das Logo, die Illustration, die drei Menüpunkte und die Versionsangabe sollten jeweils eigenen Knoten sein. Benenne die Knoten dann im Szenenfenster durch einen Doppelklick um. Da noch nichts im Behälter plaziert wurde, sieht er noch etwas unordenlich aus.

../../_images/ui_main_menu_6_texturerect_nodes.png

Die sechs Nodes, mit geladenen Texturen.

Bemerkung

Wenn dein Spiel Übersetzungen unterstützen soll, dann benutze Labels anstelle von TextureRect.

Füge Container ein, um UI-Elemente automatisch zu platzieren

Unser Hauptmenü hat einen gewissen Abstand zum Bildschirmrand. Es unterteilt sich in zwei Bereiche: links das Logo und die Menüpunkte. Rechts die Charaktere. Wir können einen der beiden Container benutzen, um das zu erreichen: HSplitContainer oder HBoxContainer. Split Container unterteilen den Bereich entzwei: eine linke und eine rechte Seite oder eine obere und eine untere Seite. Sie erlauben es dem Benutzer auch, die Größen der linken und rechten Bereiche über eine interaktive Leiste einzustellen. Andererseits spaltet sich ein ``HBoxContainer``einfach in so viele Spalten wie er Kinder hat. Obwohl die Variable Größe des Split Containers abgeschaltet werden kann, empfehle ich den Gebrauch der Box Containers.

Wähle den MarginContainer aus und füge einen HBoxContainer hinzu. Dann brauchen wir zwei untergeordnete Container als Kinder unseres HBoxContainer: einen VBoxContainer für die Menüpunkte zur Linken und einen CenterContainer für die Illustration zur Rechten.

../../_images/ui_main_menu_containers_step_1.png

Du solltest vier verschachtelte Container haben und den TextureRect-Node nebendran.

Wähle im Node-Baum alle TextureRect-Nodes, die auf die linke Seite gehören: das Logo, die Menüpunkte und die Versionsangabe. Ziehe sie per Drag-and-Drop in den VBoxContainer. Die Nodes sollten sich selbstständig positionieren.

../../_images/ui_main_menu_containers_step_2.png

Container platzieren Texturen automatisch und passen deren Größe an

Wir müssen noch zwei Probleme lösen:

  1. Die Charaktere rechts sind nicht mittig ausgerichtet.
  2. Zwischen dem Logo und den anderen Oberflächenelementen ist kein Platz.

Um die Figuren rechts mittig auszurichten, verwenden wir einen CenterContainer. Füge einen CenterContainer als Kindknoten des HBoxContainer hinzu. Scrolle dann im Inspektor zur Kategorie Size Flags und klicke auf das Feld rechts von der Eigenschaft Vertical und kreuze Expand sowie Fill an. Ebenso für die Eigenschaft Horizontal. Ziehe schließlich die Figuren in den CenterContainer. Das Element wird automatisch zentriert.

../../_images/ui_main_menu_containers_step_3.png

Der Charakter-Node richtet sich mittig in der rechten Bildschirmhälft aus, sobald du ihn in dem CenterContainer platzierst.

Um die Menüpunkte und das Logo links auseinanderzuziehen, werden wir einen letzten Container mit seinen size flags verwenden. Wähle den VBoxContainer und drücke Meta+A, um einen neuen Node darin einzufügen. Füge einen zweiten VBoxContainer hinzu und nenne ihn „MenuOptions“. Selektiere die drei Menüpunkte Continue, NewGame und Options, und ziehe sie in den neuen VBoxContainer. Das Layout der UI sollte sich, wenn überhaupt, kaum ändern.

../../_images/ui_main_menu_containers_step_4.png

Platziere den neuen Container zwischen die anderen beiden Nodes, um das Layout der UI zu beizubehalten.

Nachdem wir die Menüpunkte zusammengefasst haben, können wir ihren Container anweisen, so viel senkrechten Raum wie möglich einzunehmen. Wähle den Node MenuOptions. Gehe im Inspektor herunter zu der Kategorie Size Flags. Klicke auf das Feld rechts neben der Eigenschaft Vertical und kreuze Expand sowie Fill an. Der Container dehnt sich aus und nimmt den ganzen verfügbaren senkrechten Raum ein. Dabei berücksichtigt er seine Nachbarn, die Elemente Logo und Version.

Um die Nodes im VBoxContainer zu zentrieren, gehe ganz nach oben im Inspektor und stelle die Eigenschaft Alignment auf Center.

../../_images/ui_main_menu_containers_step_5.png

Die Menüpunkte sollten sich in der linken Spalte der Oberfläche senkrecht und mittig ausrichten.

Zum Abschluss fügen wir Abstandshalter zwischen den Menüpunkten hinzu. Klappe die Kategorie Custom Constants unter Size Flags auf klick auf das Feld neben dem Parameter Separation. Setze es auf 30. Sobald du Enter drückst, wird die Eigenschaft Separation wirksam und Godot fügt 30 Pixel zwischen den Menüpunkten ein.

../../_images/ui_main_menu_design_final_result.png

Die fertige Oberfläche.

Ohne eine einzige Zeile Code zu schreiben, haben wir ein ordentliches und dynamisches Menü.

Glückwunsch, dass du es so weit geschafft hast! Du kannst das fertige Menü herunterladen und mit deinem vergleichen: ui_main_menu_design.zip. In der nächsten Anleitung wirst du eine Spieleoberfläche mit Leisten und Gegenstandszählern erstellen.

Aufgliederung des UI-Entwurfs

Bei einer responsiven Benutzeroberfläche ist es wichtig dafür zu sorgen, dass die UI auf allen Bildschirmarten vernünftig skaliert wird. Fernsehbildschirme und Monitore haben unterschiedliche Größen und Seitenverhältnisse. In Godot benutzen wir Container, um die Position und Größe der UI-Elemente zu steuern.

Die Reihenfolge der Verschachtelung ist entscheidend. Um zu sehen, ob sich deine UI ordentilch an verschiedene Seitenverhältnisse anpasst, wähle den Wurzelknoten, drücke die Taste Q, um den Auswahlmodus zu aktivieren, wähle den Container aus und ziehe an einer seiner Ecken, um die Größe zu ändern. Die UI-Komponenten darin sollten sich dynamisch anpassen.

Dir wird auffallen, dass Sprites zwar von Containern verschoben, aber nicht in ihrer Größe geändert werden. Das ist normal. Wir wollen, dass das UI-System mit unterschiedliche Bildschirmgrößen umgehen kann, aber wir müssen auch das ganze Spiel an verschiedene Bildschirmauflösungen anpassen. Zu diesem Zweck vergrößert und verkleinert Godot das gesamte Fenster.

Du kannst den Skalierungsmodus in den Projekteinstellungen ändern: klicke auf Projekt -> Projekteinstellungen. Suche in der linken Fensterspalte nach der Kategorie Display. Klicke auf das Untermenü Window. Auf der rechten Fensterseite findest du einen Punkt namens Stretch. Die drei Einstellungen Mode,** Aspect** und Shrink steuern die Bildschirmgröße. Siehe Multiple resolutions für weitere Informationen.