Rounded Progress Bar?

Community Forums/General Help/Rounded Progress Bar?

Ked	(Posted 2009) [#1]

Does anyone know how to create a rounded progress bar like what you would see in the Orange Box? I know how to make/draw one, I just don't know the maths to get it from 0% to 100% if you know what I mean.

Adam Novagen

(Posted 2009) [#2]

No, I'm afraid I don't quite know what you mean. Do you want the formula for percentages? Is this for a Blitz program, website, Flash application, or what?

Ked	(Posted 2009) [#3]

Progress Bar outer

Progress Bar inner

I would like for it to look and act almost exactly the same as how the loading bars in Half-Life 2, Portal, and Team Fortress 2 do. But the maths needed are going to be a little different than standard rectangle progress bars and I don't know how to do it.

InvisibleKid

(Posted 2009) [#4]

i assumed this was for blitzmax and i put this together in about 5 mins, its not perfect and theres much better ways to do it, but its a start.

Graphics 800,600

Global pbarshell = LoadImage("pbarshell.png")
Global pbar = LoadImage("pbar.png")

Global pbW = ImageWidth(pbar)
Global pbH = ImageHeight(pbar)

Global progressbar = CreateImage(pbW,pbH,1,DYNAMICIMAGE|MASKEDIMAGE)

Global pbarPer = 0
Global pbarX=300,pbarY=200

Global loadon = 0


UpdateProgressBar()

SetClsColor 100,100,100
'----------------------------------------------------------------
While Not AppTerminate() And Not KeyDown(key_Escape)
	Cls		
				
		If loadon = 0
			DrawText "Press <Spacebar> to start",pbarX,pbarY-20
			If KeyDown(key_Space)
				loadon = 1				
			EndIf
		EndIf
		
		If loadon = 1
			DrawText "loading...   "+pbarPer+"%",pbarX,pbarY-20
			DrawImage progressbar,pbarX,pbarY

			If pbarPer <  100
				count:+1
				If count = 5
					count = 0
					UpdateProgressBar()
					pBarPer:+1
				EndIf
			EndIf
		EndIf
		
	Flip
Wend
End
'----------------------------------------------------------------

Function UpdateProgressBar()
	Local p# = pbW*0.01
	DrawImage(pbarshell,0,0)
	DrawImageRect(pbar,0,0,(pbarPer*p#),pbH)
	
	GrabImage progressbar,0,0
	Cls
EndFunction

pbar:

pbarshell:

Ked	(Posted 2009) [#5]

Eh... Is there a way so that 1% is the full circle I posted above.

Gabriel

(Posted 2009) [#6]

Subtract the width of the full circle from the width of your progress bar before doing the calculations.

Ginger Tea

(Posted 2009) [#7]

But the maths needed are going to be a little different than standard rectangle progress bars and I don't know how to do it.

no they arnt, 100% is 100% regardless of if its 1mb or 100mb, each percentage would take longer the larger the file/s you are progressing
all it is is a curved progression instead of a flat boring line, hell you could have hello kitty's head (lealities notwithstanding) as the status indicator and it would still be the same

at the end of the day its just an indicator to the player that something is happening, its better than just 'loading' fading in and out for five minutes

WERDNA

(Posted 2009) [#8]

Not sure if BlitzMax has the Oval command that Blitz3D does, but if
so you could make a progress bar with that.

Just draw a stretched out white one like you did in your last post Ked,
then every time you wish to increase the loading bar, simply draw
a small orange oval inside of the white one, thats so many pixles away
from the last orange oval.

Or you can ditch the ovals, and simply use the two images you already
have if blitzmax doesn't have the oval command.

I can make an example for you if you need it, once I get back in from
work.

WERDNA

Ked	(Posted 2009) [#9]

Thanks anyway, everybody. I've found a solution that I like the best.

WERDNA

(Posted 2009) [#10]

Cool!

Good luck to you then Ked.

xlsior

(Posted 2009) [#11]

What I'd do:

- draw empty bar
- draw circle on the far left
- draw orange rectangle up to the point the bar should go
- draw another orange circle at the end

Figure out how many pixels are in the bar (from center of circle on the far left to center of circle on the far right), divide by 100, and each percent increases the size of the rectangle by that many pixels.

Ked	(Posted 2009) [#12]

I'm using a really simple method. :)

1. Have two images: the outer part of the progbar; the inner part of the progbar, all of it (as if it was set to 100%)
2. Use the DrawImageRect() function from the code archives to draw the inner part according to what value is passed.

Really simple, but I like how you can have a crazy-malformed shape of a progress bar and it would still work.

EDIT: I might post some demos later.

Pete Carter

(Posted 2009) [#13]

by the way is this the xbox version of the orange box? because ive just played the Pc version protal and TF2 and cant see this bar anywhere?

Ked	(Posted 2009) [#14]

Yeah, it's the 360 version. The PC version is using Source's VGUI and it sucks. :P