Welcome back.
So things are looking better and better.
Every time we level up, we get our HUD updated and we get our particle effects and those look awesome.
But usually we get some kind of message in the HUD informing us that we leveled up and showing what
level we're at.
So in this video, we're going to implement that.
Now I'd like to make a widget that we can show on the screen.
We can just spawn one, we can show it for a minute, maybe play an animation and then allow it to destroy
itself.
So pretty simple.
And that's going to be a quest for you.
I'd like you to create a level up message widget to show to the screen and show it every time we level
up, create a widget animation so that it's not just static, it doesn't pop up out of nowhere.
Decide how you'd like it to appear and do so in a cool looking way.
Now make sure to remove it from the parent using remove from parent whenever you're done with it.
We don't want it lingering around.
Either that or you could just hide it.
I leave that decision up to you and as a bonus, play a level up sound.
Pause the video and conquer your quest now.
Okay, so I need a level up widget.
I'm going to go into UI and I'm just going to put this into overlay sub widget.
I'm going to make a new user interface widget blueprint based on or a user widget and call this WP underscore
level up message.
Let's open up, level up message.
And first things first.
I'm just going to make an overlay.
Let's bring that in and we'll have this.
And to make things really easy for myself, I'm just going to leave it like this, make it fill the
screen.
Now I can just separate this into boxes and just put some messages here.
I think that's a quick and dirty way to do it.
Now, I could just use a wrap box here.
And then anything I put in here is going to spill over to the next line if it's too wide.
I'm going to fill everything here with the rat box and I'd like my message to be a little bit lower.
So I'm going to put a spacer.
And my spacer can be large in the X direction and I'm going to increase its size in the Y as well.
And then I can have text here.
So first I'm going to add text dragging in text here.
I'm going to set the text right away using all caps.
I'm going to say you have reached.
And I'd like this to be centered, but I'm going to have to use fill empty space before I check horizontal
alignment center and I'm going to put my justification alignment to center as well.
And obviously, this font is not going to work for us, so I'm going to change it from Roboto to Amaranth.
It's going to need to be bigger.
I'm going to try a size of 34, a letter spacing of 100, an outline size of one.
And now I have some text here.
Now, after this text, I'd like some more text.
I'm going to actually copy this text and paste it.
Control C, control V, and this one I'm going to change to say level.
Not all caps, just capitalized level space.
Like that.
Now, for this one, I'm going to check Force New line.
So it looks like this.
It's right beneath it.
And I'm also going to have another text for the actual level, something we can set the value for.
So I'm going to call this one text underscore.
Level.
And this one will be a variable.
Now, for this one, I don't want to fill the empty space and I want it to be on the same line as this
level text here.
I'm going to actually change this one to say X so I can tell the difference between these two and I'd
like this one and this one to both be on the same level, right?
So if I uncheck fill empty space on that one and on the x, I can uncheck force New line.
They'll both be here.
And let's see what happens if I take level and right align horizontally and the X and choose left align
horizontally.
And we really just want these both to be in the middle, right?
Well, they don't seem to want to be centered.
So what we can do is select both of them right click and wrap with a box.
I'm going to wrap it with a horizontal box.
And this horizontal box can be set to center, fill empty space, and it'll be right there in the middle.
Now we can see what X looks like as a number.
That looks pretty good.
I'm going to set it back to X and now we have something that looks like this.
Now, if we like, we could just put this text and this text all of them together in their own box.
We can right click wrap with and we can choose a vertical box and just take that horizontal box here
and make sure that it's set to center.
And then if we want a animation for this widget, we can simply animate the vertical box and then everything
inside of it will move along with it.
So now that we have a widget, there's a few things we need to do.
Right.
We need to show it.
We need to play an animation if we made one.
We need to set X to the correct value.
Now X is marked as a variable, so we just need a way to set that text and we can really just do that
whenever we spawn one of these.
So I'd like to spawn or construct one of these widgets from my overlay as soon as I've leveled up.
So I'm going to go into my overlay.
WPP overlay.
And here in the graph, I'd like to subscribe to the delegate that gets broadcast when we level up.
So I'm going to add a pin.
I'm going to take my BP overlay widget controller, duplicate that node, and from that node, search
for level and assign on player level change delegate.
And I'll call the event on level changed.
So we'll hook that up here.
And what do we want to do when the level changes?
Well, I'd like to spawn a level up widget, so I'm going to simply use create widget and choose my
level up message.
Here it is.
I'm going to spawn it.
And for the owning player, I'm going to use the player controller that exists on my overlay widget
controller.
Remember, the widget controller has a player controller.
We're going to get that player controller and simply pass that in here.
I'll move these nodes down here.
So we'll spawn this.
But after we spawn it, of course, we need to add it to the viewport and set its level and do anything
else that it should do.
Right.
So first of all, I'm going to type in text underscore level.
I'm going to get that and set its text level.
So I'm going to say set text.
And set that text equal to the new value here for level.
That's going to give me a two text from Integer.
I'll go ahead and hook this up here.
And we also need to add this widget to the viewport.
And what I'd also like to do here is promote this widget to a variable for a couple reasons.
We'll see why in a second.
So I'm going to promote it to a variable and call this level up widget.
And the first reason I'd like this level up widget to be a variable is so that I can check to see if
one already exists before we create one.
If it's valid, then I'm going to destroy it.
So I'm going to take my level up widget, get it, convert this to a validated get, and if it's valid,
I'm going to destroy it.
Because we're about to create a new one.
So if is valid, I'm going to take level up widget and to destroy it I call remove from parent.
And then we go on to create a new one.
Now, if it's not valid, then we can go ahead and create one anyway without needing to destroy it.
So now that we're creating one and setting its text, we need to add it to the viewport of course.
So we'll take level up widget and call add to viewport.
Now, we're never actually removing it from the viewport.
I'd like it to do that itself.
So we'll handle that in a second.
For now, let's just see if this works.
I'm going to save all and try to level up.
There's one goblin.
Two little goblins.
And there's my message.
Perfect.
Okay, so now that we're showing it, we need it to remove itself.
I'd like it to handle that itself, as well as playing its own effects like an animation and perhaps
even a sound to play.
So let's take care of that.
In our graph we can use event construct and we can simply use a delay here.
And after, let's say, three seconds, we'll have this widget remove itself from the parent.
So we'll call remove from parent.
So yes, we're destroying it before we create one in the overlay and it should already be destroyed,
but just in case we'll remove it there before creating a new one.
So let's make sure that this works.
We'll go ahead and level up.
And after three seconds, I expect it to go away.
And there it goes.
Okay.
So that takes care of destroying itself.
Now we want to play some sounds and an animation.
Now I'd like to see what I've got, by the way of sounds.
So if I go to assets sounds well, we got a level up folder and here's a sound effect.
Looks like it's called SFX template single, so looks like someone forgot to rename it, but I'm going
to rename this to SFX level up.
We'll call it level up sound.
So let's see what this sounds like.
Hmm.
Sounds kind of familiar.
That's the sound when you level up.
So I bet you didn't realize it.
But every time you start one of these videos, you're leveling up.
All right, so back in my level up message, I'm going to play this sound.
So I'm going to use play sound 2D because we don't need the play sound at a location.
This just needs to be played.
So with SFX level up sound selected.
I'm going to play that sound.
Let's just see how this sounds and feels when we level up.
I think that sounds pretty good.
It has a bit of a build up to it though, so we might want to make sure that our animation sort of goes
along with that sound.
It has like a bit of a build up.
Let's see how it sounds again.
Yeah, Let's make sure that our animation shows up with a little bit of a build up as well.
So that'll be one of the last things we do is we take our vertical box here and we can rename this to
vertical box, underscore message.
We can check is variable and we can go to animations and call this message animation.
Click on message animation, add a track, we can choose vertical box message, add a track for vertical
box message.
And I'd like to make a transform track and I'd like to scale it up.
I'm going to start it off with a scale in X and y of zero.
And build up to one.
We'll go to 0.5 seconds and see what that looks like.
I'm going to click play.
And I think that's going to look pretty good.
Now, I can take a look in graph mode for the scale for X and Y, and I think I might want to change
this curve to look more like this, both for X and Y.
We'll see how it looks, but let's see when we play it.
Yeah, I kind of like it like that.
So let's play this animation from the event graph here.
So not only are we going to play this sound 2D, we're also going to use play animation.
And we're going to get our new animation, which we called.
Message animation.
So getting message animation.
Plugging it in.
Hooking up our nodes.
Let's see what this looks like.
Okay, so that looks pretty good.
We have three things happening.
We have particles, sounds and a HUD message, so it can be a little hard to get those all to coincide
perfectly.
But with enough tweaking, we can make it happen.
I think our animation could probably lead up to our scale of one a little bit later.
0.75 seconds might sound and feel better.
That's pretty nice.
And of course we could make it a little juicier, a little bit of tweening by checking out our curve.
I'm going to maximize this screen and we could have a little bit of tweening here.
I can right click and add a key and make these keys, sort of get a bit of a damped oscillation going.
This is for X.
Let's just see what that looks like.
And I think more importantly than that damped oscillation, we should probably actually have a slower
build up.
So I might actually go back to having a curve that looks like this.
And we could still have this bit of oscillation here, but.
We might want a slower buildup.
Let's see how it looks like this.
Okay.
I think I know what'll look better.
A curve that looks like this.
So I'm just going to remove those extra keys and have it go up like this.
Let's see how this looks.
So let's try that out.
Okay.
It seems too slow.
Here's what I'm going to do.
I'm going to go to 0.5 and add a key of zero.
So scale is zero.
Okay.
Something went out of whack here, so I'm just going to just highlight everything here and remove it.
Go to 0.5 and click add a key.
We'll put keys at zero as well.
And then at 0.75, we'll go up to one.
So we have a delay.
And again, taking a look at the curve, I'm going to angle them like this.
And we'll test it out.
Okay.
It's looking better.
Just going to bring these keys in just a bit.
We're almost perfect.
I think it's looking pretty good, actually.
I think that is where I'd like to call it quits.
I do notice, though, that this is going down into the negatives a little, so I do want to make sure
that doesn't happen.
And with that, I think we've done enough tweaking.
I think we have our effects.
This is good for now.
We can always tweak more later, but that looks and sounds great.
Excellent job and I'll see you in the next video.