- Home /
How would you make an energy bar, loading progress bar, health meter, or other visual gradually fill up?
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?
is there any alternative way in creating health bar?
You really shouldn't post this as an answer. It should be a comment ins$$anonymous$$d.
I tried this script which is ok to use in the standard fray GUI unity offers us, but i can't seem to get the texture to work the right way when using this option... The Texture is only shown as a small square in the middle of the progress bar. How can I resolve this?
I know this isn't really an answer...
it looks like above^^ people are making the length of the currentBar equal to the fraction: currentBar/wholeBarSize, where the length of 1/1 would be the whole bar.
So I wondering about the practicality of using a sprite to do this. The bar sprite could be moved over proportional to the fraction currentBar/wholeBarSize (I suppose then it would be something life currentLife/totalLifePossible).
Sounds interesting, thought I'd bring it up. Any thoughts?
You can try this tutorial if you want to create a dynamic health bar that also changes color according to the amount of health left. This is all done with the new UI from UNITY 4.6: Health bar turorial
Hi,
I tried the code and its working fine for filled part. I need help on reverse version of the code.
The bar is depleting as time progress.
I collect some items and bar filled with certain ratio and continuously depleting.
Thanks
Answer by duck · Feb 21, 2010 at 07:43 AM
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.
For other code examples search for the answers to "How to $$anonymous$$ake a Progress Bar". All the posted examples I've seen use UnityGUI functions, which is simple and convenient, but there are other ways to do it. If you are writing an iPhone game and are having framerate problems then that might be worth pursuing, but start with the simple solution first.
To be clear, I don't see anything wrong with Duck's code, just wanted to say that there are other examples available as well.
Hi Duck,do you $$anonymous$$d helping me by editing this script into like this:Full bar=100%,empty bar=0% ,can you make into similar to a simple car script,like when car start, full bar start to decrease,when car stop,bar pause and if is less than 20% give a warning.and when empty bar=0 the car explode.
You really shouldn't post this as an answer. It should be a comment ins$$anonymous$$d.
Awesome script Duck! Sorrry for bringing this old thread back but I am trying to convert it iinto a vertical bar and it wont work. Vertical part is easy, but it wont fill up verticly! Any suggestions anyone? Trying to avoid a new thread.
Answer by Jesus_Freak · Jul 01, 2011 at 07:34 AM
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;
}
}
I guess this is a pretty late comment, but still, I noticed that I get also a semi-transparent black box around the progress bar. To get rid of that you have to create a GUIStyle.
This goes into variable declarations:
----- public GUIStyle progress_empty, progress_full;
Now change the GUI.Box declaration a bit:
-----GUI.Box(new Rect(0,0, size.x, size.y), emptyTex, progress_empty);
-----GUI.Box(new Rect(0,0, size.x, size.y), fullTex, progress_full);
Thanks for the C# version... I made a FLIPPED version of it like so:
using UnityEngine;
using System.Collections;
public class Fuel$$anonymous$$eter : $$anonymous$$onoBehaviour {
public float progress = 0.75f;
public Vector2 pos = new Vector2(0.67f, 0.02f);
public Vector2 size = new Vector2(256,256);
public Texture2D emptyTex;
public Texture2D fullTex;
void OnGUI() {
float posX = Screen.width * pos.x;
float posY = Screen.height * pos.y;
//draw the background:
GUI.BeginGroup(new Rect(posX, posY, size.x, size.y));
GUI.DrawTexture(new Rect(0,0, size.x, size.y), emptyTex);
//draw the filled-in part:
//GUI.BeginGroup(new Rect(0, 0, size.x * progress, size.y));
//GUI.DrawTexture(new Rect(0,0, size.x, size.y), fullTex);
//draw the filled-in part FLIPPED:
int xProg = (int)(size.x * progress);
GUI.BeginGroup(new Rect(size.x - xProg, 0, xProg, size.y));
GUI.DrawTexture(new Rect(-size.x + xProg,0, size.x, size.y), fullTex);
GUI.EndGroup();
GUI.EndGroup();
}
// Use this for initialization
void Start () {
}
// Update is called once per frame
void Update() {
}
}
Answer by GluedBrain · Aug 30, 2014 at 04:33 PM
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
Answer by KissimDev · Feb 21, 2012 at 01:14 AM
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.
Answer by miningold · Sep 04, 2012 at 09:23 PM
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;
}
}
Your answer
Follow this Question
Related Questions
Healthbar Energy Bar and MiniMaps? 0 Answers
Health Bar Issues 2 Answers
progress bar 1 Answer
RTS health bars 2 Answers
Health subtracts when hit by bullit 2 Answers