Okay, now that we've done some simple editing stuff, I want to make it a little
cleaner with some UI stuff so that we could actually control things with the
button instead of just putting up a message on the screen that says hit this
hit this key to do something right so let's do a basic UI because that will
set the groundwork for creating a lot fancier menus and interactions in the
future so what we'd want to do is say add new user interface widget blueprint
I'm gonna call it main menu - because I already have a test one called main menu
so let's go in here and just do it from scratch this represents our screen here
and the first thing that I usually do is put in a vertical box and here is where
we can search our palette of different items we can put in our UI and this down
here is our hierarchy so the canvas panel is is basically our screen we can
drop a vertical box and child it to the canvas panel you can see it appears
right there then we can resize it either by numbers or just by dragging this is
our anchor right here so that's anchoring to the top left of
our screen which means this will always be right up in the very top left of our
screen if we move it to here now this relationship right here this amount of
pixels and this women pixels this padding here will always be the same in
relation to the top left of the screen okay with our vertical panel let's take
now some horizontal panels or horizontal boxes and child them to the vertical box
now we have a little horizontal box that we can choose to fill which fills the
entire vertical box so now our vertical box and our horizontal box are the same
size but let's take another horizontal box put it in the vertical box as well
child that and the second one will fill as well and now they're splitting the
difference between the two okay now if we wanted a little
in here we could do that as well by changing the padding on both horizontal
boxes to like three now we have a little bit of padding between the two okay now
we could put buttons in there and we'll just keep on building up our hierarchy
in the horizontal boxes we'll put buttons obviously we would want those to
fill across right and I'm not liking the size of any of this so we could do this
there you go that's better and for the horizontal boxes we're just letting the
buttons fill the whole horizontal box what you can do you could also add
padding to the buttons right so they don't fill the whole box get out another
three padding to the button so now there's vertical box horizontal box and
then button with all with a little bit of padding in between okay so obviously
you can mess with that and there you can spend a lot of time making it look
pretty we're not gonna concentrate on that right now let's add also some text
to our buttons you can just put it right there text and text and for now let's
just change this one to say quit all caps okay there you go so there's a
basic UI with a button and a text and it's all just hierarchy stuff and the
panel has all the different elements that you can add okay so there's a lot
of different elements here for a basic button like this this is a very simple
setup now this has a event tied to it this button does you'll notice the text
doesn't the button does write all these events are down here so we can say on
clicked and then we can do something quit game compile save okay and up here
you'll see that this is the event graph for the buttons that are in our UI and
we can always go back to the designer here and go back to the visual elements
of our design it's a graph designer now if we clicked here and did an event
for this one on clicked it would take us
back to the graph automatically and this would be on clicked for button one we
could do something else we're not gonna add anything there though okay now so
how do we get this to show up on our screen well we're going to use a
different blueprint to reference that entirely usually these UIs are tied to
the character or our player zero so if we go into our character module here
which is being possessed by player zero as we know or our first player we can
now go into this and edit the blueprint of this so that this player will now see
a UI pop up and you can see I have the basic elements of it here because I was
already experimenting with this so if I just link this up and we'll talk about
everything I did here if I link this up and compile and then we'd have to say
which menu we want to construct compile save okay so let's see how that works
and remember this is being triggered by the M button okay so when I play if I
hit M my UI is constructed and it shows up for my first player my player one you
can see I've now have a mouse active and my menu is active and I can hit quit and
it quits the game so let's talk about how that's set up let's just do it again
so that I can walk you through step-by-step so first we would search
for whatever button we want to use in this case let's use escape to bring up
our menu then we need it to tell the engine to build our UI so the UI is in
our project but that doesn't mean it's always constructed and showing in our
scene but we are going to construct it by telling it to construct so let's type
and create widget okay so right here we have this node that creates the widget
and we're creating it from the class of main menu - that's just selecting which
UI we're wanting to create the owning player it will only show up to the
player that we tell so what we do is drag out from here and
say get player controller this is much easier because you know we only have one
player in the scene right so so the player controller that we're talking
about is player index zero or the first player in our game or in our case the
only player in our game so that is the player that will own this widget that's
about to pop up now we add it to the viewport so it's constructed and then we
add it to the viewport of this player that we're talking about here and to
viewport and what are we adding to the viewport we're adding this menu widget
that was just created like that now that would be fine but let's see what that
gives us if we compile and save we hit play and now we hit escape ha we
can't use escape because that just automatically closes our game we don't
want that and we could go into the settings and adjust it but let's just
use a different button so instead of escape
we'll just detach this one here and use it on my new one so M is the button we
hit for menu let's try it real quick so M ok and you see my menu pops up but
I don't have I'm still just controlling my character though so I need to switch
control from my character to a mouse control that doesn't move my character
around but now gives me the option to show my pointer up and to click some
buttons so that's the last thing we need to do for this blueprint go back into
the character here and remember I mean this could be done other ways but we're
doing it in the character because the character is set to receive inputs so
when we hit M that character knows ok construct widget add to viewport okay so
it's just a pretty easy way to handle all of this so let's set that input up
also when we set the input we want to set it for this particular player so
we'll show how to do that so set input is the node that we want actually set
input mode ok and you have options here set input mode game and UI game only or
UI only ok for this we want UI only because we don't want the character be
controlled so in widget to focus so here we can tell it which widget we want to
the the mouse to jump to and we already have our widget here it's right there
and we can just say this one we want the mouse to jump to that one automatically
when we hit em and again we need to tell it which controller which player is now
using this mode which players going into UI mode fortunately we have that player
right here okay if we double click on this it will give us a reroute node can
make it a little cleaner here let's come down here let's come down here so we
don't get mixed up okay and the last thing is to show the mouse cursor right
we need that that is specifically set it is a boolean so set show mouse show
mouse let's turn off context sensitive set show mouse cursor we'll just set it
to yes checked and again we can drag out of our reroute node to here to tell it
which one of our players is again getting these instructions so for that
player we're setting show mouse cursor to true so that it should show up and
that's all there is to it for doing the menu so let's see if it works
hit play if I hit M my menu pops up you can see my mouse cursor now shows and
here we are we can hit text block nothing will happen
we can hit quit and the game quits okay so that is a very basic main menu we can
also use that to control other things if we want so if we go back into here we
could go into the text block event click so we could view on clicked remember
this is the event of clicking that button and we could say this we could
turn off our TV and things from here if we wanted we could
print a string that says hello okay so all that stuff we did of turning on an
off TV we could actually make buttons to turn it on and off here and we'd run all
the blueprints all the scripting right off of this
button right here okay so that could be a cleaner way to do it is a clean way to
click your game and that's some of the basics of how to do a widget blueprint
and that should help you help give you some ideas of how you can make some
really cool interactions that look sleek and work really smoothly for the user
last thing is let's just test this out lay em for menu text block 10 oh okay
there you go