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.
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.
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.
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.
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’.
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.
Hopefully the tutorial is helpful, and feel free to leave a reply with any questions.
Thanks again.
