Basic Main Menu setup in Godot 4

David

Basic Main Menu setup in Godot 4

In this tutorial, we will be using Godot version 4.1.1 stable.

We will begin by creating a new scene with a Control as a base node and renaming it “MainMenu” or “TitlePage.” I’m sure there are many ways to set up a main menu depending on the needs or wants of each developer, but most have the same basic elements: a Sprite2D or AnimatedSprite 2D for imagery, an AnimationPlayer if there are animations to accompany the Sprite2D, labels, buttons, and then PanelContainers, MarginContainers, VBoxContainers, and HBoxContainers. There is a great YouTube video by Godotneers at (23) Godot UI Basics – how to build beautiful interfaces that work everywhere (Beginners) – YouTube that really helped me figure out how to piece this all together, with room to grow as I get more comfortable with creating UI in Godot.

For myself, I have my base Control node named “MainMenu,” an AnimationPlayer and Sprite2D, a MarginContainer renamed “Options,” and a PanelContainer renamed “Game Title Inside,” as children of the base node. The MarginContainer named Options has a VBoxContainer as a child, with four buttons as its children, named Play, Load, Credits, and Quit. The PanelContainer named Game Title Inside has a MarginContainer as a child, a VBoxContainer as its child, and three labels named Game Title, by, and Me.

The script attached to the main menu controls the animations as well as what happens when the buttons are pressed.

Adding Background Music

Using AudioStreamPlayer. Godot’s AudioStreamPlayer is audio that plays from a non-positional area, perfect for background music. Audio playing from specific locations would use AudioStreamPlayer2D or AudioStreamPlayer3D instead of AudioStreamPlayer.

Add a child node to your MainMenu scene.

Rename the AudioStreamPlayer as “Background Music”

We can assign the audio file that should play for this audio player node in the Inspector panel. Click on <empty> next to your Stream property in your Inspector panel and select “Quick Load.” This will set the AudioStream object as whatever .wav file you loaded into your file system when you started your project.

Once you have loaded your .wav file, you can click on play to hear the music selected. Next you will check the box for autoplay.

When you run your scene, your music should play by default while in the Main Menu only.

Here is a sample of my main menu as a work in progress


Resources I used:

Background by Lornn, he can be found on itch.io at Fantasy Swamp Backgrounds by Lornn (itch.io)

Sprites by Humble Pixel also can be found on itch.io at Humble Pixel – itch.io

Music was composed myself. I know nothing about composing music but I used 1BITDRAGON found on Steam, which was fun to mess around with.