Godot Tutorial -- GUI Programming. Using Controls; Widgets and Containers Video Lecture | Godot Game: Learn and Master - Game Development

hello this is my cat game from scratch
welcome back to our ongoing cadeau
tutorial series today we're going to be
looking at using the UI controls that
are built into the Godot game engine uh
if you've worked into the nether damage
in the past you're probably shocked by
the amount of controls that are actually
built in there
that's because godõs a little bit
different than a lot of them the Godot
editor itself it's actually built on top
of Godot so there's a broad variety of
tools that would actually normally only
see in a full windowing toolkit things
like file selection dialog boxes
splitter panels scroll bars etc and
generally in the game you won't use any
of these to be honest however you are
making game tools these are invaluable
it's a very powerful framework for you
to make your own tools in and there is a
lot of controls in here it's pretty
impressive what they've done in a normal
game however what you've normally end up
working with is buttons to be honest
that you've got your main menu which is
an array of buttons those buttons are
often like textured images and nothing
more
and then you've got click handlers that
handle when they're done maybe a
mouse-over event etc that's all built
into so a lot of this would be only
applicable to those people creating
tools or really advanced you eyes but
the nice thing is though has all of this
stuff available for you and for those
very basic main new stuff that you also
need that's also there it's very
consistent to how other stuff has worked
in Godot so you're going to find that
this process is actually quite easy as a
direct result this video is going to be
quite short or at least that's what I
say up front because even though there's
a lot in there there's not really a lot
to cover but you know how to use one
thing you actually know how to use all
of them there's a number of different
controls you have to probably play with
them yourself to figure out what you
need in what specific circumstances
especially when you start getting into
little panels and the layouts and such
but that is one of those it easy for me
to go through all of them would take
forever and there would be a lot of
duplications so it's what else you
should take away and just play with
yourself so let's jump right into an
example here create a new project and we
go alright so is that this is this
process is almost identical to
everything we've done in the past I'm
just add a note or scene let me show you
with a very specific example so you can
see how the layout and everything works
right off the hop we've got issues a
container container is basically a
control
all holder and how they work is
depending on which one you pick a lot of
times they'll do things like
automatically lay out their contents
vertically automatically their contents
horizontally I'll lay them out in a grid
pattern have a vertical splitter between
them so you can resize things and you
can nest these things inside of other
controls without of other controls etc
or if you've ever done any HTML work and
you're used to working in tables where
you basically you did your layout by
making a hundred cent table splitting in
half and then splitting that half
splitting that half etcetera so you
could make kind of a grid of resolution
independent layouts you do the exact
same thing here using this grid
container but what I'm gonna do for
right now just go ahead and use a
vertical box container this is all this
does is it vertically aligns all of its
children within so let's go ahead and
create that now it's a node it's a it's
a top-level thing as control any of
these things can be positioned in laid
out in the world if I go ahead and run
this you're actually not gonna see
anything really need to create our scene
anyway so let's let's do that I said it
has the run scene no doubt done this
dozens of times by now so we run this
and we will see nothing okay
that's because a container itself by
default is rather invisible you can't
however select it from over here now the
sizing however is quite important so
let's uh besides that guy up like that
that's it this is a vertical layout
container now what you'll often do is
want to put up your buttons in the game
roll and they're done by basically being
children so let's go ahead and add a
button to this vertical box container
and we will add a menu button this is a
very simple text style button and create
it and let's set the text on that say
new game you can also set an icon which
is just a graphic that goes with it
various uh you um toggle how the thing
works so make it a toggle button so it's
got an on and off state have it so that
it's clicked one pressed etc you can
have a tooltip so like me for new game
like so and then probably key
you can also set
you can set the theme for it which is
like a CSS stylesheet from HTML if
you're familiar it's a way of visually
styling these things but first let's go
ahead and just set the font let's create
a new font cover this in the past I'm
not gonna go through it with much detail
that windows fun directory I'll scrap
the comic font so make it a 32-point and
let's save it as my comic font and
import it okay so now let's set that as
our font load I'm okay automatically
sized to contain its new font size now
let's go back to our parent container
and add another menu button this one
shall be
settings and once again we shall set our
font file here so so what you see is
it's automatically laying these things
out vertically you can um you do patek
spacing in between them I'll actually
show you how you can do that in code in
a second but here you go it's a
vertically laid out menu now let's run
it and you'll see new game settings okay
let's exit that out there's some visual
artifacts happening there that weren't
great but that's how simple it is to lay
things out now there's a very important
concept here is how how things are
spaced so right now you're just saying
they're they're being laid out relative
to the top vertically now sometimes you
don't want that what you wanted to do is
actually take up the parent control as
much as possible so let's look at how
you'd actually do that so for this uh
this new game we're gonna come down here
we're gonna look at size flags and this
is how it's going to be positioned
either horizontally or vertically so
what we wanna do is look at vertically
we want our two buttons to take up all
of the space allotted so our parent
control is this big what we want is this
button to take up this half this button
to take up that half so let's take a
look at that
so let's grab our first button and we
come down and we will set its vertical
size this has been use a little
confusing because this actually looks
like a toggle blow menu but it's not
you're actually setting each value here
and what we want to do is set expand
like so so what we just did is that
expand to take up pretty much as much
room as you've got in that parent
container let's do this again with the
settings and we will go here and
vertically and we will set expand on and
then boom now we have our two buttons
and they are laid out accordingly so now
let's actually look at wiring the button
up to do something and what we're doing
this week actually look at another
control while we're at it which is kind
of handy we're gonna need a script soon
so let's do it on our parent here let's
uh Freight a script that they can use
alright so now let's go back to our
second button let's give it a good name
Settings button so what you often want
to do is actually do something when a
button is done and we've done this a lot
in the past it's the exact same process
- the exact same thing we've done before
and it's the matter of editing your
connections here so you click here and
the connections are signals or events
that the particular control can respond
to their dynamic so as you can see this
particular thing is a button so it has
things like pressed or toggled if it is
a toggle button in this case it isn't so
we're just gonna go ahead and set a
press control handle or on here
set it into our V box's script at on
settings button underscore pressed as
the function name and then boom there it
is
now we can just do a quick show you that
it works pressed okay let's stop and
we'll go ahead and run that so now I
pressed and right down here you'll see
pressed okay
so we have a very handily working button
let me show you one more thing here so
so far we looked at parent control as
whips selected their own thing undo that
parent control stop doing that
this is the downside to
alright I'll select it here and I'll
change it this way when you
move around
trol so unfortunately the expand setting
is making it very hard to select the
parent and keep it selected so I'll show
you here using the toggle controls when
you actually move around the go set that
to 20 the parent it affects the children
now let me just turn that off for a
second so I can actually show you a
little easier way so let's toggle expand
back off
I grab our parent and this one we will
turn expand off as well all right now
it's easy to select so parent moves
children move and so on now since this
is an auto size and control even if I
grab one these guys and I move them down
here it doesn't matter and you go ahead
and run it it's automatically gonna lay
out accordingly so that's just a side
effect of the control if you don't want
that behavior so that it's automatically
vertically aligned or filling out like
that
you use a different control that's how
though various different controls
actually fit so a lot of times what you
see on this design campus isn't actually
going to match what your running thing
is and that's a side effect of the
control you are using okay so back to
that I think was yeah with settings we
set up code for and let's show you we're
gonna parent something to the Settings
here actually no that doesn't really
make any sense we'll parent it to the
the box container and it will be a
confirm dialog ah this is basically
actually no let's do it I set dialogue
this is your standard pop-up dialog box
with an OK button go ahead and create
one of those yeah we will make it
visible like for now oops my buddy there
like so so this is a standard pop-up
message box Williams coming here and
change the alert on it to message for
you sir like so there's oddly enough and
I don't really get this you can't set
the text as an exposed item in the
inspector so it's something you actually
have to set in code so let's go ahead
and wire some code for this guy we shall
I log oops
GD great alright so in our dialog we
will just come in here and we will self
dot set text this is super important
and there you go so there's a message
box popping up automatically this is the
donor look okay and it goes away now
what we probably want to do is make it
so that when you click the Settings
button that message box will pop up and
show and that is a fairly simple thing
to do that's go back to our scene we're
gonna select our dialog box and to
settings to be aware of first one kind
of unrelated but this exclusive you
click this on it means you can only have
one instance of it running at a time so
if the dialog box you don't want
multiple pop-ups click that and that
will mean if you try to pop it up again
it's already showing it will basically
do nothing next thing we want to do is
set visibility to off all right so now
that was also the equivalent of clicking
that guy by the way so we can't see our
dialog box that's going to our settings
connection handler let's just go back to
our script yeah that was this guy here
so now instead we will do
I know
except dialogue show oops wrong language
all right like that yeah
now settings menu you have an error the
error tend to call show in face of Dell
Sceptile
oops is a
taken on my behalf we're actually in the
hierarchy we're in our VBox container
not in the button my brain didn't work
right there so this call is actually
wrong we don't want to call up to the
parent we just want to we're actually
out of the parent this is because I put
the Settings button handler in the V box
containers code as opposed to in the
button itself code so you don't call to
the parent you just go ahead and get get
node so there we will get I change the
name to dialog pointlessly get no dialog
and show like so so now you click your
settings boot up they pop at the same
time if you wanted to do something on
that handler we can in a very contrived
example let's go back to our script
ain't got a bit of a drawing issue going
on there our dialog we're going to set
so that it doesn't automatically when
you click okay so self dot sit so right
now it's set
behavior is when you click the ok button
it hides itself now we're gonna do the
exact same thing in code so this is very
pointless but it shows you how to do a
non handler so here's our dialogue code
here let's do a connection event and
then it's on the confirmed event so
which is the ok button was clicked and I
will go ahead and click connect we shall
put that in our it's our dialogue and
connect and all you want to do is come
here and go self dot hide like so
completely pointless this this as true
and this asana is a confirmed handler
are functionally identical but does show
you how to go ahead and do a non
confirmed or an event handler again it's
just a little matter of wiring up
connections and you're done so that's
kind of the extent of it really you
create hierarchies of controls the type
of control determines how your children
control are laid out they inherit the
positioning just like any other node
does to its parent you use these data
size flags to determine how they'll size
themselves within the parent so once
again if you want to actually take up
all the space available you would set
this guy at would to vertically to
expand and it will expand to take all
the space in so since we got multiple
let me get sit here and set it to expand
yeah once again we're using the entirety
of our control quick easy way to do
layouts another key concepts are going
to come up quite often let me just go
ahead and delete all these things out so
something are you gonna use in a game
very very consistently
we'll keep our vertical box container we
don't need our dialog so I might have
orphaned a bunch of scripts here it
might've been a bad idea
actually you know what I'll create a new
guy a new project and I call that UI to
just so I don't didn't create any
oddities there for no particular reason
it's faster to create a new guy here so
come in and we shall add another an undo
button Rex actually want to show you the
image button so
and we'll do a horror uh not button ray
but control array or words on a box
container so this way is gonna do left
rights that up the down but otherwise
identical so go ahead and create that
and we will size it to be basically our
entire screen like so alright
the like same concept you created this
thing let's save our scene out and set
it as a run scene alright so what you
gonna quite commonly want to do is
actually have images as your buttons
especially in a game and you're gonna
want to have things like mouse over or
kind of events or focus events that you
handle and have different states for
your buttons let's show you at that
concept now again we're in our parent
controls of layout container and I'm
just gonna come in here just add to it
and we're gonna add a texture button
right here coincidentally if you do not
need the text ring you can actually use
these uh there's a button array and this
is actually a controlled which is an
auto sized number of buttons so if you
really just want to have like a four
menu what we just created it actually if
you just want to do it as buttons you
could do it this way and all of the
buttons are contained within but this
time we're actually gonna use a texture
so let's go ahead and create that so
alright yeah we'll call this the new
game button new game button alright so
now we actually we need a graphic to go
with this guy here's a frame in the
background I'll go ahead and and new
game so it's
that's annoying okay let me just delete
my existing text or start a new one
all right this is easy new game all
right
the hell out of me I don't use this very
often but you know what that's good
enough so here's our new game button and
we'll go ahead and save that save as and
we shall put that in our dough all right
and we will call that new game button
yeah that's fine
and now we want to have a mouse-over
equivalent so let's just do that as an
effect
you
all right
let's save that as new game button over
so we now have two buttons that we can
add to our world we've got over here
we've got our new game button and let's
just go ahead and sorry new button
images and we'll just set the image
texture on this guy
of that in and new game button okay so
it's parented in our control
automatically being laid out the sizing
is being set by the image unfortunately
now let's go ahead and show a hovered
image and load that over all right and
run our code and there you hover over no
over out over out over oh and generally
you would just add a number of these to
your game so we had another one another
texture button set the texture on it
being lazy and I'm just going to use the
same button over again and when you run
it you'll see how they are being set up
here now this is actually an unfortunate
example because I what the downside to
the texture button is is it's size is
limited to the graphic underlying it so
even though our control our controls
automatically going to lay them out this
way and controls not big enough to pick
the image I've chose underlying so I'd
actually have to come back here and go
let's say image size let's go down to
30% we'll save that guy and I think our
other guy should that's not all right
and image size 30% like so and save
let's see if it picks them up
automatically yes it does
okay so now that size is all screwy
you
you
Phil you too Phil and you too Phil and
you too Phil default so now it'll look a
little bit better because the actual
sizes doing the layout why don't I have
why don't I have it over on this guy
anymore
something there I don't particularly
care it's not that important the key
thing here is you actually have these
underlying controls that for the mouse
you can have you provide a number of
different textures that can actually
handle how it is done the sizing is
being dictated by the texture not the
button positioning itself so sadly I can
size this to be however I want it's
going to be ignored at least within this
container it is so that's the gist of
that one there's as I said when we
started off there are so many different
controls in here that do all kinds of
different things but the end of the day
they actually all kind of work very very
very similarly you need a text label you
need sliders you need pink boxes color
choosers etc they're all in there but
they do work the same way it's just you
create hierarchies of nodes and off you
go that's trying to think there's
anything else I really need to cover
here oh I suppose you don't okay
no we're recording the only other thing
I guess I should cover on here is themes
I said themes are way too globally style
things but the reality is I actually I
can't make sense of them all I can
really come up with here is how to set
the text across that an entire UI I
think it should do more but to Mike my
experience it hasn't really let me go
back to the last project list this will
be less good back to our UI here it's a
bit better for showing so we set these
fonts locally here on each button but
you could also have done it as a theme
so let's go back to our parent
controller here and go into the theme
itself so the theme right here you can
come down here and you go create a new
theme and then edit it and original to
your theme editor or you can see kind of
a preview of how each control will look
theoretically I thought you'd be able to
do a lot of settings here unfortunately
all I've really found is default font so
I can come down here and go ahead and
load it and our comic font will now be
used for all of our controls and you can
see here is the indirect results so if
you want to override this you can do it
at the individual control level but the
theme allows you to apply the same font
to the entire project all at once or at
least all that the child controls
that themed control so if you want to
use the same font across all of your
different stuff this is one way of doing
it I kind of thought you'd be able to
toggle different things like settings
layouts justification etc at night I
don't think you can your menu options
are quite limited none of this really
does anything and so it's mostly a
matter of here is what they will all
look like so here's the color picker
this is what the color picker will look
like but for the most part all you can
really do is set the font and that's it
so theming support is is not anywhere
near as extensive as CSS but it is a
globally applied theme hopefully this is
something that gets developed out a
little bit more in the future it's it's
quite powerful like to have this preview
here but when there's no settings to
actually edit I don't really see the
point to it so hopefully this is
something I just don't understand fully
well but it doesn't appear to be there
seems to be a very limited in
functionality thing but it should be
aware of it especially because setting
the font for every control over and over
and over again is a bit of a pain in the
butt so just set it at the top level
control that owns all the other controls
be a menu or a panel container or
whatever and then you don't have to set
it each particular time and here is your
indirect result and then to get back out
of here is not very intuitive but click
back over here on that menu goes away
and you're back into your 2d view so
that's it so quick over cube there's a
ton of UI controls built into the Godot
engine but they're basically just like
any other node type thing you drag and
drop them there are hierarchies they
inherit all the parenting positional
information but you can override them
again where it's slightly different
those you have a lot of them that are
containers that apply a position
programmatically on their children like
when you saw that the vertical or
horizontal box controller they
automatically arrange things
horizontally or vertically you can
override that using the expand and fill
settings those determine how something
is positioned within its parent on top
of that if you want to actually use the
control you would do a connection on it
and that's it
so there are dialogues in them there are
gooeys buttons etc you could do buttons
straight normal menus of it I suppose
I'll show you one last control before
moving on
that's uh silly each one of these hope I
don't screw anything up by doing so that
button control I was talking about
earlier this is well seems that you'll
use quick and dirty a very handy control
let's go ahead and create one it's
called a button array so vertical button
array G that's created one like so and
what you often want to do is just have a
number of buttons so let's say we want
four buttons like so there boom we just
quickly created them again it's created
an option for each one so one two three
four and that's simple so now you have
an array of buttons so you can handle
now in order to actually work with them
let's go ahead and do the connection and
it's button selected and why are that
events up and this is a zero-based index
of which button is currently pressed so
if button equals zero print button one
rest
yeah that's get rid of that pass so
better : so and run that this one and
you'll see down here button one pressed
very handy control you'll probably use
quite often so I thought I'd cover that
at the very end there but that's extent
that's that's how you do with controls
here ya Dums you're seen you create
nodes and hierarchies of them you use
containers to arrange them out then you
wire up connections to handle the events
that they handle and that's it so as you
can see you can actually build
applications on top of Godot very very
quickly very very simply or you can
provide simple menus in your game with
almost no effort almost no code I hope
you enjoyed that thank you very much bye