Welcome back.
Now, when we press play, as long as we have something to load from memory, we have a take in widget
here.
And we can select a slot.
And that enables the play and delete buttons.
But these don't do anything.
So we need to make them functional.
And I'd like to start with the delete button.
Now when the delete button is pressed I do want to clear the slot, but I want to ask if the user is
certain of that.
You know a are you sure?
Pop up with a delete and a cancel button.
So this is a good opportunity to show how to implement that.
Are you sure pop up.
So what we can do is we can make a widget for that and we can make a general.
Are you sure?
Let's make a new folder.
Actually not here, but let's go into the UI folder first and we'll make a new folder here called are
you sure.
And we'll go ahead and make a pop up here.
Let's make a new widget blueprint.
This can just be an or user widget because it doesn't really need to have any specific inherent functionality.
And we're going to call this Wbbp.
Are you sure?
And are you sure can just be a basic pop up.
We can give it a size box.
We'll call this size box root.
We'll check is variable check width and height override.
We'll set this from fill screen to desired and we'll give it a desired size.
So let's do that.
I'll give it a width override and a height override.
And it'll be a pretty small menu something like this.
We'll just give it round numbers 160.
Now we're also going to want an overlay, as is typical.
And this can be the overlay route.
And by the way, we can parameterize the size if we like.
But we'll just get it to a size we like.
We'll adjust it here in the base class if we need to.
And I'm going to want a background and a border, which means I need a couple of images.
I'll drag one on and call this image background.
And I'll drag another on and I'll call this image border.
Now image background can be set to fill horizontal and vertical.
And we can give it some kind of flowing material.
We can try flowing scroll.
That looks pretty good.
Doesn't really matter as long as we have something there.
Right.
And for the border we're going to choose our border.
Border large.
And I'm going to set this to fill as well.
And we can also set some margins on it.
Now if I click draw as border.
And set the margin.
2.5.
This is what it'll look like.
But because it's stretched, the top is going to be a little bit skinny.
So for the top and bottom we can change this.
If we enter 0.4 it gets bigger.
0.3 gets even bigger.
0.25.
And it's too big.
Point three looks pretty decent, actually.
It looks sort of.
Almost perfect.
.27 is probably just about right for this.
So I'm going to copy .27 and put it on the bottom as well.
And now we have a border that looks pretty good.
We might even make the left and right a little smaller.
Which means we take our margins and increase them a bit.
I'm going to try 0.55.6.
I think 0.6 is perfect, and I'll use that for left and right.
And now we have a pretty good looking border here.
Now we need some text and we need a pair of buttons.
And I think a wrap box is going to make this easy.
So I'm going to add a wrap box to it, set that to fill.
And then we can add some widgets such as some text.
And the text can say, are you sure?
Are you sure?
Question mark.
And we can set the font because Roboto is hideous.
We're going to set this to amaranth regular.
Sure.
And for the size perhaps 12.
And we're just going to have to see how big this looks on the load screen.
In fact, we can go to the load screen and drag one on and just see if we compile the.
Are you sure?
We can search for the rusher and bring it in.
Oh that's tiny.
So we're going to need it to be a little bit bigger right.
Perhaps even twice as wide and twice as tall okay.
That's informative.
Let's do that.
We'll get our size box route go up to our width.
We'll make it 200 and our height will make it 120 like so.
And now are you sure.
Could probably be bigger.
Maybe 18.
And I'm going to check fill empty space and make the horizontal alignment centered.
And now we can drag in a spacer.
The spacer will go right after it, and we'll make it size wide in the X and we'll make it tall.
And then we can have a pair of buttons beneath it.
So let's get ourselves some wide buttons.
We'll get one in here.
That looks a bit big.
Let's see what that looks like here in the load screen after compiling.
Okay.
So are you sure?
Can probably fit two buttons, but it's going to need to be a little wider I think.
Unless those buttons are very small and they can be smaller, but I don't want them to be that small.
So let's make.
Are you sure?
A little larger the size box with override.
I'm going to make it 350 and I'll make the height probably 200.
And we will make the buttons a little smaller.
Let's get that spacer a little wider.
And we'll bring those buttons down a bit and we'll have two of them.
But the buttons themselves, they can be smaller.
The width can be.
Let's try 151 4120.
And for the button itself, we're going to say delete.
For this one.
I'll make it 130 and then we'll have another one.
I'm going to copy it, paste it, and this one will say cancel.
And depending on your philosophy, the cancel could be first or second.
It doesn't really matter.
I think if you read some books on UX or UI, they might tell you that cancel should be first.
Maybe it's like the most risky thing is delete, right?
So if that's first, they're more likely to click on it.
So maybe cancel should be the first one.
If they accidentally hit cancel, at least they could go and do it again.
But if they accidentally hit delete well there's no coming back from it.
And so on.
Now we can make sure that these are centered.
We can set their horizontal alignments and we can fill empty space.
Now we don't want to force new line because we don't need them forced to new lines.
We need them both on the same line.
But if we have horizontal alignment to center for both of them and both set to fill empty space, this
is what it's going to look like.
Now.
They're both kind of pushed to the left anyway with a wrap box.
So what we can do is select both of them, right click and wrap with a horizontal box.
And that's going to make sure that they're both centered, especially when we take the horizontal box
and make sure that it's horizontal alignment is centered.
Now we just need some space in between these two.
And a spacer can do that for us.
So we'll put a spacer in between and we'll give that some x dimension here.
Like so.
Now, usually an rusher has some kind of message explaining the consequences of deleting something,
so we can do that too.
We can make this spacer a little bit shorter.
And just after the spacer we can have some additional text.
That text can go right after the spacer, right before the horizontal box, and I'd like another spacer
after it.
Right after that text.
And then this text can be smaller and it can say a message here that says, what happens if you go and
click delete.
So what is it going to say?
Well, we can say something like deleting a slot is permanent.
You will lose all progress.
Now, of course, this has to be smaller and we should change its font to.
We can change it to really anything we like.
And we'll make it small.
And if you want to have a longer explanation that wraps over, you can go down and make sure that this
text wraps.
If you search for wrap, you can say auto wrap text that will wrap it to a new line as long as there's
some room.
And we may have to wrap this in its own horizontal box to do that.
Let's do that.
And this horizontal box.
It's going to have issues when zooming in and zooming out.
For that reason, I'd like to just replace all of this with a vertical box.
So I'm going to select the wrap box, replace with a vertical box.
And that's going to make this a little bit easier for me, because now my text here can just be set
to centered.
Now my horizontal box here can just be at the correct size.
And the text itself can now be set to wrap.
And we can select that text and choose fill to make sure that it doesn't go off the side there.
Now the text itself is a little big.
I'm going to make it perhaps.
Ten.
But notice that it has some spacing here.
And if we search for line here's a line height percentage.
If we give it a smaller value like .8.7.5, even then it won't take up so much room.
Point six I'll give it 0.65.
And then our bottommost horizontal box can be set to center there and everything.
Overall, our entire vertical box can get some padding.
Like so.
And then this spacer could be brought down in size.
I'll make it ten and I'll make this 110.
Like.
So actually this one now can be bigger.
There we go.
So it's just a matter of tweaking these things until they look good.
That line height percentage could probably be more like 75, maybe even 0.8.
And then I can adjust this spacer again.
Okay.
So let's see how this looks on the load screen.
Are you sure?
I think that looks pretty good.
So we can pop one of these up onto the screen whenever we hit the delete button.
So what I'm going to do is first of all, remove that, and then we'll have an on clicked event for
delete.
And we can assign that in event construct.
So now that we have more things, we're going to need to organize this a bit.
Let's make a sequence for event construct.
So we have the first thing we're doing, which is binding to on clicked for the quit button here.
Let's get that up and out of the way.
Next, we're enabling the play and delete buttons.
That can be the next thing.
We'll have another pen for setting the input mode to UI only and showing the cursor.
We'll do that next.
I'll go ahead and comment this and say quit button clicked.
Here we'll do disable play and delete buttons.
Here we'll say input mode UI only and show mouse cursor.
And then finally we can assign Onclicked for the delete button.
So for that we're going to get our delete button.
Button delete.
Get the button widget from it.
Assign on clicked.
And then we need to decide what happens when we click on the delete button.
Now.
Yes, we're going to want to call a blueprint callable function that will result in the deletion of
a slot and all that.
But before we get to that, we want to pop up our.
Are you sure?
Right.
We want to pop that widget up.
So we want to create one of those.
So we're going to use Create widget.
And we're going to create an are you sure widget.
We're going to add it to the viewport.
Now, of course, we're going to need to set its position in the viewport.
Why?
Because if we go and do this, we select a slot and hit delete.
Well, here's what happens.
It fills the entire screen.
Now of course we can take care of that by wrapping it in an overlay.
The whole thing.
So the size box root we can wrap with an overlay.
And as soon as we've done that.
Then pressing delete.
We get it way up there, but we want it right here at the top.
So what we need to do is set its position in the viewport.
So back to the load screen.
As soon as we've added this to the viewport we can set its position.
Now we're going to need to know how wide it is because we want to set it to the middle of the viewport,
but subtract half of its width.
So I'm going to get the widgets and get its size box size box root.
And from the size box I'm going to use get width override.
That's going to tell me how wide it is and I can use half of that.
Now, what I need to do is take the widget itself and call set position in viewport.
And in order to set it to the middle of the viewport, I need to know the viewport size so I can right
click and get viewport size.
This returns an f vector 2d, which I can break.
Break vector 2d and I can take that x and cut that in half.
So divide that by two.
And that's going to give me the X position of the center of the viewport.
I can also divide the width override so I can duplicate this divide by two.
And now I have half of the size box width.
And I can take this viewport size that's been cut in half, and subtract the width override from the
size box that's been cut in half.
So subtract.
And pass that in.
To set position in viewport, I can split the struct pin and pass this into the x and the position y
can be anything I want, such as 100.
So if we do this, we should now see that.
Are you sure?
Widget in the center, 100 units down.
So there it is.
It's right there in the middle.
Okay, great.
So now we need to actually implement this.
And the first thing we'll do is implement the cancellation of clicking the delete button.
We'll do that.
But we'll also want to disable the delete button because we don't want to keep clicking it.
That's going to keep popping up new widgets.
We're not deleting the old ones.
That's kind of dangerous.
So we should also disable delete.
And we should also disable play.
We should disable both of them as soon as we've created one of those.
Are you sure?
Widgets.
Okay.
So we need to make sure that this doesn't get too out of hand.
So let's organize it just a bit.
Let's make sure that we have enough room.
By moving everything up a bit.
And also make sure that we don't have any crossing nodes.
Okay, we'll clean this up more as we go.
But what we want to do is as soon as we've created one of these, or even before, let's disable the
play and delete buttons.
We have a function called enable play and delete buttons.
We'll call that and we'll make sure false is passed in.
So that right there is going to prevent us from spawning more than one of these.
Are you sure?
Widgets.
We can't do it again.
And then if we click cancel we should destroy this widget.
It should destroy itself.
And then we need to let the load screen widget know that this has been destroyed.
And we can now re-enable the play and delete buttons again.
So are you sure?
Which has this cancel button?
It needs to be set to its variable.
We should do that for delete too.
And the cancel button can be given a meaningful name.
Button underscore cancel the delete button to that can get a name.
Button underscore.
Delete.
And we'll make our cancel button functional.
We'll just do it in event construct here we'll get our button cancel.
We'll get the button widget from that wide button.
And we're going to assign on clicked.
And what will we do when cancel happens?
Well, we can remove from parent.
So remove itself.
But we also need to inform the load screen that this has happened.
In other words, we need some kind of delegate or event dispatcher as they're called in blueprint.
So we're going to create one.
And this will be called cancel button clicked.
And we can broadcast this.
We can make a call.
We can do it right before destroying the self.
So if cancel button is clicked, then the load screen needs to subscribe to this event dispatcher.
So compiling and going back to load screen.
As soon as we've created this widget, we must assign an event to its delegate or event dispatcher cancel
button clicked right.
So we're going to take it the return value here.
We'll bring it over here.
And again we'll clean this up later.
But we're going to assign.
Cancel button clicked and as soon as cancel button has been clicked.
We can then re-enable these buttons that we've disabled the play and delete buttons.
We can re-enable them again.
So we'll set that to true.
So let's test this out.
We'll select it, we'll hit delete, we'll hit cancel.
And then we're back to where we were.
We can hit delete again.
We can cancel again.
The are you sure allows us to have an early out.
Now the next thing is to make the delete button functional and actually delete a slot, and then update
this so that it's vacant again.
We'll do that next.
But before we wrap up, let's just make sure that our load screen here has some reasonable organization.
We don't want this to get too crazy.
We can make this its own little function.
All this really needs to be called is are you sure position x something like that.
So let's collapse this to a function.
Get.
Are you sure x position.
And this can be a blueprint, pure function.
So that right there is a little bit more organized.
Now these wires are kind of annoying.
We could move the binding of the event a little closer.
But we still have some wires here that seem a little bit annoying.
And also this blueprint, pure input is called self two.
We're going to make that widget.
And actually this is just getting the widgets size box.
Getting half of it and subtracting that from half of the viewport size.
So this is actually not really specific to are you sure?
Right.
We'll just call this widget centered X position.
But even so, all of this stuff is a little bit disorganized.
Now, one thing we can do is just promote this to a variable, and every time we create a new one,
we'll set that variable.
So if we promote this we can call this our user widget.
And just use this.
So here's what I'm going to do.
I'm going to use are you sure widget here.
I'm going to use it here as well.
Basically everywhere we're plugging it in.
And getting rid of all of these wires here.
This one can go straight to this one.
So I'm going to disconnect these.
Hook these two up directly and bring in our usr widget here.
This is a lot better.
And we just have to understand that we're setting that and resetting it each time.
And most of the time it's not going to be a valid reference.
This is looking better.
So now that we have an Rushmore menu widget, and each time we hit delete, we have the ability to cancel
that deletion.
Now we need to make the delete function actually work.
And we'll do that next.
I'll see you soon.