New Input System — Creating A Progress Bar

Objective: Create a charging progress bar using the New Input System!

We begin by creating an UI Slider.

We are not going to need the Handle so select it and delete it.

To completely fill the bar, we need to select the Fill area and set the right from 15 to 5.

We know the value that we need to manipulate is the value setting under the slider. It goes from 0 to 1 and we want to control this with inputs.

Create an Input Actions(UIInputActions), and an action map(UI). We need an action (Charging) and this is going to be a button type. Set a binding for the space key.

Create a class for the UI Slider and attach it.

Now attach the UI script to the input actions and we need a starting performance and a canceled performance.

These will be called when we start pressing the space key and when we stop pressing the space key.

We are going to need a reference to the UI slider, so we need to add the UI library.

What are we wanting to manipulate with this code? we are wanting to manipulate the value of the slider.

We can create a reference simply by serializing the variable and applying it in the editor.

We now have access to the slider’s value and can manipulate it through code.

We can handle the start charging and done charging using a coroutine. We can control this with a while loop using a bool as a key to control when the charging starts and stops.

Here we have the coroutine being called when the space key is starting to be held down. Inside the while loop we hae the slider value increamenting by 1 every 1 second. This means that the bar will take one whole second to fill the bar.

Now we need to lower the charge bar back down when we are no longer holding the space key. We can do this with another while loop.

Now when you let go of the space key the bool key will switch and the slider value will decrease at the same rate it increases at.

If you wanted the charging to take longer, say you have a power attack that you want to take five seconds of holding time to charge then we can apply this to our formula. Take the formula and divide it by how long you want the charge time to take.

This will now take 5 seconds to charge.

Now you know how you can manipulate UI using the new Input System. Don’t be afraid to experiment with your code and I’ll see you in the next tutorial!