Timer Progress Bar

I have a powerup timer and wanted to add a progress bar that decreases at the same pace as the timer. I am very close to perfecting it, but the progress bar’s fill decreases a few seconds before the timer runs out. I have tried several things, but cannot get it to work. Any suggestions?

Here’s my code:

using UnityEngine;
using System.Collections;
using UnityEngine .UI;
using UnityEngine .SceneManagement ;

public class PowerUpTimer : MonoBehaviour {

	public Text timer;

	public Color slowDownColor;
	public Color goldToothColor;
	public Color X2Color;

	float goldToothTimeAmt;
	float multiplierTimeAmt;
	float slowDownTimeAmt;



	public Image goldToothFillImg;
	public Image multiplierFillImg;
	public Image slowDownFillImg;

	// Use this for initialization
	void Start () {

		goldToothFillImg.enabled = false;
		multiplierFillImg.enabled = false;
		slowDownFillImg.enabled = false;

		/*goldToothTimeAmt = GoldToothPowerUp .time ;
		multiplierTimeAmt = Multiplier.time;
		slowDownTimeAmt = TimeChangingPowerUp.time;*/

		timer.GetComponent <Text> ();
		timer.enabled = false;

	}
	
	// Update is called once per frame
	void Update () {

		if (Multiplier.Active == true) {

				multiplierFillImg.enabled = true;
				timer.enabled = true;
				Multiplier.time -= Time.deltaTime;
				multiplierFillImg.fillAmount -= (Time.deltaTime / (Multiplier.time));
				//multiplierFillImg.fillAmount -= (Multiplier.time/Time.deltaTime);
				timer.text = Multiplier.time.ToString ("f0");
				timer.color = X2Color;


		}

		if (Multiplier.time <= 0) {

			multiplierFillImg .enabled = false;
			Multiplier.Active = false;
			Multiplier.time = 20f;
			timer.enabled = false;

		}

		if (GoldToothPowerUp .Active == true) {
			
			goldToothFillImg.enabled = true;
			timer.enabled = true;
			GoldToothPowerUp .time -= Time.deltaTime;
			goldToothFillImg.fillAmount -= (Time.deltaTime / (GoldToothPowerUp.time));
			//goldToothFillImg.fillAmount -= (GoldToothPowerUp.time/Time.deltaTime);
			timer.text = GoldToothPowerUp .time.ToString ("f0");
			timer.color = goldToothColor ;

		}

		if (GoldToothPowerUp .time <= 0) {

			goldToothFillImg.enabled = false;
			GoldToothPowerUp.Active = false;
			GoldToothPowerUp.time = 10f;
			timer.enabled = false;

		}

		if (TimeChangingPowerUp .Active == true) {

			slowDownFillImg.enabled = true;
			timer.enabled = true;
			TimeChangingPowerUp.time  -= (Time.deltaTime/TimeChangingPowerUp.speed) ;
			slowDownFillImg.fillAmount -= ((Time.deltaTime / TimeChangingPowerUp.speed) / (TimeChangingPowerUp.time));
			//slowDownFillImg.fillAmount -=  (TimeChangingPowerUp.time/Time.deltaTime);
			timer.text = TimeChangingPowerUp.time .ToString ("f0");
			timer.color = slowDownColor ;


		}

		if (TimeChangingPowerUp.time <= 0) {

			slowDownFillImg.enabled = false;
			TimeChangingPowerUp.Active = false;
			TimeChangingPowerUp.time  = 20f;
			timer.enabled = false;

		}

	}
}

you have to define max time outside of the update function. It should not change each frame. Like… it should be the total amount of time you want the power up to be active for each time. In this case, it looks like you are trying to set it to 20. So let’s go with that.

Next, you need to find how much time this power up has been active. Call that activeTime, for argument’s sake. Each frame, you should be adding Time.deltaTime to that.

Now we need to know what percentage of the max time we’ve gone through so far. You do this by dividing activeTime by maxTime.

Finally, we need to use Lerp to give us a number between 0 and 1 that we can shove into fillAmount.

Below is a super quick, super basic version of what I’m saying. obviously you can rename the variables whatever you want, and there is obviously more to the method than what I have here, but this should get you a value that goes from 1 down to 0 as the power up remains active.

public float MaxTime = 20f;
public float ActiveTime = 0f;
public void Update()
{
    ActiveTime += Time.deltaTime;
    var percent = ActiveTime / MaxTime;
    slowDownFillImg.fillAmount = Mathf.Lerp(0, 1, percent);
}

Instead of decreasing the fill amount every frame, just set the amount to the percentage of how much it should be filled. Something like:

float maxFillAmount;
float maxTime;
float remainingTime;

float percentageRemaining = remainingTime / maxTime;
float fillAmount = maxFillAmount * percentageRemaining;

slowDownFillImg.fillAmount = fillAmount;

That might work? It’s basically what I did for my stuff.