WEBVTT 00:07.110 --> 00:08.160 Welcome back. 00:08.160 --> 00:16.440 Now if we go to our load menu and we click plus for new game, we have this nice enter name widget. 00:16.440 --> 00:19.140 And we can enter in a name and click New Slot. 00:19.140 --> 00:23.880 And we switch to the next slot which is great, but we're not showing that player name. 00:24.500 --> 00:30.560 In this video, we're going to bind that player name to a property on our view model. 00:30.830 --> 00:38.720 And to do that we have to go back to C plus Plus and go into our load slot view model here and change 00:38.720 --> 00:41.450 player name in a very specific way. 00:41.960 --> 00:44.660 We have to make this a field notify. 00:44.690 --> 00:45.260 That's right. 00:45.290 --> 00:52.010 A field notify is how we can make this something that can be linked with the widget using this view 00:52.010 --> 00:52.640 model. 00:52.970 --> 00:56.900 So this is where the magic of view models is really going to come into play. 00:56.930 --> 01:04.730 Now I'm going to have my player name and the rest of my field notifies beneath the load slot name and 01:04.730 --> 01:05.780 slot index. 01:06.050 --> 01:12.290 And I'll just go ahead and put a comment here that says field notifies. 01:13.820 --> 01:18.110 And here's how I can make player name a field notify. 01:18.470 --> 01:20.540 First of all, I'm going to make it edit anywhere. 01:21.350 --> 01:24.830 I'm going to make it blueprint read write I'm going to give it full access here. 01:26.170 --> 01:32.440 And then we're going to set this variable to be a field notify with field notify. 01:32.470 --> 01:38.560 Now if we give it field notify we have to specify whether we want to give it a setter and a getter. 01:39.130 --> 01:45.820 So if we give it a setter and a getter then we must now define setter and getter for this. 01:45.820 --> 01:48.790 And they have to be specific setters and getters. 01:48.790 --> 01:52.210 We have to have void set player name. 01:52.210 --> 01:55.600 It has to be set with that variable name. 01:55.600 --> 02:00.730 So set player name and it has to take in an F string called in player name. 02:00.730 --> 02:06.640 The input parameter name is an important, but the function name is and we'll see in just a second why 02:06.640 --> 02:07.750 this is important. 02:07.750 --> 02:10.390 And we also need a getter f string. 02:11.110 --> 02:17.620 Get player name const should be const return player name. 02:18.420 --> 02:20.190 Now the setter. 02:20.190 --> 02:22.680 I did not define right here on the same line. 02:22.680 --> 02:28.320 And that's because I'm going to do something a little more involved than just setting it. 02:28.320 --> 02:29.580 Not much more involved. 02:29.580 --> 02:31.380 We're going to use a macro. 02:31.920 --> 02:41.400 Now this macro is something built into the mVVM system in unreal and it's Yui mVVM. 02:41.760 --> 02:45.660 Take note of the underscores set property value. 02:45.930 --> 02:47.310 Now we give it the name. 02:47.310 --> 02:48.270 Player name. 02:49.150 --> 02:51.520 And we give it the value in player name. 02:52.870 --> 02:56.860 Now we do get red squiggles, but if we compile. 02:57.940 --> 02:59.800 We compile successfully. 02:59.830 --> 03:02.500 Now, that's not typically something you see with Ryder. 03:02.500 --> 03:03.940 You see it with Ves all the time. 03:03.940 --> 03:07.060 Visual studio gets those false red squiggles all the time. 03:07.060 --> 03:09.730 But Ryder, it's a little more rare. 03:09.730 --> 03:15.850 But again, this is in beta at the time, so it's possible by the time you're watching this it might 03:15.850 --> 03:23.020 be fixed, but this macro is how we can make a broadcast to our widgets. 03:23.350 --> 03:24.760 And if we go to it. 03:26.760 --> 03:28.230 We'll see what it does. 03:28.590 --> 03:30.990 It's calling set property value. 03:31.470 --> 03:37.980 And set property value is making a broadcast broadcast field value change. 03:37.980 --> 03:38.880 You get the idea. 03:38.880 --> 03:39.990 These are delegates. 03:39.990 --> 03:42.180 This is just a system in place. 03:42.180 --> 03:47.280 Making things supposedly easier I don't know, you be the judge. 03:47.280 --> 03:52.050 Is this easier than just creating a widget controller like we've done earlier in the course? 03:52.050 --> 03:55.800 I'm not so sure, but hey, it's a system for you, right? 03:55.950 --> 04:01.200 And this is going to broadcast to widgets that have bound to this variable. 04:01.200 --> 04:07.590 So that's the next step is to bind to the player name so that whenever we make this broadcast with this 04:07.590 --> 04:11.820 macro, then we'll see that change reflected in the widget. 04:11.970 --> 04:14.850 So our next step is to make that binding link. 04:14.970 --> 04:20.610 So opening up our well we have our load screen game mode I don't really need that open I'm going to 04:20.610 --> 04:21.360 close that. 04:21.360 --> 04:29.460 And I'm going to go to blueprints UI load menu and find my load screen taken. 04:30.070 --> 04:33.700 Because this player name right here is what I want to bind. 04:33.730 --> 04:37.540 I'm going to check is variable first and I'm going to set it. 04:37.540 --> 04:39.820 And it's called text player name. 04:39.820 --> 04:43.240 And I'm going to bind this. 04:43.240 --> 04:44.410 How do we bind it. 04:44.410 --> 04:45.790 Well there's a couple of ways. 04:45.790 --> 04:49.120 One way is to find it right here. 04:49.120 --> 04:53.140 Find what we want to bind and choose bind right here. 04:53.140 --> 04:57.340 And we can bind to our load slot view model and choose. 04:57.340 --> 05:02.350 Now this way is still a little bit buggy as again this is in the beta. 05:02.350 --> 05:04.240 So you got to bear with it. 05:04.240 --> 05:06.010 But this way is a little bit buggy. 05:06.010 --> 05:07.660 But it works consistently. 05:07.660 --> 05:12.520 If we go down here to view bindings and click Plus Add widget. 05:12.520 --> 05:14.200 And here's what we need to do. 05:14.930 --> 05:21.950 We need to choose first of all from the dropdown here which widget we want to bind. 05:21.950 --> 05:25.700 We want to bind our text player name right. 05:25.700 --> 05:28.640 So let's find it text player name. 05:28.640 --> 05:29.630 Here it is. 05:29.900 --> 05:37.520 We select that and right here we take that text player name widget and choose which of its properties 05:37.520 --> 05:38.540 we want to bind. 05:38.540 --> 05:40.580 We want to bind its text right. 05:40.790 --> 05:42.620 We need to select that text. 05:42.620 --> 05:43.940 And here it is. 05:43.940 --> 05:46.220 It's pink because it's an F text. 05:46.520 --> 05:49.070 We select that okay. 05:49.070 --> 05:55.550 Now this arrow in the middle is what determines which direction information can flow. 05:55.820 --> 06:03.710 Do we want it to flow to our widget into the text value from somewhere else, say a ViewModel. 06:03.710 --> 06:04.370 Well, yes. 06:04.370 --> 06:07.040 Then we want that arrow pointing to the left. 06:07.040 --> 06:13.250 But if we want to change it here somehow at runtime and when it changes, make that change apparent 06:13.250 --> 06:16.850 to whatever's here on the right, say a ViewModel. 06:16.850 --> 06:22.130 Then we would want to change this to go the other way, one way to ViewModel. 06:22.280 --> 06:24.350 And then of course it can be two way. 06:24.590 --> 06:27.980 It could be set up so that information can flow back and forth. 06:27.980 --> 06:33.770 But for this we just want the ViewModel to send the information to the text. 06:33.920 --> 06:35.720 So we're going to have it pointed to the left. 06:35.720 --> 06:37.490 One way to widget. 06:37.490 --> 06:41.330 And we're going to select from the dropdown our ViewModel. 06:41.690 --> 06:44.900 And the ViewModel is going to be our load slot ViewModel. 06:44.900 --> 06:46.400 The BP version. 06:46.580 --> 06:54.260 Now here's the thing though on our ViewModel we only have an F string, and this is an F text. 06:54.260 --> 07:01.490 We can't bind an f string to an F text, but what we can do is click the dropdown for these conversion 07:01.490 --> 07:02.480 functions. 07:03.430 --> 07:05.290 In fact, we don't have to click the dropdown. 07:05.290 --> 07:07.750 We can just click on conversion functions. 07:07.750 --> 07:11.800 And we want to convert from a string to a text. 07:12.010 --> 07:15.880 So we use two text in parentheses string. 07:16.180 --> 07:17.440 Select that. 07:17.440 --> 07:23.860 And now that we're using a conversion function the string that we can give this can come from our view 07:23.860 --> 07:27.850 model BP load slot view model player name. 07:27.850 --> 07:29.080 We can select that. 07:29.080 --> 07:36.550 And now we've successfully bound the player name on the view model through a conversion function to 07:36.550 --> 07:39.700 the text in our player name widget. 07:39.700 --> 07:42.580 It's kind of a rabbit hole right? 07:42.580 --> 07:45.010 But that's what this binding means. 07:45.010 --> 07:48.970 And you can also uncheck it to turn off that binding. 07:49.390 --> 07:54.610 But what this means now, because the information flows one way to the widget, it takes the player 07:54.610 --> 08:02.620 name as an F string from the load slot view model, converts it to text from string and sets the text 08:02.620 --> 08:05.650 on the player name text block. 08:06.230 --> 08:07.940 Okay, I think you get the point. 08:07.940 --> 08:15.350 So now that we've done that, and also because we're broadcasting a value whenever we call set player 08:15.350 --> 08:20.810 name, when we set the player name, we should see that change reflected in the widget. 08:20.810 --> 08:22.370 We just have to set the player name. 08:22.370 --> 08:23.510 We have to call this. 08:23.510 --> 08:25.190 And when are we going to call it. 08:25.190 --> 08:30.110 Well we can go to our load screen view model whenever we click the new slot button. 08:30.110 --> 08:38.690 As we save the slot data and we call initialize slot, we can call that function on the load slot view 08:38.690 --> 08:40.610 model called set player name. 08:40.730 --> 08:45.170 And that's going to broadcast this to that bound variable. 08:45.560 --> 08:49.520 So as soon as we know this player name it's that entered name. 08:49.520 --> 08:54.530 We're going to take that load slot with load slots of slot. 08:55.310 --> 08:58.310 And we're going to call set player name. 08:58.310 --> 09:02.690 Instead of setting the player name variable directly we have to call the setter. 09:02.690 --> 09:04.520 So we make that broadcast. 09:06.470 --> 09:07.460 Like this. 09:07.460 --> 09:10.400 So now we no longer need to set the player name directly. 09:10.880 --> 09:14.870 We're going to call that setter that makes the broadcast. 09:14.870 --> 09:23.030 So now that we're doing that and we have our binding here in the blueprint, we can compile and launch. 09:23.030 --> 09:25.100 So we're going to save and close. 09:25.100 --> 09:32.450 And now when we click the new slot button not only are we saving to disk, we're also setting the load 09:32.450 --> 09:36.080 slot that our load screen view model has. 09:36.080 --> 09:44.240 We're calling set player name on it, which is going to make a broadcast to our widget which has bound 09:44.240 --> 09:45.170 of variable to it. 09:45.170 --> 09:46.340 Let's see how this works. 09:47.670 --> 09:48.300 Okay. 09:48.300 --> 09:49.080 So. 09:49.910 --> 09:51.320 Here's our load slot. 09:51.320 --> 09:52.400 Here's our player name. 09:52.400 --> 09:58.910 We know that we've bound the text on player name to the player name, and we're making a broadcast when 09:58.910 --> 09:59.630 we click. 10:00.990 --> 10:01.860 A button. 10:01.860 --> 10:03.510 Let's click that button. 10:03.510 --> 10:04.440 Not in this level. 10:04.440 --> 10:08.310 We have to go to maps Load menu and open this. 10:08.310 --> 10:11.130 So we can click on any one of these and enter a name. 10:11.130 --> 10:14.130 I'm going to enter Stephen and click New Slot. 10:14.740 --> 10:15.790 And look at that. 10:15.790 --> 10:16.810 It says, Stephen. 10:16.810 --> 10:20.620 Because of that binding, the binding magic is working. 10:20.920 --> 10:24.520 Okay, so this has nothing to do with saving to disk. 10:24.520 --> 10:32.650 This just has to do with the fact that we called that macro to broadcast over here in our mVVM load 10:32.650 --> 10:32.920 slot. 10:32.950 --> 10:36.100 We called you mVVM Set Property value. 10:36.130 --> 10:43.060 This was called in response to our load screen view model calling set player name there. 10:43.330 --> 10:46.690 So this happened before we even saved data to disk. 10:46.690 --> 10:50.230 So we could have tested that before even creating a save game object. 10:50.230 --> 10:53.800 That's okay though, because we're also saving to disk, which is good. 10:54.070 --> 10:59.560 And whenever we save to disk, we need our slots to know we need them to have a status. 10:59.560 --> 11:03.670 They need to know whether or not they've got valid data. 11:03.670 --> 11:09.250 So at the beginning, when we first go to the level, we're showing the correct thing in the widget. 11:09.250 --> 11:13.930 So we need a status and we're going to implement that in the next video. 11:13.930 --> 11:15.070 I'll see you soon.