All language subtitles for 63. Creating an Options Menu

It is time to start on our options menu

So let's go ahead and do it I'm going to be a little bit lazy here

And I am going to simply duplicate the main menu to use as our starting point

For the options menu

So I'm going to go ahead and with my main menu open here

I'm going to go to seems you I and I'm going to duplicate this main menu so

Right click on menu duplicate

Am I gonna call it

Options menu

Anchor Hanover that options menu seem now the first thing we're going to do is Wigan to remove this script

So if you select the main menu here actually literally name is two options money before we start

So make sure that you were on the options menu

Scene

And rename the route options menu and then

Quickly detach script button to remove the sky

So now this label here what we're gonna do is we're going to call this options instead

Just like cell

Subtitled by
online-courses.club
We compress knowledge for you!

And we pretty much don't need any of these buttons here so I'm going to delete two of the buttons

And I'm going to rename the quick button to the back button

And I'm going to change the text to back

This is a rough start here

Now what happens do we want

We're going to do 3 we're going to have

Fullscreen windowed mode option

And we're going to have sliders for the music and SFX

Volumes

What I'm going to do here is I'm going to add another vbox container under this vbox container here

I'm going to put that in the mill between the label and the back button

Select the router box container for the parent of the box container agency

And scroll down to the

Override constant section

Change the separation of something like 16

Ok so in this be box container here That's my girl first option the SFX value

And we're going to use another box container for this

So we're nesting about of you box containers for layout purposes

And if you want to make a little bit clear we can call this

The SFX option container

Like so

Anna let's add a child under their let's say labour

And then we'll give a little the text of

SFX volume

Like so

Let's add underneath the boxing trainer again a

8 slider

Ok so that's rs-x volume listen duplicate the SFX volume container here

By hitting ctrl-d

And when I call this the music option container

Just like so

And before I go to further I'm going to change the minimum size of the disk

Vbox container here

So this device container under the margin container

I'm gonna go to the custom minimum size

Which is at the top and I'm going to give it a minimum x size of

200

Just because that gives us a little bit more room it looks a little bit nicer

And it's back button here

I'm going to select

And

Scroll down

Ennis container sizing I'm going to change the horizontal to shrink begin

And I think that looks great so that will be a back button

And then I'm just going to give the back button also it cost a minimum size here

Which is

A little bit down

Toward the control

Heading

And I'm going to give it a minimum size of 50 just looks a little

Ok and for this vbox container underneath the margin container

I'm going to slightly increase The Separation so scroll all the way down or nearly all the way down here to the theme of

Constance

And change this to

24

Instead

Ok and then for the options label I'm going to change this text to have a Centre

Horizontal alignment

Alright so we're in good shape now and then there's one more option we want to add

Which is the

Window so I'm going to duplicate the music often container

Where's control d

I want to change the label here to

Window mode

And

I'm going to rename this container to window

Mode container

Window option container

So I can't window option container

Instead of a slider here

Let's instance

Instantiate a child scene of Sound button

We are going to change this sound button here

Scroll all the way down on a change the container size in to shrink begin

And then let's give it a custom minimum size as well

So scroll to the customer satisfaction give it a minimum size me x of 100

And that looks a little bit nicer

Right now for this meal box container that contains all of the

Child options

Let's increase the container spacing for The Separation too

8

Sorry can you something like 12

So again that's the box container that wraps all the options would change the constant separation to 12 year

Alright so now you got an options menu that is looking pretty decent now you doing to make sure that you're not making it so big

It leaves the screen

An

The screen region is sort of

Denoted by the very faint blue line I don't know if you can see that but that's the blue line that represents the screen size

And so long as your options menu is staying with Anna bound

You're a good girl and you can also Verified by running the scene

With F6 or by clicking this button

And there we go

So you noticed that the sliders aren't doing anything

And they don't look that great either

We'll tackle the theming

In the next lesson

But for now let's get the sliders to work

Let's create a script for the options menu here

And click create

And let's do the following

Let's expand our sfxr container

Unless rename this to SFX lighter

Like so

Wycliffe

Access as unique name

Kate let's do the same for the age slider under the music auction container and called the music slider

Market as unique name

And then this sound button under the window are container going to call this a window button

And right-click and access as unique name

Alright so let's override a ready method in HR

Options menu

Anniversary that we're going to do is let's do the window mode

So we're going to say

Dollar sign

Window button

Depressed

Connect

On window

Button

Pressed

Caitlin's creative function on window button

Pressed

And then here we want to set the

Window mode so we're going to reference that display server

And we're going to get the current modes are there save our Motors equal to

Display server

Window

Get mode and that will give us the mode that the windows in

What's we have the mode we can check it so we can say if mode is not equal to display server data

Mode

Full stream

Then we're going to say

Display server

Window

Mode

To display server down

Window mode fullscreen

And these are constants all capitalised

Sofa and fullscreen mode in a set it to full screen

Else

What is a display server

Dad window

Set mode

To display server

Start

Window

Mode

Windows

The saying if you're not in fullscreen mode set it to full screen mode otherwise set it to windowed mode

Let's create a new function called update display

And here we're going to need to update all over UI to display the current options

So the window button

We want to set the window button text

I'm going to say

9% and we're actually probably need a reference this in multiple places

So I'm going to do an already very well at the top

Add on ready bar

Window button

Is equal to

Star sign percent window button

Ok and we can catch this

Or type this letter as a button

So that we get the completion suggestions in our editor

I'm going to say window button depressed in the ready method

Anna in display window button

Text or said that equal to Windows

But we have to check the mode so I'm going to say

I'm going to copy this

Display server window get mode is equal to

Display server

Window mode

Full screen

Then we're going to say window button that text is equal to

Full screen

Ok

Then the rain method were going to call that update display

So that it uses the most up-to-date

Window configuration

And then on window button pressed we need to also call update display

So update display is going to be our function that we call whenever a setting changes or whenever the

Options menu is initially loaded going to be particularly important when we change the slider value as well

So now we're going to make the sliders work

So if you select both the SFX and the music sliders with

Holding control

You can

Scroll down to the range here and we're going to set the main value in the max value 20-in one

Subtitled by
online-courses.club
We compress knowledge for you!

We're going to set the step 2.01

And again we're doing this so that the slider now represent 8%

And the present value is going to represent

A volume between silent and

Full volume

Ok so the next thing we need to do is less create function

Cold get

Bus

Volume percent so

What's Right pass on here for now

What we needed do essentially as we need to get the current volume percentage of the buses that yes

So these buses right here

And we need to convert that volume into a display value

4

The sliders

And then in the reverse way we need to convert the percent of the sliders to the boss of volume

And there is this handy function

Called DB to Linear

And this is going to allow us to convert a dB value like from our bus to a percent

Which is perfect

And then is also a linear

2 DB which we can use the go the other way

And the reason we need to do this is because

Volume isn't linear as no 2 in the docks

Go back 2 hour

Options menu script

So we want to get bus volume percent the way that we get a bus as we can say

Audio

Server

Get

Bus

Index

I'm going to pass on the bus name

So let's assign the bus index to the result of this call

What is a bus name when we're going to have to pass in a bus name

As part of its functions parameters

Also bus name in data type of string

Like so

I don't know person that bus name

Into the bus index

Alright

So now let's get the bus volume

Audio server

Get

Boss

Volume DB

And like this takes a bus index so we say bus index

And water sign

Volume DB

Equal to

Audio server get boss volume DB

And now we can return at this function

DB to Linear

Volume

Ok

So now

We can in our update display

Let's get a reference to the SFX lighter and the music louder

And I'm going to do this by selecting both of these

Dragging them over into the editor here and holding control

And that would generate

On ready

Methods for the SFX lighter and the music player for us

So then the update display Matt I'm going to say as FX later

Dark value

Is equal to

Jetbus volume 4%

Never going to put in the name of our bus which is in quilt as a fax

And we can do the same for music letter some musics lighter that value

Is he go to

Bus 5%

In quotes music

So now

We should have

Every time that we can't update display

The sliders are going to be set to the current

Volume percent of each bus so now let's go ahead and run this seen just this seem here

And your sliders should be at max value here

Which is not with their set to buy the fox that means that our code is working

For now I need to listen for the bus volumes changing

So if we go to rfx later and click on the Node

Time here

We can see that there is

I changed signal underneath the Range here

And so

We can listen for The Slider being changed in a plight that changed to

The

Boss volume

So

Let's go below the window button pressed connection here and we're going to say

Slide

Change dartconnect

Are we going to do on

Let's say audio

Slider changed in Urdu something different working to.do.by

I'm going to bind

SFX and when I'm just going to bind SX4 also going to buy

The slide

Ok now what is this do well first let's define this function so

Down here

Funk on audio slider change

And then let's just right passing here

So we did bind once before

Find

Essentially says

In addition to whatever our humans

The changed signal sounds

Also send these arguments

Right

Now in our case the changed signal does not send any arguments

But were saying send these two arguments in addition and why are we doing

Because

We're going to use this

Function handler for both the SFX and the music slider

And his arguments are going to be used to determine which bus we need to change in which slider we need to change

Or rather which slider we need to pull the value from

So let's go down here

And I'm going to say slider

Which is of type h

Slider

And then our second argument is going to be boss name

Which is going to be of type

String

Now what Are We Gonna Do with that as well let's first write a method called a set volume percent so I'm

Send a copy and paste this get bus volume 4%

I'm going to call this set but the volume percent

And we are going to instead of just returning DB to Linear hear what we're going to do instead

Is we are going to

Has in a percent so let's pass in a present here which is uptight flow

Anna let's do

Volume DB

Is equal to

And we're going to do linear to DB percent

Now instead of this assignment here

We're going to get rid of that and keep the audio server get boss by MTV accept change the to set bus

Volume TV

And this

Method

Takes in the bus index as well as the volume DBA

So

Bus index is the first argument and we're going to pass in that volume DB that we calculate

And then instead of returning something we're just going to remove that and not return any

So I'm grabbing the bus index

Of the bus name it was passing in

We're converting a percentage of Passing into a dB volume

Adam worth setting that DB volume in our audio server at bus index

And that means that on this audio slider change

Weekend simply do this we can say that

Boss volume 4%

We've got our bus name coming in this argument here

And we've got our slider coming in so we can reference the slider.an value

Which is going to be between 0 and 1

And so you can see that

Is SFX later when it's changed or passing in the SX lighter itself as well as two aspects but

What's copy this line

Paste it underneath

But change this instead to

Music slider

And then

Bind

Music slider

And

The music box name

So you can see how we can use the same handler

For both cases by Simply using the bind to determine which slider is actually being charged

Run this scene with F6 or by clicking the wrong currency button

Looks like I used the wrong

Signal here

Which is actually good so

Change does not inmates when you're actually slide in the slide

So we said we just need to change this

Instead of dark changed we need to do that value change

Valuechanged

And the good news is that we don't need a pass in this Library work we still do need to use the band for the bus name but we can get

Rate of the first argument in the start bound for both

Bad but we need to do this we need to scroll down here and we need to change this first argument in on audio slider change

To value

And this is there going to be a float

Animal pass the value in as the second argument here

OK that was my mistake I did not

Notice that this change signal only inmates when min value max value pay doorstep is changed

We wanted value change so that's why I support the read the documentation but lovely that wasn't easy fit

And so now with all that in place let's run a scene and see if I

Music goes down the slide the musically

What happens when you slide the music slider

That volume should go down depending on

How you slide

And if you click the window mode

That should change the window mode from full screen

To windowed and also play the audio

Is it actually great with a test of the sound effects layers working to slide it all the way down

And see if you can hear the the button

I can't hear it

So all that work

Now there's one I'll be a problem here

Which is that

This label is

So

Does SFX volume same music volume

Something to change that label so that it says the proper thing

So our options menu is just about done we just need to make the back button work and we need to hook it

To the main menu and I know this lesson is going along but we're almost done

So what we gonna do is we're going to create a custom signal on the options menu call the signal back

Breasts

And the reason that we're going to do this

Is because the actions when is going to be special in that it can be displayed from the main menu but also from

The game console

We're going to need to be able to manually control

The behaviour of the back button

That's why I was saying bad press

And let's grab a reference

To the back button

Already far back button

Equals

Dollar sign percent

Back button

Just like so

Let's Create

A single connection so at the top of the back button press

Connect onbackpressed

And then down here

What do you funk I'm back pressed

And we're going to do that back

Craft.com it that's it

B r 1000 do let's go to our main menu

And in the on auctions pressed let's do the following first let's preload the option seen so we're going to say

Bar options underscore is equal to preload

And then look for the options menu dot tsyn

Make sure it's not tse and not GDP

And

In our options Prestwood to save options scene is equal to

Or other options instance is equal to options scene

Start instantiated

Let's go in and add that as a child to the current scenes are putting it on top of the main menu

Options instant

Analyst do options instance

Back press

Dartconnect

On

Options closed

Annelids

A new function on options closed

That's right passing here

And what's passed the options instance as a binding to on options clothes so find

Options

Instance

Just like so

And then it will accept that in the on options Close so options instance

Of type node

Just like so

And we're just going to simply do options instance and I'm just going to call this instance instead of in

Options instance IQ free

Alright so little Run the game

And now if I click on the options button

I should see actions overlaid on top

So if I look at my scene tree here

We've got a main menu but then the options menu is on top with the exact same layout here

Which is just fine

Anna let's go back I'm gonna click back here and I'm back to the main menu

So we're all good there and I can click play and go into the game

Alright so that's it for options menu setup

The next step were going to do some filming of the sliders and related

UI elements