Download

Blueprint Tutorial: Stamina/Progress Bar Implementation

Hi there!

Below is a tutorial I have put together for implementing a basic stamina bar using Unreal Editor’s Widgets, which essentially is an extension to my tutorial for implementing stamina regeneration/decay in to your game.

The tutorial is broken down over various steps which should help when troubleshooting and generally it easier to process when working through.

As mentioned above, this tutorial is intended to be completed after my previously submitted Stamina Regeneration/Decay Tutorial, however the concept and implementation of the UMG progress bar can be used in various different situations and the steps we will take in this tutorial can also be applied when creating other progress bars, for example health or mana bars.

Throughout the tutorial, I have hyperlinked various bits and pieces which might provide some clarity as to the functions of some of the nodes used. Might be useful for anybody keen on understanding what the nodes functions are, however the UE4 documentation is a bit scarce and does not provide a great amount of clarity.

Hopefully my explanations are clear and easy to work through, however leave a reply if you think there is anything that could have been improved on.

Thanks folks


Objective - The objective of this tutorial is to implement a progress bar which will give a visual indication of our stamina in game. The bar will deplete and regenerate when using our sprint function.

Step 1.0 - To start things off, the first thing we will do is create a new ‘Widget Blueprint’ within our project. This can be done by right clicking within our content browser, navigating to the User Interface selection and clicking on the ‘Widget Blueprint’ selection. In this example, I am going to name this new widget ‘StaminaBar’, however you can name this anything that is appropriate to your game.

79ac1c524589e60f2a1beca07d27efb975eca27d.jpeg

Step 1.1 - Now, with our ‘StaminaBar Widget’ now created we must now open this new blueprint and drag a Progress Bar in to the viewport within the editor. You can find the Progress Bar item from the palette on the left side of the editor.

fb4cb47cf3f09d6076f320c248a886b3661aecb8.jpeg

We can anchor the location of our progress bar by clicking on our Progress Bar within the viewport and navigating to the details pane on the right side of the editor. You will see that within the Slot section of the details pane, we can create an anchor for our Progress Bar, I have chosen to centralize my bar at the bottom of my viewport.

4c92d90059f2c4fdf2a4d7532288b7b549b1f1ac.jpeg

Step 1.2 - With our progress bar now created, we must now create a binding which will interact with our ‘ThirdPersonCharacter Blueprint’ to get the value of our Stamina during gameplay. To do this, navigate again to the details pane on the right side of the editor and within the Progress section, you will see a value for percent with a ‘Bind’ button to the right of it, click on Bind button and create a new binding.

e75088df734534328be59c64def01afa0ca8693b.jpeg

Step 1.3 - Now that we created a new binding, a functions graph has been opened and this is where we will create the set of nodes to update our progress bar with our Stamina variable from our ‘ThirdPersonCharacter Blueprint’.

This first node we want to create is ‘Cast To ThirdPersonCharacter’ and we will do this by dragging a wire from our ‘Get Percent 0’ node and searching for ‘Cast to ThirdPersonCharacter’. Now we must connect an object to this new ‘Cast To ThirdPersonCharacter’ node and in this case the object will be our player character, which we can connect by dragging a wire from our object pin and typing ‘Get Player Character’.

Now from the ‘As Third Person Character’ pin we want to create a new node which will get the value of our Stamina from the ‘ThirdPersonCharacter Blueprint’, to do this simply drag a wire from the ‘As Third Person Character’ pin and type ‘Get Stamina’.

From the ‘Get Stamina’ node, we now want need to divide our Stamina by 100, as the percentage for our Progress Bar is driven by values between 0.0 and 1.0. To do this drag a wire from the ‘Stamina’ pin and type ‘Float / Float’, with the new division node created, go ahead and type 100 into the second value of our division node.

Now from the new float pin on our division node, drag a wire and plug this in to the ‘Return Value’ of our ‘ReturnNode’.
Finally we must connect the top pin from our ‘Cast To ThirdPersonCharacter’ node to the ‘ReturnNode’.

428617cae0ebca3e3ca285dad33d1a01c8e7caa0.jpeg

Step 1.4 - With our ‘StaminaBar Blueprint’ now configured, we must now navigate back to the EventGraph of our ‘ThirdPersonCharacter Blueprint’ where we will now create a ‘Event BeginPlay’ node anywhere within the event graph.

From this node, we will drag a wire and create a ‘Create Widget’ node and select our ‘StaminaBar Blueprint’ from the Class drop down menu.

From the pin of our ‘Create StaminaBar_C Widget’ node we must now create a ‘Add to Viewport’ node and then connect our ReturnValue from our ‘Create StaminaBar_C Widget’ node to the Target pin of the ‘Add to Viewport’ node.

770423051c3eb0155a796b25ea2348d05b6fecfd.jpeg


Hopefully the tutorial is helpful, and feel free to leave a reply with any questions.

Thanks again.

Hey there, since 4.9 you can add multiple return nodes. Please make sure to use them in your Tutorials to avoid having a possible path without a return value.

In this screenshot you can see the “Cast”-Node telling you that the “Cast Failed” exec has no connection to the Return node. Make sure to copy paste the return node
and connect the exec with it (:

Thanks for the tutorial (:

&d=1447365516

Hi eXi,
Thanks for spotting that.
Will get these amended in the morning.
Thanks again!

Does this make the char stop sprinting when the stamina reaches 0?

Also I am using the 2d side scroller so on my Cast To node, i have Cast to 2dPaperCharacter, and when I try to drag off the As 2d Paper Character node and search for get stamina, my get stamina node doesn’t look like yours. Where you have Target on one side and Stamina on the other. Mine just shows Stamina.

Using UE4.10

Hello. I am having some trouble. I was watching the Youtube video tutorial online and it brought me here. I have a road block. Im trying to set mine up but no get “Stamina” or get “Health” node shows up in the search bar. I am using udk 4 v4.14. How do I make a health stamina and magic float or variable from scratch since one dosent pop up for me? Thank you.

I’m completely new to unreal4 so I haven’t been able to figure this out on my own yet but I have my bars set up the way they should in the widget blue print they fill up when I add value to them but when I go into the test play they don’t show any color or fill in they are just empty bars I set up the bindings compiled no problems but they won’t fill in in the game any tips on what the problem could be

Jazz904, it looks like its been a few years so im not sure if you need this or not. I started the tutorial today and ran into the same problem. Turns out, I needed to actually read the thing. It doesnt work if you don’t do all ConnorTheScot’s tutorials for this. This is the third part. You make the ‘Stamina’ part in step two I think. I finally just finished all the tutorials and am now trying to fix the issues I’ve caused. I did do a few things new to the blueprints thay im proud of because I am the newest of newbies here. Not sure where the errors are now but working on it.