Hauptmenü und Szenenwechsel

Um ein „vollständiges“ Spielgefühl zu bekommen und die Struktur unseres Projekts zu organisieren, ist es entscheidend zu lernen, wie man zwischen verschiedenen Szenen wechselt. Der erste Schritt dazu ist die Erstellung eines Hauptmenüs. Ein Hauptmenü dient als erster Kontaktpunkt für die Spieler:innen mit unserem Spiel und führt sie von dort aus in die eigentliche Spielwelt.

In diesem Artikel werden wir:

  • Eine neue, eigenständige Scene für unser Hauptmenü erstellen.
  • Ein Hintergrundbild für das Menü einfügen.
  • TextureButton Nodes für die Aktionen „Spiel starten“ und „Verlassen“ hinzufügen.
  • Ein Script schreiben, das den Szenenwechsel zur Spielwelt sowie das Beenden der Anwendung handhabt.
  • Festlegen, dass unser Spiel mit diesem Hauptmenü startet.

Schritt 1: Eine neue Scene für das Hauptmenü erstellen (main_menu.tscn)

Ein Hauptmenü besteht hauptsächlich aus Benutzeroberflächen-Elementen. Daher wählen wir einen Control Node als Wurzel (Root), da dieser die Basisklasse für alle UI-Nodes in Godot ist und sich gut als Root für UI-Szenen eignet.

  1. Gehe im Menü auf Scene -> New Scene (Strg + N).
  2. Wähle einen Control Node als Wurzel (Root) aus.
  3. Benenne den Root-Node im Scene Dock um, z.B. in MainMenu.
  4. Speichere die Scene: Scene -> Save Scene (Strg + S). Nenne sie main_menu.tscn und speichere sie am besten im Projekt-Root oder in einem neuen Ordner scenes/ui.

Schritt 2: Hintergrundbild und Texture-Buttons hinzufügen

Da unser Hauptmenü ein Hintergrundbild haben soll, nutzen wir einen TextureRect für den Hintergrund und TextureButton Nodes für die klickbaren Elemente. Das sorgt für ein ansprechenderes, grafisches Menü.

  1. Hintergrundbild einfügen (TextureRect):
    • Öffne die Szene main_menu.tscn.
    • Wähle im Scene Dock den Root-Node MainMenu (Control) aus.
    • Klicke auf den „+“ Button (Child Node hinzufügen). Suche und wähle TextureRect. Klicke „Create“. Benenne ihn z.B. in Background.
    • Wähle den Background Node aus und gehe in den Inspector. Suche die Eigenschaft „Texture“. Klicke auf das Dropdown -> „Load“. Wähle deine Hintergrundbild-Datei aus (kopiere sie vorher in deinen Projektordner, falls noch nicht geschehen).
      • Du kannst dir wieder ein Bild von itch.io herunterladen, wenn du kein passendes hast.
    • Gehe im Inspector unter „Control“ zum Abschnitt „Layout“. Klicke auf das Dropdown und wähle im Bereich „Presets“ die Option „Full Rect“. Das sorgt dafür, dass der TextureRect den gesamten Platz des Eltern-Containers (hier der Root MainMenu, der die Größe des Fensters hat) einnimmt und sich mit dem Fenster skaliert.
    • Wichtig für die Zeichenreihenfolge: Nodes, die weiter unten im Scene Dock stehen, werden später gezeichnet und erscheinen somit über Nodes, die weiter oben stehen. Dein Hintergrund muss ganz hinten gezeichnet werden. Er sollte der erste Child-Node sein.
  2. TextureButton für „Spiel starten“ hinzufügen:
    • Wähle im Scene Dock wieder den Root-Node MainMenu (Control) aus.
    • Klicke auf den „+“ Button. Suche und wähle TextureButton. Benenne ihn z.B. in StartGameButton.
    • Wähle den StartGameButton aus und gehe in den Inspector. Suche den Abschnitt „TextureButton“.
    • Bei der Eigenschaft „Texture Normal“, klicke auf das Dropdown -> „Load“. Wähle die Grafik für den normalen Zustand deines „Spiel starten“-Buttons. (auch hierzu gibt es genug im Internet zu finden, z. B. wieder auf itch.io – denk daran, die Grafiken in den Projektordner zu kopieren).
    • (Optional) Wenn du Grafiken für andere Zustände hast (wenn die Maus drüber ist, wenn der Button geklickt wird, …), weise diese den Eigenschaften „Texture Hover“, „Texture Pressed“ etc. zu.
    • Positioniere den StartGameButton. Du kannst die Layout-Presets unter „Control“ -> „Layout“ verwenden (z.B. „Center“ oder „Center Bottom“) und danach die „Position“ oder „Offset“ anpassen, um ihn an der gewünschten Stelle zu platzieren. Passe die Größe des Buttons im Viewport durch Ziehen der Griffe oder über die „Size“-Eigenschaft im Inspector an.
  3. TextureButton für „Verlassen“ hinzufügen:
    • Wähle im Scene Dock wieder den Root-Node MainMenu (Control) aus.
    • Klicke auf den „+“ Button. Suche und wähle TextureButton. Benenne ihn z.B. in ExitButton.
    • Weise die Textur für den „Texture Normal“ Zustand deines „Verlassen“-Buttons zu (und optional Hover/Pressed).
    • Positioniere den ExitButton unter dem „Spiel starten“-Button (ggf. denselben Layout-Preset nutzen und Offsets anpassen).
  4. Speichere die Szene main_menu.tscn (Strg + S).

Wenn du jetzt F5 drückst, siehst du das Hintergrundbild und deine grafischen Buttons. Sie funktionieren aber noch nicht.


Schritt 3: Skript für Button-Logik hinzufügen und Signale verbinden

Jetzt brauchen wir ein Skript, das auf die Klicks der neuen Buttons reagiert und den Szenenwechsel bzw. das Beenden der Anwendung durchführt. Wir hängen dieses Skript am Root-Node MainMenu an, um die gesamte Menülogik zentral zu verwalten.

  1. Skript an den MainMenu Node anhängen:
    • Wähle im Scene Dock den Root-Node MainMenu (Control) aus.
    • Klicke auf den Button „Attach Script“ (Pergamentrolle mit Plus) oberhalb des Scene Trees.
    • Als „Base Type“ sollte Control stehen, und der Pfad main_menu.gd vorschlagen. Klicke „Create“.
    • Speichere das Skript main_menu.gd (Strg + S).
  2. Signale der Buttons im Editor verbinden: Um auf das Klicken der Buttons zu reagieren, verbinden wir ihre pressed()-Signale mit Funktionen in unserem main_menu.gd Skript.
    • Für den StartGameButton:
      • Wähle im Scene Dock den StartGameButton Node aus.
      • Gehe zum Node Dock (rechts neben dem Inspector).
      • Klicke auf den Tab „Signals“.
      • Suche das Signal pressed().
      • Klicke doppelt darauf oder wähle es aus und klicke auf „Connect…“.
      • Im „Connect a Signal“-Fenster sollte der „Emitter“ der StartGameButton sein. Unter „Receiver“ wähle den MainMenu Node aus (da unser main_menu.gd Script daran hängt). Der „Method“-Name sollte automatisch generiert werden, z.B. _on_StartGameButton_pressed. Lasse ihn so.
      • Klicke auf „Connect“. Godot erstellt die neue Funktion in deinem main_menu.gd Skript und springt zum Script Editor.
    • Für den ExitButton:
      • Wiederhole die Schritte für den ExitButton. Wähle ihn im Scene Dock aus, gehe zum Node Dock, suche das Signal pressed(), klicke „Connect…“, wähle den MainMenu Node als „Receiver“ und klicke „Connect“. Die Methode sollte _on_ExitButton_pressed lauten.
  3. Logik im main_menu.gd Skript implementieren: Dein main_menu.gd Skript sollte nun die folgenden Funktionen und eine @onready-Referenz für die Buttons enthalten:

@onready var ... = $NodeName: Diese Zeilen ermöglichen es uns, bequem auf die Child-Nodes (unsere Buttons) des MainMenu Nodes zuzugreifen.

  • get_tree().change_scene_to_file("res://scene/world.tscn"): Dies ist die Godot-Methode, um die aktuell laufende Scene zu wechseln. Der Pfad res:// bezieht sich immer auf das Stammverzeichnis deines Projekts. scene ist der Unterordner, in der du die World-Szene erstellt hast. Solltest du es anders organisiert haben, musst du den Pfad entsprechend anpassen.
  • get_tree().quit(): Diese Methode beendet die Anwendung.

Speichere das Skript main_menu.gd (Strg + S).


Schritt 4: Hauptmenü als Startszene festlegen

Standardmäßig startet Godot immer die Scene, die in den Projekt-Einstellungen festgelegt ist (im Moment wahrscheinlich noch world.tscn). Wir müssen Godot sagen, dass es mit dem Hauptmenü starten soll.

  1. Gehe im Menü auf Project -> Project Settings….
  2. Wähle im linken Menü den Abschnitt „Application“ und dort den Unterabschnitt „Run“.
  3. Suche die Eigenschaft „Main Scene“. Klicke auf das Ordner-Icon rechts daneben.
  4. Navigiere zu deiner Datei main_menu.tscn und wähle sie aus. Klicke „Open“.
  5. Schließe das Fenster Project Settings.

Schritt 5: Ausführen

Führe das Projekt aus (F5).

Ergebnis:

Das Spiel startet nun mit deinem grafischen Hauptmenü! Wenn du auf den Button „Spiel starten“ klickst, wechselt Godot zur Scene world.tscn, und du siehst dein Spiel mit dem Player und den Münzen. Der Button „Verlassen“ beendet die Anwendung.


Dein nächster Schritt

Fantastisch! Du hast gelernt, wie man ein Hauptmenü in Godot erstellt, grafische Buttons verwendet und den Szenenwechsel implementiert. Dies ist eine absolut grundlegende Fähigkeit für die Entwicklung jedes vollständigen Spiels. Wir haben nun eine klare Startseite für unser Spiel geschaffen und können nahtlos in die Spielwelt übergehen.

Als Nächstes werden wir uns dem Thema „Mehrere Levels“ widmen und lernen, wie man zwischen verschiedenen Levels wechselt, um ein noch umfassenderes Spielerlebnis zu schaffen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Seite verwendet Akismet, um Spam zu reduzieren. Erfahre, wie deine Kommentardaten verarbeitet werden..