WEBVTT 00:00.530 --> 00:02.600 Welcome to your next quest. 00:02.900 --> 00:05.750 For this quest, I'd like you to make a hit message. 00:05.780 --> 00:11.090 Now, you can just use the same widget we're using for the damage number, but I want you to show an 00:11.090 --> 00:13.130 animated floating message. 00:13.130 --> 00:20.450 And we want to set the color and text based on blocked and critical hits for this message. 00:20.450 --> 00:27.830 So now when we hit these enemies with our fireballs, we should not only see a damage number, but a 00:27.860 --> 00:32.470 hit message as well, showing whether or not we got to create or a block. 00:32.480 --> 00:36.080 So pause the video and conquer this quest now. 00:39.230 --> 00:39.740 Okay. 00:39.740 --> 00:46.820 So for this quest, I'm going to go ahead and just close out some tabs here, except for my damage text 00:46.820 --> 00:48.920 and my damage text component. 00:49.250 --> 00:50.210 Actually, you know what? 00:50.210 --> 00:54.780 I don't think I need my damage text component either, so I'm going to close that. 00:54.800 --> 00:57.620 All I need is my damage text widget. 00:57.980 --> 01:02.260 Now I'm going to add text to this in addition to my number text. 01:02.270 --> 01:03.980 I'm going to add another text. 01:03.980 --> 01:11.240 So searching for text, I'm going to drag one just under my number text and I'm going to rename this 01:11.240 --> 01:19.190 to text, underscore hit message and right away I'm going to check is variable and I'm going to set 01:19.220 --> 01:25.280 horizontal and vertical alignment to center and scroll down and set justification to center. 01:25.400 --> 01:30.390 I'm going to give it an outline size of one and let's change the font. 01:30.410 --> 01:36.110 I'm going to change the font from Roboto to. 01:36.950 --> 01:39.040 Nanum Brush script. 01:39.050 --> 01:41.570 I kind of like this cartoony font. 01:41.600 --> 01:42.830 You may not like it. 01:42.830 --> 01:43.720 That's fine. 01:43.730 --> 01:52.400 Choose whatever font you like, and I'm going to set the size of the font to really big like about 52. 01:52.670 --> 01:54.290 So pretty big. 01:54.500 --> 01:56.780 And I'd like to animate this. 01:56.780 --> 02:05.030 So with my hit message text block selected, I'm going to click on animations and click on plus animation 02:05.030 --> 02:06.080 to make a new one. 02:06.080 --> 02:08.710 And I'm going to call this hit message Anim. 02:09.230 --> 02:11.810 I'm going to select that and let's add a track. 02:11.810 --> 02:14.810 I'd like to animate the Transform. 02:14.810 --> 02:19.490 So I'm going to select text hit message, add a track for the Transform. 02:20.150 --> 02:24.230 And for the transform at zero. 02:24.260 --> 02:30.290 I think I'd like my translation for Y to be a little bit higher. 02:30.290 --> 02:33.920 So I'm going to go into the negatives and not much higher. 02:33.920 --> 02:36.740 I'm going to only go up to about -20. 02:37.370 --> 02:40.430 Now at about 0.05 seconds. 02:40.460 --> 02:46.970 In other words, really, really quickly, I'm going to bring that y translation up, which I should 02:46.970 --> 02:47.510 specify. 02:47.510 --> 02:53.810 I'm going to make the Y value more positive, which means the text block itself is going to go down. 02:53.840 --> 02:56.780 I'm going to bring it to about 30. 02:57.020 --> 03:00.410 So that's going to make it go down a bit. 03:00.410 --> 03:05.930 But by about 0.15, I want it to go back to where it was -20. 03:06.380 --> 03:10.190 So what that's going to do is make it go down and back up. 03:10.190 --> 03:12.890 So it's going to kind of bounce a little bit. 03:12.920 --> 03:18.500 Now, after that, I'd like it to sort of float up a little bit and a lot slower. 03:18.500 --> 03:26.210 So I'm going to put a keyframe all the way out at one second and this will be a little higher, -35. 03:26.220 --> 03:28.140 So let's see what this looks like. 03:29.420 --> 03:30.050 There we go. 03:30.050 --> 03:32.900 So it kind of bounces and then floats up a little bit. 03:32.990 --> 03:37.040 But in addition to that, I like to animate this scale as well. 03:37.040 --> 03:42.290 I'd like to start it off with a scale of zero so that it's really, really tiny. 03:42.290 --> 03:43.720 You can't see it at all. 03:43.730 --> 03:53.360 So at 0.05 seconds, I'm going to put the scale larger, 1.5 perhaps for both X and Y. 03:54.690 --> 03:57.840 Now you do get the blurriness if we go above one. 03:57.840 --> 04:05.340 So what we could do instead is let's see what 52 is times 1.5. 04:05.340 --> 04:08.700 52 times 1.5 is 78. 04:08.730 --> 04:15.630 So what I can do instead is make this font size 78, which is a lot larger. 04:15.900 --> 04:22.560 And then in the animation, instead of scaling up to 1.5, we could just scale up to one. 04:23.520 --> 04:25.620 And then we don't get that blurriness. 04:25.650 --> 04:34.110 Now I'm going to scale it back down at about 0.15 and we'll bring it down to about 0.6 or so. 04:36.900 --> 04:43.110 So scaling up to one down to about 0.6 and then we're floating up. 04:43.320 --> 04:45.150 So let's see how that looks. 04:45.510 --> 04:47.280 Yeah, that's looking pretty good. 04:47.550 --> 04:50.540 Now we're floating up kind of slowly. 04:50.550 --> 04:56.970 And while that's happening, I think I'd like to fade out our render opacity. 04:57.150 --> 05:03.090 So I'm going to go from a render opacity of one all the way down to zero at the end here. 05:03.180 --> 05:05.970 So for that, I'm going to need another track. 05:06.570 --> 05:09.900 And I'm going to need to choose my render opacity. 05:10.530 --> 05:14.950 And we can go from one at the beginning to zero at the end. 05:14.970 --> 05:21.320 So I'm going to scroll all the way to the one second mark and enter a zero and let's see how that looks. 05:21.330 --> 05:23.910 And that's looking pretty good. 05:24.670 --> 05:32.290 So now that we have a hit message animation, what we need to do is play that animation so I can go 05:32.290 --> 05:37.690 into the graph section and into the event graph, and here we can see that on event construct, we're 05:37.690 --> 05:39.640 just playing the damage animation. 05:39.640 --> 05:43.290 We can also play the animation for our hit message. 05:43.300 --> 05:46.570 So I'm going to right click and call play animation. 05:47.250 --> 05:50.400 And I need to get my hit message animation. 05:50.400 --> 05:52.890 So hit message. 05:53.750 --> 05:55.190 Annum is what it's called. 05:55.190 --> 06:01.190 I'm going to get that, hook it in for the animation to play and hook up my play animation node. 06:01.220 --> 06:06.770 So now when this widget is constructed, we should get that animation played. 06:06.920 --> 06:11.990 So I can save all and test that out by coming over and causing damage. 06:11.990 --> 06:14.990 And there's my message. 06:16.800 --> 06:21.000 So now that we have the message showing, we need to set that message. 06:21.210 --> 06:30.840 Now, this widget has a function called update damage text and update damage Text can also update our 06:30.840 --> 06:32.700 hit message if we like. 06:32.700 --> 06:37.770 And our hit message is going to be different depending on our two Boolean values, right? 06:37.770 --> 06:42.750 So what we could do is we could create a function that could determine what that hit message should 06:42.750 --> 06:47.040 be based on these two booleans, just like we're doing for color. 06:47.160 --> 06:50.400 And then we can take our text hit message. 06:50.980 --> 06:54.550 And we can call, set, text. 06:55.920 --> 07:02.190 And pass in a text that we determine based on these two booleans. 07:02.190 --> 07:05.160 So I'd like a function that can return a text for us. 07:05.160 --> 07:08.610 So I'm going to click Add and add a new function. 07:08.970 --> 07:19.140 And this one will be get hit message based on block and create kind of a long function name. 07:19.140 --> 07:20.850 But it'll work. 07:20.850 --> 07:23.100 So we need two Boolean inputs. 07:23.100 --> 07:28.890 The first one will be is block, the second will be is crit. 07:31.200 --> 07:36.300 And we need an output of type F text or just text here in blueprint. 07:36.300 --> 07:39.300 And this one will be message. 07:41.110 --> 07:43.240 I'm going to break that pin for now. 07:43.240 --> 07:49.710 And what I'll do is just like what we did for our other get color based on block and crit. 07:49.720 --> 07:52.720 I'm going to promote message to a local variable. 07:52.750 --> 08:00.820 Call this out message, and then we'll set out message based on these values here. 08:01.710 --> 08:10.140 So I think what I can actually do is take a look at get color based on block and crit and we can copy 08:10.140 --> 08:11.820 these branches. 08:11.820 --> 08:14.700 They're the same exact branches that we want to use. 08:14.730 --> 08:16.380 So I'm going to copy that. 08:16.410 --> 08:21.000 Go back to our new function and paste those branches in here. 08:21.390 --> 08:28.640 And then all I need to do is promote is block and is crit to local variables, block and crit. 08:28.650 --> 08:29.730 So I'm going to do that. 08:29.730 --> 08:33.750 I'm going to take is block promote to local variable called block. 08:34.450 --> 08:36.650 And take is credit. 08:36.670 --> 08:42.010 I'm going to add a reroute node first and then promote a local variable called crit. 08:43.200 --> 08:44.340 Like so. 08:44.340 --> 08:46.170 And if I hit compile. 08:46.680 --> 08:50.760 Oh, it looks like I already have the setters here. 08:51.150 --> 08:53.310 I'm going to go ahead and remove those. 08:53.400 --> 08:54.480 Hook these up. 08:55.470 --> 08:57.660 And compiling. 08:57.660 --> 09:03.030 I get errors, but all I need to do is right click and replace block with block. 09:03.870 --> 09:06.480 Compile and that takes care of that. 09:06.480 --> 09:13.830 And right click on crit, replace crit with crit and I'll need to do that for all of them. 09:14.890 --> 09:16.300 Replace block with block. 09:16.300 --> 09:18.040 Replace crit with crit. 09:18.310 --> 09:20.140 So we'll do this real quick. 09:25.970 --> 09:30.880 Not sure how much time this saved me versus creating more work for me, but it's okay. 09:30.880 --> 09:33.450 It didn't take long to fix it. 09:33.470 --> 09:36.760 Looks like I accidentally copied this make slate color. 09:37.180 --> 09:43.240 Okay, so now we can set our crit message based on the situation. 09:43.240 --> 09:49.480 First we have block no crit, so I'm going to take my out message and set out message. 09:49.480 --> 09:54.730 And for block no crit, I'm just going to say block with an exclamation point. 09:55.630 --> 09:57.690 And we'll go ahead and set that here. 09:57.700 --> 10:01.000 And for crit no block I'm going to set it. 10:01.000 --> 10:06.040 I'm going to duplicate this node and say critical hit. 10:07.100 --> 10:13.370 Critical hit also with an exclamation point for block end credits. 10:13.640 --> 10:16.670 I'm going to say blocked. 10:17.120 --> 10:18.350 Critical hit. 10:20.270 --> 10:21.940 And for no block, no crit. 10:21.950 --> 10:24.320 I'm going to set this to an empty message. 10:25.190 --> 10:29.020 That way we won't get anything and I'll hook up true and false to this. 10:29.030 --> 10:31.790 And all of these can go into the return node. 10:31.820 --> 10:33.530 So we'll get that one. 10:33.710 --> 10:36.800 This one, this one. 10:36.800 --> 10:38.330 And the last one. 10:38.750 --> 10:40.370 I'm not going to bother cleaning it up. 10:40.370 --> 10:42.050 I think it looks fine. 10:42.050 --> 10:48.790 I'm going to compile and we'll go back to update damage text and we'll call our new function here. 10:48.800 --> 10:53.990 So making some room, I'm going to call get message. 10:54.230 --> 10:58.040 It's rather get hit message based on block and crit. 10:58.040 --> 11:05.210 And we're going to at this point, I think promote blocked and crit to local variables. 11:05.210 --> 11:11.090 So promote a local variable called block promote to a local variable. 11:11.980 --> 11:13.680 Called crit. 11:14.690 --> 11:16.610 We'll go ahead and use these now. 11:19.400 --> 11:25.160 And we'll pass those in instead of having lots of red lines. 11:30.710 --> 11:36.770 So doing a bit of organization, just something you kind of have to deal with in Blueprint, unfortunately. 11:37.310 --> 11:39.500 And we'll pass these two in. 11:41.570 --> 11:43.010 Here as well. 11:46.920 --> 11:52.290 Now, once we have that message, I'm going to go ahead and promote that to a local variable. 11:52.290 --> 11:55.050 So we're setting this text color, local variable. 11:55.050 --> 11:56.850 I'd like to do that right here. 11:58.320 --> 12:00.270 So we don't have too many nodes. 12:01.910 --> 12:03.470 And wires crisscrossing. 12:03.470 --> 12:08.930 And then right after getting the message, we'll promote message to a local variable called hit message. 12:11.450 --> 12:14.660 And then after that, we have the hit message. 12:15.300 --> 12:20.190 So doing it this way with a function is going to make it a lot easier. 12:20.220 --> 12:20.880 You know what? 12:20.910 --> 12:23.790 Damage should just be a local variable as well. 12:23.790 --> 12:27.930 Let's go ahead and promote to a local variable and we'll call this hit damage. 12:31.430 --> 12:32.660 Just because. 12:33.290 --> 12:37.730 We're dragging this one green wire all the way across. 12:37.730 --> 12:41.150 We could just have a local variable there and be done with it. 12:41.810 --> 12:42.470 There. 12:42.500 --> 12:43.700 That's much cleaner. 12:43.700 --> 12:44.900 I like that better. 12:45.920 --> 12:47.930 Couple reroute nodes and we're good. 12:49.680 --> 12:50.220 Cool. 12:50.220 --> 12:52.590 So now we have a hit message. 12:52.920 --> 12:59.380 And now that we have a hit message, we can set the text for our message right here. 12:59.400 --> 13:01.620 We can pass in hit message. 13:01.620 --> 13:05.580 And now our message should be set. 13:05.610 --> 13:07.230 We can test it out. 13:07.320 --> 13:08.700 Let's do some damage. 13:09.590 --> 13:12.770 Blocked critical hit block. 13:13.740 --> 13:20.350 Blocked, critical hits blocked, critical hit, and the numerical values are reflecting what we see. 13:20.370 --> 13:21.660 So that's looking good. 13:22.380 --> 13:23.220 Excellent. 13:23.250 --> 13:26.180 Now we're not setting its color, but that's pretty easy. 13:26.190 --> 13:27.330 We can take that text. 13:27.360 --> 13:28.260 Hit message. 13:29.370 --> 13:33.180 And we can call set color and opacity. 13:34.210 --> 13:36.430 And we already have the color. 13:36.430 --> 13:41.800 It's going to be the same color as what we're using for our damage number. 13:42.160 --> 13:43.780 It's called text color. 13:43.780 --> 13:46.990 So changing the color now we should see. 13:48.110 --> 13:49.280 Our message. 13:50.020 --> 13:51.460 In the correct color. 13:51.820 --> 13:55.600 And remember, if it's no block, no crit, we don't see a message. 13:56.110 --> 14:01.240 But we do see a message for blocked critical hit for block and for critical hit. 14:01.270 --> 14:01.630 Look at that. 14:01.630 --> 14:03.190 We're getting some critical hits. 14:03.220 --> 14:10.240 Now, this is actually adding quite a bit to the experience because as we're running around and killing 14:10.240 --> 14:17.740 enemies, these blocks and critical hits, this visual feedback here is actually a really good indicator 14:17.740 --> 14:19.870 that lets us know what's happening. 14:20.900 --> 14:24.860 So it really can add a lot to the combat experience. 14:24.950 --> 14:26.870 And now we. 14:28.510 --> 14:35.680 Actually have a system in place that we can use to really do anything we want with the information that 14:35.680 --> 14:38.430 we pass along in our effect context. 14:38.440 --> 14:47.050 So this is a really nice feature to have and I think that it's really going to go a long way in our 14:47.050 --> 14:47.780 game. 14:47.800 --> 14:55.450 Now update Damage text could be refactored into several smaller functions if we like, but the way I 14:55.450 --> 14:58.930 have it now, I'm actually pretty happy with how neat it looks. 14:58.930 --> 15:03.670 So organize it if you like, but I'm fine with our function. 15:03.670 --> 15:06.040 Everything's looking pretty nice. 15:06.070 --> 15:12.670 Our git hit message based on block and crit and get color based on block and crit are similar. 15:12.670 --> 15:19.000 So if you're so inclined, you could try to work on implementing the dry principle here in blueprint 15:19.000 --> 15:19.830 if you like. 15:19.840 --> 15:26.680 If you don't want repeat blueprint nodes like this, see if you can figure out how to make that happen. 15:26.680 --> 15:32.960 If you do share that in the discord because other students would very likely really like to see that. 15:32.990 --> 15:39.170 Now, one thing I'd like to do really quickly before wrapping up is I'm going to go into blueprints, 15:39.170 --> 15:44.330 ability system gameplay abilities and go to hit React. 15:44.330 --> 15:50.420 And I'd like to just change my instancing policy to instance per execution. 15:50.420 --> 15:50.840 Why? 15:50.870 --> 15:58.310 Because this is a lightweight gameplay effect and I'd like it to definitely play my hit React montage 15:58.310 --> 16:05.540 every time a fireball hits so that way I can fire rapidly and we can always see that hit react. 16:09.200 --> 16:09.890 Awesome. 16:09.890 --> 16:11.780 We got our game play, mechanics working. 16:11.780 --> 16:13.250 Things are looking great. 16:13.280 --> 16:14.900 Congratulations. 16:14.900 --> 16:16.850 And I'll see you in the next video.