Timer Widget - Widget Component

6 minutes
Share the link to this page
Copied
  Completed
In this video, we'll add a Widget Component onto our BP_Player. This component will be used to indicate how long the user's White Magic skill will stay in effect before it auto deactivates.

Transcript

Welcome back everyone. Last video here for our timer widget. Our goal in this one is to add a widget component onto our BP player that we can show or hide, to indicate to the user how long their white magic skill will stay in effect, we're going to be doing work inside of our BP player here. So if you don't already have open comm under your content, Metroidvania blueprints, character's folder and double click on your BP player to open her up. This one is going to be pretty simple. Over in the left hand side where you've got your list of components, we're going to add a brand new component and I'm actually going to jump over to my viewport tab as well, just to get off of the Event Graph.

That's not our focus here. The Add Component that we want to add is called widgets. It's this widget Right here, select that, I'm going to rename this to be widget underscore, W magic timer. And with that selected over in the Details panel, as you may have expected, I've got some details I want to set for this. The location I'm going to set this to is a z location of 100. And you can see that already moves its transform, right up above our character.

Down below where we've got this user interface section, I'm going to set the space to be screen space. So that way, this meter is always going to be facing the screen instead of being positioned in the world, which could be facing away from the way we want our user to see it. So screen space is going to have it facing the player like we want it to facing the user I should say, the widget class right here, let's select this We're going to find the widget timer that we just created. The draw size here we'll leave it as 500 by 500. Down below, we have a rendering section right here. We've got this visible checkbox.

Now, we're going to eventually have this ticked off. But I do want to see it just for the time being so that we can see if we actually see something when we're in the game. So let's go ahead and Compile and Save this. Let's jump in and play. And you can see just a black meter right now and the reason we see a black meter right now is because over in our w BP magic timer, remember we've got this progress bar is bound to this function right here. This percent is bound to this function gets w magic Active Time percent.

And we're saying that if the W magic slot ID is set to lens, it will be well I know this variable set to one in our Miss is set to one as well. But if we don't have any white magic slotted, this is going to be zero. So we're going to cheat a little bit in jumping into our BP player. I'm going to find our w magic slotted right here. In fact, let me check this on so that way we can change this inside of our level editor if we want to and I'm going to change our w magic slotted to be let's go missed. And now again, our missed Active Time currently defaults to one.

So let's Compile and Save this and give this a play once again. And now we see a blue coloring instead of our desired pink coloring. Okay, we can go ahead and fix this. I know I said that ink pink before and that was my bad so let's go ahead and change this To be let's come under our fill color and opacity right here. I'm gonna set this back to its default I had some settings set in there that's why I was seeing blue I was like why am I seeing blue that was why so if I set my progress appearance back here to be all defaulted, I don't know where those setting weird settings came from that were blue. Now I am seeing the pink that I am expecting.

Let's give this a Compile and Save and try this one more time play it there is my pink meter. And now what I can can do is let's play with our variable inside of our player. So it's this Miss Active Time percentage that's the one that is driving how much of that pink meter that we see. So let's select this and make it so that we can edit this once our character is present in the level Compile and Save. Again my w magic slotted I am hard coding here to be Missed, let's click play. Now if I do shift an f1 that's gonna give me control of my mouse so I can jump on out of here.

Let me just minimize this really quick jump over to my level editor. And there is my spawn Ian BP player by World outliner. I'm just gonna select it. I'm gonna try to kind of bring in both of these at once. Okay, like so let me bring in my viewer as well. Like so I'm just gonna try to have both of these on screen at one time.

Okay, so with the player selected, over in my Details panel, I've got my white magic slotted set to miss Currently, there is my missed Active Time percentage currently at one and as I reduce this, look over in my play panel over on the right and if I can squeeze This a little bit more. See how I'm changing that Miss Active Time percentage and you're seeing that meter fluctuate up and down. That is working as intended. So let me exit out of here. Let's fullscreen, our editor here and let me set some stuff back to default. I'm gonna go back into my beat people they're the Miss Active Time percentage, you know what we will leave that.

The one thing I do want to change though before I forget is I'm going to select my widget w magic timer right here and over in the Details panel under the rendering section, I currently have this as visible I'm going to set it to be invisible for the time being now we will toggle this on and off in the coming videos when we hook up our mist and our Lens of Truth skills. But that will come later on so guys, let's give this one last Compile and Save. That will do it all for this video. We will see you in the next one.

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.