All right.
Welcome back.
Now we have these widgets.
We're showing them on the screen when we pick something up.
But they just stay there.
They don't go away.
And I'd kind of like to animate them, make them look a little bit nicer.
So we can go into our WPP Effect message and make an animation and we can play that animation and we
have a perfect place to play it.
Our function where we set the image and the text.
Now, I do want the message to be sort of required, but I really don't care about the image.
If the image is null, I'm okay with that.
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
the image if we want to do that.
So what I'll do is take the image input and just check is valid.
And if it is valid, then we'll set the brush.
If it's not valid, we won't.
Now for the animation, though, I'm going to come back into the designer tab and we can animate this
any way we want, really.
In fact, we could even animate the text separately from the image if that's something we want to do.
So let's make our animation.
I'm going to go to animations, click plus animation, and call this message animation and select that.
And with our message animation selected, I'm going to add a track.
And for the track I'm going to choose my text message.
Now be careful.
We can choose basically any widget and the boxes and everything else.
They're all widgets.
We want to animate this text message and I'm going to add a track for it and the track is going to be
for its transform.
So I'd like to take Transform and really we just have to set some keys and decide how we want this to
look.
So if we're going to be picking up multiple pickups very quickly, then I think it might be a good idea
to move the text up, make it slow down a little bit, and then fade it off to the side.
That's kind of what I want it to look like.
So first I'm going to go up by probably 0.25 seconds or so.
We can always experiment with this, and I'm going to expand translation and drag the Y down because
going up is the negative y direction and I'm going to go up to about here perhaps, and that's going
to give us a key.
And let's just see what that looks like.
I'm going to press the spacebar and that brings it up to about there.
If you want it faster, just move that key back a bit and I can hold control and scroll in and right
click to drag around.
If I want finer control, I can put it to 0.1 seconds.
See what this looks like.
So that's pretty fast.
And after 0.1 seconds, I can start to move it to the side.
I'm going to take my X and move it over to here.
That'll give me a key for that.
And let's see what that looks like.
It's a little bit stiff.
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
to the left until it reaches up there.
So let's see how that looks.
Still kind of stiff.
So I can select my X keyframes.
These two right click on them and they're already cubic auto.
But I'd like to take a look at their graphs.
So I'm going to click right here on the graph, expand the transform, select the X, and here's what
it looks like.
I'd like this to transition a little slower.
So I'm going to take this keyframe here and just angle it down like this and I'm going to move this
window off the screen and I'm going to play the animation, see what it looks like.
Okay, so that looks a little bit different.
I'm going to click the no looping turn it into loop playback range so I can loop this.
So it's looking better.
I think.
I like how the X is behaving.
Let's alter the Y a little bit.
So I'm going to click on Y and here's what it looks like.
And remember, Negative is going up in the screen.
So let's see how this looks.
I'm actually not too mad at it, but I'm going to play with the shape of the curve here.
In fact, I can let it overshoot a little bit.
Let's see how that looks.
I kind of like that overshoot.
It looks like it bounces a little.
We can even make it overshoot more.
We just have to be careful that we don't make it too jarring.
Right.
So that looks pretty cool.
I like it.
And if we want some damping, we can have damping as well.
We can right click, we can add a key.
We have to do it on one of these vertical lines, of course.
But if we add a key, then we can get a sort of bit of oscillation going here.
That's kind of like damping.
I can add another key here, like so I can move this up a little bit, move this down a little.
But we should always be looking at what it looks like.
If that's a little bit too jarring, we can always just remove those keys instead, just have this one.
And if we don't even like that, we can change that as well.
So that looks okay.
We'll see how we feel about that on the screen when we play it.
So why don't we do that now?
I'm going to go ahead and close this little window, compile and save and let's go into the graph now.
We call this message animation.
So back here in the graph, we're going to right click type message animation.
We're going to get that and we're going to play this.
So I'm going to use play animation.
And hook this right up.
But set brush here only happens if the image is valid.
So we also need the is not valid hooked up as well.
So we have to be careful about that.
So now that we're playing the animation, we know that our animation takes about maybe half a second.
So after half a second, I would like to destroy the widget, which means I'm going to want a custom
event as we can't have a delay right here inside of a function, but I can make a custom event.
And I can call this destroy delay.
And from here, I can use a delay node with 0.5 seconds or so.
And I can use remove from parent.
And we can just call destroy DeLay right here after we play the animation.
Now.
We do want it to fade away as well.
I don't want it to just go over to here and then disappear.
That's what it's going to look like.
But let's just try it out anyway.
I'm going to save all and press play and grab a potion and there it goes.
It's a little fast, I think.
So we can adjust that.
But it's working.
And to prove that this is being destroyed, we can go into our event graph and use event destruct.
This gets called when it's destroyed and we can print a string that says hello.
And there's that.
Hello.
So we know that it's being destroyed, so there's no memory leaks or anything like that.
Okay.
Well, our animation clearly needs some work, so for one, it's too fast.
I'd like to make it a little slower.
So I'm going to take the last key and bring it out to probably out there.
We see that our X is going to the left there, so we're going to want to make some adjustments to the
graph.
I'm going to bring these keys out.
And then I'm going to go to the graph view and open up translation.
Here's the X, I don't want it to go down.
That's going to the left.
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.
It's a little extreme.
So let's go ahead and calm this curve down a little bit.
That looks a little better.
Let's see how it looks here in the viewport.
That's better.
And remember, our destroy delay is 0.5 seconds.
So we can come back in here.
We can make it say one.
Try it out.
That's better.
And we see that it gets destroyed right there.
But that's fine.
We can fade it out because we know that our animation is 0.85 seconds.
So really we can make the delay 0.85 before we destroy it.
But we can also fade it out by that time.
So let's go to our animation and for our text message, we're going to add a new track and this will
be for render opacity.
And for this we're going to start it off at one and we're going to fade it down to zero.
So we'll put it at zero here.
And we just have to make sure that it starts at one.
And stays at one for a while.
So let's go ahead and press play.
And there we go.
It fades out.
Still a little fast.
I think this kind of thing takes a little tweaking, but I'm going to control mouse wheel to zoom out
and let's put it all the way up to perhaps a second.
0.25.
Because we really want our players to have the opportunity to read it.
And going back into the graph view, I just want to make sure it doesn't go to the left at all.
So making that look good.
Here's our render opacity and we can also play with the curve here as well.
That's looking pretty good.
I think that's as much as I'd like to play with it.
And for the image, we can animate this as well.
And I'd like it to be on the same animation as our text.
That way we only have to play one animation.
So I'm going to collapse that for the text message.
We're going to add a new track for Image icon.
And for image Icon.
We'll add a track for the Transform and we'll mess with the translation a bit.
So what would we like to do?
Well, let's see if I click on text message and expand it.
I see that up to about here 0.25 seconds is where our text goes up.
So for the image at 0.25 seconds, I want to take my Y and move it to about here.
And then as our message goes that way.
We can also make our potion move as well.
Maybe you can have it go the other way.
Who knows?
It might look a little funny, so we'll see how it looks.
Let's press play.
It looks a little funny, so I'm going to put a keyframe of zero for the x here.
And we'll see how this looks.
Nope, not feeling it.
I'm going to have it go the other way.
I'm going to have it go to the right with the message.
That looks okay, but I'd like our potion to fade out a lot faster.
So I'm going to fade it out probably by about here.
So let's add to our image icon, another track for color and opacity, and we'll fade this alpha out
pretty quickly, probably by here.
And it's wanting me to have keys right here at 0.25.
I'm going to move those to the beginning so it fades out like that.
Let's see how that looks.
No, that's too fast.
So I do want it to actually be all ones at 0.25 and then fade down to zero over.
This much time, perhaps.
And then this one could have some bobbing.
You know, this is just artistic at this point.
It's just kind of making some tweaks.
And how we do this doesn't really matter that much.
I'm going to go to Graph View, though, and for the image icon Transform translation, we'll go to
the Y part of this.
And it's going to go up faster.
I'd like it to overshoot a bit.
And this one can bounce a little bit.
I'm going to full screen it and add a couple keys.
And give it some dampened oscillation.
Well, I'm not getting that bounce in the game, but that's okay.
I think I'm done messing with this for now because really, you could tweak these things all day.
So get it looking how you'd like it.
Just going to move this text down at the end just a little.
Oop.
Whatever I did was not good.
Okay.
Just making sure it's not completely broken.
Oh, now it's bouncing.
That looks pretty good.
All right.
I'm just going to take a couple seconds because I like the bounce on the icon, but it looks weird that
the text doesn't bounce as well.
So I'm going to just give it a little bit of bounce.
So just adding a key here and a key here.
And making it bounce just a little bit.
A little more than that.
Okay.
And I'm officially done messing with it.
So I'm going to go ahead and call that a day for this video.
So we now have a message showing on the screen and it's data driven with our data table.
So that's great.
If we really need to change the draw size and dimensions of one of our icons, we can subclass the widget
and change it out here.
And so it's all looking pretty nice.
So excellent job.
And we'll continue in the next video.
I'll see you soon.