UI in Unity: Charging Up

In the previous article we looked at creating Event System Interfaces.

This article, will feature implementing a Charge Bar mechanic for our User Interface.

We will add a Slider, Text, and a Button. Zero out the Fill transform properties and set the pixel per unit multiplayer to 5 to square the corners of the Slider. (optional — hide slider handle)

We will create out Charge Bar class and get the Event System Interfaces of OnPointerDown and OnPointerUp events. Creating a boolean and setting the bool value in each event call.

In our Update function we will check if charging is true, if it is we check if our charge value is less of 100, and increase the charge value by a rate * Time.deltaTime.

We can add a button animation to signify when we are charging or not.

We create a function to change the intensity of the charge bar via the Fill area on the Slider.

We can add the animation to the Fill area and include the Charge Bar script to the Charge Bar button and link the references.

And that’s how we make a simple Charge Bar system interface using the events system interfaces.

Next, we will learn about Draggable UI.