life status bar

Hi,

I am wondering how could you guys do a status life bar on top of the game characters..

i am thinking to do. a box with only border and another box ontop of that box with actual life filled with color.
something like this

rectangle 0 ,0, 20,5 (shows rectangle)
rectangle 0 ,0, 10,5 ( shows life with filled rectangle)

is there better way ? please tell me

You can't draw an unfilled rectangle in BMax. Try this code for the outline, the fill it as you've suggested.

' -----------------------------------------------------------------------------
' ccDrawRectOutline: Draws an outlined rectangle
' -----------------------------------------------------------------------------
Function ccDrawRectOutline(x,y,w,h)
	'BlitzMax can only draw filled rectangles, so I made this.
	'Trim width and height.
	w = w-1
	h = h-1
	DrawLine(x,y,x+w,y,0)
	DrawLine(x+w,y,x+w,y+h,0)
	DrawLine(x+w,y+h,x,y+h,0)
	DrawLine(x,y+h,x,y,0)	
End Function

I would choose between two methods. Either do what you are suggesting, and what Grey Alien is saying, or draw three pieces of graphics, 2 ends and a middle, then draw the ends with the middle scaled to fit.

hi zawran, can you please explain about three pieces of graphics method?

The three piece graphics method is probably more used in healthbars of characters in rpgs, fps and fighting games. An example of this could be something like this:



As you can see, there are defined start and end graphics and the middle is more or less the same, so the middle part could be eg. a 16 pixel wide graphics which you could scale horizontal to any pixel width. Combined you could make any size healthbar.

But for what you probably are thinking of, you are most likely looking at something like the following:

SuperStrict

Graphics 640,480

Local maxlife:Int = 100
Local currentlife:Int = 50

While Not KeyHit(KEY_ESCAPE)
	Cls
	healthbar(100,100,64,4,Float currentlife/maxlife,0,255,0,255,0,0)
	healthbar(100,200,128,8,Float currentlife/maxlife,0,255,0,255,0,0)
	healthbar(100,300,32,4,Float currentlife/maxlife,0,255,0,255,0,0)
	healthbar2(300,100,64,4,Float currentlife/maxlife,0,255,0,255,0,0)
	healthbar2(300,200,128,8,Float currentlife/maxlife,0,255,0,255,0,0)
	healthbar2(300,300,32,4,Float currentlife/maxlife,0,255,0,255,0,0)
	Flip
	If KeyHit(KEY_SPACE) Then currentlife = Rnd(100)
Wend
End

'
'	Inputs: x,y starting location of healthbar
'			width of healthbar
'			percentage of healthbar filled ranging from 0.0 to 1.0
'			two sets of RGB color values (bar/border)
'
Function healthbar(x:Int,y:Int,width:Int,height:Int,percent:Float,red1:Int,gre1:Int,blu1:Int,red2:Int,gre2:Int,blu2:Int)
	Local fill:Int = (width-2)*percent
	Local w:Int = width-1
	Local h:Int = height-1
	SetColor(red1,gre1,blu1)
	DrawRect(x+1,y+1,fill,h-1)
	SetColor(red2,gre2,blu2)
	DrawLine(x,y,x+w,y)
	DrawLine(x+w,y,x+w,y+h)
	DrawLine(x+w,y+h,x,y+h)
	DrawLine(x,y+h,x,y)
End Function

Function healthbar2(x:Int,y:Int,width:Int,height:Int,percent:Float,red1:Int,gre1:Int,blu1:Int,red2:Int,gre2:Int,blu2:Int)
	Local fill:Int = (width-2)*percent
	Local w:Int = width-1
	Local h:Int = height-1
	SetColor(red1,gre1,blu1)
	DrawRect(x+1,y+1,fill,h-1)
	SetColor(red2,gre2,blu2)
	DrawLine(x,y+h,x+w,y+h)
	DrawLine(x,y,x,y+h)
	DrawLine(x+w,y,x+w,y+h)
	DrawLine(x+(w*0.25),y,x+(w*0.25),y+h)
	DrawLine(x+(w*0.5),y,x+(w*0.5),y+h)
	DrawLine(x+(w*0.75),y,x+(w*0.75),y+h)
End Function

[edit] I added another option for the healthbar and fixed the error that was in the code.

got it. thanks

Better use a two-pieces method:

One healthbar which is empty - and one which is full, then use clipping on the full healtbar which is drawn over the empty one.
This way you avoid scaling an small sprite which has to be seemless (left side fitting to right side of image). So you can use color variations or other effects.

Remember, this wont work if you want your healthbar to increase in size depending on max-health - it's only useful for constant widths/heights.

bye
MB