Welcome everyone. Well, we have our white magic selection menu completed. And you may assume that now is the time for us to go about creating the functionality for our white magic skills. I'm talking about transforming it to mist. I'm talking about our Lens of Truth skill that is going to allow us to see through some walls and to jump on to some invisible platforms, etc. Well, we're not quite there yet.

In this series of videos, we are going to work on creating a widget that we can display above our character whenever they've activated their white magic skill. Now this widget is going to consist of a meter as well as text, and it's going to represent how long this white magic skill will stay active before it auto deactivates. Now, I'm currently in a previous version of this project that I completed before making this course. I'm just gonna jump in and play and show you what we are going to be building. Okay, so when I press my activate white magic skill here, you're going to see a meter appear above my character's head. And now I've activated my Lens of Truth ability and notice that once the meter depletes it auto D activates.

So that's what we are going to be aiming to create over the next few videos. Okay, so we can just close out of this project for the time being and open up our current version of the project we are working in. And the first thing we're going to do here is come under our Metroidvania widgets folder in inside of here we're going to create a new Widget Blueprint by right clicking come in coming under the user interface option and selecting Widget Blueprint and we will call this w BP underscore w a magic underscore timer. Then let's double click on it to open it up. And we're just gonna Going to add a couple of widgets here. Over in the left hand side, the first widget that we are going to add is a progress bar that was a meter that you saw over our character's head.

Let me just zoom to fit. Right here. Let's add a progress bar on top of our canvas panel. I'm going to select it hit f2 and call this w magic underscore timer. And let's set some deef do some what am I trying to say here, set some details for it right away almost defaults, details defaults kind of the same thing. Um, let's go with an anchor of this middle bar.

This horizontal middle bar right here should do us some good. And with that in place, going to come up and set our offset left to be 100. The position y is going to be zero the offset right We'll be 100 the size y we're going to set to be 20. And scrolling on down a little bit our style here, we want to slot in an image here. For our style, we're going to set this to be our T ink black T, ink, black. That's going to be the background of our meter.

Essentially, now it's kind of squished together and I know it looks rather elongated now, but when it's above our character's head, it's gonna look pretty nice. And then scrolling down a little bit in here, let's set the tint for this actually, let's go background image tint 111 the a value let's go to point seven, five to make that a little bit see through not much just a little bit. Then if we scroll on down a little bit under our fill image, this is going to be the portion of the meter that we see deplete And for this I'm going to slot in holding down left click releasing left click t underscore, Inc. underscore pink. And for this we can leave the tent at a full a value of one as well. draws box draws box. Okay, that's looking all fine and dandy.

Next widget that we are going to add to this is going to be scrolling down under our palette let me just peel this back, a text widget not a text box, but a text widget. Let's drag and drop this on top of our canvas panel. I'm going to select it hit f2 right away to rename it. And we'll just call this w magic underscore name. Then over in the Details panel, we're going to set the anchor for this. The anchor is going to be this middle box right here, smack dab right in the And with that anchor set, I'm going to set the position x to be zero, the position y is going to be negative 20 relative to that anchor point, let me just zoom on in a little bit negative 20.

The alignment we will set to be point five and the X and point five in the y and we will set it to be size to the content. So depending on the size of our contents here, it will size this box there appropriately. The text for this doesn't really matter because we are eventually going to bind this. The appearance though however, let's adjust some of that we are going to want to go for a straight yellow here. So under color and opacity are one g one the B Let's set that to zero so that we get this yellow text. The font family we will set this to be Gothic letters.

And I'm going to set the size here to be fifth teen. So it's gonna look pretty tiny right here. I know that kind of click off of this. This isn't exactly what it looks like when it appears above our character's head, but Whoa, Just you wait. Alright guys, with that all done, let's zoom to fit here and kind of see what this is gonna look like one more thing I want to make sure that we do here with our w magic timer. Let's go ahead and select that one more time, I believe I may have forgotten one thing with that.

Let's set our percent here to one just so you can see essentially what this is going to look like. I know you see some blue coloring here, but trust me it will be pink in the long run. But that is to come later. All right, and we do want this to fill up left to right. Note that as well. Alright, one more Compile and Save.

Guys. That'll do it all for this video. more work to be done. See you in the next one.