How to make live progress bar?

I read http://answers.unity3d.com/questions/328/how-do-i-make-a-progress-bar and put the following code but nothing had displayed

   var customStyle: GUIStyle;
   private var progress : int;
   var mySpeed: int;
   var pos : Vector2;
   var size : Vector2; 

   function OnGUI () {
        GUI.BeginGroup (new Rect (pos.x, pos.y, progress, size.y));
        GUI.Box (Rect (0,0, size.x, size.y),"", customStyle);
        GUI.EndGroup ();
    } 

    function Update (){
        progress = size.x - Mathf.Floor(Time.time * mySpeed);
    }

My game is that when character being hit, its live will be deducted in progress bar.

When it reaches zero, it is game over.

How should I code it without 2D texture? I just want the live progress bar to display background and bar colors and put on the top left of the screen.

If you’re using a 2D texture you could just position the background and bar in the scene view. Then simply scale the Health Bar based on your current health value, something like this:

OBJ_HEALTH_BAR.localScale.x = current_health/maximum_health;

do you have a complete code sample?

Try adding this code to the player script:-

var tex: Texture2D;
var fullRect: Rect;
var maxHealth: float;
var currHealth: float;


function OnGUI() {
	var healthFrac = currHealth / maxHealth;
	var actualRect = Rect(fullRect.x, fullRect.y, fullRect.width * healthFrac, fullRect.height);
	
	GUI.BeginGroup(actualRect, tex);
		var innerRect = Rect(0, 0, fullRect.width, fullRect.height);
		GUI.DrawTexture(innerRect, tex);
	GUI.EndGroup();
}

Basically, you just need to set the rectangle for the bar (using fullRect) in the inspector and then vary the value of currHealth as the character loses health.

I tried the script and found 2 points not understand

  1. the uploaded image is the setting in inspector

It can display the bar on top left, however,
I set the
current health = 70 and max health = 100
OR
current health = 100 and max health = 100

The GUI display is the same and there is no progressive or proportional visual effect.

  1. It always throws error:

NullReferenceException: Object reference not set to an instance of an object
UnityEngine.GUI.BeginGroup (Rect position, UnityEngine.Texture image) (at /Users/build/builds/unity-iphone/iphone/Runtime/Export/Generated/GUI.cs:781)
ProgressBar.OnGUI () (at Assets/Scripts/2D/ProgressBar.js:10)

It happens 2 out of 3 times of running in unity remote.

Line 10 is this code:
GUI.BeginGroup(actualRect, tex);

Thanks for great help

355107--12345--$progressbar_369.png

Using 2D textures here’s a quick example of a workable progress bar:

//Set these to the appropriate texture and place them in the scene view

var OBJ_HEALTH_BAR_BACKGROUND : Transform;
var OBJ_HEALTH_BAR : Transform;
var current_health : float;
var maximum_health : float;


//When your character takes damage have it call this function and input the appropriate damage amount for the 'damage' variable.

function Take_Damage(damage : int){
        current_health = current_health - damage;
	Display_Current_Health();
}

//Scale the health bar based on the state of your current health.

function Display_Current_Health(){
	OBJ_HEALTH_BAR.localScale.x = current_health/maximum_health
}

This will certainly not be perfect but should hopefully get you seeing something.

var OBJ_HEALTH_BAR_BACKGROUND : Transform; 
var OBJ_HEALTH_BAR : Transform;

Why it needs to use empty GameObject to represent those 2 bars? Can they be done in Texture2D and OnGUI()?

if OBJ_HEALTH_BAR is Texture2D, OBJ_HEALTH_BAR.localScale.x cannot apply

var actualRect = Rect(fullRect.x, fullRect.y, fullRect.width * healthFrac, fullRect.height); 
    
   GUI.BeginGroup(actualRect, tex); 
      var innerRect = Rect(0, 0, fullRect.width, fullRect.height); 
      GUI.DrawTexture(innerRect, tex); 
   GUI.EndGroup();

I am thinking this code.

  1. BeginGroup(actualRect, tex); But actualRect is not use insides the Group.
  2. var innerRect = Rect(0, 0, fullRect.width, fullRect.height); The x,y co-ordinates do not match the actualRect’s x,y

So, I tried to change the code
var innerRect = Rect(fullRect.x, fullRect.y, fullRect.width, fullRect.height);

The uploaded image is the result, it has problem to display when current health < max health

Also, I am not sure how this code can display 2 colors.

355922--12372--$screen_shot_2010_07_29_at_121850_am_433.png

You need to drag a texture to the tex variable in the inspector. This should also fix the other problem.

I tried to change the code to display both the foreground and background colors

var texInner: Texture2D; 
var texCurr: Texture2D; 
var fullRect: Rect; 
var maxHealth: float; 
var currHealth: float; 

function OnGUI() { 
   var healthFrac = currHealth / maxHealth; 
   var currRect = Rect(fullRect.x, fullRect.y, fullRect.width * healthFrac, fullRect.height); 
   var innerRect = Rect(fullRect.x, fullRect.y, fullRect.width, fullRect.height); 
   GUI.DrawTexture(innerRect, texInner);
   GUI.DrawTexture(currRect, texCurr);  
}

Full Rect
X = 5
Y = 5
Width = 200
Height = 20
Max Health = 100
Curr Health = 70

There are 2 textures for foreground and background colors

It displayed like the uploaded image.

The code did not use

GUI.BeginGroup(currRect, texInner);

I read Unity - Scripting API: GUI.BeginGroup

This is very useful when moving a bunch of GUI elements around on screen. A common use case is designing your menus to fit on a specific screen size, then centering the GUI on larger displays.

However, I still did not understand

BeginGroup(currRect, texInner);

How did currRect group with texInner and what did it mean?

How did this code help in create the progress bar?

357855--12433--$bar_641.png

The script containing the group was perhaps a bit more sophisticated than what you really needed. The advantage to using a group is that you can use a texture for the health bar and have it gradually “uncovered”. If you use GUI.DrawTexture for this, the texture gets scaled to fit the shape of the bar. The two effects look the same when the bar is a single colour but it’s not common to have a health bar where the fill image stretches to fit the space of the bar.