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

Read the Gestaltung von Benutzeroberflächen mit den Kontroll-Nodes first to learn how Godot’s UI system works.

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

We will use the first approach, because the first version of your UI may not work as well as you’d like. You’re likely to throw parts away and redesign components as you go. When you’re sure everything works, it’s easy to make some parts reusable, as you’ll see below.

../../_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.

We have to add a root node before we can save the scene. Your UI’s root should be the outermost container or element. In this case it’s a MarginContainer. MarginContainer is a good starting point for most interfaces, as you often need padding around the UI. Press Ctrl + S (Cmd + S on macOS) to save the scene to the disk. Name it 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. and the main menu’s illustration.

Click the Add Node button or press Ctrl + A (Cmd + A on macOS) on your keyboard. Start to type TextureRect to find the corresponding node and press enter. With the new node selected, press Ctrl + D (Cmd + D on macOS) five times to create five extra TextureRect instances.

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

Our main menu has some margin around the edges of the screen. It is split in two parts: on the left, you have the logo and the menu options. On the right, you have the characters. We can use one of two containers to achieve this: HSplitContainer or HBoxContainer. Split containers split the area into two: a left and a right side or a top and a bottom side. They also allow the user to resize the left and right areas using an interactive bar. On the other hand, HBoxContainer just splits itself into as many columns as it has children. Although you can deactivate the split container’s resize behavior, I recommend to favor 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älfte aus, sobald du ihn in dem CenterContainer platzierst.

To space out the menu options and the logo on the left, we’ll use one final container and its size flags. Select the VBoxContainer and press Ctrl + A (Cmd + A on macOS) to add a new node inside it. Add a second VBoxContainer and name it MenuOptions. Select all three menu options, Continue, NewGame and Options, and drag and drop them inside the new VBoxContainer. The UI’s layout should barely change, if at all.

../../_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. 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. Klappe die Kategorie Custom Constants unter Size Flags auf und klicke auf das Feld neben dem Parameter Separation. Setze es auf 30. Sobald du Eingabe 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. Im nächsten Tutorial 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.

The order in which you nest matters. To see if your UI adapts nicely to different screen ratios, select the root node, press Q to activate the Select Mode, select the container and click and drag on one of the container’s corners to resize it. The UI components should flow inside of it.

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.