Progress Bar

[AzureFire]

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!

[Cervantes]

Welcome to CompSci.ca.

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.)

[AzureFire]

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.

[Cervantes]

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

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.

[Tony]

there's code for loading bar all over the place

[AzureFire]

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?


**Note Image Dimensions are 200x30 pixels

[GlobeTrotter]

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.

[AzureFire]

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! ^_^

[AzureFire]

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

[do_pete]

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

[do_pete]

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

[AzureFire]

Wow, that's great. Nice job.

[milz]

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)

[Cervantes]

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.

[AzureFire]

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