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. A main menu.
  2. A game UI with a health bar, energy bar, bomb and money counters.

You will learn how to design game UIs efficiently, and how to use Godot’s Control nodes. This page focuses on the visual part: everything you do from the editor. To learn how to code a life bar, read Kontrolliere das Spiele-UI mit Code.

../../_images/ui_main_menu_design_final_result.png

The GUI you’re going to create.

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. The graphics might skew the players‘ perception of the experience and you’ll miss out on valuable feedback.
  2. If the User Experience doesn’t work, you’ll have to redo some sprites.

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. Build it all in a single scene, and eventually save some branches as reusable scenes.
  2. Build template scenes for reusable components and create specific components that inherit from your base scenes.

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

The files you’ll find in Godot. The graphics look cleaner than on the rough design, but they’re still placeholders.

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. Break down the UI into nested boxes, from the largest that contains everything, to the smallest ones, that encompass one widget, like a bar with its label, a panel or a button.
  2. If there’s some padding around an area, use a MarginContainer.
  3. If the elements are arranged in rows or columns, use an HBoxContainer or 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

Interface building blocks, broken down using the three rules of thumb.

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

Let’s create the main menu. We’ll build it in a single scene. To create an empty scene, click on Scene > New Scene.

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

We want the container to fit the window. In the toolbar above the Viewport, open the Layout menu and select the last option, Full Rect.

Hinzufügen der UI-Sprites

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

  1. the title or logo,
  2. the three text options as individual nodes,
  3. the version note,
  4. and the main menu’s illustration.

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

Click each of the nodes to select it. In the inspector, find the Texture property and click [empty] > Load. A file browser opens and lets you pick a sprite to load into the texture slot.

../../_images/ui_texturerect_load_texture.png

The file browser lets you find and load textures.

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

The six nodes with textures loaded.

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

You should have four nested containers and the TextureRect nodes sitting aside from it.

In the node tree, select all the TextureRect nodes that should go on the left side: the logo, the menu options (Continue, NewGame, Options), and the version note. Drag and drop them into the VBoxContainer. The nodes should position automatically.

../../_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. The characters on the right aren’t centered.
  2. There’s no space between the logo and the other UI elements.

To center the characters on the right, first select the CenterContainer. Then in the Inspector, scroll down to the Size Flags category and click on the field to the right of the Vertical property, and check Expand in addition to Fill. Do the same for the Horizontal property. This makes the CenterContainer expand into all available space while respecting its neighbour VBoxContainer. Finally, drag and drop the Characters node into the CenterContainer. The Characters element will center automatically.

../../_images/ui_main_menu_containers_step_3.png

The character node centers inside the right half of the screen as soon as you place it inside the CenterContainer.

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 Meta+A 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

Place the new container between the other two nodes to retain the UI’s layout.

Now we grouped the menu options together, we can tell their container to expand to take as much vertical space as possible. Select the MenuOptions node. In the Inspector, scroll down to the Size Flags category. Click on the field to the right of the Vertical property, and check Expand in addition to Fill. The container expands to take all the available vertical space while respecting its neighbors, the Logo and Version elements.

To center the nodes in the VBoxContainer, scroll to the top of the Inspector and change the Alignment property to Center.

../../_images/ui_main_menu_containers_step_5.png

The menu options should center vertically in the UI’s left column.

To wrap things up, let’s add some separation between the menu options. Expand the Custom Constants category below Size Flags, and click the field next to the Separation parameter. Set it to 30. Once you press enter, the Separation property becomes active and Godot adds 30 pixels between menu options.

../../_images/ui_main_menu_design_final_result.png

The final interface.

Ohne eine einzige Zeile Code 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 ein 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.

You can change the scale mode in the project settings: click Project > Project Settings in the top menu. In the window’s left column, look for the Display category. Click on the Window sub-category. On the right side of the window, you’ll find a Stretch section. The three settings, Mode, Aspect, and Shrink, control the screen size. For more information, see Multiple resolutions.