Unity UI: Events & An Animated Charge Bar
Intro
This article will cover using Unity’s UI Events to create a simple animated charge bar. This could be used for a number of game mechanics like a charged shot or determine the power of a projectile.
UI Setup
The Charge Bar will be made up a text, slider and butt element.
Read my previous article on Sliders and how to setup a status bar.
Charge Script
This script will be attached to the Button object and we are going to be using the UI and/or Text Mesh Pro libraries.
We need access to the Slider and Text objects, so we will declare those variable types.
Drag the objects to the script in the inspector.
UI Events
UI Events give you the ability run code when certain mouse actions happen. We are going to be using the Pointer Down and Up. This can detect when the mouse is being held down or when it is released and not being pressed.
This requires the Event System libraries. You will call the Event you will want to use and you will get an error.
You need to create the interface and you can easily do this by right-clicking the on the event, select Quick Actions & Refactorings, and Implement the Interface.
This will create the Event methods and those errors are resolved.
The next two variables are for how much we are going to change the slider (charge bar) by and if the button is being pressed to start or stop charging the bar.
Using the Pointer Down and Up Events, when the pointer is down on the Button we want to start charging and when the pointer is up (not being pressed) we are going to stop charging.
On start, set the charge amount to 0 and set the charge text to the charge amount.
In Update, when charging is true (button being pressed) we will add to the current charge amount and round it to stick to whole number and only do this is the charge amount is less than the max value of the slider (charge bar). Once the charge amount goes over the max value, we set the charge amount to that max value.
We do the opposite for when the charing is false (button not being pressed) by subtracting from current charge amount only when the charge amount is greater than the slider’s min value. Once the charge amount of goes below the min value, we just set the charge amount to that min value to prevent from going below it.
Finally, we set the slider (charge bar) value to the charge amount and set the charge text to the charge amount.
Now when the Charge Button is being click on will increase the slider amount and when it is not being pressed the slider will start to decrease.
Charge Button Animation
On the Charge Button, we will set the transition to Animations and generate the Animation.
In the Animation window, we are going to select the Pressed state so this Animation plays when the button is pressed.
Hit the record button the Animation timeline and we can right-click on the Color property of button to add the first key of the Animation.
We will copy the first key and place it at the end of the Animation, but for the middle key we will reduce the transparency of the button.
This gives a blinking effect to button.
Fill Animation
On the Fill component of the Slider, create an Animator and Animation clip from the Animation window.
We are going to create the same pulsing effect the charge bar, but we are going to increase the speed of it as the charge bar value goes up.
Currently, the animation speed is staying constant. The Animator has the ability to change the play speed of the animation clip and we can access this in the script to change it.
In the script, declare a Animator type variable and serialize it.
Assign the Fill component of the Slider, which has the Animator on it, to the script in the inspector.
Create method that will check the charge amount at different levels and we can set the play speed of animator. As the charge amount increase we will increase the speed of the animation speed.
Call this method when the charge bar is current being charged.
It is difficult to see the quicken the of pulsating in the example below since it is a GIF, but it works!
