WEBVTT 00:07.100 --> 00:07.730 All right. 00:07.730 --> 00:08.570 Welcome back. 00:08.570 --> 00:10.460 Now we have these widgets. 00:10.460 --> 00:13.400 We're showing them on the screen when we pick something up. 00:13.400 --> 00:15.080 But they just stay there. 00:15.080 --> 00:16.280 They don't go away. 00:16.280 --> 00:20.600 And I'd kind of like to animate them, make them look a little bit nicer. 00:21.570 --> 00:29.070 So we can go into our WPP Effect message and make an animation and we can play that animation and we 00:29.070 --> 00:30.910 have a perfect place to play it. 00:30.930 --> 00:34.200 Our function where we set the image and the text. 00:34.230 --> 00:41.470 Now, I do want the message to be sort of required, but I really don't care about the image. 00:41.490 --> 00:44.190 If the image is null, I'm okay with that. 00:44.190 --> 00:52.560 So I think I'd like to be able to call this with an empty or a null image and just show the text without 00:52.560 --> 00:54.560 the image if we want to do that. 00:54.570 --> 00:59.280 So what I'll do is take the image input and just check is valid. 01:00.350 --> 01:03.620 And if it is valid, then we'll set the brush. 01:03.620 --> 01:05.390 If it's not valid, we won't. 01:06.230 --> 01:13.550 Now for the animation, though, I'm going to come back into the designer tab and we can animate this 01:13.550 --> 01:15.190 any way we want, really. 01:15.200 --> 01:21.440 In fact, we could even animate the text separately from the image if that's something we want to do. 01:21.470 --> 01:23.930 So let's make our animation. 01:23.930 --> 01:32.840 I'm going to go to animations, click plus animation, and call this message animation and select that. 01:32.840 --> 01:36.500 And with our message animation selected, I'm going to add a track. 01:36.500 --> 01:41.990 And for the track I'm going to choose my text message. 01:42.140 --> 01:43.880 Now be careful. 01:43.880 --> 01:48.860 We can choose basically any widget and the boxes and everything else. 01:48.860 --> 01:50.180 They're all widgets. 01:50.210 --> 01:57.710 We want to animate this text message and I'm going to add a track for it and the track is going to be 01:57.710 --> 01:59.570 for its transform. 01:59.570 --> 02:06.900 So I'd like to take Transform and really we just have to set some keys and decide how we want this to 02:06.900 --> 02:07.560 look. 02:07.560 --> 02:14.490 So if we're going to be picking up multiple pickups very quickly, then I think it might be a good idea 02:14.490 --> 02:21.210 to move the text up, make it slow down a little bit, and then fade it off to the side. 02:21.210 --> 02:23.640 That's kind of what I want it to look like. 02:24.000 --> 02:30.300 So first I'm going to go up by probably 0.25 seconds or so. 02:30.330 --> 02:37.770 We can always experiment with this, and I'm going to expand translation and drag the Y down because 02:37.770 --> 02:45.630 going up is the negative y direction and I'm going to go up to about here perhaps, and that's going 02:45.630 --> 02:46.560 to give us a key. 02:46.560 --> 02:48.090 And let's just see what that looks like. 02:48.090 --> 02:53.040 I'm going to press the spacebar and that brings it up to about there. 02:53.490 --> 03:01.560 If you want it faster, just move that key back a bit and I can hold control and scroll in and right 03:01.560 --> 03:03.150 click to drag around. 03:03.150 --> 03:06.960 If I want finer control, I can put it to 0.1 seconds. 03:07.580 --> 03:09.150 See what this looks like. 03:09.170 --> 03:10.820 So that's pretty fast. 03:11.150 --> 03:17.480 And after 0.1 seconds, I can start to move it to the side. 03:17.480 --> 03:21.170 I'm going to take my X and move it over to here. 03:21.410 --> 03:23.000 That'll give me a key for that. 03:23.000 --> 03:24.800 And let's see what that looks like. 03:24.920 --> 03:27.140 It's a little bit stiff. 03:29.160 --> 03:36.420 So right about here, I'm going to take my X and put it back to zero so that way it doesn't start going 03:36.450 --> 03:38.760 to the left until it reaches up there. 03:38.760 --> 03:40.530 So let's see how that looks. 03:43.470 --> 03:44.910 Still kind of stiff. 03:45.390 --> 03:48.450 So I can select my X keyframes. 03:48.450 --> 03:54.300 These two right click on them and they're already cubic auto. 03:54.300 --> 03:56.010 But I'd like to take a look at their graphs. 03:56.010 --> 04:02.910 So I'm going to click right here on the graph, expand the transform, select the X, and here's what 04:02.910 --> 04:03.930 it looks like. 04:04.080 --> 04:06.030 I'd like this to transition a little slower. 04:06.030 --> 04:13.020 So I'm going to take this keyframe here and just angle it down like this and I'm going to move this 04:13.020 --> 04:17.580 window off the screen and I'm going to play the animation, see what it looks like. 04:17.910 --> 04:20.280 Okay, so that looks a little bit different. 04:20.280 --> 04:25.230 I'm going to click the no looping turn it into loop playback range so I can loop this. 04:26.170 --> 04:27.700 So it's looking better. 04:27.700 --> 04:28.530 I think. 04:28.540 --> 04:30.580 I like how the X is behaving. 04:30.580 --> 04:32.680 Let's alter the Y a little bit. 04:32.680 --> 04:36.340 So I'm going to click on Y and here's what it looks like. 04:36.340 --> 04:40.810 And remember, Negative is going up in the screen. 04:40.810 --> 04:43.630 So let's see how this looks. 04:44.800 --> 04:50.690 I'm actually not too mad at it, but I'm going to play with the shape of the curve here. 04:50.710 --> 04:53.140 In fact, I can let it overshoot a little bit. 04:53.710 --> 04:55.030 Let's see how that looks. 04:58.220 --> 04:59.660 I kind of like that overshoot. 04:59.660 --> 05:01.370 It looks like it bounces a little. 05:01.790 --> 05:03.920 We can even make it overshoot more. 05:05.130 --> 05:09.480 We just have to be careful that we don't make it too jarring. 05:09.480 --> 05:10.080 Right. 05:10.080 --> 05:12.020 So that looks pretty cool. 05:12.030 --> 05:12.810 I like it. 05:12.810 --> 05:16.500 And if we want some damping, we can have damping as well. 05:16.530 --> 05:19.410 We can right click, we can add a key. 05:19.440 --> 05:24.030 We have to do it on one of these vertical lines, of course. 05:24.030 --> 05:30.900 But if we add a key, then we can get a sort of bit of oscillation going here. 05:30.900 --> 05:32.670 That's kind of like damping. 05:32.670 --> 05:39.750 I can add another key here, like so I can move this up a little bit, move this down a little. 05:39.750 --> 05:42.690 But we should always be looking at what it looks like. 05:42.690 --> 05:49.410 If that's a little bit too jarring, we can always just remove those keys instead, just have this one. 05:49.410 --> 05:53.010 And if we don't even like that, we can change that as well. 05:53.250 --> 05:54.750 So that looks okay. 05:54.750 --> 05:58.290 We'll see how we feel about that on the screen when we play it. 05:58.290 --> 05:59.580 So why don't we do that now? 05:59.580 --> 06:05.770 I'm going to go ahead and close this little window, compile and save and let's go into the graph now. 06:05.770 --> 06:08.650 We call this message animation. 06:08.650 --> 06:13.240 So back here in the graph, we're going to right click type message animation. 06:13.390 --> 06:16.030 We're going to get that and we're going to play this. 06:16.030 --> 06:18.910 So I'm going to use play animation. 06:19.470 --> 06:21.030 And hook this right up. 06:21.030 --> 06:26.460 But set brush here only happens if the image is valid. 06:26.460 --> 06:31.650 So we also need the is not valid hooked up as well. 06:32.220 --> 06:34.170 So we have to be careful about that. 06:34.170 --> 06:41.550 So now that we're playing the animation, we know that our animation takes about maybe half a second. 06:41.670 --> 06:48.450 So after half a second, I would like to destroy the widget, which means I'm going to want a custom 06:48.450 --> 06:55.110 event as we can't have a delay right here inside of a function, but I can make a custom event. 06:56.800 --> 06:59.500 And I can call this destroy delay. 06:59.830 --> 07:07.150 And from here, I can use a delay node with 0.5 seconds or so. 07:07.300 --> 07:12.130 And I can use remove from parent. 07:15.970 --> 07:20.950 And we can just call destroy DeLay right here after we play the animation. 07:23.800 --> 07:24.610 Now. 07:24.610 --> 07:27.160 We do want it to fade away as well. 07:27.160 --> 07:30.260 I don't want it to just go over to here and then disappear. 07:30.280 --> 07:31.810 That's what it's going to look like. 07:31.810 --> 07:34.150 But let's just try it out anyway. 07:34.150 --> 07:40.360 I'm going to save all and press play and grab a potion and there it goes. 07:42.390 --> 07:45.090 It's a little fast, I think. 07:46.870 --> 07:48.250 So we can adjust that. 07:48.250 --> 07:49.870 But it's working. 07:49.870 --> 07:58.270 And to prove that this is being destroyed, we can go into our event graph and use event destruct. 07:58.820 --> 08:03.290 This gets called when it's destroyed and we can print a string that says hello. 08:05.110 --> 08:06.210 And there's that. 08:06.220 --> 08:06.640 Hello. 08:06.640 --> 08:11.980 So we know that it's being destroyed, so there's no memory leaks or anything like that. 08:13.060 --> 08:13.420 Okay. 08:13.420 --> 08:19.320 Well, our animation clearly needs some work, so for one, it's too fast. 08:19.330 --> 08:21.550 I'd like to make it a little slower. 08:21.550 --> 08:28.420 So I'm going to take the last key and bring it out to probably out there. 08:28.420 --> 08:36.280 We see that our X is going to the left there, so we're going to want to make some adjustments to the 08:36.280 --> 08:36.850 graph. 08:36.850 --> 08:39.490 I'm going to bring these keys out. 08:42.010 --> 08:48.190 And then I'm going to go to the graph view and open up translation. 08:48.190 --> 08:51.760 Here's the X, I don't want it to go down. 08:51.760 --> 08:53.430 That's going to the left. 08:53.440 --> 09:01.510 So what I'll do is just adjust this a bit like that and here's the Y, it's going up and then back down. 09:01.510 --> 09:03.250 It's a little extreme. 09:03.250 --> 09:07.810 So let's go ahead and calm this curve down a little bit. 09:11.970 --> 09:13.310 That looks a little better. 09:13.320 --> 09:16.320 Let's see how it looks here in the viewport. 09:19.120 --> 09:20.020 That's better. 09:20.020 --> 09:23.860 And remember, our destroy delay is 0.5 seconds. 09:23.860 --> 09:25.500 So we can come back in here. 09:25.510 --> 09:27.700 We can make it say one. 09:30.100 --> 09:31.390 Try it out. 09:34.140 --> 09:34.890 That's better. 09:34.890 --> 09:37.230 And we see that it gets destroyed right there. 09:38.660 --> 09:39.800 But that's fine. 09:39.800 --> 09:46.670 We can fade it out because we know that our animation is 0.85 seconds. 09:46.670 --> 09:51.350 So really we can make the delay 0.85 before we destroy it. 09:51.830 --> 09:54.290 But we can also fade it out by that time. 09:54.290 --> 10:02.540 So let's go to our animation and for our text message, we're going to add a new track and this will 10:02.540 --> 10:04.730 be for render opacity. 10:05.000 --> 10:11.360 And for this we're going to start it off at one and we're going to fade it down to zero. 10:11.360 --> 10:13.070 So we'll put it at zero here. 10:16.210 --> 10:19.930 And we just have to make sure that it starts at one. 10:21.720 --> 10:24.810 And stays at one for a while. 10:25.020 --> 10:27.360 So let's go ahead and press play. 10:28.920 --> 10:29.900 And there we go. 10:29.910 --> 10:30.990 It fades out. 10:35.060 --> 10:36.070 Still a little fast. 10:36.070 --> 10:43.210 I think this kind of thing takes a little tweaking, but I'm going to control mouse wheel to zoom out 10:43.210 --> 10:47.800 and let's put it all the way up to perhaps a second. 10:47.800 --> 10:49.090 0.25. 10:52.560 --> 10:58.110 Because we really want our players to have the opportunity to read it. 10:59.200 --> 11:04.900 And going back into the graph view, I just want to make sure it doesn't go to the left at all. 11:07.670 --> 11:09.830 So making that look good. 11:10.550 --> 11:16.820 Here's our render opacity and we can also play with the curve here as well. 11:23.070 --> 11:24.440 That's looking pretty good. 11:24.450 --> 11:26.700 I think that's as much as I'd like to play with it. 11:26.700 --> 11:31.380 And for the image, we can animate this as well. 11:31.590 --> 11:36.690 And I'd like it to be on the same animation as our text. 11:37.830 --> 11:40.590 That way we only have to play one animation. 11:40.800 --> 11:44.160 So I'm going to collapse that for the text message. 11:44.160 --> 11:47.160 We're going to add a new track for Image icon. 11:47.160 --> 11:49.530 And for image Icon. 11:49.530 --> 11:56.760 We'll add a track for the Transform and we'll mess with the translation a bit. 11:56.760 --> 11:58.650 So what would we like to do? 11:58.650 --> 12:05.010 Well, let's see if I click on text message and expand it. 12:05.010 --> 12:11.430 I see that up to about here 0.25 seconds is where our text goes up. 12:11.550 --> 12:20.370 So for the image at 0.25 seconds, I want to take my Y and move it to about here. 12:21.370 --> 12:24.100 And then as our message goes that way. 12:25.720 --> 12:29.740 We can also make our potion move as well. 12:29.770 --> 12:31.370 Maybe you can have it go the other way. 12:31.390 --> 12:32.290 Who knows? 12:32.440 --> 12:35.900 It might look a little funny, so we'll see how it looks. 12:35.920 --> 12:37.240 Let's press play. 12:37.660 --> 12:43.240 It looks a little funny, so I'm going to put a keyframe of zero for the x here. 12:45.750 --> 12:47.880 And we'll see how this looks. 12:51.150 --> 12:52.860 Nope, not feeling it. 12:52.860 --> 12:54.480 I'm going to have it go the other way. 12:54.480 --> 12:58.890 I'm going to have it go to the right with the message. 13:22.720 --> 13:26.800 That looks okay, but I'd like our potion to fade out a lot faster. 13:26.800 --> 13:29.620 So I'm going to fade it out probably by about here. 13:30.500 --> 13:40.670 So let's add to our image icon, another track for color and opacity, and we'll fade this alpha out 13:40.670 --> 13:43.070 pretty quickly, probably by here. 13:49.160 --> 13:54.110 And it's wanting me to have keys right here at 0.25. 13:54.110 --> 13:58.220 I'm going to move those to the beginning so it fades out like that. 13:58.220 --> 13:59.570 Let's see how that looks. 14:03.610 --> 14:05.470 No, that's too fast. 14:06.960 --> 14:15.180 So I do want it to actually be all ones at 0.25 and then fade down to zero over. 14:17.520 --> 14:19.200 This much time, perhaps. 14:28.530 --> 14:30.450 And then this one could have some bobbing. 14:30.450 --> 14:33.210 You know, this is just artistic at this point. 14:33.210 --> 14:36.000 It's just kind of making some tweaks. 14:36.000 --> 14:39.840 And how we do this doesn't really matter that much. 14:39.870 --> 14:45.390 I'm going to go to Graph View, though, and for the image icon Transform translation, we'll go to 14:45.390 --> 14:47.820 the Y part of this. 14:49.780 --> 14:53.710 And it's going to go up faster. 14:54.610 --> 14:56.860 I'd like it to overshoot a bit. 15:00.130 --> 15:02.500 And this one can bounce a little bit. 15:02.500 --> 15:06.160 I'm going to full screen it and add a couple keys. 15:09.780 --> 15:12.270 And give it some dampened oscillation. 15:34.420 --> 15:39.220 Well, I'm not getting that bounce in the game, but that's okay. 15:39.670 --> 15:46.720 I think I'm done messing with this for now because really, you could tweak these things all day. 15:47.320 --> 15:50.410 So get it looking how you'd like it. 15:53.730 --> 15:57.960 Just going to move this text down at the end just a little. 16:02.230 --> 16:02.540 Oop. 16:02.710 --> 16:05.260 Whatever I did was not good. 16:06.860 --> 16:07.370 Okay. 16:07.370 --> 16:09.890 Just making sure it's not completely broken. 16:09.920 --> 16:11.300 Oh, now it's bouncing. 16:17.920 --> 16:19.180 That looks pretty good. 16:19.300 --> 16:19.690 All right. 16:19.690 --> 16:25.600 I'm just going to take a couple seconds because I like the bounce on the icon, but it looks weird that 16:25.600 --> 16:27.640 the text doesn't bounce as well. 16:27.640 --> 16:30.760 So I'm going to just give it a little bit of bounce. 16:38.930 --> 16:41.930 So just adding a key here and a key here. 16:42.710 --> 16:45.530 And making it bounce just a little bit. 16:54.400 --> 16:55.790 A little more than that. 17:04.760 --> 17:05.270 Okay. 17:05.270 --> 17:07.130 And I'm officially done messing with it. 17:07.130 --> 17:12.060 So I'm going to go ahead and call that a day for this video. 17:12.080 --> 17:19.970 So we now have a message showing on the screen and it's data driven with our data table. 17:19.970 --> 17:21.340 So that's great. 17:21.350 --> 17:28.880 If we really need to change the draw size and dimensions of one of our icons, we can subclass the widget 17:28.880 --> 17:30.470 and change it out here. 17:30.650 --> 17:33.140 And so it's all looking pretty nice. 17:33.140 --> 17:34.940 So excellent job. 17:34.940 --> 17:37.310 And we'll continue in the next video. 17:37.340 --> 17:38.450 I'll see you soon.