WEBVTT 00:06.890 --> 00:08.040 Welcome back. 00:08.060 --> 00:11.150 So our project is starting to come along really well. 00:11.180 --> 00:19.430 We're starting to make lots of connections between causing damage and having effects and even taking 00:19.430 --> 00:20.870 care of enemy death. 00:20.900 --> 00:26.330 One of the most important things I think, in an RPG is visual feedback. 00:26.330 --> 00:30.020 When it comes to damage, we'd like to see how much damage we're causing. 00:30.080 --> 00:35.330 And floating text is a pretty good way to show that damage. 00:35.360 --> 00:41.090 It's a pretty common way to do it and we're going to do that in this course project, and that means 00:41.090 --> 00:44.360 we're going to need some kind of widget to show to the screen. 00:44.360 --> 00:51.260 It's going to be relatively simple, just a number, perhaps we'll add a message to it as well to show 00:51.260 --> 00:53.570 if we have a blocked hit or a critical hit. 00:53.570 --> 00:59.690 But for now, we're just going to get a number on the screen and that means we need to create a widget. 00:59.690 --> 01:05.450 So we're going to go to Blueprints UI, and right here in the UI, we're going to create a new folder 01:05.450 --> 01:07.620 called Floating Text. 01:07.620 --> 01:15.000 And I'd like to make our floating text widget here and this can be a simple user widget. 01:15.000 --> 01:18.330 It doesn't need a widget controller or anything like that. 01:18.330 --> 01:21.900 This is just going to be a very basic user widget. 01:21.900 --> 01:26.790 So we're going to go to user interface Widget Blueprint, we're going to choose just user widget for 01:26.790 --> 01:32.850 this, select that and this will be BP underscore damage text. 01:33.410 --> 01:36.170 So we have some floating text for damage. 01:36.170 --> 01:40.410 And this is again going to be a very simple widget. 01:40.430 --> 01:42.350 It's just going to need a number. 01:42.350 --> 01:48.530 Now, I'm going to have an overlay here just because, you know, we may have more text later. 01:48.650 --> 01:53.390 Spoiler We are going to have more text later, but for now we're just going to have the overlay and 01:53.390 --> 01:54.230 text. 01:54.530 --> 02:01.250 So we're going to add text to the overlay like so and I'm going to rename this text to text underscore 02:01.280 --> 02:05.300 damage and check is variable. 02:06.000 --> 02:09.750 Now I'd like this overlay to have a desired size. 02:09.780 --> 02:10.920 A custom size. 02:10.920 --> 02:14.880 So I'm going to change it from fill screen to custom. 02:14.880 --> 02:18.560 And that way we can set this to the size that we desire. 02:18.570 --> 02:24.180 And I'm going to go ahead and take that text and change it to a number. 02:24.180 --> 02:29.220 I'm going to put it to 99 so we can see what it looks like with two digits. 02:29.370 --> 02:37.680 I'm going to set its horizontal alignment to center and its vertical alignment to center and change 02:37.680 --> 02:38.520 its font. 02:38.550 --> 02:46.440 Now I'm going to choose Amarant regular with an outline size of one and a font size of, let's say, 02:46.470 --> 02:47.490 26. 02:47.820 --> 02:51.590 We can always tweak that later, but that's basically it. 02:51.600 --> 02:53.670 We have damage text. 02:53.700 --> 03:01.020 Now what I'd like for this damage text is to play an animation whenever it pops up above an enemy's 03:01.020 --> 03:01.590 head. 03:01.770 --> 03:03.840 So we're going to add a new animation. 03:03.840 --> 03:10.390 We'll click on animation, click plus animation, and this will be called damage animation or just Damage 03:10.420 --> 03:11.140 Anim. 03:11.410 --> 03:14.050 I'm going to select that and add a track. 03:14.230 --> 03:18.280 And the track can be for the Transform. 03:18.280 --> 03:21.550 So we're going to choose track text damage. 03:21.550 --> 03:29.500 That's the widget we want a track for click plus track and add a transform track and we can alter the 03:29.500 --> 03:30.850 transform here. 03:31.090 --> 03:40.600 Now at Frame one, I'd like my transform to have a translation of zero for the X, but I'd like to move 03:40.600 --> 03:45.550 it up a little bit in the Y, which means going negative in the Y. 03:45.580 --> 03:50.440 I'd like to go up to perhaps 80, 84, 83. 03:50.470 --> 03:56.770 We'll make it -84, not positive because then it'll go the other way. 03:56.920 --> 04:01.720 And then I'd like to move a little bit to the right. 04:02.080 --> 04:05.560 So I'm going to move to about 0.2 seconds. 04:05.560 --> 04:10.570 And for the X, I'm going to set this to about 90. 04:10.930 --> 04:13.780 So that way we'll move to the right a little bit. 04:14.590 --> 04:23.320 And we're going to keep moving to about 0.4, at which point I'd like to set my X a little bit higher, 04:23.350 --> 04:26.500 perhaps 111 112. 04:27.100 --> 04:30.810 And I'd like my Y to be a little bit higher. 04:30.820 --> 04:31.630 Not much. 04:31.630 --> 04:34.570 About 94, -94, that is. 04:35.240 --> 04:41.600 And we'll go a little bit farther to about point 70 or so. 04:42.080 --> 04:53.090 And the Y is going to keep going up, up and up probably around 200, maybe even to 20 to 25. 04:53.090 --> 04:55.460 We'll use -220. 04:55.700 --> 04:57.770 So we're going to go up to there. 04:58.040 --> 05:06.350 And at this point we can start going the other way for the X, we can bring it on down a little, I'd 05:06.350 --> 05:09.230 say about 288 or 90. 05:09.470 --> 05:17.060 Now, finally, I think I'd like to end at about one second or so where the X continues to go to the 05:17.060 --> 05:23.030 left, perhaps even way off to the left, maybe -100 or so. 05:25.130 --> 05:28.220 And the Y can also keep going up. 05:28.250 --> 05:30.650 We'll put it up to about -300. 05:31.780 --> 05:36.040 So we're kind of going up and then back to the right a little bit. 05:36.040 --> 05:38.020 So that's kind of what it looks like. 05:38.770 --> 05:40.300 Something like that. 05:40.420 --> 05:49.540 So if I open the graph view and expand these dropdowns to translation, here's what our X looks like 05:49.540 --> 05:51.960 and here's what our Y looks like. 05:51.970 --> 05:53.410 And that's looking pretty good. 05:54.550 --> 06:00.390 Now, I'd also like to animate the size or the scale. 06:00.400 --> 06:05.290 So if I'm going to animate the scale, I need to expand the scale here. 06:05.890 --> 06:13.690 And I'd like to start at a scale of one, but right away, 0.1 seconds in, I'd like to scale up by 06:13.690 --> 06:16.090 twice or maybe 2.25. 06:17.710 --> 06:21.970 So we're going to set X and Y for the scale, the 2.25 right here. 06:22.270 --> 06:24.430 It's going to blow up a little bit. 06:25.920 --> 06:31.200 But it's going to go back down to one almost as fast or just as fast as it blew up. 06:31.200 --> 06:34.740 So at point two, we're going to put the scale back down to one. 06:34.740 --> 06:38.640 So this way it kind of bubbles out a little bit like so. 06:39.650 --> 06:42.480 And then we can just let it stay at one. 06:42.500 --> 06:45.290 It could even get smaller if we wanted to. 06:45.320 --> 06:54.110 We can go all the way to one second and we can bring the size down to perhaps 0.4 for X and Y. 06:55.240 --> 06:56.970 So let's see how that looks. 06:56.980 --> 06:58.900 And that's looking pretty good. 06:59.050 --> 07:05.020 Now, finally, the last thing I'd like to do is fade out our render opacity. 07:05.200 --> 07:09.880 So I'm going to add another track, and this one will be for render opacity. 07:10.090 --> 07:11.350 Here it is. 07:11.350 --> 07:15.400 And we'll start at a render opacity of one. 07:15.400 --> 07:21.610 And by the time we get to one second, we'll bring that render opacity down to zero. 07:22.060 --> 07:25.180 So it's going to fade out ever so slightly. 07:25.180 --> 07:29.980 And now we have a nice looking animation for the number effect. 07:30.010 --> 07:31.690 Now that's looking pretty good. 07:32.140 --> 07:34.060 So we have a widget, right? 07:34.060 --> 07:38.860 All we have to do now is add that widget to the viewport and we'll get to that. 07:38.860 --> 07:44.980 In the meantime, though, I'm going to take this widget and go into its graph and in event construct 07:44.980 --> 07:50.920 when the game starts, or rather when this widget is created, I'd like to play that animation. 07:51.220 --> 07:55.510 Now that animation is called Damage number. 07:55.510 --> 07:56.560 No, what's it called? 07:56.560 --> 07:57.130 Let's go back. 07:57.160 --> 07:59.280 It's damage anim. 07:59.290 --> 08:04.420 So I'm going to right click, damage anim and we'll get damage anim. 08:04.420 --> 08:07.180 We'll drag off and we'll play the animation. 08:08.480 --> 08:09.740 So event construct. 08:09.740 --> 08:13.250 We're playing the animation first thing, and that's all we're doing. 08:13.250 --> 08:16.400 That's all we need to care about with this widget. 08:16.430 --> 08:20.570 So how are we going to add this widget to the viewport? 08:20.600 --> 08:22.220 Well, I'd like to create one. 08:22.220 --> 08:28.450 I'd like to actually create a widget component and attach it to the enemy and then play the animation. 08:28.460 --> 08:34.730 So if we're going to do that, I'm going to need a widget component and I'd like to make the Cplusplus 08:34.730 --> 08:42.410 class for a widget component because I'd like it to have the capability to set the damage text on this 08:42.410 --> 08:43.280 widget. 08:43.490 --> 08:50.840 So I'm going to make a widget component capable of setting the damage text on its floating damage widget 08:50.870 --> 08:51.680 object. 08:51.860 --> 08:56.230 So for that I'm going to create a new Cplusplus class. 08:56.240 --> 09:02.240 I'm going to go to C plus plus classes, Aura Public and UI and we'll go into widget. 09:02.270 --> 09:07.320 It'll go into the widget folder here and we're going to create a new class. 09:07.340 --> 09:12.930 This is going to be a widget component, so I'm going to right click new C plus plus class. 09:13.080 --> 09:17.130 All classes and we're going to choose widget component. 09:18.450 --> 09:19.860 We're going to choose that. 09:19.860 --> 09:24.480 And here in the widget folder, we'll add our new widget component. 09:24.480 --> 09:30.510 And I'm going to call this damage text component and create class. 09:31.270 --> 09:39.310 So let's go ahead and close the editor and we'll open our new widget component under UI widget, and 09:39.310 --> 09:41.410 it's called Damage Text component. 09:41.530 --> 09:48.070 Now, the reason I wanted this Cplusplus class is simply for one thing, and that's that I'd like a 09:48.100 --> 09:54.790 C plus plus function on this class so that if we create one of these from C plus plus, we can call 09:54.790 --> 09:55.840 that function. 09:55.990 --> 10:00.310 What we do in response to calling it I want to handle on the blueprint side. 10:00.550 --> 10:09.400 So I'm going to make a public section and a new function called set damage text and set damage. 10:09.400 --> 10:12.250 Text is going to be a blueprint implementable event. 10:12.250 --> 10:16.570 So we're going to make it blueprint implementable event and its new function. 10:16.570 --> 10:20.710 And I'll go ahead and make it Blueprint callable while we're at it and set damage. 10:20.710 --> 10:23.890 Text can take in a float called damage. 10:23.890 --> 10:26.040 And for now that's all it's going to take. 10:26.050 --> 10:33.820 So we'll implement this in the blueprint for this widget component, but I'd like to spawn this from 10:33.850 --> 10:41.830 C plus plus and call this function so that we can set the widgets text value And the widget that this 10:41.830 --> 10:44.830 component will have is going to be that floating text widget. 10:44.860 --> 10:50.110 So now that we have this function, we can once again compile and launch our editor. 10:50.820 --> 10:53.160 And we can create a blueprint based on this. 10:56.140 --> 11:01.590 So back in the editor, I'll go ahead and open my damage text and browse to it. 11:01.600 --> 11:05.490 So I'm going to right click and make my new widget component. 11:05.500 --> 11:11.590 So new blueprint, we're going to search for damage text component. 11:11.770 --> 11:18.370 We'll choose that and we'll call this BP damage text component. 11:18.820 --> 11:23.800 So this is not a widget blueprint, it's a widget component blueprint. 11:24.010 --> 11:30.400 And this widget component blueprint has a widget object, much like a static mesh component, has a 11:30.400 --> 11:34.930 static mesh object or a skeletal mesh component, has a skeletal mesh object. 11:34.930 --> 11:37.780 The widget component has a widget object. 11:37.780 --> 11:42.370 We can search for widgets and we have widget class. 11:42.820 --> 11:47.410 We need to set that and we're going to set it to WP damage text. 11:47.830 --> 11:52.300 So WP Damage choosing damage text. 11:52.330 --> 11:53.260 There we go. 11:53.260 --> 12:00.230 And now we have a widget component and if we spawn this, it's going to have its own widget and that's 12:00.230 --> 12:06.580 this WP damage text which whenever it gets constructed, plays its animation. 12:06.590 --> 12:14.210 Now I'd also like to implement that blueprint implementable event set damage text because when I spawn 12:14.210 --> 12:17.030 this in C plus plus, I'm going to call this right away. 12:17.120 --> 12:20.120 So I'm going to implement it here, set damage text. 12:20.120 --> 12:26.570 And what I'd like to do is get my user widget object using get user widget object. 12:27.220 --> 12:28.900 This returns a user widget. 12:28.930 --> 12:33.520 We're going to cast this to the WP damage text. 12:35.220 --> 12:39.880 And from the damage text, we can set the text on the damage text. 12:39.900 --> 12:42.000 We can set the text for damage. 12:42.330 --> 12:47.730 So here on the damage text widget, let's just make a nice little setter function for that. 12:47.730 --> 12:54.750 So we'll make a function and we're going to call this update damage text and this can just take in a 12:54.750 --> 13:00.810 float for the damage, but we can pass in other parameters later, such as information for if it was 13:00.810 --> 13:06.000 a critical hit, then we might want to change the color of the text based on that. 13:06.000 --> 13:06.780 ET cetera. 13:06.780 --> 13:13.050 But for now it's just going to have an input called damage, and all it's going to do is set the text 13:13.050 --> 13:14.760 right here, text damage. 13:14.760 --> 13:16.980 So we're going to take that text damage. 13:17.280 --> 13:24.330 We're going to call, set, text on it the function, and we're going to pass in the text so we can 13:24.330 --> 13:33.530 take our damage and use a to text node to text float and we can decide how many digits. 13:33.540 --> 13:39.580 Now, if this is going to have no fractional digits, then we're going to set minimum fractional digits 13:39.580 --> 13:44.950 to zero and maximum fractional digits to zero and then we'll just have an integer. 13:45.640 --> 13:48.670 So now we have an update, damage, text function. 13:48.670 --> 13:57.580 And on our component, every time we call event set damage text after casting to a damage text, we're 13:57.580 --> 14:03.220 going to call, update, damage, text and pass in that damage amount. 14:05.160 --> 14:06.570 Like so. 14:06.990 --> 14:11.250 So just tidying up this bit of blueprint logic here. 14:11.790 --> 14:13.650 Okay, that looks good. 14:13.800 --> 14:14.790 Excellent. 14:15.060 --> 14:23.040 Okay, so now that we have a damaged text component, which is a widget component, we plan on spawning 14:23.040 --> 14:28.530 or creating one of these from Cplusplus and calling set damage text on it. 14:28.530 --> 14:34.350 And when that happens, it's going to get its own user widget object, which is a damage text. 14:34.380 --> 14:38.760 We're going to cast to that class and call update damage text on it. 14:38.790 --> 14:44.790 That's going to set its text right here, which has a default value of 99. 14:44.790 --> 14:47.430 It's going to set it to whatever we set it to. 14:47.460 --> 14:53.820 When we call this function, I can go ahead and collapse that node there and we should see this on the 14:53.820 --> 14:56.550 screen as soon as we create one. 14:56.550 --> 14:59.820 And that's what we'll do in the next video. 14:59.940 --> 15:03.630 So great job in this video and I'll see you in the next one.