Erstellung eines Titelbildschirms

In den nächsten zwei Anleitungen, werden Sie 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.

Sie werden 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 Sie vom Editor aus machen können. Um zu lernen wie man einen Lebensbalken programmiert, siehe Kontrolle der Spiel-Benutzeroberfläche mittels Code.

../../_images/ui_main_menu_design_final_result.png

Die grafische Benutzeroberfläche die Sie erstellen werden.

Laden Sie die Projekt Dateien herunter: ui_main_menu_design.zip und extrahieren das Archiv. Importieren Sie das start/ Projekt nach Godot um der Anleitung zu folgen. Der end\ Ordner enthält das finale Ergebnis. Sie finden alle Sprites im start/assets/main_menu` Ordner.

Bemerkung

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

Wie Sie die Benutzeroberfläche Ihres Spiels gestalten

Um eine gute Benutzeroberfläche zu gestalten, möchten Sie zunächst eine grobe Skizze haben: eine flache gemalte Version die sich auf die Positionierung Ihrer Komponente, ihre Größe, und die Benutzer Interaktion fokussiert. Stift und Papier ist alles was Sie brauchen. Sie sollten in dieser Phase keine spektakulären und finalen Graphiken verwenden. Dann benötigen Sie simple Platzhalter Sprites und können in Godot loslegen. Sie möchten 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 Sie sollten die Grafik einfach und sauber halten. Vermeiden Sie Spezial-Effekte, Animationen und detaillierte Illustrationen bevor Spieler Ihre Benutzeroberfläche getestet haben. Ansonsten:

  1. Die Grafik könnte die Wahrnehmung der Spieler verzerren und Sie verpassen wertvolles Feedback.
  2. Wenn die Benutzer-Erfahrung nicht gut ist, müssen Sie einige Sprites neu anfertigen.

Tipp

Versuchen Sie 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 Sie Farbe und spektakuläre visuelle Effekte weglassen, ist es viel einfach die Benutzeroberflächen Elemente richtig zu positionieren. Es hilft Ihnen die Gestaltungsbasis zu verbessern, auf der Sie aufbauen.

Es gibt zwei Wege Ihre Benutzeroberfläche in Godot zu gestalten. Sie können:

  1. Erstelle alles in einer einzigen Szene und speichere ggf. später einige Zweige als wiederverwendbare Szenen ab.
  2. Erstelle Szenenvorlagen für wiederverwendbare Komponenten und erstelle spezifische Komponenten, die von diesen Vorlagen abstammen.

Wir werden den ersten Ansatz verwenden, weil die erste Version Ihres UI möglicherweise nicht so gut klappen wird wie Sie es gerne hätten. Sie werden wahrscheinlich Teile wieder verwerfen und Komponenten mit der Zeit überarbeiten. Wenn Sie sich sicher sind dass alles funktioniert, können einige Teile ganz einfach wieder verwendbar gemacht werden, wie weiter unten gezeigt wird.

../../_images/ui_main_menu_placeholder_assets.png

Die Dateien finden Sie in Godot. Die Grafik sieht sauberer als beim groben Entwurf aus, aber sie ist lediglich immer noch 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 Container 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

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

Vorbereitung der Hauptmenü-Szene

Bemerkung

Diese Anleitung basiert auf einer Fenstergröße von 1366x768. Um die Fenstergröße des Projekts zu ändern, öffnen Sie Project > Project Settings oben im Editor und ändern Display > Window > Size > Width zu 1366 und Display > Window > Size > Height zu 768.

Falls Sie vergessen die Fenstergröße zu ändern, könnten sich Ankerpunkte und Container nicht wie gewünscht verhalten.

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

Wir müssen einen Wurzel-Node hinzufügen, bevor wir die Szene speichern können. Die Wurzel Ihrer 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ücken Sie Strg + S (Cmd + S auf MacOS), um die Szene auf dem Datenträger zu speichern und benennen diese MainMenu.

Wählen Sie den MarginContainer wieder aus und gehen zum Inspektor, um die Größe des Randes einzustellen. Gehen Sie zum Bereich Custom Constants der Control-Klasse. Klappen Sie das Menü auf und stellen 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. Öffnen Sie das Menü Layout im Ansichtsfenster und wählen die letzte Option aus, Full Rect.

Hinzufügen der UI-Sprites

Wählen Sie den MarginContainer aus und erzeugen 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.

Klicken Sie auf Add Node oder drücken Strg + A (Cmd + A auf MacOS) auf der Tastatur. Geben Sie TextureRect ein, um das entsprechende Node zu finden und drücken Enter. Mit der neuen Node ausgewählt, drücken fünf Mal Strg + D (Cmd + D auf MacOS), um fünf zusätzliche TextureRect Instanzen zu erzeugen.

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

../../_images/ui_texturerect_load_texture.png

Die Dateiauswahl lässt Sie 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 eigene Nodes sein. Benenne die Nodes dann im Szenenfenster durch einen Doppelklick um. Da noch nichts im Container platziert wurde, sieht er noch etwas unordentlich aus.

../../_images/ui_main_menu_6_texturerect_nodes.png

Die sechs Nodes, mit geladenen Texturen.

Bemerkung

Wenn Ihr Spiel Übersetzungen unterstützen soll, dann benutzen Sie 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 teilen 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 von Box Container.

Wählen Sie den MarginContainer aus und fügen 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

Sie sollten vier verschachtelte Container haben und den TextureRect-Node nebendran.

Wählen Sie im Node-Baum alle TextureRect-Nodes, die auf die linke Seite gehören: das Logo, die Menüpunkte und die Versionsangabe. Ziehen Sie 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ügen Sie einen CenterContainer als Unter-Node des HBoxContainer hinzu. Scrollen Sie dann im Inspektor zur Kategorie Size Flags und klicken auf das Feld rechts von der Eigenschaft Vertical und kreuzen Expand sowie Fill an. Ebenso für die Eigenschaft Horizontal. Ziehen Sie 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älfte aus, sobald Sie ihn in dem CenterContainer platzieren.

Um die Menüpunkte und das Logo links auseinanderzuziehen, werden wir einen letzten Container mit seinen size flags verwenden. Wählen Sie den VBoxContainer und drücken Strg + A (Cmd + A auf MacOS), um ein neues Node darin einzufügen. Fügen Sie einen zweiten VBoxContainer hinzu und nennen ihn MenuOptions. Wählen Sie alle drei Menüpunkte Continue, NewGame und Options und ziehen diese in den neuen VBoxContainer. Das Layout der Benutzeroberfläche 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ählen Sie den Node MenuOptions. Gehen Sie im Inspektor herunter zu der Kategorie Size Flags. Klicken Sie auf das Feld rechts neben der Eigenschaft Vertical und kreuzen Expand sowie Fill an. Der Container dehnt sich aus und nimmt den ganzen verfügbaren senkrechten Raum ein. Aber er berücksichtigt 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 gleichzeitig senkrecht und mittig ausrichten.

Zum Abschluss fügen wir Abstandshalter zwischen den Menüpunkten hinzu. Klappen Sie die Kategorie Custom Constants unter Size Flags auf und klicken auf das Feld neben dem Parameter Separation. Setzen Sie es auf 30. Sobald Sie Eingabe drücken, 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 Sie es so weit geschafft haben! Sie können das fertige Menü herunterladen und mit Ihrem vergleichen: ui_main_menu_design.zip. In der nächsten Anleitung werden Sie 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 Ihre UI ordentlich an verschiedene Seitenverhältnisse anpasst, wählen Sie den Wurzel-Node, drücken die Taste Q, um den Auswahlmodus zu aktivieren, wählen den Container aus und ziehen an einer seiner Ecken, um die Größe zu ändern. Die UI-Komponenten darin sollten sich dynamisch anpassen.

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

Sie können den Skalierungsmodus in den Projekteinstellungen ändern: klicken Sie auf Projekt -> Projekteinstellungen. Suchen Sie in der linken Fensterspalte nach der Kategorie Display. Klicke auf das Untermenü Window. Auf der rechten Fensterseite finden Sie einen Punkt namens Stretch. Die drei Einstellungen Mode,** Aspect** und Shrink steuern die Bildschirmgröße. Siehe Mehrere Auflösungen für weitere Informationen.