Computer Science Canada

Progress Bar

Author:  AzureFire [ Mon Nov 28, 2005 5:00 pm ]
Post subject:  Progress Bar

First of all, sorry if this is posted somewhere else, but my search didn't find the answer.

Ok, I'm interesting in making a progress bar, but have no idea how to go about it. If anyone could tell me how, or point me towards an explanation, that would be great.

And if you're wondering, yes, I do know what I'm doing, I'm not that new to coding ^_^, but new enough.

Thanks!

Author:  Cervantes [ Mon Nov 28, 2005 5:04 pm ]
Post subject: 

Welcome to CompSci.ca. Smile

Is this supposed to be a real progress bar? Do you actually have something you're loading? Or is it just a fake one to take up time and look pretty? (Note that we detest the latter.)

Author:  AzureFire [ Mon Nov 28, 2005 5:12 pm ]
Post subject: 

A real one, keeping track of the player's health. Right now I have text in a percentage. It's kinda lame looking. So I was thinking that a graphical one with the text would be easyer on the eyes.

Author:  Cervantes [ Mon Nov 28, 2005 5:28 pm ]
Post subject: 

Ah, I took it you were looking for a "loading bar". Well, this is easier. Smile

You've already got the percentage of the player's health. Let's say it is 50%, or 0.50.

Let's assume the bottom left corner of the bar is at (0, 0). Draw a box from there to (100, 15).

code:
Draw.Box (0, 0, 100, 15, black)


Now, we want to fill that with a particular amount of red box, sicne red is always a good colour to represent health. The width of the whole box is 100 pixels, so we are going to draw half of it in red. 50 pixels. That happens to be the percentage of the player's health (0.50) multiplied by the width of the box (100).

code:

var health_percent := 0.50
Draw.FillBox (0, 0, round (health_percent * 100), 15, brightred)


Let's generalize this:
code:

const bar_width := 100
const bar_height := 15
const bar_x := 140
const bar_y := 70

var health_percent := 0.73

Draw.FillBox (bar_x, bar_y, bar_x + round (health_percent * bar_width), bar_y + bar_height, brightred)
Draw.Box (bar_x, bar_y, bar_x + bar_width, bar_y + bar_height, black)
[


Hope that helps.

Author:  Tony [ Mon Nov 28, 2005 5:49 pm ]
Post subject: 

there's code for loading bar all over the place

Author:  AzureFire [ Mon Nov 28, 2005 5:50 pm ]
Post subject: 

That's perfect thanks! I don't know why I didn't think of that.

Just out of curiosity, is there a way to do it with a graphic, say something like this?

Posted Image, might have been reduced in size. Click Image to view fullscreen.
**Note Image Dimensions are 200x30 pixels

Author:  GlobeTrotter [ Mon Nov 28, 2005 5:59 pm ]
Post subject: 

You could draw the image than draw a box the colour of the background colour ontop of the image. This would give the illusion that the image was shrinking/growing.

Author:  AzureFire [ Mon Nov 28, 2005 6:11 pm ]
Post subject: 

That's a good idea, and I may actually do that, but if the background is a picture, and you don't want to cover it with a solid colour, then that wouldn't work.

Either way, you've answered my questions so thanks! ^_^

Author:  AzureFire [ Mon Nov 28, 2005 7:50 pm ]
Post subject: 

I figured out one method (I'll post it later, as I'm busy coding ^_^) except it's kind of a RAM hog... lol

Author:  do_pete [ Tue Nov 29, 2005 11:42 am ]
Post subject: 

Check out my Health bar that i'm using for a game of mine

Author:  do_pete [ Tue Nov 29, 2005 11:44 am ]
Post subject: 

ahh crap sorry i pressed the "submit" button instead of the "add attachment" button. Well here it is

Author:  AzureFire [ Tue Nov 29, 2005 6:47 pm ]
Post subject: 

Wow, that's great. Nice job.

Author:  milz [ Wed Nov 30, 2005 5:02 pm ]
Post subject: 

Here is the code.
code:

drawbox (463, 249, 261, 255, 79)
for i : 0 .. 100
    drawbox (262 + i, 250, 262, 254, 101)
    delay (20)
    locate (11, 45)
    colour (i)
    put i div 2, "%"
end for
delay (1000)

Author:  Cervantes [ Wed Nov 30, 2005 5:23 pm ]
Post subject: 

milz, please use [code] [/code] tags when posting code.

Also, that's not what he wants. He wants a "health bar" that doesn't go from 0% to 100%, he wants it based on the health of the player.

Finally, I think it okay in this situation to post coded solutions to his question, but often solutions should be avoided because we should not do homework for people. This situation, however, is fine, because this is a small section of a large project, and I don't even know if this is a school assignment.

Author:  AzureFire [ Wed Nov 30, 2005 5:54 pm ]
Post subject: 

Nah, this is for myself. I'm 6 months ahead of my class. Razz

Author:  AzureFire [ Wed Nov 30, 2005 5:56 pm ]
Post subject: 

Crap..edit button's not there Sad , I wanted to add that they just finished the Draw.Oval command and multiple IF structures.

Author:  DIIST [ Tue Dec 06, 2005 7:36 pm ]
Post subject: 

Well you could try this usefull procedure, i made this for one of my old animations!
code:
procedure loadbar (locx, locy, lenght,current,maxvalue : int)
    var pointx:int:=floor(((current / maxvalue)* (lenght-24))+ (locx - (lenght div 2)+12))
   
       
    %The Outside Box
    drawfillbox (locx - (lenght div 2) + 10, locy - 10, locx + (lenght div 2) - 10, locy + 10, 8)
    drawfillbox (locx - (lenght div 2) + 12, locy - 10 + 2, locx + (lenght div 2) - 12, locy + 10 - 2, 7)
   
    %Actual Bar
    drawfillbox((locx - (lenght div 2)+12),locy-7,pointx,locy+7,50) 
    drawline((locx - (lenght div 2)+12),locy+7,pointx,locy+7,11)
    drawline((locx - (lenght div 2)+12),locy-7,pointx,locy-7,1)
   
    %Cover Slips
    drawfillarc (locx - (lenght div 2) + 12, locy, 5, 8,90,270,7)
    drawfillarc (locx + (lenght div 2) - 12, locy, 5, 8,270,90,7)


    drawfillarc (locx - (lenght div 2) + 10, locy, 10, 10,90,270,8)
    drawfillarc(locx + (lenght div 2) - 10, locy, 10, 10,270,90,8)
    drawarc (locx - (lenght div 2) + 10, locy, 10, 10,90,270,29)
    drawarc(locx + (lenght div 2) - 10, locy, 10, 10,270,90,27)
   
    drawline(locx- (lenght div 2) + 10,locy+10,locx + (lenght div 2) - 10,locy+10,30)
    drawline(locx- (lenght div 2) + 10,locy-10,locx + (lenght div 2) - 10,locy-10,25)
   
   
end loadbar

I did this so you can use it again and again. Bassically you pass into the procedure the center x,y coordinates, and the width of the bar. You then enter the current value and the maxvalue. It will draw it depending on those values!

Author:  Cervantes [ Sat Feb 11, 2006 10:23 am ]
Post subject: 

AzureFire wrote:
I'm just updating here. I figured out a nice little code that may help some nubbers Wink

code:

var temp:int
var pic:array 0..100 of int %<--Can be 1..100 but if you want an empty bar you need the 0

temp:=Pic.FileNew("healthBar.jpg")

Pic.Draw(temp,0,0,0)
for a:0..upper(pic) %<--Can be 1..100 but if you want an empty bar you need the 0
      Pic.Draw(temp,0,0,0)
      pic(a):=Pic.New(0,0,a,30) %<--30 is the height of the image i used, use your own number
end for


***You will need to change the name of the pic in the code, as well as the sizing***

This is how I tested this code after

code:
setscreen("graphics:200;200")
cls
for b:1..100
    Pic.Draw(pic(b),0,0,0)
    delay(50)
    cls
end for
for decreasing c: 100..1
    Pic.Draw(pic(c),0,0,0)
    delay(50)
    cls
end for


Just add that to the end of the first code and you can see how it works. Very simple AND has transparency just like I wanted Smile

Hope this helps someone else as much as it helped me.


AzureFire wrote:
oops..meant to reply to an old topic...here's the link back

http://www.compsci.ca/v2/viewtopic.php?t=10434


The ability to merge topics would be nice. Smile

Author:  AzureFire [ Mon Feb 13, 2006 8:27 pm ]
Post subject: 

Thanks for cleaning that up..always nice to have non-idle moderators Smile

Author:  Mr. T [ Mon Feb 13, 2006 9:25 pm ]
Post subject:  Alex's Opinion

[mod:a263d8b7d7="Cervantes"]
Non-idle moderators, indeed. Cut the spam, Pwned.
[/mod:a263d8b7d7]

Author:  Dan [ Mon Feb 13, 2006 10:40 pm ]
Post subject: 

Cervantes wrote:

The ability to merge topics would be nice. Smile


As i have side b4 this ablity will be introduced in v3. Wink

Also if u have any probelms with the way we mod the forums or think there is a topic that need to been seen please pm or e-mail a staff member. Unfrontly we are not able to view every post on this site but in v3 there will be a better system for user reporting posts that need addtion.

Author:  Mr. T [ Thu Feb 16, 2006 6:44 pm ]
Post subject:  Alex's Opinion

Why was my post modded? All i did was submit a very basic progress bar. Confused

Author:  Cervantes [ Thu Feb 16, 2006 7:39 pm ]
Post subject: 

Pwned wrote:
Why was my post modded? All i did was submit a very basic progress bar. Confused

Because it was not a progress bar. It was a rotating line. It was not helpful. It showed you did not read the thread. It was spam.


: