x


How do I make a progress bar?

How do I make a progress bar using GUITextures that gets shorter when a variable decreases using JavaScript?

more ▼

asked Nov 17 '09 at 03:19 PM

noradninja gravatar image

noradninja
790 17 23 41

(comments are locked)
10|3000 characters needed characters left

7 answers: sort voted first

Here's some code for a simple working progress bar display. In this example, the 'progress' value is taken directly from the time, but you should set it to a value between zero and one from whatever source you want to display the progress of.

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

function OnGUI()
{
    GUI.DrawTexture(Rect(pos.x, pos.y, size.x, size.y), progressBarEmpty);
    GUI.DrawTexture(Rect(pos.x, pos.y, size.x * Mathf.Clamp01(progress), size.y), progressBarFull);
} 

function Update()
{
    progress = Time.time * 0.05;
}

The use of 'Clamp01' limits the bar's width to prevent it from growing longer than the specified size. It's worth noting that the 'full' texture stretches as it expands, rather than revealing its image which would be more desirable.

I have played with the "ScaleMode" parameter to try and overcome this, and the closest I can get is to use the following modification to the second DrawTexture call:

   GUI.DrawTexture(Rect(pos.x, pos.y, size.x * Mathf.Clamp01(progress), size.y), progressBarFull, ScaleMode.ScaleAndCrop, false, size.x/size.y);

However unfortunately the cropping effect is centred rather than flush left, so it still looks a bit odd!

more ▼

answered Nov 17 '09 at 03:39 PM

duck gravatar image

duck ♦♦
41k 92 148 415

This solution makes use of OnGUI, which is slow on the iPhone. The original question pertains to the usage of GUITextures which is an old alternative to OnGUI.

Oct 27 '10 at 07:08 AM anomalous_underdog

thanks to Molix's answer, I came to a good way to crop:

GUI.DrawTexture(Rect(pos.x, pos.y, size.x, size.y), progressBarEmpty);
GUI.BeginGroup(new Rect (pos.x, pos.y, size.x * Mathf.Clamp01(progress), size.y));
GUI.DrawTexture(new Rect(0, 0, size.x, size.y), progressBarFull);
GUI.EndGroup();
Dec 20 '11 at 06:50 PM Cawas

I tried this script but I can't see "progressBarFull" ! Its width should increase as "progress" increases, right ? but it doesn't happen! where is the catch ?!

Aug 13 '12 at 01:08 PM NewAlpha

im having the same issue, the scene hangs while loading the next one. the progress bar is drawn, partialy (about 1/3) loaded but it doesnt change in time

Feb 21 at 10:28 AM vanss2
(comments are locked)
10|3000 characters needed characters left

try this:

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

   function OnGUI () {
        // Constrain all drawing to be within a pixel area .
        GUI.BeginGroup (new Rect (pos.x, pos.y, progress, size.y));

        // Define progress bar texture within customStyle under Normal > Background
        GUI.Box (Rect (0,0, size.x, size.y),"", customStyle);

        // Always match BeginGroup calls with an EndGroup call
        GUI.EndGroup ();
    } 

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

    }
more ▼

answered Nov 29 '09 at 10:43 PM

Jaap gravatar image

Jaap
11 3

This solution makes use of OnGUI, which is slow on the iPhone. The original question pertains to the usage of GUITextures which is an old alternative to OnGUI.

Oct 27 '10 at 07:10 AM anomalous_underdog
(comments are locked)
10|3000 characters needed characters left

What I did is to use a slider, and use skins to make it look like a progress bar.

more ▼

answered Jul 14 '11 at 10:05 PM

ProjSHiNKiROU gravatar image

ProjSHiNKiROU
1 1

(comments are locked)
10|3000 characters needed characters left

I haven't actually implemented this in Unity, but typically what you do is to set the width of your draw Rect to a product of your variable. Example, if the variable is 0 to 1, and you want a progress bar 20 x 200 pixels:

Rect(0, 0, 20, myVar * 200)

more ▼

answered Nov 17 '09 at 03:27 PM

DallonF gravatar image

DallonF
133 2 2 6

(comments are locked)
10|3000 characters needed characters left

Hi !

I'm looking for this kind of script.

I have two questions :

1) My project has several scene (6 scenes).How can I use this script to integrate all my scene ? I think that this script only contain the first scene.

2) How can I hide the laoding bar when the progress bar is done ?

Thanks for your help.

more ▼

answered Jan 16 '12 at 10:25 AM

michael bricout gravatar image

michael bricout
3 1 1 1

sorry, answering is the wrong place to ask questions.

Jan 16 '12 at 12:48 PM Cawas

How can i make it decrease instead of increasing?

Apr 18 '12 at 02:39 PM leo77748
(comments are locked)
10|3000 characters needed characters left
Your answer
toggle preview:

Up to 2 attachments (including images) can be used with a maximum of 524.3 kB each and 1.0 MB total.

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here

By RSS:

Answers

Answers and Comments

Topics:

x5061
x1999

asked: Nov 17 '09 at 03:19 PM

Seen: 27959 times

Last Updated: Apr 09 at 07:42 PM