Creating an Animated Charge Bar in Unity 2021 URP

In this article we’ll create a simple charge bar using Unity’s built-in UI system.

Initial Setup
We need to add a canvas with background image, a slider, and a button.
Customize the settings to suit your tastes, but do disable the handle.

Also add a text field with the text set to “Charging!” and then set it is inactive.

Now create a script and assign it to the Button game object.

The ChargeBar Class/Script
In the new script, add the using statements for UI, EventSystems, and TMPro.

Then add some class variables to hold the text, slider, and button elements.

We’ll be implementing the IPointerUpHandler and IPointerDownHandler interfaces in this class so that we can detect more than the simple click behavior of our button.

When done, make sure to drag each element into the appropriate field of the script component in the Unity Editor Inspector window.

I’m using Rider, but Visual Studio will have a similar option.

To grab the default methods for each interface, right click on the interface name, select “Show Context Actions”, and then click “Implement missing members”.

Do this for each interface.

If we run the game at this point, we can see our debug.log messages happening when holding down or letting up on the button.

Let’s add 3 more class variables to store information about the charging state and values.

In our OnPointer events, we’ll modify the bool _isCharging value and show or hide the charging text.

In the Update() method, we’ll check the bool value and _currCharge value and then update the _currCharge value if needed.

Our slider’s min value is 0 and max value is 1.

That is why our if statements check between these values and clamp to these values.

We’ll set the Charge Increment to 0.5 in the Inspector.

If we run the game at this point, our charge bar is working as expected!

Animating the Button
Let’s make our button flash while it is charging by selecting “Animation” for the “Transition” field on our Button component and then auto generating the animation file as shown above.

Save this in an appropriate folder within the project Assets folder.

In the Animation window, select the “Pressed” state and click the record button.

At 0:00 seconds, add a key for the button in its current/normal state.
Do the same at 0:30 (half a second).

At 0:15 (1/4 a second), add a key with the color set to a light grey.

Turn record off in the Animation window and hit the play button to preview.
Adjust as needed.

If we hit play, we should see something similar to the above with our button flashing.

Animating the Slider
Since UI Sliders don’t normally animate as buttons do, we’ll need to create an Animation directly in our Project folder as shown above.

Select the Slider > Fill Area > Fill element afterwards.

Now drag the ChargeSlider animation onto the Fill element’s component list and the Animator component should appear a newly created Controller.

Now do something similar to what we did with the button earlier using the Fill Color field to add keys.

Select the ChargeSlider animation in the Project window and then enable “Loop Time” in the Inspector window.

Hit play and we see our flashing charge Slider working as expected.

The ChargeBar Class/Script
Let’s add a serialized field for the Animator on our ChargeSlider to the ChargeBar class.

Now drag the Fill element onto the newly created fieldof the ChargeBar script component on the Button element.

To vary the speed of the charge bar flashing, we add the ChangeAnimSpeed() method and adjust the Animator’s speed value based on _currCharge value.

Make sure to call ChangeAnimSpeed() in the Update() method.

Hit play and we’re all done!