Creating a Power Bar With Unity’s New Input System

5 min readNov 8, 2022

Objective: To create a loading power bar using Unity’s New Input System for our ball.

We have previously created a scene in Unity that has a ball, some targets and when holding down the ‘Space’ key it charges in power and fires towards the targets. However, we never had any visuals to show this happening in real time!

I want visuals! And by that I mean I want to see a power bar charging up when I hold the ‘Space’ key down and charging down when it is not.

Creating a Power Bar Using a Slider

Before we dive into any code, let’s get started by building the Power Bar Slider.

Click the ‘+’ symbol in the Hierarchy → UI → Slider. This will automatically create a Canvas, Slider and Event System:

I am going to rename mine to ‘Power Bar Slider’.

From here you can choose how you want your bar to look visually (by playing around the ‘Rect Transform’ component settings). I will take you through the steps below of how I changed mine.

Slider Bar Changes

We can delete the ‘Handle Slide Area’ to start with as we won’t be using that. You should see the circle disappear on the left hand side of the slider bar.

Next, on the ‘Fill Area’ game object it comes default with some padding settings in the ‘Rect Transform’ component that we want to change:

Change both of the ‘Left’ and ‘Right’ to 0. You won’t see any change when you adjust the them, but if you change the ‘Fill’ game objects color you will see what I mean by padding. The fill will never make it to the end:

After we have set ‘Right’ to 0:

Let’s now get rid of the final padding on the left hand side of the slider. Clicking on the ‘Fill’ game object and going to ‘Rect Transform’, let’s adjust the ‘Width’ from 10 to 0:

Much better!!

Power bar is built! Time to add some logic, and make the ball slingshot into the targets depending on how long that power bar is charged for.

Building Logic/Code

With the slider looking great, we can now build some logic/code so that when we hold down the ‘Space’ key, the bar fills up.

For this we are going to need to access the ‘Value’ field, located in the ‘Power Bar Slider’ game objects — ‘Slider’ Component:

Let’s create a reference to it by Serializing a GameObject in the ‘Bounce’ script (shown below). Make sure to drag and drop the ‘Power Bar Slider’ game object into the field in the Inspector.

Let’s open up the existing ‘Bounce’ script from the previous article and build on that in a few stages:

We need a multiplier for our Power Bar to increase/decrease gradually on the screen.

We only want to be able to hold down the Power Bar once, so we are going to use a bool check (which will be used with a coroutine).

There is a reference to the Slider, as mentioned above.

We also need to register the Action to the ‘Started’ event.

This is the BounceStarted() method that we registered to the ‘Started’ event.

Use the bool check for StartCoroutine() in here.

Update the existing BounceCanceled() method so that the _forceEffect is equal to the _slider.value. This will be used as our multiplier for the force calculation which added to the ball game object. The more we hold down the ‘Space’ key, the greater the multiplier effect, up to a maximum of 1 (from 0 to 1 — You can change these values in the Inspector).

When the ‘Canceled’ event triggers (when we let go of the ‘Space’ key), take the force calculation and apply it to the ball, also setting the bool back to false so we can start it again.