WEBVTT 00:07.130 --> 00:08.330 Welcome back. 00:08.360 --> 00:15.830 Now, when we press play, as long as we have something to load from memory, we have a take in widget 00:15.830 --> 00:16.190 here. 00:16.190 --> 00:17.720 And we can select a slot. 00:17.720 --> 00:20.030 And that enables the play and delete buttons. 00:20.030 --> 00:21.830 But these don't do anything. 00:22.310 --> 00:23.870 So we need to make them functional. 00:23.870 --> 00:26.000 And I'd like to start with the delete button. 00:26.000 --> 00:34.190 Now when the delete button is pressed I do want to clear the slot, but I want to ask if the user is 00:34.190 --> 00:35.360 certain of that. 00:35.360 --> 00:37.670 You know a are you sure? 00:37.700 --> 00:42.380 Pop up with a delete and a cancel button. 00:42.710 --> 00:46.700 So this is a good opportunity to show how to implement that. 00:46.700 --> 00:48.350 Are you sure pop up. 00:48.350 --> 00:54.110 So what we can do is we can make a widget for that and we can make a general. 00:54.110 --> 00:55.250 Are you sure? 00:55.490 --> 00:57.080 Let's make a new folder. 00:57.080 --> 01:04.550 Actually not here, but let's go into the UI folder first and we'll make a new folder here called are 01:04.550 --> 01:07.010 you sure. 01:07.010 --> 01:08.990 And we'll go ahead and make a pop up here. 01:08.990 --> 01:11.300 Let's make a new widget blueprint. 01:11.300 --> 01:18.170 This can just be an or user widget because it doesn't really need to have any specific inherent functionality. 01:18.170 --> 01:20.870 And we're going to call this Wbbp. 01:21.860 --> 01:23.960 Are you sure? 01:25.220 --> 01:29.000 And are you sure can just be a basic pop up. 01:29.000 --> 01:31.340 We can give it a size box. 01:33.170 --> 01:35.480 We'll call this size box root. 01:37.550 --> 01:41.180 We'll check is variable check width and height override. 01:41.210 --> 01:46.550 We'll set this from fill screen to desired and we'll give it a desired size. 01:46.550 --> 01:48.380 So let's do that. 01:48.410 --> 01:51.770 I'll give it a width override and a height override. 01:51.770 --> 01:56.810 And it'll be a pretty small menu something like this. 01:57.260 --> 02:00.920 We'll just give it round numbers 160. 02:03.460 --> 02:08.260 Now we're also going to want an overlay, as is typical. 02:09.080 --> 02:11.600 And this can be the overlay route. 02:12.470 --> 02:15.680 And by the way, we can parameterize the size if we like. 02:15.680 --> 02:18.530 But we'll just get it to a size we like. 02:18.530 --> 02:21.350 We'll adjust it here in the base class if we need to. 02:21.350 --> 02:27.710 And I'm going to want a background and a border, which means I need a couple of images. 02:27.710 --> 02:31.760 I'll drag one on and call this image background. 02:34.610 --> 02:38.750 And I'll drag another on and I'll call this image border. 02:40.550 --> 02:45.260 Now image background can be set to fill horizontal and vertical. 02:45.440 --> 02:50.810 And we can give it some kind of flowing material. 02:50.840 --> 02:52.880 We can try flowing scroll. 02:52.880 --> 02:53.930 That looks pretty good. 02:53.960 --> 02:56.540 Doesn't really matter as long as we have something there. 02:56.540 --> 02:57.080 Right. 02:57.080 --> 03:00.890 And for the border we're going to choose our border. 03:01.560 --> 03:03.030 Border large. 03:03.030 --> 03:05.520 And I'm going to set this to fill as well. 03:05.520 --> 03:09.840 And we can also set some margins on it. 03:10.400 --> 03:12.740 Now if I click draw as border. 03:13.360 --> 03:14.980 And set the margin. 03:15.500 --> 03:16.610 2.5. 03:16.610 --> 03:17.660 This is what it'll look like. 03:17.660 --> 03:22.430 But because it's stretched, the top is going to be a little bit skinny. 03:22.880 --> 03:26.240 So for the top and bottom we can change this. 03:26.690 --> 03:29.090 If we enter 0.4 it gets bigger. 03:29.750 --> 03:31.730 0.3 gets even bigger. 03:32.180 --> 03:33.560 0.25. 03:33.560 --> 03:34.940 And it's too big. 03:39.490 --> 03:41.620 Point three looks pretty decent, actually. 03:41.620 --> 03:43.270 It looks sort of. 03:44.110 --> 03:45.550 Almost perfect. 03:47.810 --> 03:51.320 .27 is probably just about right for this. 03:51.350 --> 03:55.100 So I'm going to copy .27 and put it on the bottom as well. 03:55.760 --> 03:58.190 And now we have a border that looks pretty good. 03:58.190 --> 04:01.520 We might even make the left and right a little smaller. 04:02.310 --> 04:05.820 Which means we take our margins and increase them a bit. 04:05.820 --> 04:09.840 I'm going to try 0.55.6. 04:09.840 --> 04:14.250 I think 0.6 is perfect, and I'll use that for left and right. 04:14.580 --> 04:17.490 And now we have a pretty good looking border here. 04:17.940 --> 04:21.990 Now we need some text and we need a pair of buttons. 04:21.990 --> 04:24.990 And I think a wrap box is going to make this easy. 04:25.990 --> 04:30.010 So I'm going to add a wrap box to it, set that to fill. 04:30.010 --> 04:33.700 And then we can add some widgets such as some text. 04:36.430 --> 04:39.100 And the text can say, are you sure? 04:41.080 --> 04:42.940 Are you sure? 04:42.970 --> 04:43.990 Question mark. 04:44.980 --> 04:47.890 And we can set the font because Roboto is hideous. 04:47.920 --> 04:50.440 We're going to set this to amaranth regular. 04:50.440 --> 04:51.070 Sure. 04:51.070 --> 04:55.330 And for the size perhaps 12. 04:55.540 --> 05:00.460 And we're just going to have to see how big this looks on the load screen. 05:00.460 --> 05:06.520 In fact, we can go to the load screen and drag one on and just see if we compile the. 05:06.520 --> 05:07.630 Are you sure? 05:08.280 --> 05:11.070 We can search for the rusher and bring it in. 05:11.070 --> 05:12.180 Oh that's tiny. 05:12.180 --> 05:14.730 So we're going to need it to be a little bit bigger right. 05:15.000 --> 05:18.960 Perhaps even twice as wide and twice as tall okay. 05:18.960 --> 05:20.130 That's informative. 05:20.130 --> 05:21.360 Let's do that. 05:21.360 --> 05:25.500 We'll get our size box route go up to our width. 05:25.860 --> 05:31.320 We'll make it 200 and our height will make it 120 like so. 05:31.620 --> 05:33.090 And now are you sure. 05:33.090 --> 05:34.620 Could probably be bigger. 05:35.190 --> 05:36.810 Maybe 18. 05:37.140 --> 05:43.470 And I'm going to check fill empty space and make the horizontal alignment centered. 05:43.740 --> 05:47.370 And now we can drag in a spacer. 05:49.130 --> 05:57.470 The spacer will go right after it, and we'll make it size wide in the X and we'll make it tall. 05:57.470 --> 06:00.650 And then we can have a pair of buttons beneath it. 06:00.830 --> 06:03.890 So let's get ourselves some wide buttons. 06:04.940 --> 06:06.260 We'll get one in here. 06:06.680 --> 06:07.850 That looks a bit big. 06:07.850 --> 06:12.950 Let's see what that looks like here in the load screen after compiling. 06:12.950 --> 06:13.640 Okay. 06:13.640 --> 06:15.620 So are you sure? 06:15.770 --> 06:20.480 Can probably fit two buttons, but it's going to need to be a little wider I think. 06:20.630 --> 06:26.210 Unless those buttons are very small and they can be smaller, but I don't want them to be that small. 06:26.780 --> 06:28.130 So let's make. 06:28.160 --> 06:29.450 Are you sure? 06:29.690 --> 06:33.350 A little larger the size box with override. 06:33.740 --> 06:40.010 I'm going to make it 350 and I'll make the height probably 200. 06:41.820 --> 06:44.580 And we will make the buttons a little smaller. 06:44.610 --> 06:47.100 Let's get that spacer a little wider. 06:48.170 --> 06:51.920 And we'll bring those buttons down a bit and we'll have two of them. 06:51.920 --> 06:54.380 But the buttons themselves, they can be smaller. 06:54.380 --> 06:55.910 The width can be. 06:56.300 --> 07:00.950 Let's try 151 4120. 07:01.700 --> 07:06.380 And for the button itself, we're going to say delete. 07:07.850 --> 07:09.140 For this one. 07:09.740 --> 07:13.340 I'll make it 130 and then we'll have another one. 07:13.340 --> 07:18.680 I'm going to copy it, paste it, and this one will say cancel. 07:22.370 --> 07:27.710 And depending on your philosophy, the cancel could be first or second. 07:27.710 --> 07:29.180 It doesn't really matter. 07:29.180 --> 07:36.320 I think if you read some books on UX or UI, they might tell you that cancel should be first. 07:36.320 --> 07:39.740 Maybe it's like the most risky thing is delete, right? 07:39.740 --> 07:42.830 So if that's first, they're more likely to click on it. 07:42.830 --> 07:45.020 So maybe cancel should be the first one. 07:45.020 --> 07:48.140 If they accidentally hit cancel, at least they could go and do it again. 07:48.140 --> 07:51.410 But if they accidentally hit delete well there's no coming back from it. 07:51.410 --> 07:52.160 And so on. 07:52.610 --> 07:55.940 Now we can make sure that these are centered. 07:55.940 --> 08:00.500 We can set their horizontal alignments and we can fill empty space. 08:00.500 --> 08:06.470 Now we don't want to force new line because we don't need them forced to new lines. 08:06.470 --> 08:09.290 We need them both on the same line. 08:09.500 --> 08:15.740 But if we have horizontal alignment to center for both of them and both set to fill empty space, this 08:15.740 --> 08:17.390 is what it's going to look like. 08:17.390 --> 08:17.930 Now. 08:17.930 --> 08:21.410 They're both kind of pushed to the left anyway with a wrap box. 08:21.410 --> 08:27.620 So what we can do is select both of them, right click and wrap with a horizontal box. 08:27.620 --> 08:32.450 And that's going to make sure that they're both centered, especially when we take the horizontal box 08:32.450 --> 08:35.480 and make sure that it's horizontal alignment is centered. 08:35.870 --> 08:38.450 Now we just need some space in between these two. 08:38.450 --> 08:41.510 And a spacer can do that for us. 08:41.750 --> 08:47.210 So we'll put a spacer in between and we'll give that some x dimension here. 08:47.880 --> 08:48.840 Like so. 08:49.430 --> 08:58.010 Now, usually an rusher has some kind of message explaining the consequences of deleting something, 08:58.010 --> 09:00.230 so we can do that too. 09:00.260 --> 09:03.020 We can make this spacer a little bit shorter. 09:05.240 --> 09:08.660 And just after the spacer we can have some additional text. 09:09.280 --> 09:15.730 That text can go right after the spacer, right before the horizontal box, and I'd like another spacer 09:15.730 --> 09:16.720 after it. 09:17.590 --> 09:19.300 Right after that text. 09:19.880 --> 09:27.050 And then this text can be smaller and it can say a message here that says, what happens if you go and 09:27.050 --> 09:27.950 click delete. 09:27.950 --> 09:30.050 So what is it going to say? 09:30.050 --> 09:36.350 Well, we can say something like deleting a slot is permanent. 09:37.160 --> 09:40.670 You will lose all progress. 09:42.780 --> 09:47.280 Now, of course, this has to be smaller and we should change its font to. 09:49.000 --> 09:52.210 We can change it to really anything we like. 09:53.510 --> 09:55.040 And we'll make it small. 09:56.500 --> 10:02.320 And if you want to have a longer explanation that wraps over, you can go down and make sure that this 10:02.320 --> 10:03.700 text wraps. 10:04.780 --> 10:11.650 If you search for wrap, you can say auto wrap text that will wrap it to a new line as long as there's 10:11.650 --> 10:12.550 some room. 10:12.880 --> 10:17.710 And we may have to wrap this in its own horizontal box to do that. 10:17.710 --> 10:18.850 Let's do that. 10:22.790 --> 10:25.040 And this horizontal box. 10:25.430 --> 10:28.850 It's going to have issues when zooming in and zooming out. 10:29.090 --> 10:34.130 For that reason, I'd like to just replace all of this with a vertical box. 10:34.130 --> 10:37.850 So I'm going to select the wrap box, replace with a vertical box. 10:37.850 --> 10:43.730 And that's going to make this a little bit easier for me, because now my text here can just be set 10:43.730 --> 10:45.050 to centered. 10:45.440 --> 10:51.740 Now my horizontal box here can just be at the correct size. 10:51.740 --> 10:56.960 And the text itself can now be set to wrap. 10:57.440 --> 11:03.560 And we can select that text and choose fill to make sure that it doesn't go off the side there. 11:03.590 --> 11:07.070 Now the text itself is a little big. 11:07.070 --> 11:09.140 I'm going to make it perhaps. 11:10.250 --> 11:11.000 Ten. 11:11.800 --> 11:14.500 But notice that it has some spacing here. 11:14.860 --> 11:18.010 And if we search for line here's a line height percentage. 11:18.010 --> 11:28.750 If we give it a smaller value like .8.7.5, even then it won't take up so much room. 11:29.290 --> 11:32.890 Point six I'll give it 0.65. 11:33.810 --> 11:41.850 And then our bottommost horizontal box can be set to center there and everything. 11:41.850 --> 11:45.390 Overall, our entire vertical box can get some padding. 11:46.620 --> 11:47.910 Like so. 11:47.910 --> 11:51.000 And then this spacer could be brought down in size. 11:52.110 --> 11:55.080 I'll make it ten and I'll make this 110. 11:56.560 --> 11:56.980 Like. 11:56.980 --> 11:59.230 So actually this one now can be bigger. 11:59.900 --> 12:00.770 There we go. 12:01.370 --> 12:05.840 So it's just a matter of tweaking these things until they look good. 12:05.840 --> 12:12.110 That line height percentage could probably be more like 75, maybe even 0.8. 12:12.320 --> 12:15.380 And then I can adjust this spacer again. 12:18.240 --> 12:18.870 Okay. 12:18.870 --> 12:22.290 So let's see how this looks on the load screen. 12:22.290 --> 12:23.580 Are you sure? 12:25.860 --> 12:27.660 I think that looks pretty good. 12:27.660 --> 12:33.330 So we can pop one of these up onto the screen whenever we hit the delete button. 12:33.330 --> 12:39.270 So what I'm going to do is first of all, remove that, and then we'll have an on clicked event for 12:39.270 --> 12:40.020 delete. 12:40.590 --> 12:44.130 And we can assign that in event construct. 12:45.560 --> 12:50.480 So now that we have more things, we're going to need to organize this a bit. 12:51.210 --> 12:53.670 Let's make a sequence for event construct. 12:57.220 --> 13:03.490 So we have the first thing we're doing, which is binding to on clicked for the quit button here. 13:04.420 --> 13:06.940 Let's get that up and out of the way. 13:07.550 --> 13:10.190 Next, we're enabling the play and delete buttons. 13:10.190 --> 13:11.840 That can be the next thing. 13:15.050 --> 13:21.740 We'll have another pen for setting the input mode to UI only and showing the cursor. 13:23.280 --> 13:24.510 We'll do that next. 13:30.120 --> 13:35.430 I'll go ahead and comment this and say quit button clicked. 13:41.930 --> 13:47.360 Here we'll do disable play and delete buttons. 13:53.990 --> 14:01.820 Here we'll say input mode UI only and show mouse cursor. 14:04.920 --> 14:10.020 And then finally we can assign Onclicked for the delete button. 14:10.620 --> 14:13.740 So for that we're going to get our delete button. 14:13.740 --> 14:14.700 Button delete. 14:16.720 --> 14:18.340 Get the button widget from it. 14:21.370 --> 14:22.840 Assign on clicked. 14:25.270 --> 14:30.310 And then we need to decide what happens when we click on the delete button. 14:31.820 --> 14:32.660 Now. 14:32.660 --> 14:37.670 Yes, we're going to want to call a blueprint callable function that will result in the deletion of 14:37.670 --> 14:38.780 a slot and all that. 14:38.780 --> 14:41.660 But before we get to that, we want to pop up our. 14:41.660 --> 14:42.830 Are you sure? 14:42.860 --> 14:43.220 Right. 14:43.220 --> 14:45.050 We want to pop that widget up. 14:45.050 --> 14:46.820 So we want to create one of those. 14:47.590 --> 14:49.330 So we're going to use Create widget. 14:51.180 --> 14:53.970 And we're going to create an are you sure widget. 14:58.330 --> 15:00.370 We're going to add it to the viewport. 15:02.000 --> 15:05.330 Now, of course, we're going to need to set its position in the viewport. 15:05.330 --> 15:05.630 Why? 15:05.660 --> 15:10.490 Because if we go and do this, we select a slot and hit delete. 15:10.520 --> 15:12.590 Well, here's what happens. 15:12.590 --> 15:14.330 It fills the entire screen. 15:14.330 --> 15:18.860 Now of course we can take care of that by wrapping it in an overlay. 15:18.860 --> 15:19.580 The whole thing. 15:19.580 --> 15:23.630 So the size box root we can wrap with an overlay. 15:26.330 --> 15:28.250 And as soon as we've done that. 15:29.080 --> 15:30.640 Then pressing delete. 15:30.640 --> 15:34.450 We get it way up there, but we want it right here at the top. 15:34.450 --> 15:39.010 So what we need to do is set its position in the viewport. 15:39.010 --> 15:40.720 So back to the load screen. 15:40.720 --> 15:45.040 As soon as we've added this to the viewport we can set its position. 15:45.040 --> 15:50.380 Now we're going to need to know how wide it is because we want to set it to the middle of the viewport, 15:50.380 --> 15:52.330 but subtract half of its width. 15:52.860 --> 15:57.810 So I'm going to get the widgets and get its size box size box root. 15:57.810 --> 16:02.670 And from the size box I'm going to use get width override. 16:03.510 --> 16:08.460 That's going to tell me how wide it is and I can use half of that. 16:08.940 --> 16:14.370 Now, what I need to do is take the widget itself and call set position in viewport. 16:15.080 --> 16:20.930 And in order to set it to the middle of the viewport, I need to know the viewport size so I can right 16:20.930 --> 16:23.210 click and get viewport size. 16:23.240 --> 16:26.990 This returns an f vector 2d, which I can break. 16:27.590 --> 16:32.990 Break vector 2d and I can take that x and cut that in half. 16:34.040 --> 16:35.900 So divide that by two. 16:38.940 --> 16:43.440 And that's going to give me the X position of the center of the viewport. 16:43.470 --> 16:48.840 I can also divide the width override so I can duplicate this divide by two. 16:48.840 --> 16:52.530 And now I have half of the size box width. 16:53.040 --> 16:59.220 And I can take this viewport size that's been cut in half, and subtract the width override from the 16:59.220 --> 17:01.230 size box that's been cut in half. 17:01.440 --> 17:02.880 So subtract. 17:04.230 --> 17:05.430 And pass that in. 17:05.430 --> 17:11.880 To set position in viewport, I can split the struct pin and pass this into the x and the position y 17:11.910 --> 17:15.210 can be anything I want, such as 100. 17:16.720 --> 17:19.750 So if we do this, we should now see that. 17:20.230 --> 17:21.130 Are you sure? 17:21.130 --> 17:24.550 Widget in the center, 100 units down. 17:25.360 --> 17:26.230 So there it is. 17:26.230 --> 17:27.490 It's right there in the middle. 17:28.320 --> 17:29.790 Okay, great. 17:30.030 --> 17:33.510 So now we need to actually implement this. 17:33.510 --> 17:38.670 And the first thing we'll do is implement the cancellation of clicking the delete button. 17:38.670 --> 17:39.420 We'll do that. 17:39.420 --> 17:44.040 But we'll also want to disable the delete button because we don't want to keep clicking it. 17:44.040 --> 17:47.430 That's going to keep popping up new widgets. 17:47.430 --> 17:49.020 We're not deleting the old ones. 17:49.020 --> 17:50.730 That's kind of dangerous. 17:50.730 --> 17:53.640 So we should also disable delete. 17:53.640 --> 17:55.470 And we should also disable play. 17:55.470 --> 17:59.760 We should disable both of them as soon as we've created one of those. 17:59.790 --> 18:00.720 Are you sure? 18:00.720 --> 18:01.530 Widgets. 18:01.890 --> 18:02.340 Okay. 18:02.340 --> 18:05.070 So we need to make sure that this doesn't get too out of hand. 18:05.070 --> 18:07.620 So let's organize it just a bit. 18:10.240 --> 18:12.850 Let's make sure that we have enough room. 18:13.860 --> 18:15.900 By moving everything up a bit. 18:19.190 --> 18:22.250 And also make sure that we don't have any crossing nodes. 18:24.550 --> 18:27.400 Okay, we'll clean this up more as we go. 18:27.430 --> 18:34.630 But what we want to do is as soon as we've created one of these, or even before, let's disable the 18:34.630 --> 18:36.190 play and delete buttons. 18:36.190 --> 18:39.370 We have a function called enable play and delete buttons. 18:39.370 --> 18:43.120 We'll call that and we'll make sure false is passed in. 18:43.120 --> 18:47.020 So that right there is going to prevent us from spawning more than one of these. 18:47.050 --> 18:47.770 Are you sure? 18:47.770 --> 18:48.130 Widgets. 18:48.130 --> 18:49.450 We can't do it again. 18:50.050 --> 18:54.550 And then if we click cancel we should destroy this widget. 18:54.550 --> 18:56.140 It should destroy itself. 18:56.440 --> 19:00.880 And then we need to let the load screen widget know that this has been destroyed. 19:00.880 --> 19:04.570 And we can now re-enable the play and delete buttons again. 19:06.540 --> 19:08.220 So are you sure? 19:08.220 --> 19:10.020 Which has this cancel button? 19:10.020 --> 19:12.000 It needs to be set to its variable. 19:12.000 --> 19:13.830 We should do that for delete too. 19:13.830 --> 19:17.550 And the cancel button can be given a meaningful name. 19:17.910 --> 19:23.370 Button underscore cancel the delete button to that can get a name. 19:23.670 --> 19:25.830 Button underscore. 19:25.830 --> 19:26.670 Delete. 19:27.090 --> 19:30.210 And we'll make our cancel button functional. 19:30.480 --> 19:34.740 We'll just do it in event construct here we'll get our button cancel. 19:35.100 --> 19:37.890 We'll get the button widget from that wide button. 19:38.370 --> 19:41.370 And we're going to assign on clicked. 19:44.010 --> 19:47.610 And what will we do when cancel happens? 19:47.610 --> 19:50.580 Well, we can remove from parent. 19:54.220 --> 19:55.630 So remove itself. 19:55.630 --> 19:59.080 But we also need to inform the load screen that this has happened. 19:59.230 --> 20:04.150 In other words, we need some kind of delegate or event dispatcher as they're called in blueprint. 20:04.180 --> 20:05.620 So we're going to create one. 20:05.620 --> 20:09.670 And this will be called cancel button clicked. 20:10.570 --> 20:12.190 And we can broadcast this. 20:12.190 --> 20:14.050 We can make a call. 20:15.150 --> 20:17.520 We can do it right before destroying the self. 20:18.700 --> 20:25.030 So if cancel button is clicked, then the load screen needs to subscribe to this event dispatcher. 20:25.030 --> 20:27.430 So compiling and going back to load screen. 20:27.430 --> 20:35.530 As soon as we've created this widget, we must assign an event to its delegate or event dispatcher cancel 20:35.530 --> 20:36.940 button clicked right. 20:37.210 --> 20:40.270 So we're going to take it the return value here. 20:40.840 --> 20:41.920 We'll bring it over here. 20:41.920 --> 20:43.390 And again we'll clean this up later. 20:43.390 --> 20:45.340 But we're going to assign. 20:45.950 --> 20:49.910 Cancel button clicked and as soon as cancel button has been clicked. 20:50.990 --> 20:57.110 We can then re-enable these buttons that we've disabled the play and delete buttons. 20:57.710 --> 20:59.390 We can re-enable them again. 21:01.090 --> 21:02.710 So we'll set that to true. 21:02.980 --> 21:04.450 So let's test this out. 21:05.760 --> 21:09.030 We'll select it, we'll hit delete, we'll hit cancel. 21:09.030 --> 21:11.460 And then we're back to where we were. 21:11.460 --> 21:12.570 We can hit delete again. 21:12.570 --> 21:13.890 We can cancel again. 21:15.920 --> 21:19.220 The are you sure allows us to have an early out. 21:19.870 --> 21:26.200 Now the next thing is to make the delete button functional and actually delete a slot, and then update 21:26.200 --> 21:27.850 this so that it's vacant again. 21:27.850 --> 21:29.020 We'll do that next. 21:29.020 --> 21:36.130 But before we wrap up, let's just make sure that our load screen here has some reasonable organization. 21:36.130 --> 21:38.350 We don't want this to get too crazy. 21:38.620 --> 21:40.990 We can make this its own little function. 21:40.990 --> 21:45.880 All this really needs to be called is are you sure position x something like that. 21:45.880 --> 21:48.070 So let's collapse this to a function. 21:48.280 --> 21:49.060 Get. 21:49.060 --> 21:52.180 Are you sure x position. 21:52.830 --> 21:55.380 And this can be a blueprint, pure function. 21:56.620 --> 21:59.380 So that right there is a little bit more organized. 21:59.410 --> 22:03.310 Now these wires are kind of annoying. 22:03.310 --> 22:08.290 We could move the binding of the event a little closer. 22:10.840 --> 22:14.830 But we still have some wires here that seem a little bit annoying. 22:14.830 --> 22:17.680 And also this blueprint, pure input is called self two. 22:17.710 --> 22:21.010 We're going to make that widget. 22:21.250 --> 22:25.690 And actually this is just getting the widgets size box. 22:26.870 --> 22:31.280 Getting half of it and subtracting that from half of the viewport size. 22:31.280 --> 22:36.080 So this is actually not really specific to are you sure? 22:36.110 --> 22:36.740 Right. 22:37.540 --> 22:43.390 We'll just call this widget centered X position. 22:44.500 --> 22:50.080 But even so, all of this stuff is a little bit disorganized. 22:50.290 --> 22:55.900 Now, one thing we can do is just promote this to a variable, and every time we create a new one, 22:55.900 --> 22:57.460 we'll set that variable. 22:57.940 --> 23:04.120 So if we promote this we can call this our user widget. 23:05.510 --> 23:06.980 And just use this. 23:10.720 --> 23:12.580 So here's what I'm going to do. 23:12.580 --> 23:15.160 I'm going to use are you sure widget here. 23:15.640 --> 23:17.890 I'm going to use it here as well. 23:18.800 --> 23:21.260 Basically everywhere we're plugging it in. 23:26.280 --> 23:28.800 And getting rid of all of these wires here. 23:31.330 --> 23:33.190 This one can go straight to this one. 23:33.190 --> 23:35.650 So I'm going to disconnect these. 23:35.680 --> 23:40.720 Hook these two up directly and bring in our usr widget here. 23:40.720 --> 23:41.980 This is a lot better. 23:45.220 --> 23:49.630 And we just have to understand that we're setting that and resetting it each time. 23:49.630 --> 23:53.110 And most of the time it's not going to be a valid reference. 23:56.720 --> 23:58.100 This is looking better. 24:01.500 --> 24:09.720 So now that we have an Rushmore menu widget, and each time we hit delete, we have the ability to cancel 24:09.720 --> 24:10.590 that deletion. 24:10.590 --> 24:14.580 Now we need to make the delete function actually work. 24:14.580 --> 24:16.110 And we'll do that next. 24:16.470 --> 24:17.400 I'll see you soon.