No announcement yet.

Blueprint Tutorial: Stamina/Progress Bar Implementation

  • Filter
  • Time
  • Show
Clear All
new posts

  • 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.

    Click image for larger version

Name:	yrVtFKl.jpg
Views:	1
Size:	43.2 KB
ID:	1166799

    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.

    Click image for larger version

Name:	RJtFi6O.jpg
Views:	1
Size:	30.8 KB
ID:	1166801

    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.

    Click image for larger version

Name:	RjOjkJn.jpg
Views:	1
Size:	42.7 KB
ID:	1166802

    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.

    Click image for larger version

Name:	jRodp9t.jpg
Views:	1
Size:	40.0 KB
ID:	1166803

    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'.

    Click image for larger version

Name:	Capture.JPG
Views:	1
Size:	58.9 KB
ID:	1166975

    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.

    Click image for larger version

Name:	VEJ8gH3.jpg
Views:	1
Size:	11.9 KB
ID:	1166806


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

    Thanks again.
    Attached Files
    Last edited by ConnorTheScot; 11-16-2015, 08:36 AM.

  • replied
    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.
    No get Health or get Stamina node pops up. This is as far as I got in my UI. There is no get health or get stamina hat shows up. My wegit blueprint. No get health or get stamina shows up in there also.

    Leave a comment:

  • replied
    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
    Last edited by Echosyp; 11-14-2015, 03:21 PM.

    Leave a comment:

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

    Leave a comment:

  • replied
    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 (:

    Leave a comment: