WEBVTT 00:06.810 --> 00:07.950 Welcome back. 00:07.980 --> 00:13.510 Now we're adding to some values and we have placeholder functions for others. 00:13.530 --> 00:15.780 We actually are adding to the player level. 00:15.780 --> 00:19.080 We're just not adding to attribute points and spell points. 00:19.110 --> 00:24.060 We can see that in our character where we implemented these interface functions. 00:24.090 --> 00:29.850 Add to player level actually calls, add to level on the player state attribute points and spell points 00:29.850 --> 00:30.960 have to do's. 00:30.990 --> 00:37.890 Now in the player state, since we have this level variable and it's replicated with a rep notify. 00:37.920 --> 00:44.370 We know that when we set this on the server it will be replicated and if we take a look at the CPP file, 00:44.370 --> 00:50.790 when we add to the level we're broadcasting a delegate, we're broadcasting the level with on level 00:50.790 --> 00:56.430 change delegate and in the rep notify we're broadcasting it there as well. 00:56.430 --> 01:01.410 And this delegate is designed for our widget controller to respond to it. 01:01.410 --> 01:08.170 So if we go to UI, widget controller and overlay widget controller, I'm going to go in the private 01:08.170 --> 01:08.530 folder. 01:08.530 --> 01:16.410 Actually we can see where we're binding to our delegates and so far we're only binding to on exp change. 01:16.420 --> 01:18.880 We're not binding to on level changed yet. 01:18.880 --> 01:22.030 So that's something that we'll have to take care of. 01:22.060 --> 01:25.450 Now what do we want to do when our level changes? 01:25.450 --> 01:29.320 Well, I'd simply like to pass that on up to a widget. 01:29.350 --> 01:34.720 Now, we haven't created that widget yet, but we'd like to pass that on up by broadcasting a value. 01:34.750 --> 01:39.630 Now, overlay Widget controller has a number of delegates for broadcasting things. 01:39.640 --> 01:42.370 One is for when an attribute changes. 01:42.370 --> 01:48.790 We're reusing that for our exp bar we have on exp percent change delegate. 01:48.820 --> 01:52.690 Now I'd like a delegate to broadcast when our level changes as well. 01:52.690 --> 01:59.120 In fact, we'd like a delegate to broadcast when any integer value changes. 01:59.140 --> 02:04.880 That's our level, our attribute points, our spell points and so on. 02:04.900 --> 02:11.490 Now we could just keep reusing on attribute change signature, but really these are not attributes. 02:11.490 --> 02:14.400 Even our exp percent is not an attribute. 02:14.610 --> 02:20.970 Now I'm okay with just reusing this delegate for on exp percent change because the percent for the exp 02:21.000 --> 02:22.080 is a float. 02:22.380 --> 02:27.510 It's a ratio, but for attribute points, spell points and level. 02:27.600 --> 02:33.510 I'd like to broadcast an integer and I'd like a delegate designed to broadcast that. 02:33.660 --> 02:40.830 So I'm going to declare a dynamic multicast delegate one param, but this one is going to be for player 02:40.830 --> 02:43.200 stats rather than attributes. 02:43.200 --> 02:52.260 So I'm going to call this F on player stat changed signature and this is going to use an int 32 instead 02:52.260 --> 02:57.090 of a float and we'll make an on player stat changed delegate. 02:57.090 --> 03:04.830 So we'll use on player stat change signature and this one will be for player level so we'll say on player 03:04.830 --> 03:07.290 level changed delegate. 03:08.080 --> 03:16.480 We can give it blueprint assignable category gas and instead of XP, we'll say level and we'll broadcast 03:16.480 --> 03:19.990 this in response to the player level changing. 03:19.990 --> 03:27.190 So in bind callbacks to dependencies, we can bind and really I can just create a lambda for this so 03:27.190 --> 03:35.230 I can take my aura player state access on level change delegate and call add lambda. 03:36.520 --> 03:44.710 So for add lambda, I'm going to give myself some room here and as I always do when I make a lambda, 03:44.740 --> 03:51.520 I make the square brackets, the parentheses and the function body and then give the function body its 03:51.520 --> 03:52.330 own room. 03:52.480 --> 03:59.020 And all I want to do is broadcast my new on player level changed delegate. 03:59.020 --> 04:01.090 So I'm going to broadcast that here. 04:02.610 --> 04:08.910 Now we need to broadcast a value right and on level change, delegate on the player state. 04:08.940 --> 04:15.900 If we look at that, it's an on player state changed and if we look at that delegate it broadcasts it 04:15.900 --> 04:16.920 in 32. 04:17.130 --> 04:21.660 So to bind to this we need a callback that takes an int 32. 04:21.810 --> 04:27.330 So our lambda should take an int 32 called new level. 04:27.750 --> 04:34.740 And of course we're using on player level change delegate, which means we must capture this and we're 04:34.740 --> 04:36.600 going to broadcast new level. 04:37.440 --> 04:41.610 And now we can receive that in any of our widgets. 04:41.700 --> 04:47.610 So the last step is to create a widget that can receive this delegate broadcast. 04:47.610 --> 04:49.500 And we're going to do that now. 04:49.560 --> 04:52.410 I'm going to go ahead and run in debug mode. 04:53.590 --> 04:56.770 So we need a widget to show our level. 04:57.130 --> 05:01.090 Now if we go into blueprints ui spell globes. 05:01.120 --> 05:03.550 The spell globe would be kind of nice. 05:03.580 --> 05:07.920 It'd be great if we had something like this that just shows our player level. 05:07.930 --> 05:10.900 But the spell globe is kind of specific to spells. 05:10.900 --> 05:17.380 It receives ability info with this delegate, so it kind of has all this other stuff that we don't need. 05:17.380 --> 05:19.410 It waits for cooldown, changes. 05:19.420 --> 05:20.760 It's kind of overkill. 05:20.770 --> 05:24.280 But other than that, it's almost exactly what we want. 05:24.490 --> 05:27.370 So I'm going to go ahead and copy this now. 05:27.370 --> 05:34.600 I could go and make a parent widget blueprint that contains, say, the ring and the glass and then 05:34.600 --> 05:35.830 repair and spell globe. 05:35.830 --> 05:37.560 I'm not going to bother with any of that. 05:37.570 --> 05:39.940 This is just going to be a separate blueprint. 05:39.940 --> 05:48.130 So I'm going to duplicate it and call this one WB underscore value globe because I'd like this to just 05:48.130 --> 05:49.270 have a value. 05:49.270 --> 05:56.780 So I'm going to close spell globe and open value globe and this is going to be the same only it's going 05:56.780 --> 05:58.520 to have a lot less stuff in it. 05:59.000 --> 06:01.280 It's going to use the overlay widget controller. 06:01.280 --> 06:01.640 Yes. 06:01.640 --> 06:03.740 So we do want that part. 06:03.740 --> 06:08.240 But instead of binding to the ability info delegate, we're not going to do that at all. 06:08.240 --> 06:10.280 So I'm going to remove that whole part there. 06:11.460 --> 06:14.140 Instead, we're going to bind to a different delegate. 06:14.160 --> 06:20.340 We're going to bind to on player level change delegate, and we'll do that soon. 06:20.340 --> 06:25.920 But first, let's clean up this widget and take everything out that we don't need. 06:26.530 --> 06:31.960 Now, for one, we don't need a spell icon, so I'm going to delete that. 06:32.110 --> 06:33.640 I do want the glass. 06:33.640 --> 06:37.990 I do want the ring and I do want the text for the cooldown. 06:38.110 --> 06:44.450 In fact, I want my text to have its render opacity set to one so I can see it. 06:44.470 --> 06:51.010 So I'm going to set that to one and I'm going to go into the graph and make sure we're not hiding that 06:51.010 --> 06:52.180 cooldown text. 06:52.210 --> 06:54.700 I'm going to delete the call to that. 06:54.730 --> 07:00.820 We're also calling Clear Globe, which is setting the image spell icon a variable that no longer exists 07:01.030 --> 07:04.430 and setting the image background to the transparent brush. 07:04.450 --> 07:07.150 We don't even need to call Clear Globe, do we? 07:07.180 --> 07:13.930 We also don't need to update the spell icon brush because we don't have a spell icon anymore, so I'm 07:13.930 --> 07:14.740 going to delete that. 07:14.740 --> 07:17.170 In fact, I'll delete that whole function. 07:17.200 --> 07:19.390 Update spell icon brush. 07:20.340 --> 07:26.220 We can keep update globe padding, although I should check to make sure we're not using something that 07:26.220 --> 07:27.630 doesn't exist anymore. 07:27.660 --> 07:29.280 That's that spell icon. 07:29.280 --> 07:36.360 We can remove that, but we're setting the glass and the image background padding so we can keep that. 07:37.830 --> 07:39.510 We're updating the ring brush. 07:39.510 --> 07:42.540 That looks good and we're updating the box size. 07:42.540 --> 07:43.770 We want to keep that as well. 07:43.770 --> 07:45.570 So we're keeping everything else. 07:46.720 --> 07:48.340 Now over here in our functions. 07:48.340 --> 07:50.320 Let's see if there's anything we don't need. 07:51.270 --> 07:59.490 We do need update box size ring brush glow padding set background tint could be useful as we may choose 07:59.490 --> 08:03.510 to give this a background and set it to a dark tint. 08:03.600 --> 08:09.720 Clear Globe is just setting the background to a clear, transparent brush. 08:10.690 --> 08:12.940 I don't really see a need to delete that. 08:12.970 --> 08:17.140 We have set icon in background which sets the brush for the icon. 08:17.170 --> 08:22.280 We really don't care about that and we can set the image background if we want to. 08:22.300 --> 08:25.990 So I'm going to remove these for the image spell icon. 08:28.840 --> 08:30.730 And we'll just call set brush here. 08:30.730 --> 08:32.410 We don't need icon brush. 08:32.440 --> 08:33.370 No worries. 08:33.370 --> 08:34.540 We won't use that. 08:35.090 --> 08:37.340 We don't need receive ability info. 08:37.370 --> 08:39.890 That's a function that we're not going to use. 08:40.070 --> 08:43.850 And it also uses an input tag and a cooldown tag. 08:44.000 --> 08:45.440 Things we don't need. 08:46.060 --> 08:48.670 So I'm going to delete input tag. 08:49.280 --> 08:50.920 Yes, I know it's in use. 08:50.930 --> 08:52.700 I do really want to delete it. 08:52.700 --> 08:53.360 I'm going to check. 08:53.360 --> 08:54.650 Don't show this again and click. 08:54.650 --> 09:02.690 Yes, I'm going to delete cooldown, tag time remaining cooldown int timer frequency cooldown, timer 09:02.690 --> 09:08.510 handle wait cooldown change and I can delete receive ability info. 09:08.540 --> 09:15.200 We can just delete that whole function and I'm going to go back and rename the text from text cooldown 09:15.200 --> 09:16.820 to text value. 09:17.210 --> 09:17.750 All right. 09:17.750 --> 09:26.210 So we're gutting out this whole thing almost and we can set the default value for this text to one and 09:26.210 --> 09:27.950 see what it looks like with that value. 09:27.950 --> 09:30.530 And in fact, I'm going to make its size bigger. 09:31.520 --> 09:33.260 We'll try 36. 09:33.290 --> 09:37.100 We'll see a two digit value in here, too, and make sure that's not too big. 09:37.100 --> 09:38.060 That looks good. 09:38.420 --> 09:43.880 And I'd like my background to have an image and we're updating our background. 09:43.910 --> 09:49.700 We're actually not anymore, but we have a function called set icon and background. 09:49.700 --> 09:53.120 I'm actually going to change this to simply. 09:53.850 --> 09:55.200 Update background. 09:57.830 --> 10:00.920 And remove the icon brush as an input. 10:01.040 --> 10:07.100 And now we just have something that sets the background brush, and we'll call that an event construct 10:07.100 --> 10:07.850 as well. 10:08.000 --> 10:10.490 So we'll have update background here. 10:12.360 --> 10:19.440 And this actually should just use a variable in our globe properties for the background. 10:20.530 --> 10:27.490 We don't need spell icon brush anymore, but we can rename this spell icon brush variable to background 10:27.490 --> 10:28.210 brush. 10:30.810 --> 10:31.890 And we can use that. 10:31.890 --> 10:35.010 But no need for this to actually be an input parameter. 10:35.220 --> 10:39.690 We can just use background brush directly in this. 10:41.020 --> 10:43.750 And remove that input parameter as well. 10:45.180 --> 10:45.690 Okay. 10:45.690 --> 10:47.730 And now we're updating the background. 10:47.730 --> 10:53.340 So if we change the background brush, then we should see it in our designer tab. 10:54.560 --> 10:56.420 Now if I type globe. 10:58.450 --> 11:01.570 And I select em Flowing globe, for example. 11:01.570 --> 11:02.470 We'll see that here. 11:02.470 --> 11:09.220 But I'd rather use something a little bit less colorful, like, am I locked? 11:09.220 --> 11:12.010 BG I'm going to set that. 11:12.040 --> 11:17.500 So for background brush, I'm going to select it and set it to my locked BG. 11:18.860 --> 11:20.660 And now we see what it looks like. 11:20.870 --> 11:23.810 But I'd also like this to be a little bit darker, too. 11:23.840 --> 11:29.960 So I'm going to set the tent and that's why I kept that function set background tint. 11:29.960 --> 11:37.340 I'm going to set that here in event pre construct and just set it to 0.1 and see what that looks like 11:37.520 --> 11:38.750 compiling. 11:39.270 --> 11:40.710 That looks pretty cool. 11:40.740 --> 11:44.550 Alternatively, I may want it a little bit darker. 11:45.030 --> 11:46.080 0.01. 11:46.080 --> 11:47.580 Let's see what that looks like. 11:49.130 --> 11:50.420 Almost black. 11:50.890 --> 11:57.700 So we can play with the tent here, but alternatively, we can also change this. 11:57.730 --> 11:59.200 Am I locked BG now? 11:59.230 --> 11:59.830 Am I locked? 11:59.860 --> 12:00.220 BG. 12:00.250 --> 12:02.470 Is made for a specific purpose. 12:02.500 --> 12:06.790 It's going to be used for locked spells in our spell menu once we create that. 12:06.790 --> 12:09.010 So I can just duplicate this. 12:09.980 --> 12:13.430 And call this one my level. 12:13.460 --> 12:18.170 BG And we'll use this one instead if we want to change it. 12:18.170 --> 12:20.240 So changing this to my level. 12:20.270 --> 12:22.550 BG Now I can change level. 12:22.580 --> 12:25.610 BG without changing the other one locked. 12:25.610 --> 12:28.970 BG So I'm not going to set the background tint. 12:28.970 --> 12:32.930 Instead, I'm going to play around with the material instance. 12:33.500 --> 12:37.970 And I need to make sure my background brush is set to the correct one. 12:37.970 --> 12:41.090 Not in my locked BG, but am I level BG? 12:41.840 --> 12:46.340 So compiling, making sure the image background has my level bg. 12:47.000 --> 12:49.160 Now I can mess with my level. 12:49.190 --> 12:49.580 BG. 12:49.880 --> 12:52.100 Now we have a cloud darkness. 12:52.130 --> 12:54.500 We can adjust that. 12:54.530 --> 12:58.130 If we make it lower, then the clouds get brighter. 12:58.370 --> 13:04.310 If we make it higher, then we get sort of a little bit more washed out. 13:04.400 --> 13:07.850 We also have a negative color that we can darken a bit. 13:09.060 --> 13:14.610 And of course our color is white, but we can make the color itself darker so we can play with these 13:14.610 --> 13:19.590 parameters a bit until we have something that's looking a little bit darker. 13:19.620 --> 13:21.990 We also have a perimeter shadow. 13:22.020 --> 13:24.210 We can make that darker as well. 13:25.000 --> 13:32.290 And then our speed, the speed at which these noise textures are panning, we can lower that to make 13:32.290 --> 13:35.260 it look a little bit less turbulent. 13:35.990 --> 13:43.880 And when we play with the darkness and make it contrasted more, sometimes it looks better with a lower 13:43.880 --> 13:44.600 speed. 13:45.320 --> 13:47.870 So negative color is pretty dark. 13:47.870 --> 13:53.720 Color itself is going to be pretty dark and my perimeter shadow is pretty high. 13:53.930 --> 13:57.830 So I'm going to save that and see what it looks like here. 13:58.040 --> 14:00.140 And I think that's looking pretty good. 14:00.410 --> 14:03.310 So tweak that to your heart's content. 14:03.320 --> 14:08.180 I might actually raise the color and up that perimeter shadow even more. 14:09.480 --> 14:11.400 I think I like how this looks. 14:11.640 --> 14:15.750 And you don't have to make that color completely desaturated either. 14:15.750 --> 14:20.790 You know, it could be red, although red kind of looks like our health globe. 14:20.790 --> 14:22.740 It could be purple. 14:22.980 --> 14:25.350 It could be a color that you haven't used. 14:25.680 --> 14:27.090 Green kind of looks good. 14:27.090 --> 14:34.020 Maybe we'll experiment as we go, but now we have something that can represent our level. 14:34.200 --> 14:37.140 I'm going to make this a darker green, actually. 14:37.140 --> 14:38.580 But anyways, enough tweaking. 14:38.580 --> 14:39.120 For now. 14:39.120 --> 14:41.520 We have something that can represent our level. 14:41.520 --> 14:42.840 It looks cool. 14:43.020 --> 14:48.540 We need it to respond to the delegate we created and our broadcasting. 14:48.540 --> 14:51.240 It's called on player level change Delegate. 14:51.270 --> 14:58.350 We're going to subscribe to that Delegate So let's get our BP overlay widget controller. 14:59.090 --> 15:02.810 Type in on player level changed delegate. 15:02.990 --> 15:10.250 Hook that up to our sequence and take our new value and we're going to set our text value here. 15:10.250 --> 15:14.120 So taking text value calling. 15:14.120 --> 15:15.110 Set text. 15:16.390 --> 15:17.620 That function. 15:18.350 --> 15:21.860 And for our level, we can take new value, plug it in. 15:21.890 --> 15:24.890 We're converting from text to integer. 15:25.630 --> 15:27.700 Compile that and save. 15:27.700 --> 15:29.260 And we have a widget. 15:29.290 --> 15:37.660 Now we just need to add this to our overlay so we can go to content blueprints, UI overlay, WP overlay, 15:37.660 --> 15:40.050 and we can drag one of these in somewhere. 15:40.060 --> 15:44.320 So I'm going to search for WP Value Globe. 15:44.350 --> 15:45.880 We'll drag one in. 15:46.880 --> 15:53.420 We're going to rename this to Value Globe Underscore level. 15:54.870 --> 15:57.030 And we'll just have it up here for now. 15:57.510 --> 16:03.240 And we need to set its widget controller, so we'll do that right after setting our other widget controllers 16:03.240 --> 16:03.930 here. 16:04.110 --> 16:06.360 So let's get our value globe. 16:06.480 --> 16:08.550 I did not check his variable. 16:08.550 --> 16:11.640 So now after doing that, we can bring it in. 16:14.720 --> 16:16.700 We can call set widget controller. 16:18.420 --> 16:20.760 And we can pass in our widget controller. 16:22.040 --> 16:24.530 So that it's widget controller will be set. 16:26.820 --> 16:30.160 And compiling and saving will save all. 16:30.180 --> 16:31.260 Press play. 16:31.260 --> 16:33.000 And we see our level there. 16:33.180 --> 16:39.210 Now we need to test out when our level changes, of course, because right now we're just seeing its 16:39.210 --> 16:48.990 default value and we could easily make ourselves level up quite quickly by changing the amount of experience 16:48.990 --> 16:51.690 that one of our level one warriors gives us. 16:51.690 --> 17:02.280 So we can go into ability system data and go to Exp, reward Warrior and choose level one that key and 17:02.280 --> 17:05.310 change this to a higher value like 150. 17:05.340 --> 17:08.190 Now we only have to kill two of these things to level up. 17:09.090 --> 17:11.730 So let's see what happens if we do. 17:12.330 --> 17:14.790 Pressing play will kill one of them. 17:15.730 --> 17:18.670 And we have half of our XP bar filled up. 17:18.670 --> 17:20.140 Let's kill one more. 17:22.400 --> 17:23.480 And look at that. 17:23.480 --> 17:25.120 Our level went up to two. 17:25.130 --> 17:27.710 Now that's the only thing that happened. 17:27.710 --> 17:32.810 Usually a lot more dramatic effects happen and we'll make all those happen. 17:32.810 --> 17:38.840 But at least we know that our level is updating in the HUD and that looks great. 17:38.870 --> 17:44.660 Now, usually we see a little something more than just a value like a number there. 17:44.690 --> 17:51.710 There's usually something else in the overlay, like the picture, like a portrait of our character, 17:51.710 --> 17:52.890 something like that. 17:52.910 --> 17:57.320 So before wrapping up the video, I'd like to create another widget. 17:57.350 --> 17:58.340 Not functional. 17:58.340 --> 18:05.870 Doesn't listen for any broadcasts, just something that's a nice framed picture of aura like a screenshot. 18:05.960 --> 18:11.630 Now if we click on all and filter by texture, we'll see. 18:11.660 --> 18:14.300 Right up here at the top we have Aura render. 18:14.840 --> 18:18.980 I can double click on it and here we have a nice portrait of aura. 18:19.280 --> 18:22.320 I'd like to use this and perhaps even frame it. 18:22.320 --> 18:28.500 Maybe even get a globe with a ring and a glass with her picture behind it. 18:28.500 --> 18:30.150 I think that would look really nice. 18:30.150 --> 18:37.650 So I'm going to go ahead and create another widget using Aura Render so I can remove that texture filter 18:37.650 --> 18:40.040 and go to Blueprints UI. 18:40.050 --> 18:46.490 And I'm just going to go into progress bar and get my Globe progress bar and steal that. 18:46.500 --> 18:51.990 I'm going to duplicate it and call this one BP picture frame. 18:52.830 --> 18:55.050 That's all it's going to be is a picture frame. 18:55.050 --> 18:57.450 It's actually not going to be a progress bar. 18:57.450 --> 19:03.270 So I can drag it out of the progress bar and I'll just put it straight into overlay the overlay folder 19:03.270 --> 19:08.580 move here and here in overlay, I'll just drag it into sub widget and move their. 19:09.660 --> 19:12.750 So we can start gutting out what we don't need here. 19:13.200 --> 19:19.620 I'm going to go into the graph and first of all, we don't need globe percent set. 19:19.950 --> 19:21.330 I'm going to delete that. 19:21.360 --> 19:22.690 We don't need event tech. 19:22.710 --> 19:25.110 We don't need to interpolate anything. 19:25.500 --> 19:28.400 We don't need to update the ghost globe brush. 19:28.410 --> 19:30.300 We'll keep the glass padding. 19:30.330 --> 19:32.190 We'll keep the glass brush. 19:32.190 --> 19:36.510 We don't need to update the globe padding or the globe brush. 19:36.950 --> 19:40.370 We'll keep the background brush and the box size. 19:40.400 --> 19:43.070 Everything else is unnecessary. 19:43.100 --> 19:46.770 So over here in the functions, we'll see what we'll keep. 19:46.790 --> 19:48.320 Update Box size. 19:48.350 --> 19:50.120 Now, background brush. 19:50.120 --> 19:52.160 That's something we're using, right? 19:52.160 --> 19:54.590 That's our image background. 19:54.710 --> 19:56.240 So we'll keep that. 19:57.140 --> 20:00.290 We don't need update, glow brush or glow padding. 20:00.290 --> 20:02.780 We'll keep glass, brush and glass padding. 20:02.780 --> 20:05.300 We don't need to set progress bar percent. 20:05.330 --> 20:09.470 We don't need to update the ghost glow brush or set the Ghost Progress bar. 20:09.470 --> 20:12.380 Percent Now we see that it's in use. 20:12.410 --> 20:14.450 Let's see where it is in use. 20:14.450 --> 20:17.750 If we hit compile, we can click on this link. 20:17.750 --> 20:20.900 Here we see that it's in Interp Ghost Globe. 20:20.900 --> 20:23.510 We can just remove that function too. 20:23.630 --> 20:26.990 And now we've gutted out everything we don't need. 20:27.110 --> 20:32.990 We can come back to the designer and I typically save all before deleting these. 20:32.990 --> 20:37.010 Sometimes they can cause a crash, but I'm going to delete those progress bars. 20:37.010 --> 20:42.890 And we have this now we want a picture, so I'm going to drag in an image. 20:44.630 --> 20:48.470 Right here and it can go beneath the glass. 20:48.590 --> 20:52.520 And this image I'm going to call image underscore picture. 20:54.670 --> 20:59.440 I'm going to set it to fill and I'm going to browse to Ora Render. 21:00.540 --> 21:02.430 And set that for the picture. 21:03.440 --> 21:04.910 And that looks pretty nice. 21:05.240 --> 21:11.810 It's too bad the background on this picture isn't transparent because then we could use a flowing material 21:11.810 --> 21:14.020 for that too, and that would look kind of cool. 21:14.030 --> 21:16.520 But we have this nice picture. 21:16.550 --> 21:19.670 Now we can use this in our overlay. 21:19.700 --> 21:26.360 I'd like to just save this and go into our WP overlay and find our picture. 21:27.590 --> 21:28.290 WPP. 21:28.340 --> 21:29.300 Picture frame. 21:29.630 --> 21:33.560 Now, I'd like to align both of these, so I'm going to select this one. 21:33.560 --> 21:36.620 It's anchored to the top left, and so is this. 21:36.620 --> 21:43.640 So I'm going to take this one and take its position X, copy it, take my picture, paste its position 21:43.640 --> 21:44.570 X in. 21:44.990 --> 21:50.870 And unfortunately, that means that their left sides are aligned, of course. 21:51.020 --> 21:58.310 So what I'm actually going to do is set my picture frame almost all the way to the left will make it 21:58.790 --> 22:02.990 ten, and my size X is to 50. 22:03.020 --> 22:05.270 Half of that is 125. 22:05.300 --> 22:07.820 Add ten to that, we have 135. 22:07.850 --> 22:12.050 That's where I want this one to be, minus half of its size. 22:12.050 --> 22:19.700 So if I take position X and put it to 135 and then take its size x, which is 100 and subtract 50 from 22:19.730 --> 22:23.570 that one, 35 -50, that's 85. 22:23.570 --> 22:26.570 So if I put in 85 now I know they're aligned. 22:27.520 --> 22:37.300 Now I can take this one my picture frame and bring it up to the corner and take my value globe and bring 22:37.300 --> 22:38.400 it down. 22:38.410 --> 22:45.130 And actually, I'm going to put the picture frame behind it so that I can take my value globe and put 22:45.130 --> 22:47.200 it in front like this. 22:48.240 --> 22:50.310 That might look pretty nice. 22:50.730 --> 22:53.190 Let's see how it looks in the viewport. 22:54.580 --> 22:55.900 Yeah, I like that. 22:55.900 --> 22:57.260 I think that looks nice. 22:57.280 --> 23:01.960 We could put it up more and to the right a little bit, but we can move them together now. 23:03.310 --> 23:06.910 So selecting them both, I can just click and drag. 23:10.300 --> 23:11.640 And that looks pretty good. 23:11.650 --> 23:12.820 I'm going to save all. 23:15.360 --> 23:16.830 Yeah, that looks great. 23:16.830 --> 23:18.870 Actually, I'm very happy with that. 23:19.050 --> 23:22.560 We may have it brought in a little, but let's see how it looks. 23:22.560 --> 23:23.300 Full screen. 23:23.340 --> 23:27.330 F11 will full screen it actually like that. 23:27.330 --> 23:28.650 I think it looks great. 23:28.740 --> 23:30.030 We can open the menu. 23:30.030 --> 23:32.430 The menu covers it almost completely. 23:33.320 --> 23:34.550 I think it looks great. 23:34.820 --> 23:38.090 And if we level up, we can see it go up to two. 23:38.330 --> 23:41.690 Let's kill a couple of these things before I die. 23:45.470 --> 23:47.960 There and it goes up to level two and it looks great. 23:48.290 --> 23:49.070 I like it. 23:49.070 --> 23:50.060 I like it a lot. 23:50.060 --> 23:53.360 So I'm going to go ahead and wrap it up here. 23:53.360 --> 23:56.090 We may just tweak one last little thing. 23:57.940 --> 24:02.560 My value globe can have probably a bigger text size. 24:02.920 --> 24:07.630 I might go up to 40, perhaps even oh, maybe 46. 24:08.080 --> 24:09.970 And we can even have. 24:12.280 --> 24:14.350 More of a yellowish color. 24:15.850 --> 24:18.760 But this is all just tweaking at this point. 24:19.880 --> 24:22.250 I think things are looking quite nice. 24:26.560 --> 24:28.120 I'm very happy with that. 24:28.780 --> 24:30.790 I might change the outline size to two. 24:31.740 --> 24:32.190 All right. 24:32.190 --> 24:32.880 Excellent job. 24:32.880 --> 24:36.750 And with that, we'll wrap this up and I'll see you in the next video.