Healthbar - Unreal Engine 5 Tutorial

all assets used in this tutorial will be in the description all right we're going to and create an active component so right click blueprint cost select active component going to go a and name this health manager group component going to go and open this up we're going to create some variables Max health max Health we're going to go and set this to a float you can do that over here or click this float so max health and current health there we go that's all we need for here for now so we're going to go and create a blueprint interface so right click blueprint interface I'm going call this health manager owner BPI we're going to go and open that up we're going to create a new function call it BPI unstore get health information in the output section we're going to add two going to set these to floats of course and call it Max health and current health going to go and save and compile that we're going to go ahead and create a widget blueprint so right click user interface widget user widget I'm going call this HUD widget blueprint and I'm going to go and create a curve so rightclick miscellaneous curve we're going to select curve linear color I'm going to just call this health curve and we're going to going go and open that up and so right here go and double click I'm going to make this green and then over here double click I'm going to make this red and then I'm going to add one right in the center and I'm going to make this uh nice orangey yellow color I'm going to go and save that and I'm going to go and set this to.5 there we go and I'm going to go and import my stat bar asset there we go go and save going to go and open up the widget go ahead and add a canvas panel there we go and go ah and add a progress parts right here under common there we go I'm going to go ahead and make this to 250 by 50 position 25 25 I'm going to go and anchor this to the top left so click on anchors and then this one right here is top left and we're going to go and add a image to our background and fill so go and click this and you can use this Arrow to assign any variable of something that you have currently clicked in your content browser so there we go there we go I'm going to go down here to fill color and opacity I'm going to go and set this to one or I'm sorry White and in tint for your color you can either make it one color or you can do the grani it like we set up right here with our curve I'm just going to go ahead for now make this red go ahead and let's Oh and before we forget make sure draw as image there we go go save and compile that go to your graph event construct we're going to get get player pawn and we're going to go ahead and cast to our character of choice I'm using the third person template so I'm going to cast it the third person character and I'm going to go ahead and right click on this as BP third person character I'm going to promote it to a variable I'm going to name that variable to character and now I'm going to go to my event tick and out of my event tick I'm going to to get BPI get health information using the target for a character you can go ahead and hold control and hold left click to go and get a get reference right there now we're going to go and get our progress bar so same thing P control and left click so out of this I'm going to go and set percent going to go and organize these really quickly so we're going to go get our we're going to go ahead and get a divide so just right click type in divide and plug our our Max Health into this bottom node or pin apologize and current right there we're going to go and plug this into that and so we're going to go ahead and get our curve so we're going to create our color curve or gradient I'm sorry gradient color curve so we're going to go and create a linear curve linear curve linear color right there we're going to go ahead and add our curve right here Health curve we're going to and get that get time range oh I'm sorry get get linear color value in time right there from this pin to this pin and we're going to go ahead and sent tint or set fill color and opacity and plug that in and since we're having to used the fill color we're going to go ahead and go back up here to designer tint I'm just going to make this white and so instead of that being your color you'd want to put it right here here all righty go ahead and compile and save we're going to go and open up our character so like I said whichever you're using I'm using the third person blueprint so I'm going to open up the character I'm going to go and add a component health manager blueprint component we're going to go to class settings and implemented interfac we're going to go and add our health manager owner BPI we're going to go over here to the bottom left interfaces get health information and we're going to go and drag out from the top left of our components Tab and get our health manager we're going to get both our Max and current health we're going to just go and plug those in compile save and close that out now we're going to go to our event graph go to your begin play and we're going to go and create a widget HUD we're going to go and add that to the viewport so you can drag out of this return value add to viewport make sure those are connected we're going to go and compile and save we're going to go over here to our health manager and we are going to change our values so I'm going to set this to 100 there we go file and save if you'd like to test if your health bar works you can go and add some input events so I'm just going to use some basic Keys one and two and drag out our health manager we're going to get both our Max and current health and we're going to go and set our current health as well and drag it into here both times what I'm going to do is I'm going to get a subtract and a add operator for Math and I'm going to go and get our current health plug it in the top one right here I'm going to subtract and plus 25 so one will be for adding two for be subtracting and I'm going to go ahead and add a clamp node so all we do is we put in here just like this you can click on a pen hold control and left click and you can drag it out just like that so I'm going to go and do that Max into here and our values will plug into here and we can go and compile and save and we can click play and there we go so now we can subtract as you can see it's using a gradient and it's working perfectly thanks for watching Everybody if you'd like to support me you can check out my patreon in the description

Channel: Haez

Views: 150

Keywords:

Id: GsHWCPvkiQA

Length: 8min 58sec (538 seconds)

Published: Tue Dec 19 2023