How would you make an energy bar, loading progress bar, health meter, or other visual gradually fill up?

Questions & Answers
1

Say you have a bar at the bottom of the screen, and you want the player to go around picking up items making the bar look like its rising with color, like a health bar or something?

2

Here's some code I have to display a horizontal filling bar. It could be easily coverted to vertical orientation.

var barDisplay : float = 0;
var pos : Vector2 = new Vector2(20,40);
var size : Vector2 = new Vector2(60,20);
var progressBarEmpty : Texture2D;
var progressBarFull : Texture2D;

function OnGUI()
{

    // draw the background:
    GUI.BeginGroup (new Rect (pos.x, pos.y, size.x, size.y));
        GUI.Box (Rect (0,0, size.x, size.y),progressBarEmpty);

        // draw the filled-in part:
        GUI.BeginGroup (new Rect (0, 0, size.x * barDisplay, size.y));
            GUI.Box (Rect (0,0, size.x, size.y),progressBarFull);
        GUI.EndGroup ();

    GUI.EndGroup ();

} 

function Update()
{
    // for this example, the bar display is linked to the current time,
    // however you would set this value based on your desired display
    // eg, the loading progress, the player's health, or whatever.
    barDisplay = Time.time * 0.05;
}

Edit:

If your health bar is non uniform in its layout - that is, if it doesn’t fill up in a straightforward rectangular linear way - there is a custom shader on the wiki, here, that you can use which uses a greyscale mask to define the reveal pattern.

3

I was reading this answer, and i felt i should convert it to C# for an easy read to those who prefer C#.

here it is:

using UnityEngine;
using System.Collections;

public class Progress : MonoBehaviour {
	public float barDisplay; //current progress
	public Vector2 pos = new Vector2(20,40);
	public Vector2 size = new Vector2(60,20);
	public Texture2D emptyTex;
	public Texture2D fullTex;
	
	void OnGUI() {
		//draw the background:
		GUI.BeginGroup(new Rect(pos.x, pos.y, size.x, size.y));
			GUI.Box(new Rect(0,0, size.x, size.y), emptyTex);
		
			//draw the filled-in part:
			GUI.BeginGroup(new Rect(0,0, size.x * barDisplay, size.y));
				GUI.Box(new Rect(0,0, size.x, size.y), fullTex);
			GUI.EndGroup();
		GUI.EndGroup();
	}
	
	void Update() {
		//for this example, the bar display is linked to the current time,
		//however you would set this value based on your desired display
		//eg, the loading progress, the player's health, or whatever.
		barDisplay = Time.time*0.05f;
//		barDisplay = MyControlScript.staticHealth;
	}
}
7

OK I know this is an old post, but here is a post on how to achieve this using the new unity ui
http://www.thegamecontriver.com/2014/08/unity-46-create-health-bar-hud.html

4

public Vector2 pos = new Vector2(20,40);
public Vector2 size = new Vector2(60,20);

I had to declare the variables pos and size in the Start() function, if the box appears at 0,0 then do the same

Start(){

pos = new Vector2(400,400);//Or wherever you’d like to position it
size = new Vector2(300,20);//or whichever size you’d like it to be.

5

Took me a while, but I figured out how to get the bar to move from bottom to top of a vertical progress bar. I also programmed it to oscillate up and down at a specified speed.

public Texture2D progressBarEmpty;
public Texture2D progressBarFull;
public Vector2 pos = new Vector2(20, 40);
public Vector2 size = new Vector2(20, 60);
public float speed = 0.5f;

float barDisplay = 0;

void OnGUI() {
    // draw the background:
    GUI.BeginGroup(new Rect (pos.x, pos.y, size.x, size.y));
        GUI.Box(new Rect(0, 0, size.x, size.y), progressBarEmpty);
  
        // draw the filled-in part:
        GUI.BeginGroup(new Rect (0, (size.y - (size.y  * barDisplay)), size.x, size.y  * barDisplay));
            GUI.Box(new Rect (0, -size.y + (size.y * barDisplay), size.x, size.y), progressBarFull);
        GUI.EndGroup();
    GUI.EndGroup ();
}

void Update() {        
    barDisplay += speed * Time.deltaTime;
    
    if (barDisplay >= 1.0f) {
        barDisplay = 1.0f;
        speed *= -1;
    } else if (barDisplay <= 0) {
        barDisplay = 0.0f;
        speed *= -1;
    }
}
6

Thanks, this was very easy way to do this.

8

Hi,

I tried the code and its working fine for filled part. I need help on reverse version of the code.

  1. The bar is depleting as time progress.
  2. I collect some items and bar filled with certain ratio and continuously depleting.

Thanks