{"id":657,"date":"2025-06-17T09:00:00","date_gmt":"2025-06-17T07:00:00","guid":{"rendered":"https:\/\/staratnight.de\/blog\/?p=657"},"modified":"2026-03-08T23:21:32","modified_gmt":"2026-03-08T21:21:32","slug":"hauptmenue-und-szenenwechsel","status":"publish","type":"post","link":"https:\/\/staratnight.de\/blog\/hauptmenue-und-szenenwechsel\/","title":{"rendered":"Hauptmen\u00fc und Szenenwechsel"},"content":{"rendered":"\n<p>Um ein &#8222;vollst\u00e4ndiges&#8220; Spielgef\u00fchl zu bekommen und die Struktur unseres Projekts zu organisieren, ist es entscheidend zu lernen, wie man <strong>zwischen verschiedenen Szenen wechselt<\/strong>. Der erste Schritt dazu ist die Erstellung eines <strong>Hauptmen\u00fcs<\/strong>. Ein Hauptmen\u00fc dient als erster Kontaktpunkt f\u00fcr die Spieler:innen mit unserem Spiel und f\u00fchrt sie von dort aus in die eigentliche Spielwelt.<\/p>\n\n\n\n<p>In diesem Artikel werden wir:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Eine neue, eigenst\u00e4ndige Scene f\u00fcr unser Hauptmen\u00fc erstellen.<\/li>\n\n\n\n<li>Ein <strong>Hintergrundbild<\/strong> f\u00fcr das Men\u00fc einf\u00fcgen.<\/li>\n\n\n\n<li><strong><code>TextureButton<\/code><\/strong> Nodes f\u00fcr die Aktionen &#8222;Spiel starten&#8220; und &#8222;Verlassen&#8220; hinzuf\u00fcgen.<\/li>\n\n\n\n<li>Ein Script schreiben, das den <strong>Szenenwechsel<\/strong> zur Spielwelt sowie das <strong>Beenden der Anwendung<\/strong> handhabt.<\/li>\n\n\n\n<li>Festlegen, dass unser Spiel mit diesem Hauptmen\u00fc startet.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Schritt 1: Eine neue Scene f\u00fcr das Hauptmen\u00fc erstellen (<code>main_menu.tscn<\/code>)<\/h3>\n\n\n\n<p>Ein Hauptmen\u00fc besteht haupts\u00e4chlich aus Benutzeroberfl\u00e4chen-Elementen. Daher w\u00e4hlen wir einen <strong><code>Control<\/code><\/strong> Node als Wurzel (Root), da dieser die Basisklasse f\u00fcr alle UI-Nodes in Godot ist und sich gut als Root f\u00fcr UI-Szenen eignet.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Gehe im Men\u00fc auf <strong>Scene<\/strong> -> <strong>New Scene<\/strong> (Strg + N).<\/li>\n\n\n\n<li>W\u00e4hle einen <strong><code>Control<\/code><\/strong> Node als Wurzel (Root) aus. <\/li>\n\n\n\n<li>Benenne den Root-Node im Scene Dock um, z.B. in <strong><code>MainMenu<\/code><\/strong>.<\/li>\n\n\n\n<li>Speichere die Scene: <strong>Scene<\/strong> -> <strong>Save Scene<\/strong> (Strg + S). Nenne sie <code>main_menu.tscn<\/code> und speichere sie am besten im Projekt-Root oder in einem neuen Ordner <code>scenes\/ui<\/code>.<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Schritt 2: Hintergrundbild und Texture-Buttons hinzuf\u00fcgen<\/h3>\n\n\n\n<p>Da unser Hauptmen\u00fc ein Hintergrundbild haben soll, nutzen wir einen <code>TextureRect<\/code> f\u00fcr den Hintergrund und <code>TextureButton<\/code> Nodes f\u00fcr die klickbaren Elemente. Das sorgt f\u00fcr ein ansprechenderes, grafisches Men\u00fc.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Hintergrundbild einf\u00fcgen (<code>TextureRect<\/code>):<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u00d6ffne die Szene <code>main_menu.tscn<\/code>.<\/li>\n\n\n\n<li>W\u00e4hle im Scene Dock den Root-Node <strong><code>MainMenu<\/code><\/strong> (<code>Control<\/code>) aus.<\/li>\n\n\n\n<li>Klicke auf den <strong>&#8222;+&#8220;<\/strong> Button (Child Node hinzuf\u00fcgen). Suche und w\u00e4hle <strong><code>TextureRect<\/code><\/strong>. Klicke <strong>&#8222;Create&#8220;<\/strong>. Benenne ihn z.B. in <strong><code>Background<\/code><\/strong>.<\/li>\n\n\n\n<li>W\u00e4hle den <strong><code>Background<\/code><\/strong> Node aus und gehe in den Inspector. Suche die Eigenschaft <strong>&#8222;Texture&#8220;<\/strong>. Klicke auf das Dropdown -> <strong>&#8222;Load&#8220;<\/strong>. W\u00e4hle deine Hintergrundbild-Datei aus (kopiere sie vorher in deinen Projektordner, falls noch nicht geschehen).\n<ul class=\"wp-block-list\">\n<li>Du kannst dir wieder ein Bild von <a href=\"https:\/\/kadalaka.itch.io\/background-image1\">itch.io<\/a> herunterladen, wenn du kein passendes hast. <\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Gehe im Inspector unter <strong>&#8222;Control&#8220;<\/strong> zum Abschnitt <strong>&#8222;Layout&#8220;<\/strong>. Klicke auf das Dropdown und w\u00e4hle im Bereich <strong>&#8222;Presets&#8220;<\/strong> die Option <strong>&#8222;Full Rect&#8220;<\/strong>. Das sorgt daf\u00fcr, dass der <code>TextureRect<\/code> den gesamten Platz des Eltern-Containers (hier der Root <code>MainMenu<\/code>, der die Gr\u00f6\u00dfe des Fensters hat) einnimmt und sich mit dem Fenster skaliert.<\/li>\n\n\n\n<li><strong>Wichtig f\u00fcr die Zeichenreihenfolge:<\/strong> Nodes, die weiter <strong>unten<\/strong> im Scene Dock stehen, werden <strong>sp\u00e4ter<\/strong> gezeichnet und erscheinen somit <strong>\u00fcber<\/strong> Nodes, die weiter <strong>oben<\/strong> stehen. Dein Hintergrund muss ganz hinten gezeichnet werden. Er sollte der <strong>erste <\/strong>Child-Node sein.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong><code>TextureButton<\/code> f\u00fcr &#8222;Spiel starten&#8220; hinzuf\u00fcgen:<\/strong>\n<ul class=\"wp-block-list\">\n<li>W\u00e4hle im Scene Dock wieder den Root-Node <strong><code>MainMenu<\/code><\/strong> (<code>Control<\/code>) aus.<\/li>\n\n\n\n<li>Klicke auf den <strong>&#8222;+&#8220;<\/strong> Button. Suche und w\u00e4hle <strong><code>TextureButton<\/code><\/strong>. Benenne ihn z.B. in <strong><code>StartGameButton<\/code><\/strong>.<\/li>\n\n\n\n<li>W\u00e4hle den <strong><code>StartGameButton<\/code><\/strong> aus und gehe in den Inspector. Suche den Abschnitt <strong>&#8222;TextureButton&#8220;<\/strong>.<\/li>\n\n\n\n<li>Bei der Eigenschaft <strong>&#8222;Texture Normal&#8220;<\/strong>, klicke auf das Dropdown -> <strong>&#8222;Load&#8220;<\/strong>. W\u00e4hle die Grafik f\u00fcr den normalen Zustand deines &#8222;Spiel starten&#8220;-Buttons. (auch hierzu gibt es genug im Internet zu finden, z. B. wieder auf <a href=\"https:\/\/slyfox-studios.itch.io\/buttons-pack\">itch.io<\/a> &#8211; denk daran, die Grafiken in den Projektordner zu kopieren).<\/li>\n\n\n\n<li>(Optional) Wenn du Grafiken f\u00fcr andere Zust\u00e4nde hast (wenn die Maus dr\u00fcber ist, wenn der Button geklickt wird, &#8230;), weise diese den Eigenschaften <strong>&#8222;Texture Hover&#8220;<\/strong>, <strong>&#8222;Texture Pressed&#8220;<\/strong> etc. zu.<\/li>\n\n\n\n<li>Positioniere den <code>StartGameButton<\/code>. Du kannst die Layout-Presets unter <strong>&#8222;Control&#8220;<\/strong> -> <strong>&#8222;Layout&#8220;<\/strong> verwenden (z.B. &#8222;Center&#8220; oder &#8222;Center Bottom&#8220;) und danach die <strong>&#8222;Position&#8220;<\/strong> oder <strong>&#8222;Offset&#8220;<\/strong> anpassen, um ihn an der gew\u00fcnschten Stelle zu platzieren. Passe die Gr\u00f6\u00dfe des Buttons im Viewport durch Ziehen der Griffe oder \u00fcber die <strong>&#8222;Size&#8220;<\/strong>-Eigenschaft im Inspector an.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong><code>TextureButton<\/code> f\u00fcr &#8222;Verlassen&#8220; hinzuf\u00fcgen:<\/strong>\n<ul class=\"wp-block-list\">\n<li>W\u00e4hle im Scene Dock wieder den Root-Node <strong><code>MainMenu<\/code><\/strong> (<code>Control<\/code>) aus.<\/li>\n\n\n\n<li>Klicke auf den <strong>&#8222;+&#8220;<\/strong> Button. Suche und w\u00e4hle <strong><code>TextureButton<\/code><\/strong>. Benenne ihn z.B. in <strong><code>ExitButton<\/code><\/strong>.<\/li>\n\n\n\n<li>Weise die Textur f\u00fcr den <strong>&#8222;Texture Normal&#8220;<\/strong> Zustand deines &#8222;Verlassen&#8220;-Buttons zu (und optional <code>Hover<\/code>\/<code>Pressed<\/code>).<\/li>\n\n\n\n<li>Positioniere den <code>ExitButton<\/code> unter dem &#8222;Spiel starten&#8220;-Button (ggf. denselben Layout-Preset nutzen und Offsets anpassen).<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Speichere die Szene <code>main_menu.tscn<\/code> (Strg + S).<\/li>\n<\/ol>\n\n\n\n<p>Wenn du jetzt F5 dr\u00fcckst, siehst du das Hintergrundbild und deine grafischen Buttons. Sie funktionieren aber noch nicht.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Schritt 3: Skript f\u00fcr Button-Logik hinzuf\u00fcgen und Signale verbinden<\/h3>\n\n\n\n<p>Jetzt brauchen wir ein Skript, das auf die Klicks der neuen Buttons reagiert und den Szenenwechsel bzw. das Beenden der Anwendung durchf\u00fchrt. Wir h\u00e4ngen dieses Skript am Root-Node <code>MainMenu<\/code> an, um die gesamte Men\u00fclogik zentral zu verwalten.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Skript an den MainMenu Node anh\u00e4ngen:<\/strong>\n<ul class=\"wp-block-list\">\n<li>W\u00e4hle im Scene Dock den Root-Node <strong><code>MainMenu<\/code><\/strong> (<code>Control<\/code>) aus.<\/li>\n\n\n\n<li>Klicke auf den Button <strong>&#8222;Attach Script&#8220;<\/strong> (Pergamentrolle mit Plus) oberhalb des Scene Trees.<\/li>\n\n\n\n<li>Als <strong>&#8222;Base Type&#8220;<\/strong> sollte <code>Control<\/code> stehen, und der Pfad <code>main_menu.gd<\/code> vorschlagen. Klicke <strong>&#8222;Create&#8220;<\/strong>.<\/li>\n\n\n\n<li>Speichere das Skript <code>main_menu.gd<\/code> (Strg + S).<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Signale der Buttons im Editor verbinden:<\/strong> Um auf das Klicken der Buttons zu reagieren, verbinden wir ihre <code>pressed()<\/code>-Signale mit Funktionen in unserem <code>main_menu.gd<\/code> Skript.\n<ul class=\"wp-block-list\">\n<li><strong>F\u00fcr den StartGameButton:<\/strong>\n<ul class=\"wp-block-list\">\n<li>W\u00e4hle im Scene Dock den <strong><code>StartGameButton<\/code><\/strong> Node aus.<\/li>\n\n\n\n<li>Gehe zum <strong>Node Dock<\/strong> (rechts neben dem Inspector).<\/li>\n\n\n\n<li>Klicke auf den Tab <strong>&#8222;Signals&#8220;<\/strong>.<\/li>\n\n\n\n<li>Suche das Signal <strong><code>pressed()<\/code><\/strong>.<\/li>\n\n\n\n<li>Klicke doppelt darauf oder w\u00e4hle es aus und klicke auf <strong>&#8222;Connect&#8230;&#8220;<\/strong>.<\/li>\n\n\n\n<li>Im &#8222;Connect a Signal&#8220;-Fenster sollte der &#8222;Emitter&#8220; der <code>StartGameButton<\/code> sein. Unter &#8222;Receiver&#8220; w\u00e4hle den <code>MainMenu<\/code> Node aus (da unser <code>main_menu.gd<\/code> Script daran h\u00e4ngt). Der &#8222;Method&#8220;-Name sollte automatisch generiert werden, z.B. <code>_on_StartGameButton_pressed<\/code>. Lasse ihn so.<\/li>\n\n\n\n<li>Klicke auf <strong>&#8222;Connect&#8220;<\/strong>. Godot erstellt die neue Funktion in deinem <code>main_menu.gd<\/code> Skript und springt zum Script Editor.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>F\u00fcr den ExitButton:<\/strong>\n<ul class=\"wp-block-list\">\n<li>Wiederhole die Schritte f\u00fcr den <strong><code>ExitButton<\/code><\/strong>. W\u00e4hle ihn im Scene Dock aus, gehe zum Node Dock, suche das Signal <code>pressed()<\/code>, klicke <strong>&#8222;Connect&#8230;&#8220;<\/strong>, w\u00e4hle den <code>MainMenu<\/code> Node als &#8222;Receiver&#8220; und klicke <strong>&#8222;Connect&#8220;<\/strong>. Die Methode sollte <code>_on_ExitButton_pressed<\/code> lauten.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Logik im <code>main_menu.gd<\/code> Skript implementieren:<\/strong> Dein <code>main_menu.gd<\/code> Skript sollte nun die folgenden Funktionen und eine <code>@onready<\/code>-Referenz f\u00fcr die Buttons enthalten:<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:python decode:true \" >class_name MainMenu extends Control\n\n# Referenzen auf die Buttons\n@onready var start_game_button = $StartGameButton\n@onready var exit_button = $ExitButton\n\n# Funktion, die aufgerufen wird, wenn der Start-Button geklickt wird\nfunc _on_StartGameButton_pressed():\n    # Wechsle zur Hauptspielszene (world.tscn)\n    # Stelle sicher, dass der Pfad zu unserer world.tscn korrekt ist!\n    get_tree().change_scene_to_file(\"res:\/\/scenes\/world.tscn\")\n\n# Funktion, die aufgerufen wird, wenn der Verlassen-Button geklickt wird\nfunc _on_ExitButton_pressed():\n    # Beendet die Anwendung\n    get_tree().quit()<\/pre><\/div>\n\n\n\n<p><strong><code>@onready var ... = $NodeName<\/code><\/strong>: Diese Zeilen erm\u00f6glichen es uns, bequem auf die Child-Nodes (unsere Buttons) des <code>MainMenu<\/code> Nodes zuzugreifen.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>get_tree().change_scene_to_file(\"res:\/\/scene\/world.tscn\")<\/code><\/strong>: Dies ist die Godot-Methode, um die aktuell laufende Scene zu wechseln. Der Pfad <code>res:\/\/<\/code> bezieht sich immer auf das Stammverzeichnis deines Projekts. <code>scene<\/code> ist der Unterordner, in der du die World-Szene erstellt hast. Solltest du es anders organisiert haben, musst du den Pfad entsprechend anpassen.<\/li>\n\n\n\n<li><strong><code>get_tree().quit()<\/code><\/strong>: Diese Methode beendet die Anwendung.<\/li>\n<\/ul>\n\n\n\n<p>Speichere das Skript <code>main_menu.gd<\/code> (Strg + S).<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Schritt 4: Hauptmen\u00fc als Startszene festlegen<\/h3>\n\n\n\n<p>Standardm\u00e4\u00dfig startet Godot immer die Scene, die in den Projekt-Einstellungen festgelegt ist (im Moment wahrscheinlich noch <code>world.tscn<\/code>). Wir m\u00fcssen Godot sagen, dass es mit dem Hauptmen\u00fc starten soll.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Gehe im Men\u00fc auf <strong>Project<\/strong> -> <strong>Project Settings&#8230;<\/strong>.<\/li>\n\n\n\n<li>W\u00e4hle im linken Men\u00fc den Abschnitt <strong>&#8222;Application&#8220;<\/strong> und dort den Unterabschnitt <strong>&#8222;Run&#8220;<\/strong>.<\/li>\n\n\n\n<li>Suche die Eigenschaft <strong>&#8222;Main Scene&#8220;<\/strong>. Klicke auf das Ordner-Icon rechts daneben.<\/li>\n\n\n\n<li>Navigiere zu deiner Datei <strong><code>main_menu.tscn<\/code><\/strong> und w\u00e4hle sie aus. Klicke <strong>&#8222;Open&#8220;<\/strong>.<\/li>\n\n\n\n<li>Schlie\u00dfe das Fenster <strong>Project Settings<\/strong>.<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Schritt 5: Ausf\u00fchren<\/h3>\n\n\n\n<p>F\u00fchre das Projekt aus (F5).<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Ergebnis:<\/h4>\n\n\n\n<p>Das Spiel startet nun mit deinem grafischen Hauptmen\u00fc! Wenn du auf den Button <strong>&#8222;Spiel starten&#8220;<\/strong> klickst, wechselt Godot zur Scene <code>world.tscn<\/code>, und du siehst dein Spiel mit dem Player und den M\u00fcnzen. Der Button <strong>&#8222;Verlassen&#8220;<\/strong> beendet die Anwendung.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Dein n\u00e4chster Schritt<\/h3>\n\n\n\n<p>Fantastisch! Du hast gelernt, wie man ein <strong>Hauptmen\u00fc<\/strong> in Godot erstellt, grafische Buttons verwendet und den <strong>Szenenwechsel<\/strong> implementiert. Dies ist eine absolut grundlegende F\u00e4higkeit f\u00fcr die Entwicklung jedes vollst\u00e4ndigen Spiels. Wir haben nun eine klare Startseite f\u00fcr unser Spiel geschaffen und k\u00f6nnen nahtlos in die Spielwelt \u00fcbergehen.<\/p>\n\n\n\n<p>Als N\u00e4chstes werden wir uns dem Thema <strong>&#8222;Mehrere Levels&#8220;<\/strong> widmen und lernen, wie man <strong>zwischen verschiedenen Levels wechselt<\/strong>, um ein noch umfassenderes Spielerlebnis zu schaffen.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Um ein &#8222;vollst\u00e4ndiges&#8220; Spielgef\u00fchl zu bekommen und die Struktur unseres Projekts zu organisieren, ist es entscheidend zu lernen, wie man zwischen verschiedenen Szenen&hellip;<\/p>\n","protected":false},"author":2,"featured_media":662,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[33],"tags":[35,34,46],"class_list":["post-657","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-godot","tag-2d-game","tag-godot","tag-ui"],"_links":{"self":[{"href":"https:\/\/staratnight.de\/blog\/wp-json\/wp\/v2\/posts\/657","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/staratnight.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/staratnight.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/staratnight.de\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/staratnight.de\/blog\/wp-json\/wp\/v2\/comments?post=657"}],"version-history":[{"count":1,"href":"https:\/\/staratnight.de\/blog\/wp-json\/wp\/v2\/posts\/657\/revisions"}],"predecessor-version":[{"id":658,"href":"https:\/\/staratnight.de\/blog\/wp-json\/wp\/v2\/posts\/657\/revisions\/658"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/staratnight.de\/blog\/wp-json\/wp\/v2\/media\/662"}],"wp:attachment":[{"href":"https:\/\/staratnight.de\/blog\/wp-json\/wp\/v2\/media?parent=657"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/staratnight.de\/blog\/wp-json\/wp\/v2\/categories?post=657"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/staratnight.de\/blog\/wp-json\/wp\/v2\/tags?post=657"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}