WEBVTT 00:07.170 --> 00:08.220 Welcome back. 00:08.220 --> 00:11.670 Now in our load menu we have three widget switchers. 00:11.880 --> 00:16.380 Really there are own custom widget blueprints that have a widget switcher. 00:16.620 --> 00:21.750 But we need a way to switch those widget switchers and we need an easy way to do so from C plus. 00:21.750 --> 00:26.040 Plus as we have view models that we wish to do so with. 00:26.190 --> 00:32.130 So I'm going to close the editor and go to my load slot view model, which is going to control those 00:32.130 --> 00:35.040 widgets that have their view model set to it. 00:35.040 --> 00:38.190 Now I'm actually done with my load screen HUD. 00:38.220 --> 00:39.540 I'm going to close that. 00:40.090 --> 00:42.580 I'm done with my load screen widget as well. 00:42.580 --> 00:46.690 I'm going to close that and I'm going to get my mVVM load slot. 00:46.690 --> 00:49.810 Both the header file and the cpp file. 00:49.810 --> 00:58.960 Now load slot is going to want to somehow tell that widget switcher which of its three children to switch 00:58.960 --> 01:00.820 to by index. 01:01.360 --> 01:07.450 Now the widget switcher doesn't have its view model set to this load slot view model, but it does have 01:07.450 --> 01:11.890 access to it at one point in time when it sets the view model for its children. 01:11.890 --> 01:14.890 At that point, it can bind to a delegate. 01:15.010 --> 01:16.270 So I'm going to declare one. 01:16.270 --> 01:26.860 I'm going to declare a dynamic multicast delegate that broadcasts a single integer, so one per Ram, 01:27.940 --> 01:29.710 and it's going to broadcast an index. 01:29.710 --> 01:34.570 So I'm going to call this f set widget switcher index. 01:35.410 --> 01:37.690 And it's going to pass an int 32. 01:37.720 --> 01:42.040 We'll call this widget switcher index. 01:42.730 --> 01:47.560 And then it can choose from among its child widgets which one to switch to. 01:48.130 --> 01:53.050 Now that means we need one of these as a public member variable. 01:53.080 --> 01:58.510 It's going to be an f set widget switcher index called set widget switcher index. 01:58.510 --> 02:02.020 And it's going to be a U property with blueprint assignable. 02:04.780 --> 02:08.350 Now which index we switch to, that's going to depend. 02:08.350 --> 02:13.390 It's going to depend on data that we may have saved already and what we're loading. 02:14.060 --> 02:20.000 Now we're not saving or loading anything yet, so we really don't have a meaningful index to broadcast. 02:20.700 --> 02:28.380 But once we do, we can broadcast this, and I'd like to broadcast it by having a function on this view 02:28.380 --> 02:31.890 model, we can call to initialize the slot on it. 02:31.890 --> 02:38.010 So we can make a public function here called void initialize slot. 02:38.190 --> 02:46.650 And this can basically have this class broadcast its slot index based on whatever its status is from 02:46.650 --> 02:48.270 when we've loaded in data. 02:48.270 --> 02:50.070 So we're not loading anything yet. 02:50.070 --> 02:55.590 For now, all we can do is just create the definition and broadcast the delegate. 02:55.590 --> 02:58.830 We can just try to broadcast something right. 02:58.830 --> 03:04.980 We can call set widget switcher, index dot broadcast and just pass something in like one. 03:04.980 --> 03:10.170 But we're going to have to make sure that we check our slot status based on loaded data. 03:10.170 --> 03:17.610 So we're going to say to do check slot status based on loaded data. 03:18.710 --> 03:23.270 And whenever we actually load data, we'll call initialize slot. 03:23.720 --> 03:24.170 Okay. 03:24.170 --> 03:26.780 So that's set up for when we're ready to use it. 03:27.200 --> 03:33.350 Now in addition, our load screen view model is going to need some blueprint callable functions for 03:33.350 --> 03:35.870 when some of our widget buttons are pressed. 03:36.230 --> 03:39.770 We know we have three types of widgets which have buttons. 03:39.770 --> 03:40.730 Some of them. 03:40.880 --> 03:44.420 Let's go into the editor and see what buttons we have. 03:45.400 --> 03:52.180 So we can go into blueprints UI load menu and we can look at our three widgets. 03:52.180 --> 03:55.450 We have the take in which has a select slot button. 03:57.480 --> 04:00.420 We also have vacant, which has its own button. 04:00.420 --> 04:02.550 It's the vacant button we can call it. 04:02.550 --> 04:05.730 And then we have Enter Name, which has a new slot button. 04:05.730 --> 04:10.170 So we have three buttons and we need to handle those somehow. 04:10.170 --> 04:15.150 Now we know that the view models for these are the load slot view model. 04:15.540 --> 04:21.570 But when we press these buttons we actually need our load screen view model, the overarching one to 04:21.570 --> 04:22.680 know about it. 04:22.680 --> 04:23.250 Why? 04:23.280 --> 04:25.650 Because it needs to check conditions. 04:25.650 --> 04:27.720 It needs to update the other slots. 04:27.720 --> 04:34.800 It has access to the other view models for the other slots, so it needs a function to call for each 04:34.800 --> 04:42.360 of these, which means each of these also needs access to that other view model, not just BP load slot 04:42.360 --> 04:43.140 view model. 04:43.410 --> 04:46.770 Well, this system is flexible enough to allow for that. 04:47.130 --> 04:52.560 You see we can take each of these three and we can click plus view model and we can add another one. 04:52.560 --> 04:55.560 We can add a BP load screen view model. 04:55.560 --> 05:03.090 We can select that in fact we know that we can have it search for its own view model by setting its 05:03.090 --> 05:12.780 creation type to property path and setting this view model property path to find load screen view model. 05:16.380 --> 05:19.410 And if we can compile without errors, we didn't have a typo. 05:19.800 --> 05:21.690 Now let's do that for all three. 05:21.690 --> 05:23.460 We can add that view model. 05:24.530 --> 05:31.820 The BP load screen view model and set the creation type to property path and set that property path. 05:31.820 --> 05:33.860 We'll do that for all three here. 05:35.050 --> 05:37.510 BP load screen view model. 05:38.230 --> 05:39.640 Property path. 05:39.760 --> 05:40.540 And there we go. 05:40.540 --> 05:44.170 So now each of these has two view models. 05:44.170 --> 05:50.260 And that load screen view model is going to be set automatically via the property path. 05:50.290 --> 05:55.330 Now this allows us to call blueprint callable functions on it because we have those getters. 05:55.330 --> 05:57.880 Now for the load screen view model. 05:57.880 --> 06:06.820 So the load screen view model can now have blueprint callable functions for select slot for the vacant 06:06.820 --> 06:10.270 button or new game button, whatever we want to call that. 06:10.270 --> 06:11.890 And for the new slot button. 06:11.890 --> 06:16.690 So let's call these select slot new game. 06:17.740 --> 06:19.660 And new slot buttons. 06:19.660 --> 06:22.810 So I'm going to take select slot and call this button. 06:24.260 --> 06:28.100 Select slot and check is variable. 06:28.250 --> 06:29.330 We'll go to the vacant. 06:29.330 --> 06:31.400 We'll take this button and call it button. 06:31.820 --> 06:35.600 New game and check is variable. 06:35.600 --> 06:37.760 And we'll go to enter name. 06:37.760 --> 06:40.280 We'll take this button and call it. 06:41.010 --> 06:49.950 Button new slot and check his variable and we can make blueprint callable functions in our load screen 06:49.950 --> 06:51.570 view model for all of them. 06:51.570 --> 06:57.240 We'll start with select slot and when we click select slot we need to tell that view model what our 06:57.240 --> 07:00.090 index is, which we know we've already set. 07:00.090 --> 07:03.630 So we're going to go to mVVM load screen. 07:04.080 --> 07:05.670 We'll make a new function. 07:06.510 --> 07:10.950 This can be void and we'll call it new slot button pressed. 07:11.550 --> 07:14.730 And it'll take an INT 32 called slot. 07:14.730 --> 07:20.070 And not only that, but what else are we entering for. 07:20.070 --> 07:20.760 New slot. 07:20.760 --> 07:23.340 Looks like we started with new slot right. 07:23.370 --> 07:25.140 New slot button pressed. 07:25.140 --> 07:26.700 That's actually this one. 07:26.700 --> 07:29.340 Well what are we doing when we click new slot. 07:29.340 --> 07:30.630 We're entering a name. 07:30.630 --> 07:32.790 So we should enter a name. 07:32.910 --> 07:37.050 So this function can also take an f string called. 07:37.720 --> 07:41.830 Entered name and we can pass it in by const reference. 07:41.830 --> 07:42.550 Sure. 07:43.690 --> 07:46.960 I know that was the first question that came to your mind. 07:47.140 --> 07:49.180 And this can be blueprint callable. 07:49.390 --> 07:50.890 So you function. 07:52.320 --> 07:54.780 Blueprint callable, not blueprint pure. 07:54.780 --> 07:57.120 It's going to do too many side effects for that. 07:57.120 --> 08:00.840 So we have this function now we'll hold off on implementing it. 08:00.840 --> 08:04.860 We'll just need to make sure that we're calling it when we click the button. 08:04.860 --> 08:06.870 Right now what else do we have. 08:06.870 --> 08:10.200 We also have the new game button. 08:10.320 --> 08:12.000 Button new game. 08:12.000 --> 08:13.980 Let's implement that one. 08:13.980 --> 08:17.940 And when we click this we need to pass in the index as well. 08:17.940 --> 08:26.550 So we're going to make a new game button pressed void new game button pressed which will take it in 08:26.550 --> 08:27.270 32. 08:27.300 --> 08:28.710 We'll call it slot. 08:29.100 --> 08:31.650 And this will also be blueprint callable. 08:33.630 --> 08:34.140 Now. 08:34.140 --> 08:41.760 In addition, we have a Taycan which is a select slot button, and this one should also pass in the 08:41.760 --> 08:42.900 index as well. 08:43.020 --> 08:46.620 We don't need to pass in any player name or level or anything. 08:46.620 --> 08:49.800 This is all going to be populated from our view model. 08:49.800 --> 08:59.340 So we're going to make a select slot button, pressed void select slot button pressed which will take 08:59.340 --> 09:01.380 an int 32 for the slot. 09:02.130 --> 09:04.860 And this also gets blueprint callable. 09:05.520 --> 09:10.200 So let's go ahead and generate these definitions for both functions. 09:12.130 --> 09:15.550 And we can compile just to call these blueprint callable functions. 09:15.550 --> 09:18.310 But there is one thing we can test. 09:18.310 --> 09:21.730 We can test our new game button pressed. 09:21.760 --> 09:22.330 Why? 09:22.360 --> 09:27.640 Because as soon as we click that plus icon, all we want to do is switch the widget. 09:27.640 --> 09:31.630 We want to switch it to enter name widget. 09:31.780 --> 09:34.540 So we can get our map called load slots. 09:36.730 --> 09:44.470 We can take the index with slots, because this is the index of whatever widget we're clicking on. 09:44.470 --> 09:49.840 And from this map we're getting our view model, the load slot view model, which has that delegate 09:49.840 --> 09:53.170 we can broadcast set widget switcher index. 09:53.410 --> 09:57.640 We can broadcast that passing in the next index. 09:57.640 --> 10:00.610 Now for now we're just going to hard code. 10:00.610 --> 10:06.400 We're going to try a one here because a one is the second widget. 10:06.400 --> 10:10.360 So it should go from the vacant to the next one. 10:10.360 --> 10:12.730 So we can compile and launch. 10:13.000 --> 10:18.520 And we can test out this broadcast of the delegate, which we do need to still bind to. 10:19.750 --> 10:24.400 So back in the editor we can call these blueprint callable functions. 10:24.400 --> 10:29.530 Now we do need to make sure though that we take timing into account. 10:29.530 --> 10:37.450 We need to know that at least our view model is valid before we try to bind callbacks to it. 10:37.450 --> 10:42.040 Well, we know exactly when that happens, because if we go to our widget switcher. 10:42.620 --> 10:51.710 We know right here in the graph exactly when our load screen view model is valid and our load slot view 10:51.710 --> 10:53.840 model is valid, it's valid here. 10:54.380 --> 10:57.470 And we have a blueprint callable function. 10:57.470 --> 11:01.010 We can call on each of these child widgets. 11:01.010 --> 11:06.140 We added that to the C plus plus base class load screen widget. 11:06.320 --> 11:08.750 So if we take each of these widgets. 11:09.940 --> 11:14.200 We can call after setting their load slot widget, we can call. 11:16.280 --> 11:19.100 Blueprint initialize widget on them. 11:20.220 --> 11:26.970 And we know that they will have their own load screen view model set by this time, so we can call that 11:26.970 --> 11:28.080 on all three of them. 11:28.080 --> 11:29.910 Here's load slot taken. 11:31.900 --> 11:33.910 Here's load slot vacant. 11:33.910 --> 11:37.120 And on each of them we'll call blueprint. 11:37.630 --> 11:38.440 Initialize. 11:38.440 --> 11:39.190 Widget. 11:41.010 --> 11:43.890 And that's how we'll know the correct time. 11:46.000 --> 11:47.290 To bind. 11:50.440 --> 11:52.420 To assign our onclicked. 11:53.120 --> 11:54.320 Functions. 11:54.830 --> 12:00.680 So now that we're calling those and each of these three, we'll go into our graph and we'll implement 12:02.000 --> 12:03.650 blueprint initialize widget. 12:03.650 --> 12:08.000 This is kind of like our widget controller set functions we've used before. 12:08.570 --> 12:10.220 I'm going to delete those three nodes. 12:10.220 --> 12:17.570 And here I'm going to get BP load screen view model. 12:22.980 --> 12:25.320 And I'm going to call for this one. 12:25.650 --> 12:33.150 It's going to be the select slot blueprint callable function select slot button pressed. 12:33.600 --> 12:34.890 And when am I going to call it. 12:34.890 --> 12:40.080 I'm going to call it when this buttons on clicked event is fired. 12:40.080 --> 12:42.210 So I'm going to get button select slot. 12:43.470 --> 12:44.700 And it's a wide button. 12:44.700 --> 12:46.410 So we're going to get the button. 12:47.050 --> 12:48.430 Widget from it. 12:49.510 --> 12:52.570 Type on clicked and a sign on clicked. 12:53.360 --> 13:00.170 And when this button is clicked, we're going to call the view model blueprint callable function select 13:00.170 --> 13:01.490 slot button pressed. 13:04.480 --> 13:06.610 So that takes care of this widget. 13:06.610 --> 13:08.530 Let's go to load slot. 13:08.530 --> 13:11.050 And this is the new game button. 13:11.050 --> 13:13.000 So here we're going to do the same thing. 13:13.000 --> 13:16.120 We're going to implement blueprint initialize widget. 13:16.120 --> 13:20.740 We're going to get BP load screen view model. 13:21.370 --> 13:23.110 We're also going to get our button new game. 13:23.110 --> 13:24.520 Now this is not a wide button. 13:24.520 --> 13:25.900 It's just a regular button. 13:25.900 --> 13:29.830 So we can just directly assign on clicked. 13:31.130 --> 13:38.090 And when it's clicked, we're going to take our view model and call that new game button pressed. 13:38.880 --> 13:41.790 Now, these do require some inputs, don't they? 13:41.790 --> 13:43.200 Let's go back to the other one. 13:44.090 --> 13:44.570 Yes. 13:44.570 --> 13:46.310 This one needs a slot, doesn't it? 13:46.340 --> 13:48.620 We can pass in our slot index. 13:49.310 --> 13:51.110 We'll do that here as well. 13:51.470 --> 13:52.790 Pass in the slot index. 13:52.790 --> 13:53.990 You probably noticed that. 13:53.990 --> 13:58.400 And we're headed over to the questions section to tell me. 13:58.400 --> 14:01.310 Now we've taken care of this one. 14:01.960 --> 14:06.880 Now for load slot and this one has this enter name. 14:06.880 --> 14:09.070 We need to enter a name in here. 14:09.430 --> 14:11.890 So this is an editable text right. 14:11.890 --> 14:13.510 Let's give this a valid name. 14:13.510 --> 14:20.800 Editable text underscore enter name and check is variable and we can always get the text from it. 14:21.130 --> 14:25.840 So here we're going to say blueprint initialize widget. 14:25.840 --> 14:29.740 We're going to get BP load screen view model. 14:31.300 --> 14:36.310 And we're going to call the new slot button pressed. 14:39.100 --> 14:44.230 So this is the new slot button pressed that we need to call here. 14:44.230 --> 14:47.350 So we're going to get our button new slot. 14:48.210 --> 14:53.610 It's a wide button, so we're going to get the button from it and call sign on clicked. 14:56.130 --> 15:00.480 We're going to call this function passing in the slot index. 15:01.240 --> 15:04.210 And we need the name that's been entered. 15:04.210 --> 15:06.040 Now we have this editable text. 15:06.040 --> 15:09.910 Enter name and we can call get text from it. 15:10.270 --> 15:13.870 And we want to get text editable text. 15:16.460 --> 15:17.870 And we can hook that in. 15:17.870 --> 15:18.980 And this takes a string. 15:18.980 --> 15:21.170 So we'll just convert it to a string. 15:21.410 --> 15:22.550 And there we go. 15:22.910 --> 15:28.280 Now when we click this the blueprint callable function will receive the slot and the entered name. 15:29.220 --> 15:38.370 Now this is cool, but the only thing we can test is new game button pressed and this broadcast the 15:38.370 --> 15:40.080 set widget switcher index. 15:40.080 --> 15:42.720 But our widget switcher needs to respond to that. 15:42.720 --> 15:44.610 So here's our widget switcher. 15:45.390 --> 15:48.960 It needs to respond, and we can't assign here in a function. 15:48.960 --> 15:53.370 We can't assign a event to a callback here. 15:53.460 --> 15:55.620 We can only do it in the event graph. 15:56.420 --> 16:02.300 But as soon as initialized slot has been called, we can call the blueprint callable function. 16:02.330 --> 16:03.140 Blueprint. 16:03.140 --> 16:04.550 Initialize widget. 16:05.700 --> 16:07.440 Right here on itself. 16:07.440 --> 16:10.260 It can call its own blueprint initialize widget. 16:10.260 --> 16:16.710 And that's going to result in its event blueprint initialize widget being called. 16:16.710 --> 16:20.160 And here it can get its own view model. 16:20.640 --> 16:25.500 We've stored that variable right here for the load slot view model. 16:25.500 --> 16:30.360 The load slot view model is who has the delegate where broadcasting. 16:30.360 --> 16:36.660 Yes, we're doing it in load screen, but we're broadcasting it on the object of a load slot type. 16:36.660 --> 16:43.020 So really this load slot view model shouldn't be a local variable but a member variable. 16:43.770 --> 16:45.210 So here's what I'm going to do. 16:45.210 --> 16:51.810 I'm just going to promote it to a variable and I'll just call it load slot view model. 16:51.960 --> 16:58.470 We know it's the blueprint version, but I'm just going to use this instead of this local variable. 17:01.890 --> 17:03.330 And I'll replace it. 17:07.110 --> 17:12.660 I'll replace the local variable with the member variable. 17:19.020 --> 17:26.160 And then I can delete BP, load slot ViewModel, and then I can rename this one to BP load slot ViewModel. 17:26.160 --> 17:29.220 So now this is not a local variable but a member variable. 17:29.220 --> 17:37.020 And now in our event graph we can access BP load slot ViewModel, and we can assign an event to widget 17:37.020 --> 17:38.370 switcher. 17:38.370 --> 17:41.880 And it's called Assign set widget switcher index. 17:41.880 --> 17:44.430 We can assign an event to this. 17:44.430 --> 17:45.660 And what do we want to do. 17:45.660 --> 17:47.250 We want to switch our widget. 17:47.250 --> 17:49.650 And we have a widget switcher right here. 17:49.650 --> 17:53.160 It's not a variable we can check is variable. 17:53.160 --> 17:55.110 It's called widget switcher 36. 17:55.110 --> 17:57.120 We're going to call it widget switcher route. 17:57.420 --> 18:01.320 And we're going to take that widget switcher route and switch its index. 18:01.320 --> 18:02.550 So here it is. 18:02.550 --> 18:03.960 And how do we switch it. 18:03.960 --> 18:09.600 Well all widget switchers have set active widget index. 18:10.830 --> 18:15.120 The function is what we want and we'll pass in widget switcher index. 18:17.060 --> 18:22.040 And then it'll switch its widget based on that index passed in so we can save all. 18:22.040 --> 18:27.500 Now we can go to our load menu and press play. 18:27.800 --> 18:31.460 And if we click on one of these then we switch the widget. 18:33.040 --> 18:35.680 So that delegate broadcast is working. 18:36.270 --> 18:39.690 And now these buttons are calling blueprint callable functions. 18:39.690 --> 18:40.650 But they're empty. 18:40.650 --> 18:43.560 All of them are empty except for this one. 18:44.640 --> 18:46.230 That we see is working. 18:46.710 --> 18:50.580 So with that, we now have some more things set up. 18:50.580 --> 18:56.910 But really, the only way that we can progress with this is by starting to save things. 18:57.090 --> 19:03.900 Because the only way we can test out the rest of our mechanics and continue developing the rest of our 19:03.900 --> 19:11.820 mechanics here is if we can enter a name such as Stephen here and click New Slot and actually save that 19:11.820 --> 19:12.600 info. 19:12.870 --> 19:19.290 And that way if we close down and open back up, next time we open this, we should see a different 19:19.290 --> 19:19.650 widget. 19:19.650 --> 19:27.510 Here we should see the taken widget that shows the name that's been saved, and perhaps some default 19:27.510 --> 19:29.430 values or saved values. 19:29.430 --> 19:32.940 So that means we need to start saving things to disk. 19:32.940 --> 19:36.150 And that's what we're going to get started on in the next video. 19:37.000 --> 19:37.930 I'll see you soon.