WEBVTT 00:06.880 --> 00:08.030 Welcome back. 00:08.050 --> 00:15.210 Now, I hope you'll forgive me, but I did a little bit of visual tweaking in the meantime between videos. 00:15.220 --> 00:17.920 As you can see, things are a little bit darker. 00:18.130 --> 00:20.650 And if you're interested in the parameters I changed. 00:20.650 --> 00:22.760 I went to my my flowing UI. 00:22.840 --> 00:26.290 BG Here are the settings for it. 00:26.320 --> 00:29.320 Here is the exact color that I chose. 00:29.350 --> 00:31.780 Here's my flowing scroll. 00:31.810 --> 00:35.290 Here are the values and here is the color. 00:35.710 --> 00:45.070 And I went into my flowing UI bg and change the texture, coordinate u and v tiling 2.2 on both texture 00:45.070 --> 00:46.420 coordinate nodes here. 00:46.660 --> 00:49.600 And that gave me this look. 00:49.600 --> 00:53.650 But I'm sure you're going to adjust yours as you see fit. 00:53.740 --> 00:56.500 So I'm going to go ahead and close down those. 00:56.710 --> 01:03.400 And in this video, we're concerned with actually showing our spell menu instead of just putting it 01:03.400 --> 01:05.560 right here into our overlay. 01:05.660 --> 01:08.570 So first we're going to remove it from the overlay. 01:08.570 --> 01:09.860 Let's go to. 01:10.850 --> 01:12.710 Our overlay folder. 01:13.550 --> 01:14.960 Into our overlay widget. 01:14.990 --> 01:21.590 We're going to select this and remove that spell menu because we want a button that can open it for 01:21.590 --> 01:22.150 us. 01:22.190 --> 01:26.750 So just like we have an attributes button, we're going to have a spells button. 01:27.230 --> 01:31.010 So I'm going to get another wide button. 01:31.960 --> 01:36.670 And I'm just going to drag it in and I'm going to put it down here on the right side. 01:36.850 --> 01:42.100 And I'd just like to keep it at the same elevation as my attributes button. 01:42.100 --> 01:47.380 So I'm going to copy the Y position and paste it over here on my button. 01:47.440 --> 01:54.850 And now on the button I'm going to search for properties and change the button text to spells. 01:55.650 --> 01:59.820 So we have an attributes and spells and it should be all caps. 02:00.420 --> 02:03.510 So it's consistent with our attributes button. 02:03.540 --> 02:11.400 Now I can go ahead and make it a little less wide and a little bit moved over in the X. 02:12.670 --> 02:15.790 Not too much about like that. 02:16.330 --> 02:17.950 Okay, so we have a spells button. 02:17.950 --> 02:26.130 I'm going to rename this to spell menu button and we can open it the same way we're opening attributes. 02:26.140 --> 02:28.750 Let's check out how we're doing that. 02:28.900 --> 02:35.080 An event construct we're binding to on clicked on the attribute menu's button widget. 02:35.110 --> 02:41.050 We're going to do the same thing for our spells button widget, which we're going to check is variable 02:41.050 --> 02:41.650 for. 02:41.890 --> 02:48.010 Then we can take that spell menu button, bring it in and get its button widget. 02:49.270 --> 02:54.040 So get button and from that we can bind an event to on clicked. 02:54.040 --> 03:00.040 So I'm going to type on, clicked, assign on clicked and we can rename this event. 03:00.070 --> 03:02.440 Now this one's called on clicked event. 03:02.440 --> 03:11.410 It should really be called on attribute button clicked and this one can be on spell button clicked on 03:11.410 --> 03:14.690 spell menu actually button clicked. 03:15.470 --> 03:16.730 We'll hook these up. 03:17.320 --> 03:20.700 And attribute menu button clicked is an event. 03:20.710 --> 03:23.440 It's right here, just beneath. 03:23.470 --> 03:24.880 Event construct. 03:24.910 --> 03:27.830 We're going to make another custom event for the spell menu. 03:27.850 --> 03:34.960 So we'll make a custom event and we'll call this spell menu button clicked. 03:35.410 --> 03:37.510 And we can call this right here. 03:37.510 --> 03:39.610 Spell menu button clicked. 03:40.650 --> 03:43.290 Now we just need to define what happens. 03:43.500 --> 03:49.470 So we'll put this right below attribute menu button clicked and we can kind of copy our own code here. 03:49.830 --> 03:55.350 I'm going to move everything up a little and when spell menu button is clicked, first of all, we're 03:55.350 --> 03:59.530 going to disable it just like we did here for the attribute menu. 03:59.550 --> 04:03.450 So we're going to get spell menu button call, get button on it. 04:05.560 --> 04:07.300 And set is enabled. 04:10.630 --> 04:11.110 Calling. 04:11.110 --> 04:15.550 The function set is enabled and will disable the button. 04:15.850 --> 04:18.850 Now we're going to copy what we're doing up here. 04:19.180 --> 04:20.980 Get player controller. 04:21.010 --> 04:26.860 We're going to call create widget here and we're simply going to create the spell menu widget. 04:26.860 --> 04:29.830 So spell menu. 04:30.160 --> 04:34.990 Hooking up the player controller to that, we'll be creating that widget. 04:35.260 --> 04:37.810 Now we can add it to the viewport. 04:40.360 --> 04:44.020 And just like we did above, we can set its position in viewport. 04:44.050 --> 04:46.480 I'll go ahead and reroute a node around. 04:49.480 --> 04:53.020 And call set position in viewport. 04:54.860 --> 05:00.320 Now we're running out of room, so I'm going to move these nodes down just a bit and move everything 05:00.320 --> 05:00.740 up. 05:03.480 --> 05:06.300 Now the position is going to be different. 05:06.330 --> 05:14.010 Up here we set our position to 2525, but the position will be different here because it's on the right 05:14.010 --> 05:15.120 side of the screen. 05:15.150 --> 05:19.890 Now our spell menu has a size if we go back to UI. 05:20.950 --> 05:22.000 Spell Menu. 05:22.870 --> 05:23.950 Spell menu. 05:24.160 --> 05:29.080 We have an overall size box and this has its own size. 05:29.080 --> 05:36.220 Now, it's not marked as variable, but if we check is variable and compile, then here in WP overlay 05:36.250 --> 05:39.960 we can get this widget and type size box. 05:39.970 --> 05:48.520 Here's that size box root and from the size box root we can type in width and we can get the width override. 05:48.520 --> 05:54.580 So if we're going to call set position in viewport, we're going to need to do a little bit of math. 05:54.580 --> 05:56.470 Not a lot, just a bit. 05:56.530 --> 05:59.440 Now if we type get viewport size. 06:01.090 --> 06:04.660 Then this gives us a 2D vector which we can break. 06:05.910 --> 06:09.180 And this is the size X and Y for our viewport. 06:09.360 --> 06:16.920 So if we subtract this width override from x, then that would put our widget all the way over to the 06:16.920 --> 06:20.130 right, but we can give it an extra padding of 25. 06:20.430 --> 06:22.440 In fact, this could be a parameter. 06:22.440 --> 06:27.540 But first I'm going to take that X and I'm going to subtract. 06:28.190 --> 06:31.460 The value of width override from it right here. 06:32.850 --> 06:38.700 And in fact, I'm going to take this reroute node and hook it up here so that this can be brought back. 06:39.240 --> 06:40.170 Okay. 06:41.140 --> 06:45.700 So I'm going to take X and subtract that width override. 06:46.530 --> 06:53.760 Now we could add 25 to that width override, but for now, I'm just going to use this for the X. 06:53.760 --> 06:58.500 I'm going to right click on the position and split the struct pin and plug X directly in. 06:58.500 --> 07:01.500 And for the Y, we're going to do the same thing. 07:01.500 --> 07:03.990 We're going to take our size box root. 07:04.610 --> 07:06.230 And get height override. 07:08.620 --> 07:16.060 We're going to take Y here and subtract height override and hook that into position y. 07:16.870 --> 07:23.110 Now, just that we can check to see where that spell menu appears in the viewport. 07:23.140 --> 07:29.080 So I'm going to click Save All, Save Selected press play and click the spells button and it's right 07:29.080 --> 07:29.380 there. 07:29.380 --> 07:35.920 If I click the attributes button, I can see that well, our menu is a bit too high right now. 07:35.920 --> 07:42.970 I'm actually realizing that Y should really just be 25 actually, because it starts at the top. 07:42.970 --> 07:44.470 Something I forgot. 07:44.470 --> 07:50.350 If I press play and hit the spells button now I see that it's at the same height, so that one's easy. 07:50.380 --> 07:51.370 25. 07:51.400 --> 07:53.440 We didn't need to do that subtraction. 07:53.860 --> 08:00.190 Now if I hit F11, we can see what it looks like here and let's see what our math is doing here. 08:00.200 --> 08:07.120 I think I'd just like to print a string for the width override and make sure it's what I think it is. 08:09.310 --> 08:10.780 It's 805. 08:11.400 --> 08:13.350 And here in size box route. 08:13.350 --> 08:15.990 I see that that is indeed 805. 08:16.020 --> 08:18.690 Let's see what the viewport size X is. 08:19.020 --> 08:21.150 A little over 1500. 08:21.690 --> 08:22.140 Okay. 08:22.140 --> 08:25.530 So I believe it's based on full screen. 08:26.850 --> 08:29.400 Okay, so full screen, it's all the way over. 08:29.580 --> 08:31.770 So that is correct. 08:31.770 --> 08:38.850 But I'm going to want to add 25 to my width override that we're subtracting, so I'm going to go ahead 08:38.850 --> 08:39.750 and add. 08:40.740 --> 08:44.610 25 and that could be made a parameter. 08:44.610 --> 08:47.220 But for now, I'm just going to put 25 there. 08:47.580 --> 08:54.870 Compile and if it's full screen alt p to play shows me that it's right there. 08:56.090 --> 08:57.560 And it looks pretty good. 08:58.220 --> 08:59.360 Okay, so that's great. 08:59.360 --> 09:01.160 But our x button doesn't work. 09:01.160 --> 09:02.180 We can't remove it. 09:02.180 --> 09:05.120 So that's one of the next things we'll handle. 09:05.450 --> 09:13.000 I'm also going to make this 25 a parameter instead of hard coding it as we're using 25 up here as well. 09:13.010 --> 09:19.940 So I'm going to take this position y and promote it to a variable and call this menu padding. 09:22.490 --> 09:25.760 And we'll use this menu padding down here as well. 09:25.760 --> 09:34.280 Instead of 25 and up here, I'm going to split this struct pin and use menu padding for both X and Y. 09:34.520 --> 09:39.620 And now this is consistent and we can adjust it by changing a single parameter. 09:41.700 --> 09:44.880 Okay, so we're creating the widget. 09:44.910 --> 09:51.990 But if we look at what we did for our attribute menu, the attribute menu had an event dispatcher called 09:51.990 --> 09:53.870 Attribute menu closed. 09:53.880 --> 09:57.220 And on top of that, it has a close button that works. 09:57.240 --> 09:59.160 Let's look at our attribute menu. 10:00.570 --> 10:05.730 And go into the graph and take a look at what we're doing for close button. 10:06.030 --> 10:11.490 Right here we have close button on clicked event remove from parent. 10:13.000 --> 10:18.760 And in addition to that, in event destruct, we make a broadcast to attribute menu closed. 10:19.530 --> 10:22.080 We're going to want to do that in spell menu. 10:22.230 --> 10:27.190 So for spell menu, let's make sure that this close button is marked is variable. 10:27.210 --> 10:29.400 We're going to call this close button. 10:31.740 --> 10:40.890 And in the graph, we're going to use event construct and get our close button, get its button widget. 10:42.030 --> 10:46.350 Drag off and type onclicked and assign an event for Onclicked. 10:49.070 --> 10:53.360 Now, when the close button is clicked, we want to call remove from parent. 10:56.440 --> 10:58.240 And we also want a new event. 10:58.240 --> 11:01.720 Dispatcher So we're going to click Plus to add a new one. 11:01.720 --> 11:04.750 And this will be spell menu closed. 11:05.590 --> 11:07.480 And in event destruct. 11:09.230 --> 11:11.390 We're going to broadcast that event. 11:11.390 --> 11:13.490 Dispatcher We're going to call it. 11:14.350 --> 11:17.410 So we can compile that and back in our overlay. 11:17.830 --> 11:26.240 After setting the position in viewport, we're going to bind an event to the spell menu button closed. 11:26.260 --> 11:30.550 So we're going to get that return value from Create widget. 11:31.480 --> 11:34.750 We're going to type spell menu button closed and a sign. 11:36.940 --> 11:41.140 And when the spell menu button closes, we're going to enable the button again. 11:42.120 --> 11:46.770 So we'll get our spell menu button call, get button on it. 11:49.550 --> 11:51.050 Set is enabled. 11:56.160 --> 11:56.880 Passing in. 11:56.880 --> 11:57.480 True. 12:00.360 --> 12:04.410 So with that, we should have a working close button. 12:04.410 --> 12:05.640 Let's save all. 12:05.850 --> 12:09.900 I'm going to full screen it alt p to play. 12:11.090 --> 12:13.040 And click my spells button. 12:13.070 --> 12:14.570 Click the close button. 12:14.570 --> 12:15.260 We can open. 12:15.260 --> 12:16.210 We can close. 12:16.220 --> 12:17.180 Excellent. 12:17.720 --> 12:20.090 Okay, so this is looking nice. 12:20.210 --> 12:27.650 The only thing is, with both of these menus open, I can click anywhere and I can still run around 12:27.650 --> 12:30.540 and I think I'd like to disable that. 12:30.560 --> 12:36.080 I don't want to be able to move around because if I'm clicking here in the menu, I'm not expecting 12:36.080 --> 12:43.700 my character to just move around or perhaps even accidentally click on an enemy and, you know, engage 12:43.700 --> 12:44.540 in battle. 12:44.570 --> 12:47.990 When the menus are open, I don't want to be able to move. 12:48.930 --> 12:51.270 So that's something I'd like to enforce. 12:51.570 --> 12:53.970 I'm going to hit F11 to UN full screen. 12:54.060 --> 12:56.040 So how do we make that happen? 12:56.400 --> 13:01.800 Well, we do that by getting our player controller and setting the input mode. 13:02.100 --> 13:09.030 Now, to make this simple, I'm going to have a Boolean for when our spell menu is open and for when 13:09.030 --> 13:10.770 our attribute menu is open. 13:10.800 --> 13:12.600 So two booleans. 13:12.900 --> 13:18.450 That way we just know when they're open and when they're closed and we'll set them when we open and 13:18.450 --> 13:20.220 close these menus. 13:20.250 --> 13:22.710 So I'm going to click Add new variable. 13:22.710 --> 13:27.540 It's going to be a Boolean and I'm going to have attribute menu. 13:28.860 --> 13:29.640 Open. 13:30.330 --> 13:39.090 I'm also going to add a new variable of type bool called spell menu open and compile and make sure these 13:39.090 --> 13:44.430 both have default values of false and an attribute menu button clicked. 13:44.460 --> 13:47.520 We're going to set attribute menu open to true. 13:49.560 --> 13:51.270 And in spell menu button clicked. 13:51.270 --> 13:54.510 We're going to set spell menu open to true. 13:56.620 --> 14:00.940 Now, when we close these menus, we need to set these booleans to false. 14:01.450 --> 14:07.130 We can do that in response to the attribute menu and spell menu closed events right here. 14:07.150 --> 14:12.250 So attribute menu closed event can set attribute menu open to false. 14:13.150 --> 14:17.770 And spell menu closed event can set spell menu open to false. 14:18.070 --> 14:22.720 Okay, so we have booleans that are true or false based on whether or not these are open. 14:22.750 --> 14:23.670 Cool. 14:23.680 --> 14:27.670 So what does that have to do with UI and the input mode? 14:27.700 --> 14:37.720 Well, when attribute menu button clicked is fired off, we want to set our input mode to UI only so 14:37.720 --> 14:39.700 we can call get player controller. 14:42.750 --> 14:47.790 And from the player controller we can call set input mode UI only. 14:48.820 --> 14:51.940 This will prevent us from adding any input. 14:51.970 --> 14:54.550 Now, keep in mind this depends on your game. 14:54.550 --> 15:00.880 If you have some input that triggers input actions and those are linked to your UI, somehow you don't 15:00.880 --> 15:02.440 want to use UI only. 15:02.710 --> 15:07.410 You want to disable movement in some other way, such as at the character level. 15:07.420 --> 15:11.770 But in my case I can use set input mode UI only. 15:12.420 --> 15:17.310 Now I'm going to do this same thing when opening our spell menu as well. 15:17.310 --> 15:21.030 So I'm going to paste these notes here for the spell menu. 15:21.450 --> 15:25.200 Now the question is when do we set our input mode back? 15:25.820 --> 15:31.230 Well, we do it when we close the menus, but only if both menus are closed. 15:31.250 --> 15:37.490 In other words, right here, when attribute menu is closed, we're going to have a branch that checks 15:37.490 --> 15:39.500 if the spell menu is open. 15:42.200 --> 15:45.110 If it is, we don't need to set our input mode back. 15:45.110 --> 15:51.590 But if it's not, well, now we know both menus are closed so we can get our player controller. 15:53.140 --> 15:55.210 And we can set our input mode back. 15:56.440 --> 15:59.110 And that's going to be back to game and UI. 15:59.530 --> 16:01.870 So that goes to the false case here. 16:02.620 --> 16:06.520 I'm not going to check hide cursor during capture because we want our cursor. 16:07.060 --> 16:07.540 Okay. 16:07.540 --> 16:09.250 So that's what we're going to do. 16:09.580 --> 16:13.690 But we're going to do the same thing when the spell menu closes. 16:14.330 --> 16:16.550 The only difference is we're checking. 16:16.580 --> 16:18.230 Attribute menu open. 16:18.230 --> 16:21.380 If it's false, then we do the same thing. 16:22.040 --> 16:24.050 So the same pair of nodes here. 16:25.980 --> 16:27.630 So let's test this out. 16:29.170 --> 16:32.830 When we press play, we can run around with the attribute menu open. 16:32.830 --> 16:34.270 We cannot run around. 16:34.270 --> 16:36.460 When we close it, we can run around. 16:37.980 --> 16:42.630 Now with the spell menu open, we cannot run around with both open. 16:42.630 --> 16:43.910 We can not run around. 16:43.920 --> 16:46.440 When we close one we still can't run around. 16:46.440 --> 16:52.710 When we close two we can run around so we can only run around when both menus are closed. 16:52.710 --> 16:55.470 And that is the behavior that I personally want. 16:55.500 --> 16:58.500 If you want something else, you could code it a different way. 16:58.500 --> 17:01.770 But that's exactly the behavior that I would like to see. 17:02.220 --> 17:04.320 Okay, so that's looking pretty nice. 17:04.320 --> 17:08.170 Now, we have quite a few nodes here that could be cleaned up. 17:08.190 --> 17:13.590 Now, some of this stuff cannot be collapsed to a function and some of it can. 17:13.620 --> 17:15.810 We can take all of these nodes here. 17:17.170 --> 17:24.490 And what we're doing is we're basically creating the attribute menu and adding it to the viewport and 17:24.490 --> 17:26.260 returning a reference to it. 17:26.320 --> 17:32.860 So if we collapse this to a function, we can call it create attribute menu. 17:33.100 --> 17:37.990 Now let's just really quickly make sure that things aren't broken after doing that. 17:38.320 --> 17:41.590 And as we see, it still works. 17:41.620 --> 17:44.770 In fact, let's just make sure that our attribute menu works. 17:44.770 --> 17:46.540 So I'm going to level up. 17:48.530 --> 17:50.600 Gain an attribute point and spend it. 17:51.300 --> 17:52.650 And it still works. 17:53.310 --> 17:57.810 So that's going to clean up that part of our overlay a good deal. 17:58.110 --> 18:00.660 So I'm going to go ahead and move it over. 18:01.490 --> 18:07.880 And when attribute menu is closed, all of these things that we're doing could be collapsed into a function. 18:07.880 --> 18:10.010 Make sure they're all highlighted here. 18:11.470 --> 18:13.120 And we can collapse them. 18:14.020 --> 18:18.280 And this can be called attribute menu closed. 18:20.770 --> 18:23.490 And now this looks a good deal better. 18:23.500 --> 18:26.170 Let's do the same thing for the spell menu. 18:27.120 --> 18:31.530 This one has even more nodes because it's on the right side. 18:31.560 --> 18:33.720 We're going to collapse this to a function. 18:35.170 --> 18:38.050 And we're going to call this Create spell menu. 18:39.960 --> 18:43.890 And once again, I like to just test to make sure things still work. 18:45.140 --> 18:46.070 And they do. 18:48.200 --> 18:50.750 So that looks better on that side here. 18:52.680 --> 18:56.370 And all of this stuff here could be collapsed as well. 18:57.600 --> 19:02.550 We're going to collapse the function and this will be spell menu closed. 19:06.100 --> 19:09.790 And set input mode to UI only. 19:09.940 --> 19:14.560 Could be a function itself so that we have all clean nodes here. 19:17.560 --> 19:19.510 I'm just going to collapse it real quick. 19:21.160 --> 19:24.490 We're going to say input mode UI only. 19:25.900 --> 19:31.240 And I'm going to duplicate that and call it here instead of having those two nodes. 19:31.360 --> 19:33.190 This just looks a lot better. 19:33.190 --> 19:38.310 And if I highlight these four and press Q, it's going to align them nicely. 19:38.320 --> 19:40.800 Same with that and same with these. 19:40.810 --> 19:41.980 They're all ready, straight. 19:45.680 --> 19:49.130 And now we have something that looks a lot more manageable. 19:51.440 --> 19:53.480 And we can even comment these. 19:55.780 --> 20:00.070 This one will say attribute menu button clicked. 20:02.250 --> 20:06.900 And this one will say spell menu button clicked. 20:09.470 --> 20:12.470 And here an event construct. 20:12.920 --> 20:14.830 We can have a comment here. 20:14.840 --> 20:17.600 And I'm just going to say attribute menu. 20:19.480 --> 20:21.880 And this one here will say spell menu. 20:24.720 --> 20:28.080 Just so we can see that we're doing something related to those. 20:28.350 --> 20:31.110 So these should be nice and organized here. 20:31.110 --> 20:32.370 That looks a lot better. 20:32.400 --> 20:38.460 Feel free to color code them as well and even make a sequence note here if you want to. 20:41.240 --> 20:43.580 And then you can organize these vertically. 20:43.580 --> 20:46.190 So this could go up. 20:48.840 --> 20:49.800 To hear. 20:50.580 --> 20:52.740 And then this one. 20:53.480 --> 20:57.440 If you didn't know this, you could hold control and you'll get a hand icon. 20:57.470 --> 21:03.110 You can click and move this wire over to here like so. 21:03.650 --> 21:10.340 That can save you some clicking, especially when there are many wires connected to one node. 21:10.790 --> 21:15.830 Okay, so that allows us to keep things even more organized. 21:15.830 --> 21:21.800 And really, because this says attribute menu, we can get our attribute menu button clicked and put 21:21.800 --> 21:24.630 it right there next to it as they're related. 21:24.650 --> 21:26.990 Same with the spell button there. 21:26.990 --> 21:27.860 That looks good. 21:27.860 --> 21:34.660 Except, you know, things may change as we add more things, but that looks good for now. 21:34.670 --> 21:40.250 Now, before we wrap up, while we're at it, I'd like to just comment the rest of these things while 21:40.250 --> 21:41.660 I'm busy organizing. 21:41.660 --> 21:46.130 So this will say set overlay widget controller. 21:47.230 --> 21:52.060 This will be set widget controllers and this could even be collapsed to a function called set widget 21:52.060 --> 21:53.020 controllers. 21:53.140 --> 21:54.400 I think I'd like that. 21:54.400 --> 21:58.900 So collapsed function set widget controllers. 21:59.890 --> 22:02.290 With an S, It has to have an S. 22:02.650 --> 22:03.610 It cannot be set. 22:03.640 --> 22:05.140 Widget controller, of course. 22:05.830 --> 22:09.310 Here for our message Widget Row delegates. 22:09.340 --> 22:15.190 We have some things that are happening that should be in response to message. 22:15.190 --> 22:17.440 Widget Row Delegate event. 22:18.280 --> 22:21.220 This is going to be its own function as well. 22:23.620 --> 22:27.220 And we'll call this handle message widget. 22:29.400 --> 22:31.620 So that will look a lot better now. 22:32.220 --> 22:35.670 I'm also going to delete these two nodes that we're not using right now. 22:37.470 --> 22:39.510 This can have a little comment. 22:39.510 --> 22:43.800 Set widget controllers with two L's. 22:45.150 --> 22:48.540 This one will be handling message widgets. 22:48.780 --> 22:51.780 Handle message widgets. 22:51.930 --> 22:55.620 It's those messages that pop up when we pick up potions and whatnot. 22:55.920 --> 22:58.710 And here on level changed. 22:58.740 --> 23:00.720 We're doing a few things. 23:01.500 --> 23:07.230 We're creating a level up message widget so this one can be collapsed to a function. 23:09.460 --> 23:17.680 Called handle level up message, and this will get a comment with the same name. 23:17.860 --> 23:20.590 Handle level up message. 23:22.230 --> 23:23.210 There we go. 23:23.220 --> 23:26.550 And we can handle our messages kind of in unison here. 23:26.550 --> 23:30.510 So I can kind of just put these in sequence right there. 23:31.290 --> 23:33.390 Not really in unison, but in sequence. 23:34.290 --> 23:37.680 I think that's going to look a little bit more organized here. 23:38.990 --> 23:43.760 And I can right click on then three and remove the execution pin. 23:43.790 --> 23:44.210 All right. 23:44.210 --> 23:48.140 So now overlay looks a lot more manageable. 23:48.140 --> 23:52.010 So let's get everything up together so that we can see. 23:54.220 --> 24:00.160 So even though it's a little bit more of a hefty blueprint, it doesn't look like more of a hefty blueprint. 24:00.190 --> 24:08.110 Keeping them organized like this is really going to make it easier to maintain as things get even more 24:08.110 --> 24:09.070 complicated. 24:10.650 --> 24:11.100 Okay. 24:11.100 --> 24:13.690 So that's going to wrap up this video. 24:13.710 --> 24:15.600 Things are looking quite nice. 24:15.630 --> 24:18.270 We're able to actually show. 24:19.500 --> 24:21.960 Both attributes and spells menus. 24:22.440 --> 24:27.120 Now we need to make our spells menu functional, and we'll do that next. 24:27.540 --> 24:28.500 Excellent job. 24:28.500 --> 24:29.490 I'll see you soon.