Tutorial overview: Working Stamina/health/magic bar that updates to the hud and more


If you are in to RPG type games, then this will definitely be something for you. This covers quite a few already explained things, but this will tie it all somewhat nicely into something a bit more playable.

It will cover:
Drawing a basic crosshair to the screen
A really quick and dirty Mini Map… Super basic (still working on it lol)
How to draw the health bar, mana and stamina bar (They are essentially a clone of the same thing.)

And the real bread and butter of it, the main part:
How to make the character expend stamina while sprinting, and when there isn’t enough energy revert back to normal movement. And update this info to the hud!

What you will need:

The blueprint editor.
A mask texture for the stat bar. there is a nice one provided by Epic in their blueprint HUD example.
A crosshair texture. There is an ok basic thing we can use in the engine assets.
perhaps a new keyboard and mouse and some arthritis cream, because there is a lot of typing, and mouse activity.

Now aren’t you lucky I was up for 2 days working this stuff out for my self :smiley:

The second video, can be found here:

The third video can be found here:

The below text is now outdated, as the video covers it all. But I will leave it here as a supplementary.

1. Drawing the crosshair

Now to get started, we need something to actually draw our funky goodies to.

We need a HUD blueprint. 
If you haven't got one, create one now and if you also don't know how to make it default to your game then look here: 

And come back a little bit later once you get a little bit better understanding of how it works. I'll likely add up another mini tutorial here in case you are definitely like me and DEEP END)

Once the HUD is open, we will need the somewhat standard get screen resolution stuff.

The Screen Dimension is a "Vector 2d" Variable type and will get called on quite a lot throughout your HUD. once you have this set up we can now draw the HUD on the screen.


This will get the screen dimensions and then do a little bit of math, to get the center of the screen. The add and minus usually offsets the texture drawn to line up properly. (usually half the texture dimensions)

The crosshair variable uses a crosshair that can be found in the engine content. just make sure to check "show engine content" if you can't find something. Its a variable so we can change it easily later.

Last thing we need to do is set the texture transparency in the "Draw texture" to masked. just click the arrow to expand the rest of the options.

Save and compile, test the engine. you should end up with something like this:


That's the crosshair done. Make a cuppa tea, pat yourself on the back or shout from a mountain top. You have earned it.

Now to draw the very basic Mini map. But be warned this isn't very great at the moment as I am still figuring out how to do the things I want with it. It can be unhooked if you don't like it at the moment.

2. Drawing the Mini Map

To get our minimap, we will need character/pawn blueprint and to get a new camera attached to it.
Position it somewhere above its head. Mine is currently set at 500 on the Z axis, but I still think that's a little bit too close.


We also need a scene capture 2d component to be linked to our minimap camera.

![render texture.JPG|319x368](upload://lrDMSBr5KNq97lCBzfoTjQnGLE8.jpeg)

Now we will need a texture we can render to. In the content browser, preferably in somewhere obvious for it, create a TexterRenderTarget2D and name it "Minimap" or something obvious.

![cont brow.JPG|954x570](upload://wdzEadTJqHvKbXJ09aUBGobMMdT.jpeg)

Open up the new texture and set the dimensions to 256*256. We wouldn't really need anything more than this and higher resolutions depending on what this camera is drawing may get quite intensive.

After that, we need to set our camera to use it. so click on your character blueprint and on the scene capture component, set the render target to your newly created texture.


There is a video on youtube, created by pepe thefrog detailing this previous part, found here:

Now that we have our minimap camera set up, we can now add it to our hud. and this is the easiest bit.

Open up your hud blueprint, and where we had our crosshair, on the last node, create a new "draw texture" and set its texture to the minimap texture we made earlier.


I have mine set up to be opaque, as it will show on the screen invisible else, and located in the bottom right corner of the screen. you can change its position by changing the values there. Just play around and experiment.

You will get something like this:

![minimap view.JPG|785x430](upload://rrj56Jd8fLOZ11a8e4FgEmEflok.jpeg)

Now as you can see there is a lot more work to be done for it, like locking the camera rotation, adding in a zoom in/out for the minimap and to add some sort of texture overlay a bit later on to make it look nice. If you don't really want it there, you can just unhook it from the crosshair node or delete it until there is something better.

Now that we have these out the way, now we get to the even bigger wall of text, at this point I hope someone makes a nice clear video about it.

The real reason you are here:

3. Drawing the Health magic or stamina bars

3A. Getting started.

First thing we need to do, is create our Blueprint Interface. These can be a little bit scary if you don't know how to use them effectively (I still don't) But it is used to store/gather incoming/out going values from one blueprint to another. In this case our main character BP to our HUD BP. And the values mostly health, stamina and magic. 

Create the blueprint interface, and name it to do with your hud. here we will create 3 new functions. each function will have 2 "float" outputs.

Function: Get Character Health
Float: Current Health Value
Float: Max Health Value

Function: Get Character Magic
Float: Current Magic Value
Float: Max Magic Value

Function: Get Character Stamina
Float: Current Stamina Value
Float: Max Stamina Value

![hp.JPG|272x598](upload://58pABbelsNettp4fS4nk27FN94k.jpeg)  ![magic.JPG|266x578](upload://t9EjchH2fxYkz4GIqFL7VSaUfPd.jpeg)  ![stamina.JPG|278x594](upload://s9T5EJWa27Y74jqykxrJVSY5EbI.jpeg)

Compile/save and then add the newly created interface to both the Hud and your character blueprints through their blueprint properties button.

Now we need to have assets for our attribute bars to draw.

The content examples have a nice simple texture, and a material created for us already that we can use.
I suggest copying them over to your project. you will have something like this:



I've changed the names of the parameters to max bar and current bar, to make it easier.
Once you have the main material, make a few instances, one for health, mana and stamina and customise them here.

By now we should have our materials and texture set up. the rest is now just coding :)

Here, it gets deep. And this is the more in your face, that is a lot of stuff going on let me go cry in the corner bit. But i will try and break this down as much as possible. Get ready for that arthritis cream.

3b. Drawing the health bar to the hud.

From our minimap node (or crosshair one if you decided not to minimap), we will get our "Get Character Health" function from which we created in the blueprint interface earlier.
Our target would be "get player pawn". 

Next we want to get 2 "Set Scalar Parameter Value" nodes and link them up in a line. These will read from the materials you created earlier and will do the texture updates on your hud for when your health is low or refils etc.
In the first one, set the parameter name of it to the max variable that is in the material we created earlier. the second one will the current. also note the order of these, as this is the order they are rendered in.

![scalar parameters.JPG|1180x313](upload://ezPd6BtaAmpSkNPuN7woQcIC3ZT.jpeg)

We now want to create a new Variable. This will be a "MaterialInstanceDynamic" type. Call it Health bar. connect up the variable to both parameter value targets. This gets the actual material we are going to use for the hud.
Next connect the current health value to the "Current bar parameter value" node and the the max health value to the other one.

Now we will draw the material to the hud, and set it with our "Health bar" Variable

![render bar.JPG|661x412](upload://cuYsyJIjQRctce05PtUuj6IAQwO.jpeg)

We now have one thing left before we can save, compile and see what we have ( a nice HP bar). 

We have to go into the construction script of our hud.  here we need to actually set it to use our Health bar material instant we made and set it to our Health bar Variable.

![hp b.JPG|815x328](upload://bHuBLJEnA90fEtzJnHtcTGImEzU.jpeg)

save, compile and see what you get :)

![HP bar.JPG|940x781](upload://Agqk7QzcPDDXltBlZtt4vqe1IxU.jpeg)

Whew, wasn't that a lot? but we have only just drawn something to the screen. It can recognize our health is lost, but that isn't connected up yet. Plus what if we wanted to draw some text over the bar saying what our total HP is, and whats left before the grim reaper with a megaphone comes to collect us? ah well that will be typed up shortly with plenty more goodies. 

But for now...

- being typed up, check back soon :)

very helpful and beautiful tutorials i’m following

Second video is now live, this will cover adding statbars on the hud, the minimap and cross hair, along with making the stats update the hud.


This should bring the thread back up to date before the maintenance happened.

If there is anything you need clarification on that i can help with then ask away.

Horus I wanted to say great job!! Thank you for bringing this to the community, I have read over the tut before the video and will make time to watch the video tonight. Again thanks and keep it up!! Feed back to follow

I’ve got lots of coffee and will be up most of the night/morning, so i can try and get most of them up tonight. :slight_smile:

i must find time to watch these, i’m not a rpg fan except DoW :wink: but HUD work is always good to know

There is a lot of stuff i am working on function wise that was inspired from dawn of war but tbh i am just getting a code base at the moment so i can make any type of game from with minimal effort.
I’m trying to expand the basic hud in to a more refined menu system but that’s throwing me off atm how i want to go about it. But something will pop up somehow. xD

After a bit of a hectic weekend of crashing from bipolar and my friends birthday parties to cheer me up, part 3 is up. Not perfect, but I’m not a perfectionist xD://youtube.com/=DLtcBYKfn0k

(may still be processing if it is unavailable or low quality.)

ive just realise when i was linking your tutorial for someone that i forgot to say thanks : so : Thank you, i learned by your tutorial and it helped me.

THanks a lot, very usefull tutorial.