Dec 3, 2022
Working with Unity New Input System
Learning how to make a UI Charge Bar
Challenge: Creating and Charge Bar that will increase value over time as long as you keep pressing down the space bar.
For this challenge we are going to use the New Input System and Unity UI to create an UI bar that indicates a “Charge Meter”.
Preparing for the Challenge:
For this challenge we are going to continue to use the previous Bouncy Ball file that we created for the previous challenge that can be found here. We should have the Bouncy Ball Input Action Maps created along with the Sphere and Jump script attached to it.
The only additional objects which we are going to add to this project is an Canvas with an “Slider” object. Since this object isn’t going to be used as touch component we can get rid of the Slider tab.
Next I did some adjustments to the color of the slider and also the position so it looks like below.
Then we are to add in the bindings for the Action Map. Since I want the same button “aka the Space bar” to also trigger the jump and also charge meter, the are both going to use the same binding.
The Charge Action is an Button Action. Therefore there won’t be any Interactions attached to this binding.
Scripting the UI Elements:
Time to start scripting the entire charge meter process. For this function I decided to keep organized so I decided to create a new C# script, I called this script “Charging”.
Since this script is going to access some of the Canvas UI elements, I am going to start by accessing the UI library before anything else is scripted.
Then in usual Input fashion, we are going to activate and enable the proper Action Map.
Just like how we did the Bouncy Ball script, we are going to apply the same logic for the charge meter. We are going to use the “performed” and also the “canceled” function to determine the press and release of the space button.
To understand how the charge meter is going to work, we are going to need to understand how the logic behind this function operates.
When the space bar is pressed and hold, Charging = true,
When the space bar is released then Charging = false.
When Charging = true the Meter will increase value by “x” unit.
When Charging = false the Meter will decrease value by “X” unit.
Looking at this logic, through our experience we know that an IEnumerator will be the best option to control this logic. With an local bool that is triggered by the inputs, we can control the slider value within the IEnumerator.
Start by created an private local variable to access the UI Slider, and also a local bool called “is Charging” and set the default to false.
Then we are going to create and IEnumerator called Charging Up. In this numerator we are going to create two While loops. The first while loop only occures when the bool “is Charging” equals true. When the bool is “true” then we will increase the slider’s value by 1 multiplied by Time.
The second while loop only occurs when the Slider value is more than 0. Meaning that the slider must be “charged” to some value before the decreasing can occur. If the slider value is 0 then that means the meter was never charged, therefore the meter can’t be reduced anymore. This entire while loop can only occur when the bool “is Charging” isn’t true.
This brings us to the Button Input method where we attach the boolean state. When the Button is preformed (aka pressed) then the bool “is Charging” is set to “true”. We can also start the Numerator within this method.
As for the Canceled (aka Released) we are going to set the bool “is Charging” to false. Which will kick start the decreasing of values in the charge meter.
Once you saved and return back to Unity, make sure you attach this “charging” script to one of the objects on the scene. And also make sure to attach the “slider” component to the slider slot in the script.
Once you hit play, you should be able to press the space bar and see the charge meter do its job.
