WEBVTT 00:06.840 --> 00:07.860 Welcome back. 00:07.860 --> 00:10.350 So things are looking better and better. 00:10.350 --> 00:19.200 Every time we level up, we get our HUD updated and we get our particle effects and those look awesome. 00:19.440 --> 00:25.200 But usually we get some kind of message in the HUD informing us that we leveled up and showing what 00:25.230 --> 00:26.390 level we're at. 00:26.400 --> 00:29.700 So in this video, we're going to implement that. 00:29.850 --> 00:33.510 Now I'd like to make a widget that we can show on the screen. 00:33.510 --> 00:40.950 We can just spawn one, we can show it for a minute, maybe play an animation and then allow it to destroy 00:40.950 --> 00:41.700 itself. 00:41.700 --> 00:43.770 So pretty simple. 00:43.950 --> 00:46.350 And that's going to be a quest for you. 00:46.380 --> 00:52.890 I'd like you to create a level up message widget to show to the screen and show it every time we level 00:52.890 --> 00:59.010 up, create a widget animation so that it's not just static, it doesn't pop up out of nowhere. 00:59.040 --> 01:03.030 Decide how you'd like it to appear and do so in a cool looking way. 01:03.030 --> 01:08.590 Now make sure to remove it from the parent using remove from parent whenever you're done with it. 01:08.620 --> 01:10.570 We don't want it lingering around. 01:10.780 --> 01:12.700 Either that or you could just hide it. 01:12.700 --> 01:17.230 I leave that decision up to you and as a bonus, play a level up sound. 01:17.260 --> 01:20.200 Pause the video and conquer your quest now. 01:23.590 --> 01:25.680 Okay, so I need a level up widget. 01:25.690 --> 01:32.170 I'm going to go into UI and I'm just going to put this into overlay sub widget. 01:32.290 --> 01:39.670 I'm going to make a new user interface widget blueprint based on or a user widget and call this WP underscore 01:39.670 --> 01:41.590 level up message. 01:42.220 --> 01:44.800 Let's open up, level up message. 01:44.800 --> 01:46.960 And first things first. 01:46.960 --> 01:48.850 I'm just going to make an overlay. 01:48.970 --> 01:51.850 Let's bring that in and we'll have this. 01:51.850 --> 01:58.120 And to make things really easy for myself, I'm just going to leave it like this, make it fill the 01:58.120 --> 01:58.990 screen. 01:59.020 --> 02:03.850 Now I can just separate this into boxes and just put some messages here. 02:03.850 --> 02:06.130 I think that's a quick and dirty way to do it. 02:06.160 --> 02:08.770 Now, I could just use a wrap box here. 02:10.360 --> 02:17.090 And then anything I put in here is going to spill over to the next line if it's too wide. 02:17.110 --> 02:23.920 I'm going to fill everything here with the rat box and I'd like my message to be a little bit lower. 02:23.920 --> 02:25.750 So I'm going to put a spacer. 02:27.580 --> 02:35.800 And my spacer can be large in the X direction and I'm going to increase its size in the Y as well. 02:36.040 --> 02:38.270 And then I can have text here. 02:38.290 --> 02:43.580 So first I'm going to add text dragging in text here. 02:43.600 --> 02:47.530 I'm going to set the text right away using all caps. 02:47.800 --> 02:50.140 I'm going to say you have reached. 02:51.490 --> 02:58.660 And I'd like this to be centered, but I'm going to have to use fill empty space before I check horizontal 02:58.660 --> 03:04.900 alignment center and I'm going to put my justification alignment to center as well. 03:05.140 --> 03:13.450 And obviously, this font is not going to work for us, so I'm going to change it from Roboto to Amaranth. 03:13.480 --> 03:15.070 It's going to need to be bigger. 03:15.070 --> 03:23.050 I'm going to try a size of 34, a letter spacing of 100, an outline size of one. 03:23.140 --> 03:25.330 And now I have some text here. 03:25.420 --> 03:29.740 Now, after this text, I'd like some more text. 03:29.770 --> 03:32.710 I'm going to actually copy this text and paste it. 03:32.710 --> 03:38.410 Control C, control V, and this one I'm going to change to say level. 03:38.440 --> 03:43.090 Not all caps, just capitalized level space. 03:44.130 --> 03:45.240 Like that. 03:45.390 --> 03:48.690 Now, for this one, I'm going to check Force New line. 03:48.690 --> 03:49.970 So it looks like this. 03:49.980 --> 03:51.240 It's right beneath it. 03:51.240 --> 03:58.160 And I'm also going to have another text for the actual level, something we can set the value for. 03:58.170 --> 04:02.130 So I'm going to call this one text underscore. 04:02.970 --> 04:03.900 Level. 04:04.630 --> 04:06.700 And this one will be a variable. 04:06.790 --> 04:12.970 Now, for this one, I don't want to fill the empty space and I want it to be on the same line as this 04:12.970 --> 04:14.100 level text here. 04:14.110 --> 04:20.080 I'm going to actually change this one to say X so I can tell the difference between these two and I'd 04:20.080 --> 04:24.220 like this one and this one to both be on the same level, right? 04:24.220 --> 04:31.570 So if I uncheck fill empty space on that one and on the x, I can uncheck force New line. 04:31.600 --> 04:33.190 They'll both be here. 04:33.190 --> 04:40.390 And let's see what happens if I take level and right align horizontally and the X and choose left align 04:40.390 --> 04:41.410 horizontally. 04:41.770 --> 04:46.450 And we really just want these both to be in the middle, right? 04:46.690 --> 04:49.030 Well, they don't seem to want to be centered. 04:49.030 --> 04:53.410 So what we can do is select both of them right click and wrap with a box. 04:53.410 --> 04:57.250 I'm going to wrap it with a horizontal box. 04:58.410 --> 05:06.120 And this horizontal box can be set to center, fill empty space, and it'll be right there in the middle. 05:07.360 --> 05:10.300 Now we can see what X looks like as a number. 05:11.320 --> 05:12.550 That looks pretty good. 05:13.630 --> 05:18.370 I'm going to set it back to X and now we have something that looks like this. 05:18.520 --> 05:26.950 Now, if we like, we could just put this text and this text all of them together in their own box. 05:26.950 --> 05:33.580 We can right click wrap with and we can choose a vertical box and just take that horizontal box here 05:33.580 --> 05:35.830 and make sure that it's set to center. 05:35.830 --> 05:42.550 And then if we want a animation for this widget, we can simply animate the vertical box and then everything 05:42.550 --> 05:45.250 inside of it will move along with it. 05:45.400 --> 05:48.350 So now that we have a widget, there's a few things we need to do. 05:48.370 --> 05:48.700 Right. 05:48.700 --> 05:49.840 We need to show it. 05:49.870 --> 05:52.640 We need to play an animation if we made one. 05:52.660 --> 05:56.200 We need to set X to the correct value. 05:56.290 --> 06:04.510 Now X is marked as a variable, so we just need a way to set that text and we can really just do that 06:04.510 --> 06:06.410 whenever we spawn one of these. 06:06.430 --> 06:14.420 So I'd like to spawn or construct one of these widgets from my overlay as soon as I've leveled up. 06:15.050 --> 06:18.140 So I'm going to go into my overlay. 06:19.480 --> 06:20.710 WPP overlay. 06:21.340 --> 06:27.550 And here in the graph, I'd like to subscribe to the delegate that gets broadcast when we level up. 06:27.790 --> 06:29.350 So I'm going to add a pin. 06:29.650 --> 06:37.150 I'm going to take my BP overlay widget controller, duplicate that node, and from that node, search 06:37.150 --> 06:41.320 for level and assign on player level change delegate. 06:41.320 --> 06:44.020 And I'll call the event on level changed. 06:46.340 --> 06:47.990 So we'll hook that up here. 06:50.950 --> 06:54.160 And what do we want to do when the level changes? 06:54.190 --> 07:02.790 Well, I'd like to spawn a level up widget, so I'm going to simply use create widget and choose my 07:03.670 --> 07:05.230 level up message. 07:07.540 --> 07:08.430 Here it is. 07:08.440 --> 07:09.910 I'm going to spawn it. 07:09.910 --> 07:15.340 And for the owning player, I'm going to use the player controller that exists on my overlay widget 07:15.340 --> 07:16.280 controller. 07:16.300 --> 07:19.450 Remember, the widget controller has a player controller. 07:19.750 --> 07:24.130 We're going to get that player controller and simply pass that in here. 07:24.670 --> 07:26.380 I'll move these nodes down here. 07:27.280 --> 07:29.050 So we'll spawn this. 07:29.050 --> 07:37.180 But after we spawn it, of course, we need to add it to the viewport and set its level and do anything 07:37.180 --> 07:37.990 else that it should do. 07:38.020 --> 07:38.320 Right. 07:38.320 --> 07:43.890 So first of all, I'm going to type in text underscore level. 07:43.900 --> 07:46.720 I'm going to get that and set its text level. 07:46.720 --> 07:48.970 So I'm going to say set text. 07:51.010 --> 07:55.480 And set that text equal to the new value here for level. 07:56.560 --> 07:59.630 That's going to give me a two text from Integer. 07:59.650 --> 08:01.310 I'll go ahead and hook this up here. 08:01.330 --> 08:04.550 And we also need to add this widget to the viewport. 08:04.570 --> 08:10.960 And what I'd also like to do here is promote this widget to a variable for a couple reasons. 08:10.990 --> 08:12.440 We'll see why in a second. 08:12.460 --> 08:17.590 So I'm going to promote it to a variable and call this level up widget. 08:19.340 --> 08:25.670 And the first reason I'd like this level up widget to be a variable is so that I can check to see if 08:25.670 --> 08:28.480 one already exists before we create one. 08:28.490 --> 08:31.910 If it's valid, then I'm going to destroy it. 08:31.940 --> 08:38.810 So I'm going to take my level up widget, get it, convert this to a validated get, and if it's valid, 08:38.810 --> 08:40.370 I'm going to destroy it. 08:41.090 --> 08:43.280 Because we're about to create a new one. 08:43.550 --> 08:49.850 So if is valid, I'm going to take level up widget and to destroy it I call remove from parent. 08:51.840 --> 08:54.430 And then we go on to create a new one. 08:54.450 --> 09:01.320 Now, if it's not valid, then we can go ahead and create one anyway without needing to destroy it. 09:01.650 --> 09:07.940 So now that we're creating one and setting its text, we need to add it to the viewport of course. 09:07.950 --> 09:11.580 So we'll take level up widget and call add to viewport. 09:14.790 --> 09:18.720 Now, we're never actually removing it from the viewport. 09:18.780 --> 09:20.820 I'd like it to do that itself. 09:20.820 --> 09:22.630 So we'll handle that in a second. 09:22.650 --> 09:24.720 For now, let's just see if this works. 09:26.720 --> 09:29.240 I'm going to save all and try to level up. 09:30.030 --> 09:31.440 There's one goblin. 09:33.060 --> 09:34.260 Two little goblins. 09:34.260 --> 09:35.870 And there's my message. 09:35.880 --> 09:36.810 Perfect. 09:37.260 --> 09:41.400 Okay, so now that we're showing it, we need it to remove itself. 09:41.400 --> 09:47.100 I'd like it to handle that itself, as well as playing its own effects like an animation and perhaps 09:47.100 --> 09:49.410 even a sound to play. 09:49.530 --> 09:51.030 So let's take care of that. 09:51.030 --> 09:57.630 In our graph we can use event construct and we can simply use a delay here. 09:57.900 --> 10:03.960 And after, let's say, three seconds, we'll have this widget remove itself from the parent. 10:03.960 --> 10:06.360 So we'll call remove from parent. 10:08.260 --> 10:14.410 So yes, we're destroying it before we create one in the overlay and it should already be destroyed, 10:14.410 --> 10:18.100 but just in case we'll remove it there before creating a new one. 10:18.100 --> 10:20.050 So let's make sure that this works. 10:20.050 --> 10:22.210 We'll go ahead and level up. 10:24.640 --> 10:27.670 And after three seconds, I expect it to go away. 10:27.670 --> 10:28.690 And there it goes. 10:28.720 --> 10:29.230 Okay. 10:29.230 --> 10:32.800 So that takes care of destroying itself. 10:32.830 --> 10:37.000 Now we want to play some sounds and an animation. 10:37.270 --> 10:40.840 Now I'd like to see what I've got, by the way of sounds. 10:40.840 --> 10:47.200 So if I go to assets sounds well, we got a level up folder and here's a sound effect. 10:47.200 --> 10:53.140 Looks like it's called SFX template single, so looks like someone forgot to rename it, but I'm going 10:53.140 --> 10:56.760 to rename this to SFX level up. 10:56.770 --> 10:58.630 We'll call it level up sound. 10:59.220 --> 11:01.230 So let's see what this sounds like. 11:04.460 --> 11:04.900 Hmm. 11:04.970 --> 11:06.440 Sounds kind of familiar. 11:06.470 --> 11:08.840 That's the sound when you level up. 11:09.020 --> 11:10.820 So I bet you didn't realize it. 11:10.820 --> 11:14.390 But every time you start one of these videos, you're leveling up. 11:14.810 --> 11:18.310 All right, so back in my level up message, I'm going to play this sound. 11:18.320 --> 11:23.060 So I'm going to use play sound 2D because we don't need the play sound at a location. 11:23.060 --> 11:25.250 This just needs to be played. 11:26.480 --> 11:29.660 So with SFX level up sound selected. 11:30.770 --> 11:32.750 I'm going to play that sound. 11:32.780 --> 11:35.750 Let's just see how this sounds and feels when we level up. 11:43.540 --> 11:45.550 I think that sounds pretty good. 11:45.580 --> 11:53.200 It has a bit of a build up to it though, so we might want to make sure that our animation sort of goes 11:53.200 --> 11:54.970 along with that sound. 11:55.000 --> 11:56.800 It has like a bit of a build up. 11:57.460 --> 11:59.290 Let's see how it sounds again. 12:04.760 --> 12:11.240 Yeah, Let's make sure that our animation shows up with a little bit of a build up as well. 12:11.240 --> 12:18.230 So that'll be one of the last things we do is we take our vertical box here and we can rename this to 12:18.230 --> 12:22.040 vertical box, underscore message. 12:23.330 --> 12:30.860 We can check is variable and we can go to animations and call this message animation. 12:30.980 --> 12:39.020 Click on message animation, add a track, we can choose vertical box message, add a track for vertical 12:39.020 --> 12:40.100 box message. 12:40.100 --> 12:45.500 And I'd like to make a transform track and I'd like to scale it up. 12:45.500 --> 12:49.760 I'm going to start it off with a scale in X and y of zero. 12:50.900 --> 12:53.150 And build up to one. 12:54.380 --> 12:57.380 We'll go to 0.5 seconds and see what that looks like. 12:59.030 --> 13:00.650 I'm going to click play. 13:01.350 --> 13:03.770 And I think that's going to look pretty good. 13:03.780 --> 13:11.340 Now, I can take a look in graph mode for the scale for X and Y, and I think I might want to change 13:11.340 --> 13:15.810 this curve to look more like this, both for X and Y. 13:16.530 --> 13:20.790 We'll see how it looks, but let's see when we play it. 13:21.390 --> 13:23.520 Yeah, I kind of like it like that. 13:23.640 --> 13:27.950 So let's play this animation from the event graph here. 13:27.960 --> 13:34.230 So not only are we going to play this sound 2D, we're also going to use play animation. 13:36.160 --> 13:39.310 And we're going to get our new animation, which we called. 13:40.280 --> 13:41.930 Message animation. 13:43.620 --> 13:46.080 So getting message animation. 13:47.870 --> 13:49.370 Plugging it in. 13:49.760 --> 13:51.500 Hooking up our nodes. 13:52.770 --> 13:54.690 Let's see what this looks like. 14:07.570 --> 14:09.250 Okay, so that looks pretty good. 14:09.250 --> 14:11.080 We have three things happening. 14:11.080 --> 14:17.380 We have particles, sounds and a HUD message, so it can be a little hard to get those all to coincide 14:17.380 --> 14:17.920 perfectly. 14:17.920 --> 14:21.210 But with enough tweaking, we can make it happen. 14:21.220 --> 14:28.180 I think our animation could probably lead up to our scale of one a little bit later. 14:28.330 --> 14:31.750 0.75 seconds might sound and feel better. 14:35.290 --> 14:36.460 That's pretty nice. 14:36.460 --> 14:43.270 And of course we could make it a little juicier, a little bit of tweening by checking out our curve. 14:43.270 --> 14:48.490 I'm going to maximize this screen and we could have a little bit of tweening here. 14:48.640 --> 14:57.160 I can right click and add a key and make these keys, sort of get a bit of a damped oscillation going. 15:00.950 --> 15:02.120 This is for X. 15:03.030 --> 15:05.130 Let's just see what that looks like. 15:12.610 --> 15:20.080 And I think more importantly than that damped oscillation, we should probably actually have a slower 15:20.080 --> 15:20.860 build up. 15:21.450 --> 15:25.590 So I might actually go back to having a curve that looks like this. 15:28.110 --> 15:32.160 And we could still have this bit of oscillation here, but. 15:32.810 --> 15:34.640 We might want a slower buildup. 15:34.640 --> 15:36.380 Let's see how it looks like this. 15:52.720 --> 15:53.110 Okay. 15:53.110 --> 15:54.730 I think I know what'll look better. 15:54.940 --> 15:56.740 A curve that looks like this. 15:56.740 --> 16:02.860 So I'm just going to remove those extra keys and have it go up like this. 16:02.860 --> 16:04.270 Let's see how this looks. 16:04.270 --> 16:06.400 So let's try that out. 16:13.890 --> 16:14.370 Okay. 16:14.370 --> 16:16.290 It seems too slow. 16:16.470 --> 16:18.010 Here's what I'm going to do. 16:18.030 --> 16:21.870 I'm going to go to 0.5 and add a key of zero. 16:23.370 --> 16:25.470 So scale is zero. 16:27.540 --> 16:27.980 Okay. 16:27.990 --> 16:35.640 Something went out of whack here, so I'm just going to just highlight everything here and remove it. 16:36.480 --> 16:40.560 Go to 0.5 and click add a key. 16:42.250 --> 16:44.740 We'll put keys at zero as well. 16:46.000 --> 16:50.710 And then at 0.75, we'll go up to one. 16:56.070 --> 16:57.960 So we have a delay. 16:59.810 --> 17:05.300 And again, taking a look at the curve, I'm going to angle them like this. 17:13.020 --> 17:14.520 And we'll test it out. 17:18.450 --> 17:18.870 Okay. 17:18.870 --> 17:19.890 It's looking better. 17:20.730 --> 17:24.270 Just going to bring these keys in just a bit. 17:35.260 --> 17:37.390 We're almost perfect. 17:47.260 --> 17:49.150 I think it's looking pretty good, actually. 17:49.150 --> 17:52.300 I think that is where I'd like to call it quits. 17:52.720 --> 18:00.010 I do notice, though, that this is going down into the negatives a little, so I do want to make sure 18:00.010 --> 18:01.210 that doesn't happen. 18:03.050 --> 18:05.540 And with that, I think we've done enough tweaking. 18:05.540 --> 18:07.410 I think we have our effects. 18:07.430 --> 18:08.870 This is good for now. 18:08.870 --> 18:13.720 We can always tweak more later, but that looks and sounds great. 18:13.730 --> 18:17.270 Excellent job and I'll see you in the next video.