Welcome back.
Now our overlay is starting to look a lot better.
But as we mentioned before, this is missing something.
We need an XP bar.
So in this video, we're going to create one of those and this can go in blueprints UI and we could
put it in the overlay sub widget folder or we could put it in progress bar.
I'm going to put it in progress bar.
I think that's a great place for it.
So I'm going to create a new user interface widget blueprint based on or a user widget and call this
WP underscore XP bar.
So our XP bar is going to be quite simple.
I'd like to give it first an overlay.
And we'll call this overlay route and set this from fill screen to custom and give it a custom width
and height.
Now I'm thinking the width can be around 880 or so and the height can be about 50.
So quite thin.
And I'm really just going to want a frame and a progress bar.
So the frame is going to be an image.
I'm going to drag that on in and go ahead and make it fill and select it now for the image.
If I search for exp underscore frame, then we have this exp frame and I think that's going to be just
fine.
And on top of that, we can bring in a progress bar.
And the progress bar can also be set to fill.
Except I might want to give it some padding.
So for padding, I'm going to bring in the left and right by a little bit, about 21 and 21.
That's going to put it just about at the right width here.
And for the top, I'm going to give it 9.5.
And for the bottom, I'll give it 18.
So that puts it just about in the frame there.
I think that looks pretty good, but we can always tweak it a bit.
Left and right.
Could be 20.5, maybe even 20 and 20.
And for the progress bar, I'm going to give it a fill image and a background image.
Now, the background image I think I'm going to make black with probably maybe 0.5 alpha.
And if I take the percent and fill it on up, I can change the fill image as well.
So for the fill image I'm going to search for exp underscore and we have exp bar.
Here's what it looks like.
So that looks pretty good.
I might actually increase the padding just a bit on the progress bar.
So for the top I'm going to bring it up a little bit.
Maybe ten 10.5 and for the bottom I'm going to bring it up as well, maybe to 19.
That looks pretty good.
And we can play with the percent and see what it looks like.
Okay, so we have a pretty nice looking progress bar.
I'm going to bring it all the way up to one for the percent.
And with this progress bar, I'm going to go ahead and just add it straight on to the overlay.
Now, I could have put it here in my health mana spells.
It could have gone right here in this box, but I'd like to put it separately so I can scale it separately.
So for that reason I'm just going to put it straight into the overlay.
So I'm going to search for XP bar, bring in an XP bar, and I'd like to set its size exactly to what
I had here.
I have 880 by 50, so I'm going to do that here in the overlay.
I'm going to set size X to 880.
I'm going to set size Y to 50 and I'm going to set the anchor to bottom center alignment in the X to
0.5 and position X to zero.
And alignment x I put 0.05.
This should be 0.5.
There we go.
And then I can click and drag position y to bring it on down.
Okay, so that looks good.
Now it's a little bit in front of the Globes here, and it kind of does look pretty cool.
Let's see how it looks.
But we can always change things.
Let's press play.
There's the XP bar.
I kind of do like how it looks.
I might even bring it up a little bit.
Maybe cover slightly part of the ring here for one of the passive spells.
That could be fun.
So that looks pretty cool.
And then alternatively, we could resize it or we could also put it behind the health manager spells
by clicking and dragging it up.
And now it's back there.
So either way, it's a matter of style and of course, size, position, all of those things.
Those are something that can be adjusted now, something to keep in mind.
If our health and Mana globes become empty, then we would be able to see part of this behind it.
So we do want to make sure not to unintentionally have a look or effect that we don't want.
So after adjusting that to how you see fit.
We'll have a nice XP bar.
I kind of like it in front like that, and I think it looks pretty nice.
So.
Things are looking really, really good.
Excellent.
So now that we have these widgets, it's time to make them functional.
For one, I have a spell assigned to my left mouse button, my fireball.
Right.
That's going to need to be shown here.
And I'm just now noticing that my fireballs pass through these tiles.
They're not set to block the projectile.
And an easy way to fix that is to search for tile and simply take all of our tiles.
At least our floor tiles here and go to their collision settings.
And we can do this all at once.
Take the projectile.
We can set it to overlap.
And we can check generate overlap events and that should fix that problem.
Of course, these edges.
Are also not blocking the projectile.
So we're going to want those as well, blocking the projectile.
So I'm going to go ahead and just quickly select each of the edges and make sure we have that covered
as well.
So with those selected, we're going to click generate overlap events.
And we're going to make sure that they overlap.
The projectile.
And we can test and see that it works.
Testing our stairs and everything else.
Okay.
Now.
Yes, we do have some issues with our.
Walls and are.
Cursor trace, and we're going to get to that.
And the issues I'm talking about, you can really see with enemies in the world.
I'm going to actually take my nav mesh bounds volume and move it so that it's not covering half of this
level.
If I press P, I can see the green is only on half the level here and that way I can drag in an enemy
and it won't be able to move.
So if I go to character, Goblin, Spear and bring one of those in here now that I have one of those.
Right here towards the back.
I can press play and it won't come after me.
And something to be aware of is that when it's not being blocked, I can hover over it.
Right.
But.
Even if it's still being blocked.
Let's see if I can get it half blocked.
Look at that.
I can still hover over it and it's still highlighting, even though there's a wall in the way.
Now, that might not be too bad.
That might not be too big of an issue.
But.
It might not be what we want.
So that's something to keep in mind.
We'll keep that in the back of our mind as we're developing and we'll change things as we see fit.
I'm just going to go ahead and kill this goblin one more time because it was really satisfying seeing
that dissolve effect in a darker environment.
Look at that.
That is beautiful.
All right.
So great job.
We now have an XP bar and it looks amazing.
I'm going to save all and I'll see you in the next video.