Timer Widget - Widget Component

A free video tutorial from Greg Wondra
Unreal Authorized Instructor
Rating: 4.7 out of 5Instructor rating
8 courses
29,907 students
Timer Widget - Widget Component

Lecture description

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. 


  • Add a Widget Component (to BP_Player) 


  • Widget Component:  Widget_WMagic_Timer 

Learn more from the full course

Unreal Engine: Character Skill System

Master the tools used to build "Fortnite" as we craft our very own character skill system using the Unreal Engine!

25:45:13 of on-demand video • Updated November 2022

How to download, install, and setup a project in the Unreal Engine
How to use the Side Scroller Project Template in the Unreal Engine to create a "Metroidvania" style game!
How to implement a Paragon Character (from Unreal Engine's stock of FREE assets) as a Playable Character
How to add acquirable Movement, White Magic, and Black Magic Skills to a Player Character
How to add Health and Mana Systems to a project
How to create supporting HUD and Interactive Menus using Unreal Engine's Widget Blueprints
How to Script Interactive Gameplay elements utilizing Unreal Engine's Blueprint Scripting tools
How to hook up Player Character Animations
English [Auto]
Welcome back, everyone. Last video here for our timer widget. Our goal in this one is to add a widget component on to our BP player that we can show or hide to indicate to the user how long they're 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, come under your content, Metroid, Vania Blueprints, Characters, 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 one right here. So like 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 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 mean, 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 will leave is 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, 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 meteor right now is because over in our WBB 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 it is set to lense, it will be well. I know this variable set to one in our midst is said 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, you know, I'm going to change our W magic slotted to be let's go missed. And now again, our miss 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. OK, 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 want to 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 said my progress appearance back here to be all defaulted, I don't know where those setting weird settings came from, that we're 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 magic slotted in hard coding here to be missed. Let's click Play now. If I do shift in F1, that's going to 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 second MBP player, my world outliner. I'm just going to select it now. I'm going to try to kind of bring in both of these at once. OK. Like, so let me bring in my viewer as well. Like, so I'm just going to try to have both of these on screen at one time. OK. So with the player selected over in my details panel. I've got my white magic slotted set to miss currently. There is my miss active time percentage currently at one, and as I reduce this, look over in my play panel over in 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 full screen our editor here and let me set some stuff back to default. I'm going to go back in to my BP player, 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 magic timer right here and or in the details panel under the rendering section I currently have. This is 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. Oh, oh oh.