Timer Widget - Widget Component

Greg Wondra
A free video tutorial from Greg Wondra
Unreal Authorized Instructor
4.7 instructor rating • 5 courses • 16,416 students

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 Unreal Engine 4!

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

  • How to download, install, and setup a project in Unreal Engine 4
  • How to use the Side Scroller Project Template in Unreal Engine 4 to create a "Metroidvania" style game!
  • How to implement a Paragon Character (from Unreal Engine 4'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 4's Widget Blueprints
  • How to Script Interactive Gameplay elements utilizing Unreal Engine 4'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 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 Maupin come under your content Metroid Vanya 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. I'm actually gonna jump over to my viewport tab as well just to get off the vent graph. That's our focus here. The ad 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 Z location of one hundred. 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 it's that 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 wanted 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 us 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 say 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. The %s is bound to this function get w magic active time percent. And we're saying that if the w a magic slot it is set to Linz it will be well I know this variable set to 1 in our mist is set to 1 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 Ed if we want to. And I'm going to change our w magic slotted to be let's go mists and now again our Miss active time currently defaults to 1. 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. When I 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 we're blue. Now I am seeing the pink that I am expecting. Let's do this at 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 say like 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 in F one 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 spawn in BP player by world outlined. I'm just going to select it. Now I'm gonna try to kind of bring in both of these at once okay. Like so let me bring in my viewer is well like so I'm just going to 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 Miss active time percentage currently at 1 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 I'm changing that Miss active time percentage you're seeing that meter fluctuate up and down. That is working as intended. Let me exit out of here. Let's full screen our editor here and let me set some stuff back to default to go back in to my people error the miss active time percentage you know. We will leave that's 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 in or in the details panel under the rendering section. I currently have this is visible. I'm gonna 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 us one last compile and save that we'll do it all for this video. We will see you in the next one.