Welcome back.
Now that we have this WPP Globe Progress Bar, we're just going to be a base class.
We can make a health progress bar or health globe based on this.
So I'd like to do that.
I'm going to go into our blueprints folder, into UI and Progress Bar, and we have our Globe Progress
Bar Widget Blueprint.
Now, if we don't want to be confused, we could just call this globe base or something with base in
the name if you want to do that.
So if you want to rename it, go ahead.
I'm fine with it.
What I'm going to do, though, is go to user interface, make a new widget blueprint and choose my
globe Progress bar as the parent and click Select.
And this will be WPP, Underscore Health Globe.
And I'm going to open Health Globe and I'm going to change some properties on it.
Now, the only thing I really care about changing is making this red.
So I'm going to go to the graph tab.
I don't see my variables.
That's because I want to click on the gear icon and show inherited variables.
As soon as I do that, I now have a dropdown that I can expand and I can expand globe properties.
Remember, we put all those variables into globe properties.
That's really useful.
Now we can change them and I'm going to change my progress bar fill image by selecting it.
And in the details panel scrolling down and changing the image from my manage globe to my health globe.
Now this is really cool.
If I go back to designer, I see that it's automatically changed because when we change something,
it kicks off that function.
What was the function again?
Pop quiz for you.
Event pre construct.
That's a lot like the construction script.
So it kicks off whenever you change something.
We just changed that property.
Okay, so now we set this to 256 by 256.
I might be wrong, but if I go back to the base class and look at box width and box height, it's actually
250, not 256.
But regardless, I want to see how big that looks on the screen.
So I'd like to add this widget to an overlay, some kind of overall widget to fill the whole screen.
I usually call those overlays.
I'm going to make an overlay for Aura.
So here in our UI under Progress bar, I'm going to go one level out and make a new folder for the overlay.
So I'll call this overlay.
And here in overlay I'm going to make a new widget blueprint.
So user interface widget blueprint, and I'm going to choose Aura user widget.
I'm going to base all my widgets on aura user widget.
That way they can all have widget controllers, which will assign soon enough.
But I'm going to call this WP underscore overlay.
The overlay is the overall widget we'll see on the screen and it's going to contain a bunch of little
widgets inside of it.
So for that reason I'm going to open overlay and add a canvas panel to it.
Now in general, you want to be pretty sparing with your canvas panels.
The canvas panel is more expensive.
That's why for my globe, I did not add a canvas panel.
Instead, I used a size box and an overlay.
These are a lot more efficient, but we're only going to have one overall overlay widget for the whole
screen.
And for that reason I want to be able to set things by dragging them around.
And to do that we use a canvas panel.
Now I'd like to add my health globe to this, so I'm going to search the palette for Health Globe.
And there's my WP Health Globe.
I'm going to drag it out and put it right about there.
So we'll place it just about right there.
I'll compile and save.
And why not?
I'm going to anchor it to the bottom middle.
So with my WP Health globe selected, I'll go to anchors and choose the bottom center right there.
Now, I can go ahead and see what this looks like on the screen.
Now, just to quickly add this to the screen to see what it looks like, I'm going to go into my level
blueprint, opening this dropdown, going to level blueprint.
I can add this WP overlay to the screen first by using Create widget.
And selecting WPP Overlay.
I can hook that up and take the return value and use add to viewport just to see what it looks like
on the screen.
So I'll compile.
I'll save all before doing anything else and press play.
And there's the health globe and I'd say that's a pretty decent size for the health globe.
So it's looking good.
If it looks too big or too small, well, we made the size a parameter and of course we could just go
into the overlay and click and drag to resize it manually and we can always do that.
But remember, resizing things might make things less compatible.
For example, making it small means that, well, now this needs the padding to change a little bit,
so then you'd have to go in and change the variable for the padding here, go into WP Health, take
the padding here, globe padding and maybe set it to five.
And here in overlay, we see that it's better.
Now, we could also go into the base class and open the eye icon, make these all editable here, compile
that.
And now in the overlay with our health globe selected, we can search for globe properties.
And here's our globe padding.
We can increase it, decrease it, whatever we want until it looks great.
And of course, we are using the same padding for that glass as well.
So keep that in mind.
The glass, that empty glass material is changing because it uses that same globe padding, but that's
going to allow us to resize it very easily and we have access to those variables that we can easily
change.
So we know that we can change things if we want to.
And then of course we can play test and see that looks a little too small.
So, you know, obviously that's just for example purposes, but I'm going to go ahead and just delete
that and make sure my health globe itself has the width and height that I want.
I'm okay with 250 for the height and width and for the globe padding.
I'm going to keep it at ten and we'll just use that size for the health globe.
I think that's a pretty good size and I can see what it looks like in full screen mode by pressing play
and hitting F11 to full screen it.
And I'm happy with that.
Okay, great.
So now I have a WPP Health globe and it's just as easy to derive a child Blueprint class from WPP Globe
Progress Bar for Manna.
And that's going to be your quest.
So I'd like you to make a WPP Manna Globe.
Remember, you're going to inherit from our base Globe Widget Blueprint class, and you're going to
obviously change it to look like manna.
So set the progress bar material to the blue one so it looks like manna.
And add this to the WPP overlay and play test to see what it looks like.
So pause the video and make your manna globe now.
Okay, so we have our health globe.
We need a man, a globe now.
So I'm going to right click here and create a new widget blueprint and base this on our base Globe Progress
Bar.
I'm going to select that and call this WP Mana Globe.
And really, we don't have to change anything because it's default value is already this blue material,
right?
So we just need to add this to the overlay so we can do that.
We can find our mana globe here.
Drag one in, and I'd like it to be at the same sort of elevation as the health globe.
So first I'm going to actually go ahead and set its anchoring so it's anchored to the bottom middle
and then I'll select my health globe, which should be anchored to the bottom middle as well and copy
its position.
Why?
And select the blue one paste for position y and now they're at the same elevation.
They're not at the exact same distance from the middle, but that's fine.
We're going to be making a widget to contain both of these anyway in the future.
For now I just want to see them both on the screen.
I'm going to compile and save and press play and there are my two globes and they look good.
They look great, so that's perfect.
So we've now seen the power of creating a base widget blueprint with variables that we can inherit and
child classes and set them so that we can easily change things without duplicating our work and making
multiple widgets that all look similar with just minor changes.
This is an easier way to do it.
All right, great.
So now at this point in time, we're adding the overlay to the screen in our level blueprint, and we
know that our widgets have a widget controller variable that's not even being set.
We're never actually creating one of those.
But we'd like to drive these health and mana variables from our widget controller, which is going to
get the data from the ability system.
So we're going to want to create that widget controller somewhere some way.
And in the next video we're going to decide when and where to do that.
So we'll do that next.
Great job.
I'll see you soon.