Welcome back.
So our project is starting to come along really well.
We're starting to make lots of connections between causing damage and having effects and even taking
care of enemy death.
One of the most important things I think, in an RPG is visual feedback.
When it comes to damage, we'd like to see how much damage we're causing.
And floating text is a pretty good way to show that damage.
It's a pretty common way to do it and we're going to do that in this course project, and that means
we're going to need some kind of widget to show to the screen.
It's going to be relatively simple, just a number, perhaps we'll add a message to it as well to show
if we have a blocked hit or a critical hit.
But for now, we're just going to get a number on the screen and that means we need to create a widget.
So we're going to go to Blueprints UI, and right here in the UI, we're going to create a new folder
called Floating Text.
And I'd like to make our floating text widget here and this can be a simple user widget.
It doesn't need a widget controller or anything like that.
This is just going to be a very basic user widget.
So we're going to go to user interface Widget Blueprint, we're going to choose just user widget for
this, select that and this will be BP underscore damage text.
So we have some floating text for damage.
And this is again going to be a very simple widget.
It's just going to need a number.
Now, I'm going to have an overlay here just because, you know, we may have more text later.
Spoiler We are going to have more text later, but for now we're just going to have the overlay and
text.
So we're going to add text to the overlay like so and I'm going to rename this text to text underscore
damage and check is variable.
Now I'd like this overlay to have a desired size.
A custom size.
So I'm going to change it from fill screen to custom.
And that way we can set this to the size that we desire.
And I'm going to go ahead and take that text and change it to a number.
I'm going to put it to 99 so we can see what it looks like with two digits.
I'm going to set its horizontal alignment to center and its vertical alignment to center and change
its font.
Now I'm going to choose Amarant regular with an outline size of one and a font size of, let's say,
26.
We can always tweak that later, but that's basically it.
We have damage text.
Now what I'd like for this damage text is to play an animation whenever it pops up above an enemy's
head.
So we're going to add a new animation.
We'll click on animation, click plus animation, and this will be called damage animation or just Damage
Anim.
I'm going to select that and add a track.
And the track can be for the Transform.
So we're going to choose track text damage.
That's the widget we want a track for click plus track and add a transform track and we can alter the
transform here.
Now at Frame one, I'd like my transform to have a translation of zero for the X, but I'd like to move
it up a little bit in the Y, which means going negative in the Y.
I'd like to go up to perhaps 80, 84, 83.
We'll make it -84, not positive because then it'll go the other way.
And then I'd like to move a little bit to the right.
So I'm going to move to about 0.2 seconds.
And for the X, I'm going to set this to about 90.
So that way we'll move to the right a little bit.
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,
perhaps 111 112.
And I'd like my Y to be a little bit higher.
Not much.
About 94, -94, that is.
And we'll go a little bit farther to about point 70 or so.
And the Y is going to keep going up, up and up probably around 200, maybe even to 20 to 25.
We'll use -220.
So we're going to go up to there.
And at this point we can start going the other way for the X, we can bring it on down a little, I'd
say about 288 or 90.
Now, finally, I think I'd like to end at about one second or so where the X continues to go to the
left, perhaps even way off to the left, maybe -100 or so.
And the Y can also keep going up.
We'll put it up to about -300.
So we're kind of going up and then back to the right a little bit.
So that's kind of what it looks like.
Something like that.
So if I open the graph view and expand these dropdowns to translation, here's what our X looks like
and here's what our Y looks like.
And that's looking pretty good.
Now, I'd also like to animate the size or the scale.
So if I'm going to animate the scale, I need to expand the scale here.
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
twice or maybe 2.25.
So we're going to set X and Y for the scale, the 2.25 right here.
It's going to blow up a little bit.
But it's going to go back down to one almost as fast or just as fast as it blew up.
So at point two, we're going to put the scale back down to one.
So this way it kind of bubbles out a little bit like so.
And then we can just let it stay at one.
It could even get smaller if we wanted to.
We can go all the way to one second and we can bring the size down to perhaps 0.4 for X and Y.
So let's see how that looks.
And that's looking pretty good.
Now, finally, the last thing I'd like to do is fade out our render opacity.
So I'm going to add another track, and this one will be for render opacity.
Here it is.
And we'll start at a render opacity of one.
And by the time we get to one second, we'll bring that render opacity down to zero.
So it's going to fade out ever so slightly.
And now we have a nice looking animation for the number effect.
Now that's looking pretty good.
So we have a widget, right?
All we have to do now is add that widget to the viewport and we'll get to that.
In the meantime, though, I'm going to take this widget and go into its graph and in event construct
when the game starts, or rather when this widget is created, I'd like to play that animation.
Now that animation is called Damage number.
No, what's it called?
Let's go back.
It's damage anim.
So I'm going to right click, damage anim and we'll get damage anim.
We'll drag off and we'll play the animation.
So event construct.
We're playing the animation first thing, and that's all we're doing.
That's all we need to care about with this widget.
So how are we going to add this widget to the viewport?
Well, I'd like to create one.
I'd like to actually create a widget component and attach it to the enemy and then play the animation.
So if we're going to do that, I'm going to need a widget component and I'd like to make the Cplusplus
class for a widget component because I'd like it to have the capability to set the damage text on this
widget.
So I'm going to make a widget component capable of setting the damage text on its floating damage widget
object.
So for that I'm going to create a new Cplusplus class.
I'm going to go to C plus plus classes, Aura Public and UI and we'll go into widget.
It'll go into the widget folder here and we're going to create a new class.
This is going to be a widget component, so I'm going to right click new C plus plus class.
All classes and we're going to choose widget component.
We're going to choose that.
And here in the widget folder, we'll add our new widget component.
And I'm going to call this damage text component and create class.
So let's go ahead and close the editor and we'll open our new widget component under UI widget, and
it's called Damage Text component.
Now, the reason I wanted this Cplusplus class is simply for one thing, and that's that I'd like a
C plus plus function on this class so that if we create one of these from C plus plus, we can call
that function.
What we do in response to calling it I want to handle on the blueprint side.
So I'm going to make a public section and a new function called set damage text and set damage.
Text is going to be a blueprint implementable event.
So we're going to make it blueprint implementable event and its new function.
And I'll go ahead and make it Blueprint callable while we're at it and set damage.
Text can take in a float called damage.
And for now that's all it's going to take.
So we'll implement this in the blueprint for this widget component, but I'd like to spawn this from
C plus plus and call this function so that we can set the widgets text value And the widget that this
component will have is going to be that floating text widget.
So now that we have this function, we can once again compile and launch our editor.
And we can create a blueprint based on this.
So back in the editor, I'll go ahead and open my damage text and browse to it.
So I'm going to right click and make my new widget component.
So new blueprint, we're going to search for damage text component.
We'll choose that and we'll call this BP damage text component.
So this is not a widget blueprint, it's a widget component blueprint.
And this widget component blueprint has a widget object, much like a static mesh component, has a
static mesh object or a skeletal mesh component, has a skeletal mesh object.
The widget component has a widget object.
We can search for widgets and we have widget class.
We need to set that and we're going to set it to WP damage text.
So WP Damage choosing damage text.
There we go.
And now we have a widget component and if we spawn this, it's going to have its own widget and that's
this WP damage text which whenever it gets constructed, plays its animation.
Now I'd also like to implement that blueprint implementable event set damage text because when I spawn
this in C plus plus, I'm going to call this right away.
So I'm going to implement it here, set damage text.
And what I'd like to do is get my user widget object using get user widget object.
This returns a user widget.
We're going to cast this to the WP damage text.
And from the damage text, we can set the text on the damage text.
We can set the text for damage.
So here on the damage text widget, let's just make a nice little setter function for that.
So we'll make a function and we're going to call this update damage text and this can just take in a
float for the damage, but we can pass in other parameters later, such as information for if it was
a critical hit, then we might want to change the color of the text based on that.
ET cetera.
But for now it's just going to have an input called damage, and all it's going to do is set the text
right here, text damage.
So we're going to take that text damage.
We're going to call, set, text on it the function, and we're going to pass in the text so we can
take our damage and use a to text node to text float and we can decide how many digits.
Now, if this is going to have no fractional digits, then we're going to set minimum fractional digits
to zero and maximum fractional digits to zero and then we'll just have an integer.
So now we have an update, damage, text function.
And on our component, every time we call event set damage text after casting to a damage text, we're
going to call, update, damage, text and pass in that damage amount.
Like so.
So just tidying up this bit of blueprint logic here.
Okay, that looks good.
Excellent.
Okay, so now that we have a damaged text component, which is a widget component, we plan on spawning
or creating one of these from Cplusplus and calling set damage text on it.
And when that happens, it's going to get its own user widget object, which is a damage text.
We're going to cast to that class and call update damage text on it.
That's going to set its text right here, which has a default value of 99.
It's going to set it to whatever we set it to.
When we call this function, I can go ahead and collapse that node there and we should see this on the
screen as soon as we create one.
And that's what we'll do in the next video.
So great job in this video and I'll see you in the next one.