Game Development Community

How can I make a "percent complete" type progress bar?

by Lindsay Baker · in Torque Game Builder · 05/08/2009 (7:30 am) · 11 replies

I want to make a "percent complete" progress bar that fills up from left to right (ie; left=0%, right=100%).

My plan was to use a graphic and just change its width based on the value, but it's resizing from the centre, not the edge, so it spreads both left and right instead of just right.

How can I get it to, effectively, pin the left edge and resize by stretching right?

Thanks,
Lindsay




#1
05/08/2009 (2:45 pm)
A GuiProgressCtrl with .setValue(%value) should do what you want. Where a %value of 0 = 0% and 1 = 100% IIRC.
#2
05/08/2009 (7:36 pm)
I'm curious, is it possible to do what Lindsay wants to do without using a gui but just using an image? I was messing around with it but couldn't figure it out, then started working on something else and haven't gotten back to it yet.
#3
05/08/2009 (7:52 pm)
> is it possible to do what Lindsay wants to do without using a gui but just using an image ?

i'm not sure about TGB, but in TGE there would be a couple ways to do it.
one of them would be to have a bitmap that's the fill of the meter, and then resize its parent to cut it off.

eg

function createProgressBar()
{
   Canvas.getContent().add(new GuiControl() {
      position = "20 20";
      extent   = "100 20";
      new GuiControl(geProgressBar) {
         position = "0 0";
         extent   = "0 20";
         new GuiButtonCtrl() {       // add a button just to have something visible in this example.
            position = "0 0";
            extent   = "100 20";
         };
         new GuiBitmapCtrl()
         {
            position = "0 0";
            extent   = "100 20";
            bitmap   = "<YOUR BITMAP HERE>";
         };
      };
   });
}

function geProgressBar::setProgress(%this, %percent)
{
   %fullWidth = getWord(%this.getParent().getExtent(), 0);
   %currWidth = %percent * %fullWidth;
   %this.resize(0, 0, %currWidth, 20);
}

so then just call something like
createProgressBar();
geProgressBar.setProgress(0.5);
#4
05/08/2009 (7:59 pm)
Quote:My plan was to use a graphic
Sorry, didn't read the post carefully :(
#5
05/09/2009 (10:06 pm)
It´s easy to do:

You should update the size and position of your bar, but to avoid the resizing from the centre you should divide the amount (size) in which the bar is resized dividing it into 2.

At least that works for me:

$ArmyLife -= $DamageTaken;
armylifebar.setSize($ArmyLife,15); armylifebar.setPositionX(armylifebar.getpositionX()-$DamageTaken/2);

Hope that helps
#6
05/09/2009 (10:10 pm)
I did that for a going from right to left bar.

To do inverse, from left to right, check this (taken from a life bar in one of my games):

akmunlifebar.life += 5;
akmunlifebar.setPositionX(akmunlifebar.getPositionX()+2.5);
akmunlifebar.setSizeX(akmunlifebar.life);
#7
05/09/2009 (11:02 pm)
You can also take a peek at the static life bar behavior. It has the logic used to do a bunch of different life bars, including resizing and repositioning it.
#8
05/10/2009 (1:44 am)
Thanks Isaac, that did the trick!

#9
05/17/2009 (5:06 pm)
You´re welcome :)
#10
05/22/2009 (8:35 pm)
Don't forget as well that you can always use the "setArea()" call to set the rectangular area directly which just calculates the position/size for you.

%obj.SetArea(float x1, float y1, float x2, float y2)
x1: The upper left corner x position
y1: The upper left corner y position
x2: The lower right corner x position
y2: The lower right corner y position
#11
10/27/2009 (7:07 am)
It has the logic used to do a bunch of different life bars, including resizing and repositioning it.

regards,
kathleen