WEBVTT 00:06.940 --> 00:10.900 Okay, so our game is looking pretty good so far. 00:10.900 --> 00:18.820 But there is one thing that I think we could use and that is an option to leave the game once we're 00:18.820 --> 00:19.570 in the game. 00:19.600 --> 00:25.060 You see, playing in the Pi, we're kind of spoiled in that we can press the escape key any time and 00:25.060 --> 00:26.380 exit the game. 00:26.380 --> 00:33.550 Now, this is not the case in a packaged build, so our overlay needs some kind of menu button, some 00:33.550 --> 00:36.010 kind of way to exit and leave. 00:36.010 --> 00:41.590 And I think the best way to do that is with a simple button on the overlay. 00:41.590 --> 00:48.100 If we go to our overlay here, we have our spells button, and we can take that and just move it over 00:48.100 --> 00:55.960 slightly, make some room and add a button and we can use our red button, our warp button. 00:55.960 --> 01:01.060 We can bring one of those in here and we can just create a nice little X button. 01:01.060 --> 01:03.280 Now I'm going to take the spells button and take its size. 01:03.280 --> 01:07.810 Why that's 65 I'm going to make size x and y both 65. 01:07.810 --> 01:13.300 For this button it's going to be a simple X button a close button. 01:13.300 --> 01:21.580 And I'm going to make sure that it's position y is the same as the position y of the spells button. 01:21.700 --> 01:26.890 And of course that's going to send it way up there because it's not anchored to the bottom right. 01:26.890 --> 01:29.110 So I want it anchored to the bottom right. 01:29.260 --> 01:32.620 I'll go ahead and paste in that y position again. 01:32.620 --> 01:33.760 And there we go. 01:33.760 --> 01:35.650 We have an X button. 01:36.280 --> 01:39.880 Now the X button could close the game. 01:39.880 --> 01:41.170 It could quit the game. 01:41.170 --> 01:44.920 Or we can have an are you sure message if we like. 01:44.920 --> 01:48.520 And usually there's an are you sure message. 01:48.670 --> 01:52.390 And that's in our are you sure folder. 01:52.390 --> 01:54.520 We have the are you sure. 01:54.520 --> 01:58.270 And it says something specific. 01:58.270 --> 02:00.100 Deleting a slot is permanent. 02:00.100 --> 02:03.580 You know this is something we could make a variable. 02:03.580 --> 02:08.740 And if it's exposed as a variable then we can set this when creating it. 02:08.740 --> 02:13.660 Now that means I'd like to rename this to text block something else. 02:13.660 --> 02:14.230 Right. 02:14.230 --> 02:16.180 I'm going to say text block. 02:16.980 --> 02:17.940 Message. 02:18.180 --> 02:19.230 I think that's fine. 02:19.230 --> 02:26.370 And what we can do is the same thing we did when creating an Rushmore widget in our load screen. 02:26.370 --> 02:31.500 So if we go back to the load screen, we can see how we did that in the load menu folder. 02:31.500 --> 02:35.730 If we take a look at what we did for the quit button, this is a good example. 02:35.730 --> 02:37.620 So we have the quit button. 02:37.620 --> 02:40.860 And in fact it's not the quit button but actually the delete button. 02:40.860 --> 02:47.130 If we take a look at the delete button button delete, we'll see that when we click that button, we 02:47.130 --> 02:51.420 first enable the Play and Delete button, setting their enabled status to false. 02:51.420 --> 02:58.800 Create the Are you Sure widget store that in a variable, add that to the viewport and then bind an 02:58.800 --> 03:07.980 event to it's cancelled and to its delete on clicked events and decide what to do in those cases. 03:07.980 --> 03:11.670 Now I think we could do the same thing in the overlay. 03:11.700 --> 03:14.700 Only we could reset the message. 03:14.700 --> 03:19.380 We could overwrite that message in the are you sure widget? 03:19.380 --> 03:22.770 So what I'm going to do is in the overlay. 03:22.770 --> 03:28.950 First of all, we want to assign to the close button on clicked event. 03:28.950 --> 03:30.870 So we're going to check is variable. 03:30.870 --> 03:33.030 And we're going to call this button. 03:33.900 --> 03:40.050 And we can either call it X or quit or close I'll just call it button quit. 03:40.050 --> 03:42.120 And here in the graph. 03:43.070 --> 03:45.920 What we can do is we can assign to this. 03:45.920 --> 03:49.370 Now, we don't have to wait until the widget controller is set. 03:49.370 --> 03:52.610 We could just assign an event construct. 03:52.610 --> 03:57.650 So I'm going to move these up and add a pen and grab my quit button. 03:57.650 --> 03:58.640 Button quit. 04:00.720 --> 04:06.030 We're going to get its internal button widget and assign to its onclicked. 04:08.710 --> 04:11.200 And we'll go ahead and hook this up to the sequence. 04:11.730 --> 04:14.310 So what are we going to do in Onclicked? 04:14.310 --> 04:15.690 Let's make some room. 04:18.860 --> 04:21.020 And again we can look at load screen. 04:21.020 --> 04:23.630 We can see that on clicked. 04:23.900 --> 04:27.470 First of all we disable some buttons right. 04:27.470 --> 04:32.510 And we can disable buttons here in the overlay we can disable the button. 04:32.510 --> 04:33.380 Quit button. 04:35.280 --> 04:36.240 We can do that. 04:36.270 --> 04:37.230 That is enabled on. 04:37.230 --> 04:37.860 Let's take. 04:40.100 --> 04:47.390 So setting that to false, if we wanted, we can disable the attributes and spell menu buttons as well. 04:47.390 --> 04:50.810 If you really wanted to, we could encapsulate that into a function. 04:50.810 --> 04:53.960 We can take our attribute menu button. 04:55.320 --> 04:56.910 We can get its button. 05:01.160 --> 05:04.340 And in fact, it would be easy. 05:04.840 --> 05:12.340 To just reuse the set as enabled node, we could pass these buttons all into the same node if we wanted 05:12.340 --> 05:12.880 to. 05:12.970 --> 05:15.820 We could do the same thing for the spell menu button. 05:17.540 --> 05:21.020 So getting its button and passing that in. 05:21.020 --> 05:23.720 So disabling all the buttons essentially. 05:24.020 --> 05:29.000 And after disabling the buttons what do we do in load screen. 05:29.000 --> 05:34.430 We create the rusher widget and promote it to a variable and add it to the viewport. 05:34.940 --> 05:38.720 So we can do that here we can use create widget. 05:42.010 --> 05:43.180 We can use. 05:43.210 --> 05:44.440 Are you sure? 05:47.060 --> 05:53.330 And promote that to a variable called Are you sure widget? 05:54.900 --> 06:00.660 Now, I'd like to take the Are You Sure widget and get its text block message. 06:02.700 --> 06:08.280 So text block message and we can call set text on it. 06:13.110 --> 06:20.760 And for the message we can set this to exit to loading menu question mark. 06:21.990 --> 06:26.520 All unsaved progress will be lost. 06:28.060 --> 06:30.220 So just a bit of a warning there. 06:31.030 --> 06:33.430 Okay, I'm going to make a little bit more room. 06:33.430 --> 06:35.170 We'll be able to clean this up later. 06:35.170 --> 06:38.680 But after setting the text we can take the rusher widget. 06:38.680 --> 06:40.420 We can add it to the viewport. 06:42.960 --> 06:44.640 So add to viewport. 06:48.320 --> 06:56.540 And once we've added it to the viewport, we can then assign callbacks to its button clicked events 06:56.540 --> 06:58.460 so we can take our user widget. 06:58.460 --> 07:06.620 We can just like load screen, we can bind an event to its cancel button clicked and to its delete button 07:06.620 --> 07:07.220 clicked. 07:07.220 --> 07:12.740 The only difference is the delete button should now say quit, so we can fix that as well. 07:12.740 --> 07:14.270 We can make the delete button. 07:14.270 --> 07:15.590 It is a variable. 07:15.590 --> 07:16.880 It says button delete. 07:16.880 --> 07:20.600 Right, so we can set its text as well before we go and assign delegates. 07:20.600 --> 07:21.770 Let's do that too. 07:21.770 --> 07:24.050 Let's take the are you sure widget. 07:25.360 --> 07:27.280 Let's get button delete. 07:31.820 --> 07:33.770 We have our button properties here. 07:33.770 --> 07:39.740 Now we can set the button text, but that's only going to update things if we call this before the game 07:39.740 --> 07:40.490 starts. 07:40.490 --> 07:43.100 So what we can do is go look at the button. 07:43.100 --> 07:50.120 We'll go to our buttons, our button folder, and let's go to the parent class where we have our button 07:50.120 --> 07:54.020 and we have its text looks like it's called text. 07:55.750 --> 07:58.330 And we do have an update text function. 07:59.170 --> 08:02.800 But this is really just created for the construction script. 08:02.800 --> 08:09.310 What we really want is to set this button text itself, and just calling it text makes it a little hard 08:09.310 --> 08:10.630 to find and identify. 08:10.630 --> 08:15.700 So we'll call this text button message. 08:17.080 --> 08:19.690 Or actually button title might be better. 08:21.430 --> 08:23.500 That makes it a little easier to find. 08:23.500 --> 08:28.120 So if we go back to the overlay, we can find. 08:29.290 --> 08:31.930 Button title. 08:31.930 --> 08:32.560 There it is. 08:32.560 --> 08:34.480 And we can set the text for this. 08:35.970 --> 08:37.590 We can set it to quit. 08:39.800 --> 08:44.210 So we'll call set text on it here and we'll just say quit. 08:47.110 --> 08:49.180 Now after doing that. 08:51.280 --> 08:53.350 And adding it to the viewport. 08:53.380 --> 08:56.530 Now we can assign to the onclick events for these. 08:56.530 --> 08:59.440 So making yet some more room here. 09:00.400 --> 09:01.930 We're taking our are you sure? 09:01.930 --> 09:02.860 Widget. 09:02.920 --> 09:04.630 Getting button. 09:04.630 --> 09:05.980 Delete. 09:08.090 --> 09:10.850 And really, this is the quit button now. 09:10.880 --> 09:15.590 We're going to get its button assign on clicked for it. 09:22.430 --> 09:24.320 And this is the rusher button. 09:24.320 --> 09:25.640 So if we've clicked. 09:26.210 --> 09:29.240 The delete button, which is now the quit button. 09:29.240 --> 09:32.960 That means we're actually quitting the game so we can use quit game here. 09:33.740 --> 09:35.420 So that's the easy case. 09:36.080 --> 09:41.420 We don't have to worry about anything else because we're actually closing out of the game in this case. 09:42.560 --> 09:46.670 But we also want to take the rusher widget. 09:47.610 --> 09:49.980 And get its cancel button. 09:49.980 --> 09:54.750 Now, if we type cancel, we could get button cancel and assign to its on clicked. 09:54.750 --> 10:04.980 Remember we also have a cancel button clicked event dispatcher and are you sure does broadcast this 10:04.980 --> 10:09.090 event dispatcher and removes itself from the parent. 10:09.090 --> 10:12.780 So that's what we want to bind to with the quit button. 10:12.780 --> 10:15.330 It doesn't really matter, we're just quitting the game. 10:15.330 --> 10:21.060 Unless of course, what you want to do is go back to the load screen menu, which we may want to do 10:21.060 --> 10:29.430 that, but either way, here in the overlay we want to assign to cancel button clicked, which is not 10:29.430 --> 10:31.380 the on clicked event for the button widget. 10:31.380 --> 10:35.010 It's the custom event dispatcher we created. 10:36.060 --> 10:40.080 So that's going to result in this widget. 10:40.080 --> 10:42.750 The are you sure widget deleting itself. 10:42.750 --> 10:48.060 And now we can respond by re-enabling the widgets that we set to disabled here. 10:48.060 --> 10:52.500 So I'm going to copy those nodes and paste them here only. 10:52.500 --> 10:57.540 We're going to set these all back to enabled and the widget will remove itself. 10:57.540 --> 11:02.490 Now actually this needs to go right here on the event. 11:02.880 --> 11:04.620 Now if we want to. 11:05.130 --> 11:06.780 We don't have to quit the game. 11:06.780 --> 11:09.390 We can just call open level. 11:13.380 --> 11:18.720 And if we open it level by object reference, we can go back to the load menu. 11:18.720 --> 11:19.980 That's another option. 11:21.760 --> 11:30.460 Okay, so we can clean this node, string up if we like, but let's first make sure things work. 11:30.550 --> 11:33.670 So we'll go ahead and go back to the load menu. 11:33.910 --> 11:35.650 We'll press play. 11:35.680 --> 11:38.260 Load in press the X. 11:38.260 --> 11:41.230 And we are going to want to set the position in viewport. 11:41.230 --> 11:44.680 But if we cancel then no harm done. 11:44.710 --> 11:51.220 The other menus can be opened again as they can't when this button is clicked. 11:51.220 --> 11:54.130 Of course we can disable movement if we like as well. 11:54.130 --> 11:57.250 We can disable input so that we can't be playing. 11:57.740 --> 11:59.150 While this menu is open. 11:59.150 --> 12:03.320 That's another option, but we can also hit delete, which should be quit. 12:03.320 --> 12:05.090 We're going to want to see about changing that. 12:05.090 --> 12:08.960 But if we hit delete we go back to the load screen like so. 12:08.960 --> 12:13.610 So that delete button we want it to say quit right. 12:13.610 --> 12:16.940 So let's actually set this text a little differently. 12:16.940 --> 12:22.640 I'm going to delete that set text and from button delete I'm going to call set text. 12:22.640 --> 12:24.500 And we'll use set button text. 12:24.500 --> 12:28.100 And we'll just set the button's text directly to quit. 12:31.190 --> 12:33.890 So with that, we should see quit. 12:35.520 --> 12:36.510 There it is. 12:37.110 --> 12:41.610 Now, the last thing is setting the position in viewport. 12:41.610 --> 12:44.850 And we can look at load screen to see how we did that. 12:44.880 --> 12:51.480 We called set position in viewport and we got the widget centered x position. 12:51.480 --> 12:54.810 And then set the y position to a hard coded value. 12:54.840 --> 12:56.730 Now widget centered x position. 12:56.730 --> 13:02.310 This is just a function that gets the viewport size, divides it by two. 13:02.340 --> 13:07.860 Subtracts half of the size box root for load screen. 13:08.670 --> 13:14.100 Really, this could be a function on the are you sure widget itself. 13:14.340 --> 13:22.890 So on the are you sure widget, we might as well just create a new function and we can call this widget 13:22.890 --> 13:25.110 centered x position. 13:25.110 --> 13:27.870 We could even just call it centered x position. 13:28.410 --> 13:32.490 Now control V gives me the nodes that I copied. 13:32.490 --> 13:38.790 We got the viewport size and looking at the load screen it's taking the size box and getting its width 13:38.790 --> 13:39.720 override. 13:39.720 --> 13:43.560 So here in are you sure we can get that size box root. 13:43.560 --> 13:45.300 We can get its width override. 13:51.720 --> 13:54.120 We can also divide it by two. 13:59.980 --> 14:05.920 And subtract this from the viewport's half size and we can simply return this value. 14:06.490 --> 14:10.660 So let's give this function an output of type float. 14:12.480 --> 14:15.030 And we'll call this viewport X. 14:16.960 --> 14:20.440 And we'll return this and make this a pure function. 14:20.440 --> 14:25.030 So now we have this centered exposition blueprint pure function. 14:25.030 --> 14:32.980 And here in the overlay once we've added this widget to the viewport we can now center. 14:34.180 --> 14:39.160 This widget, we can call set position in viewport just like in load screen. 14:39.490 --> 14:41.740 We have set position in viewport. 14:41.740 --> 14:47.020 In fact, the widget itself could set its own position in viewport, but I'll leave it up to the overlay. 14:50.050 --> 14:51.640 Just in case. 14:52.490 --> 14:54.680 We'd like to change it from the overlay. 14:54.680 --> 14:57.230 We'll call set position in viewport. 14:59.900 --> 15:02.900 And for the position, we're going to split the struct pin. 15:02.900 --> 15:09.650 I'll give this 100 for the y and for the position y we'll take the rusher widget. 15:11.510 --> 15:15.320 Get our centered exposition and hook that in for the X. 15:16.450 --> 15:18.070 And then hook these up. 15:18.070 --> 15:20.920 Compile and play test. 15:21.930 --> 15:23.220 And there it is. 15:23.220 --> 15:25.620 And it says exit to loading menu. 15:25.620 --> 15:26.400 Question mark. 15:26.400 --> 15:28.710 All unsaved progress will be lost. 15:28.710 --> 15:35.010 We can cancel that and we can quit and go back, and we can quit from there and go back to the main 15:35.010 --> 15:35.430 menu. 15:35.430 --> 15:37.800 And we can quit from there and leave the game. 15:39.480 --> 15:40.050 Okay. 15:40.050 --> 15:41.040 So that's great. 15:41.040 --> 15:42.330 Everything's looking good. 15:42.330 --> 15:46.980 And the last thing we could possibly do is clean things up right here. 15:46.980 --> 15:50.160 We have all of the buttons that we're disabling. 15:50.160 --> 15:52.230 We're really passing in a boolean. 15:52.230 --> 15:57.630 So I'm just going to refactor this into a function that takes in a boolean. 15:57.630 --> 15:59.280 I'm going to collapse the function. 16:00.670 --> 16:12.550 Set buttons enabled, and I'm going to open this function and add an input of type bool called enable. 16:14.180 --> 16:16.250 And hook that in here. 16:16.250 --> 16:20.600 So now we have a function to enable or disable all buttons. 16:20.600 --> 16:22.790 So we're disabling them all here. 16:23.120 --> 16:27.530 We're then creating a widget storing it as a member variable. 16:27.950 --> 16:30.710 Setting its message text. 16:30.710 --> 16:33.290 Setting the quit button text. 16:33.770 --> 16:35.600 Adding it to the viewport. 16:38.560 --> 16:40.360 Setting its position in the viewport. 16:40.360 --> 16:44.920 This is all stuff that has to do with creating that widget. 16:44.920 --> 16:51.130 So I'm going to collapse these all to a function from the create widget on and. 16:51.940 --> 16:56.170 Collapse to function called create. 16:56.200 --> 16:58.090 Are you sure? 16:58.090 --> 16:58.990 Widget. 17:01.770 --> 17:09.180 And then from there we're binding to the rusher widget, which it's not clear here whether we have a 17:09.180 --> 17:10.620 valid rusher widget. 17:10.620 --> 17:22.080 So what we can do here is just use a validated get before we go and assign callbacks to this widget. 17:22.080 --> 17:31.830 So we're assigning to it's on clicked for the delete button and assigning to on clicked for the cancel 17:31.830 --> 17:32.280 button. 17:32.280 --> 17:38.130 And here we have a function for this called set buttons enabled that we can call passing a true in there. 17:38.130 --> 17:41.790 So that doesn't need to be there. 17:42.910 --> 17:46.150 And we'll say right here. 17:47.700 --> 17:48.780 Cancel. 17:48.780 --> 17:49.590 Quitting. 17:50.070 --> 17:51.930 And for this one? 17:53.170 --> 17:57.130 We're going to say return to loading screen, right? 18:00.450 --> 18:03.690 And but it would go in that a comment as well. 18:03.690 --> 18:04.170 Who's famous? 18:05.430 --> 18:06.960 And if we like. 18:06.960 --> 18:10.500 And here we can comment this if we like. 18:11.680 --> 18:12.910 Create. 18:12.910 --> 18:15.850 Are you sure? 18:15.850 --> 18:16.750 Widget. 18:17.110 --> 18:21.010 And these can all be their own little sequence if we like. 18:25.320 --> 18:29.670 To just clean this up and make it a little bit easier on the eyes. 18:42.010 --> 18:44.380 But unless we want to is valid. 18:44.380 --> 18:46.570 Nodes one for each of these. 18:47.350 --> 18:49.570 We'll want these in sequence, but. 18:50.570 --> 18:56.570 You know, if we really wanted to, we can have a validated get here as well. 18:56.570 --> 18:57.800 And then we could. 18:58.750 --> 19:01.360 Put these in the sequence node. 19:04.610 --> 19:05.180 Like. 19:05.180 --> 19:07.700 So here's the then one. 19:07.700 --> 19:10.070 Here's the then two. 19:13.220 --> 19:16.010 And we have a little bit more organization here. 19:20.310 --> 19:21.030 And right here. 19:21.030 --> 19:25.380 We'll just comment this too and say quit button pressed. 19:32.510 --> 19:39.140 And we could even subsume all of this and say quit button. 19:40.190 --> 19:41.960 And we can make it red. 19:46.410 --> 19:48.090 For the quit button. 19:48.620 --> 19:52.490 Okay, so I think that's looking pretty nice. 19:57.350 --> 20:01.280 So just organizing things here, I'll put these at the top. 20:01.280 --> 20:03.260 This is for the widget controller. 20:03.260 --> 20:07.400 The widget controller can all go into its own comment. 20:08.170 --> 20:10.240 Widget controller set. 20:10.240 --> 20:13.330 I know you can't read that, but it says Widget Controller set. 20:13.330 --> 20:14.830 I'm going to make it green. 20:17.840 --> 20:20.240 This is event construct. 20:23.740 --> 20:24.520 If you want. 20:24.520 --> 20:26.590 Put that all in a comment if you like. 20:27.360 --> 20:30.600 And then attribute menu and spell menu buttons clicked. 20:30.600 --> 20:33.330 So now we have a little bit more organization. 20:33.330 --> 20:37.110 And once again, since we've changed it we can test it out. 20:37.110 --> 20:38.250 We can test canceling. 20:38.250 --> 20:39.270 We can test quitting. 20:39.270 --> 20:40.290 And they work. 20:40.350 --> 20:41.250 Excellent. 20:41.250 --> 20:45.150 Now we have a way to get out of the game in a nice, graceful manner. 20:45.150 --> 20:48.090 We don't have to hard exit when we're playing. 20:48.900 --> 20:51.690 Excellent job and I'll see you in the next video.