How To Make a Topdown RPG in Godot 4: Adding Menus! (Part 3)

Summary

This video tutorial guides viewers through creating a settings menu in a game development environment using Godot. It covers the process of organizing audio files, setting up folders, and constructing a user interface with various containers and elements like checkboxes, sliders, and buttons. The script also demonstrates how to implement audio and video settings adjustments, including volume control and full-screen toggles, and concludes with saving and testing the menu.

Takeaways

• 📁 Start by organizing files: Create folders named 'audio' and 'menus' for structured project management.
• 🎵 Import audio files: Bring in a 'toggle' sound and a 'wind' sound to be used for music toggles in the project.
• 🛠️ Set up UI elements: Construct a pop-up panel with nested containers (VBox, Panel, Margin, HBox) and a checkbox for 'fullscreen'.
• 🔊 Manage audio settings: Duplicate and rename panel containers to 'sound settings' and 'video settings', adjusting UI components accordingly.
• 🔑 Utilize sliders: Add sliders for 'game slider' and 'music slider' to control audio levels, using a horizontal orientation.
• 🎛️ Implement audio streaming: Add 'AudioStreamPlayer' nodes for sound effects and music, and configure them with respective buses.
• 🔈 Adjust audio buses: Create and assign buses for 'music' and 'sound effects' to manage different audio types separately.
• 📝 Script interactions: Write scripts for adjusting volume based on slider values and toggling fullscreen mode.
• 🔗 Connect UI to functionality: Ensure sliders and checkboxes are connected to the correct script functions for immediate feedback.
• 🎮 Create a main menu: Design a main menu with buttons for 'play', 'settings', and 'quit', and ensure the pop-up panel is initialized as invisible.
• 🔄 Test and iterate: After setting up, test the in-game audio and video settings to ensure they function as intended and make adjustments if necessary.

Q & A

What is the first step in creating the audio and menus folders in the script?

The first step is to create a new folder named 'audio' and another one named 'menus'.

Which two sounds are imported for the audio in the script?

A toggle sound and a wind sound are imported for the audio.

What kind of panel is created first in the script, and what is its purpose?

A pop-up panel is created first, which is used to create settings for sound and video.

How are the containers structured within the pop-up panel?

The containers are structured as follows: a VBox container, a Panel container, a Margin container, an HBox container, and finally a CheckBox.

What is the purpose of duplicating the panel container in the script?

The panel container is duplicated to create separate sections for 'sound settings' and 'video settings'.

How are the sliders named after being duplicated?

The sliders are renamed to 'game slider' and 'music slider' after duplication.

What does the 'normal audio stream player' do in the script?

The 'normal audio stream player' is used to play sound effects and music, with instances named 'sound effects' and 'music'.

What are the two buses added in the audio settings, and what are they used for?

Two buses are added, one for 'music' and one for 'sound effects', used to manage the volume of these audio types.

How are the volume levels of the sound effects and music adjusted in the script?

The volume levels are adjusted using the 'game slider' and 'music slider' connected to the respective audio buses.

What is the purpose of the 'done' button in the script?

The 'done' button is used to close the pop-up settings panel.

How is the main menu created and what elements does it contain?

The main menu is created with a Control node, a Margin container, a Panel, and nested VBoxes containing labels for the game title and buttons for 'play', 'settings', and 'quit'.

What script functionality is added to the play, settings, and quit buttons in the main menu?

The play button changes the scene to 'world', the settings button opens the settings panel, and the quit button closes the application.

Outlines

00:00

🎮 Game Settings UI Creation

The paragraph describes the process of setting up a user interface for game settings in a development environment. It begins with creating folders for audio and menus. Audio files such as toggle sound and wind sound are imported. A pop-up panel is created with various container elements like vbox, panel, margin, and hbox containers. A checkbox for full-screen is added and duplicated to create sound and video settings sections. The paragraph details the renaming of containers, the addition of sliders for game and music volume, and the implementation of audio stream players for sound effects and music. Buses for music and sound effects are added in the audio settings, and the scene is saved as a pop-up menu.

05:05

🔊 Audio and Video Settings Scripting

This paragraph focuses on scripting for the previously created settings UI. It involves adding scripts to the sound and video settings sections. The script initializes export variables for sound effect and music audio names. It also sets up honorary variables and connects sliders to their respective settings. The paragraph explains how to adjust the volume based on the slider values and handle bus muting. It also covers the scripting for a full-screen toggle checkbox and a done button to close the settings panel. The paragraph concludes with the creation of a main menu with a title, buttons for play, settings, and quit, and the instantiation of the pop-up panel with its visibility set to off.

10:06

🎨 Finalizing Game Menu and Audio Setup

The final paragraph details the process of finalizing the main menu and audio setup. It involves saving the main menu scene and adjusting the visibility of UI elements. A new script is created for the main menu, which includes functions for button presses that handle scene changes, open settings, and quit the game. The paragraph also covers the addition of sound effects and music to the audio setup, adjusting bus names, and setting volume levels. The video concludes with a demonstration of the settings in action and a prompt for viewer engagement through likes and comments.

Keywords

💡Folder

In the context of the video, a 'folder' refers to a virtual container used to organize files and other folders within a file system. The script mentions creating folders named 'audio' and 'menus' to categorize and manage the project's assets, which is a common practice in digital content management to keep the workspace organized and efficient.

💡Audio

The term 'audio' in the video script pertains to sound files that are imported and used in the project. Audio files like 'toggle sound' and 'wind sound' are mentioned, which are essential for creating interactive and immersive experiences. These audio files are managed within the 'audio' folder and are utilized in the game's sound settings.

💡Pop-up Panel

A 'pop-up panel' is a UI (User Interface) element that appears on top of the main screen, typically to provide additional information or options without leaving the current screen. In the video, creating a pop-up panel is part of setting up the game's settings menu, allowing users to adjust audio and video preferences.

💡Container

In the video, 'container' refers to various UI elements like VBox, HBox, and Panel that are used to organize and layout other UI components. Containers help in structuring the user interface by grouping related elements together, which is crucial for creating a functional and aesthetically pleasing layout.

💡Slider

A 'slider' is a UI control that allows users to select a value from a range by moving a handle along a track. In the script, sliders are used for the 'game slider' and 'music slider' to adjust the volume levels of game sound effects and music, respectively. This provides a visual and interactive way for users to control audio settings.

💡Audio Stream Player

An 'audio stream player' is a component that plays audio streams in a game or application. The script mentions adding 'normal audio stream players' and duplicating them to create 'sound effects' and 'music' players. These players are used to manage and control the playback of different audio types within the game.

💡Bus

In the context of the video, a 'bus' refers to an audio bus, which is a routing path for audio signals in a mixing console or audio software. The script describes adding buses for 'music' and 'sound effects' to manage and control the audio output channels separately, allowing for independent volume adjustments and effects processing.

💡Script

A 'script' in the video refers to a piece of code that is written to define the behavior of UI elements and other game components. The script mentions adding scripts to 'sound settings' and 'video settings' to handle user interactions and apply changes, such as adjusting volume levels and toggling fullscreen mode.

💡CheckBox

A 'check box' is a UI element that allows users to select or deselect an option. In the video, a check box is used for the 'full screen' toggle, providing a visual and interactive way for users to enable or disable fullscreen mode in the game settings.

💡Margin Container

A 'margin container' is a UI element that adds space around its child elements, helping to position and organize them within the interface. The script mentions adding a margin container to the main menu to ensure that the elements are not cluttered and are visually appealing.

💡Button

A 'button' in the video is a UI element that users can click to trigger actions or events. The script describes adding buttons like 'play', 'settings', and 'quit' to the main menu, which are essential for navigating the game and accessing different features.

Highlights

Creating a new folder named 'audio' and another named 'menus'.

Importing a toggle sound and a wind sound for music toggles.

Creating a pop-up panel with a series of nested containers for settings.

Adding a full-screen toggle checkbox.

Duplicating panel containers for sound and video settings.

Renaming containers and removing unnecessary elements.

Adding sliders for game and music volume control.

Adding an AudioStreamPlayer for sound effects and music.

Creating audio buses for sound effects and music.

Saving the scene as 'pop-up menu' under the 'menus' folder.

Adding scripts to manage sound and video settings.

Initializing export variables for sound and music audio names.

Connecting sliders to settings panels for real-time volume control.

Setting up a full-screen toggle in the video settings script.

Adding a 'Done' button to close the settings pop-up.

Creating a 'main menu' scene with title, buttons, and pop-up panel instantiation.

Adding scripts to handle button presses for play, settings, and quit functions.

Setting the main menu as the project's main scene.

Adding sound effect and music to their respective buses in the settings.

Adjusting volume levels for sound effects and music.

Testing the settings panel and main menu functionality.

Invitation for feedback and engagement with a prompt for likes and comments.

Transcripts

foreign

to begin let's create a new folder

and we'll call this one audio

then we'll create another folder and it

will be called menus

now for our audio I've imported a toggle

sound

and I also imported a wind sound

which will be used for our Music toggles

we will first create a pop-up panel

then we will add a vbox container

then we will add a panel container

then we will add a margin container

then we'll add an hbox container

and then it will add a check box

we can just put in the text as full

screen

and then we can go on to duplicate

this panel container here

and we will rename this one to sound

settings

and then this one

to video settings

Oh wrong one

and then remove the check box here

create change type

into a vbox container

I did so by right clicking and then

going under the rename to change type

and then we will add a label

then we will add a slider

for this one I'm using a horizontal

slider

and then we can duplicate these

so I've renamed these to game slider and

music slider

then what we'll want to do is add a

normal audio stream player

and duplicate it

name this one to sound effects

and name this one to music

we will then go to audio then add a bus

then add another bus

this one will be our music

and this one will be our sound effects

save the scene under menus

and save it as pop-up menu

next what we'll want to do is go into

sound settings and then add a new script

and then we will want to go to video

settings and add a new script as well

after doing so we'll want to make sure

that we have our game slider

go into node

and then we will double click on value

change

and it will connect to the sound

settings

then under music slider

will go on value change as well for the

node and then we'll connect to sound

settings

so what we'll want to do first is just

remove

this over here

then we will initialize some export

variables this will be sound effect

audio name

it'll be

colon string equal to a string

we can just copy and paste this

and instead we'll have music audio

name

then we'll initialize some honorary

variables on ready VAR sound effect

player

is equal to and I'll just copy and paste

this

what you can do though is go to your

your wanted node and then you can right

click on it

and around here you'll be able to go

down and copy node path or you can also

do control shift C to control or to get

the path

then we'll get our music player

then we'll get our slider so we'll get

our

game slider for the game sound effects

and then we will get our music slider

after doing so we can go down to our

first function type variable audio index

is equal to audio server

dot get bus

index

and then we'll put our sound effect

audio name

next we'll do if value is greater than

game slider

dot Min value

then we will set our volume

decibel

as linear to

decibel of our value

and then we'll have the audio server

get the if the bus mute so if it is

muted or not

and then we'll get our audio index and

then we'll put in false as our Bool

then we'll put audio server dot set bus

volume

decibel

and then audio index

then volume decibel

then for our else statement

we're going to set this part

to true

as the value of the slider is less than

the minimum so that means it is muted

then for a sound effects player we'll

just play the audio

down here we could copy and paste this

all over here

but instead we will change this to music

player instead

and then it will also set

our music slider here instead of our

game slider

next we'll want to go over to our check

box then go to toggled double click it

and then connect it to video settings

we can remove all this

and then we can do the following

if button pressed

since this is a bull we can set that

then display server that window set mode

display server dot Window mode full

screen be sure that this is all

capitalized here

and then else

we can copy and paste this but instead

we will set this to window

mode windowed

and finally we will just add a done

button

so under the vbox container we will add

a button

and under the inspector we can just type

done for the text

and then we'll create a script for our

pop-up panel

remove all this

and then we can go under our button

click on node and then click on pressed

and then under the script here we will

type visible is equal to false

we will then add in

our ready function

and then we'll automatically set visible

equal to false

just in case if there's usually a bug

associated with this but it will

sometimes activate the visibility even

though it's not supposed to

but this will allow us to keep it off

we will then add a main menu

so we will just create a new control

node and then we'll type in main menu

then we will add a margin container

we'll add a panel

then underneath the margin container we

will add a v box

and then another V box

and then we will add a label

this will just be the title of our game

so good o for RPG

then we will add another V box

and these will be our buttons

then we will add a button and just

duplicate them

this will be our play button

this one will be our settings button

and this one will be our quit button

then lastly we will add in uh by

instantiating our pop-up panel

and be sure that is automatically turned

off of its visibility

then we'll do control save

or control s and then we will save this

as main menu under our menus folder

and we can also set the visibility of

our margin container by clicking here

and then we can click on The Middle

we'll want to create a new script under

our main menu

and then while in doing so we can just

remove this

and then we can do onready VAR settings

panel

is equal to pop-up panel

and then we will add some buttons

so we can add in for our first button

which I will rename to play this one's

settings

this one to quit

we'll go under our play button click on

node and then click on pressed

and then we will type get tree

dot now be sure to get this right

because they changed it uh from Good L4

which is to change the scene to file

there's no longer change scene

and then we just put our world here

we can then go into our settings and

then we can do the same thing

for this one however we will do settings

panels settings panel

dot pop-up centered

there are multiple other functions that

I'll allow you to manipulate the panel

lastly there's the quit

and then we can just type get tree

dot quit

so one last thing we'll go under a

project project settings

and then under run we'll click on the

folder there and then we'll go to menus

and then click on main menu

before we continue we need to go on to

pop-up panel then under sound effects

We'll add our sound effect sound

which will be under our audio folder

and then I can drag and drop here

and then we can go under music

drag and drop our music or our sun that

we're using for it

and as you can see we can hear it just

fine

we will then go on to our sound settings

and then we will add in our bus names

for sound effects we'll have sfx and

then we'll have music for our music

audio

then under sound effect and music will

change the buses here to their

respective counterparts

now depending on how loud your sounds

are you may want to change them in this

case I have a bit of a loud sound so I

will just set it to less decibels

and I'll do so for the sound of the Wind

so now that we're actually in we can

click on settings and then

our toggles work

then we can press play and then we can

load into our world

thank you all for watching hope this

video has been very useful for you

if it has please leave a like and a

comment or a suggestion and I'll see you

guys in the next video