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.
- Gehe im Menü auf Scene -> New Scene (Strg + N).
- Wähle einen
Control
Node als Wurzel (Root) aus. - Benenne den Root-Node im Scene Dock um, z.B. in
MainMenu
. - 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 Ordnerscenes/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ü.
- 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. inBackground
. - 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 RootMainMenu
, 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.
- Öffne die Szene
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. inStartGameButton
. - 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.
- Wähle im Scene Dock wieder den Root-Node
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. inExitButton
. - 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).
- Wähle im Scene Dock wieder den Root-Node
- 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.
- 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 Pfadmain_menu.gd
vorschlagen. Klicke „Create“. - Speichere das Skript
main_menu.gd
(Strg + S).
- Wähle im Scene Dock den Root-Node
- Signale der Buttons im Editor verbinden: Um auf das Klicken der Buttons zu reagieren, verbinden wir ihre
pressed()
-Signale mit Funktionen in unseremmain_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 denMainMenu
Node aus (da unsermain_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.
- Wähle im Scene Dock den
- Für den ExitButton:
- Wiederhole die Schritte für den
ExitButton
. Wähle ihn im Scene Dock aus, gehe zum Node Dock, suche das Signalpressed()
, klicke „Connect…“, wähle denMainMenu
Node als „Receiver“ und klicke „Connect“. Die Methode sollte_on_ExitButton_pressed
lauten.
- Wiederhole die Schritte für den
- Für den StartGameButton:
- Logik im
main_menu.gd
Skript implementieren: Deinmain_menu.gd
Skript sollte nun die folgenden Funktionen und eine@onready
-Referenz für die Buttons enthalten:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
class_name MainMenu extends Control # Referenzen auf die Buttons @onready var start_game_button = $StartGameButton @onready var exit_button = $ExitButton # Funktion, die aufgerufen wird, wenn der Start-Button geklickt wird func _on_StartGameButton_pressed(): # Wechsle zur Hauptspielszene (world.tscn) # Stelle sicher, dass der Pfad zu unserer world.tscn korrekt ist! get_tree().change_scene_to_file("res://scenes/world.tscn") # Funktion, die aufgerufen wird, wenn der Verlassen-Button geklickt wird func _on_ExitButton_pressed(): # Beendet die Anwendung get_tree().quit() |
@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 Pfadres://
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.
- Gehe im Menü auf Project -> Project Settings….
- Wähle im linken Menü den Abschnitt „Application“ und dort den Unterabschnitt „Run“.
- Suche die Eigenschaft „Main Scene“. Klicke auf das Ordner-Icon rechts daneben.
- Navigiere zu deiner Datei
main_menu.tscn
und wähle sie aus. Klicke „Open“. - 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.