[Function] GD Stat (HP, MP, XP) Bar Generator

[LordDan]

Just finished another function I'd like to share. Well, it's not a function() really, but who cares?

Anyway, I want to start developing games again soon so I am spending time developing some personal Frameworks ready for when I do.

As it's "Game" development, a common element is Stat Bars such as HP, MP and XP. With that in mind I set to and made a "function" to

generate these bars on the fly. Now I am sharing it here;

Images

Two minutes in Gimp and ended up with these, should you choose to use them is your choice ;)

draw_bar.php

This is the file that generates the bar image, several parameters can be sent into this

which I'll mention shortly.

 

<?php
// Check for custom width.. (Remember to change your images width=""
// and height="" if using custom widths!)
$width   = ( isset( $_GET['width']  ) ) ? (int)$_GET['width']  : 100;
$height  = ( isset( $_GET['height'] ) ) ? (int)$_GET['height'] : 10;

// Get our Percentage..
$perc    = (int)$_GET['per'];

// If width is greater than default 100, we need to multiply
// our Percentage so the percentage bar is the correct size.
// Multiply by 1 for each 100.. IE: 300 = *3
$perc = ( substr( $width, 0, 1) > 1 ) ? $perc * substr( $width, 0, 1) : $perc;

// Find which color bar we want
switch( strtolower( $_GET['bar'] ) ){
   case 'red':   $image = 'bar_red.png';   break;
   case 'blue':  $image = 'bar_blue.png';  break;
   case 'pink':  $image = 'bar_pink.png';  break;
   case 'green': $image = 'bar_green.png'; break;
   case 'gold':  $image = 'bar_gold.png';  break;
   default:      $image = 'bar_green.png';
}

$per        = imagecreate( $width, $height );
$background = imagecolorallocate( $per, 255, 255, 255 );
$foreground = imagecolorallocate( $per, 255, 255, 255 );
$border     = imagecolorallocate( $per, 100, 100, 100 );

$grad       = imagecreatefrompng( 'images/'.$image );
$per2       = imagecopy( $per, $grad, 1, 1, 0, 0, ( $perc ), $height );

imagerectangle( $per, 0, 0, $width-1, $height-1, $border );
header( "Content-type: image/png" );
imagepng( $per, NULL, 5 );
imagedestroy( $per );
?>

 

Parameters

The great thing about this Bar Generator is that is allows custom widths. Most I have seen online

didn't support this and only had a single fixed width, don't know why, all it took is a 1 extra ternary

operator :huh:

Parameter: ?width=xxx

Using a switch, it's also possible to setup several different bar graphics for generating different bars.

Again, something most bar generators didn't bother with :huh:

Paramter: ?bar=xxx

And finally, the requirement, percentage value for the bar.

Parameter: ?per=xxx

Example Usage

This is the example usage code i've used during testing and to generate the bars seen in

the screenshot below.

 

[img=draw_bar.php?per=100]
[img=draw_bar.php?per=75&bar=red]

[img=draw_bar.php?per=54&bar=blue]
[img=draw_bar.php?per=68&bar=pink]

[img=draw_bar.php?per=95&bar=gold&width=200]

 

Enjoy! :thumbup:

[Dayo]

looking good, i was just about to post my version of this up, but looks like you beat me to it.

[Danny696]

Didnt someone else do this?

[LordDan]

Didnt someone else do this?

That depends, are you accusing me of stealing it, or stating someone else made a version not long ago. If the latter, likely, i didn't search the forums before hand.

 

looking good, i was just about to post my version of this up, but looks like you beat me to it.

What's yours like? :pinch:

[Dayo]

much like yours but mine fades the remaning %'age eg

http://alienvshuman.com/images/ubar.php?n=70

[LordDan]

much like yours but mine fades the remaning %'age eg

http://alienvshuman.com/images/ubar.php?n=70

Oh, cool looking bar!

[Zero-Affect]

... DAMNIT my bars look exactly like that Dayo lol (was thinking of doing GD but GD does use alot of resources correct?)

Wouldn't mind the Percentage on the bars though (in text).

[Danny696]

Dan, i was simply stating that someone else had done this.

[LordDan]

... DAMNIT my bars look exactly like that Dayo lol (was thinking of doing GD but GD does use alot of resources correct?)

Wouldn't mind the Percentage on the bars though (in text).

I'm not too sure on resource usage, the bar generates pretty quick so i doubt something so small would have a noticeable impact. Obviously a larger image with some texts would take more time. I'm still only just starting to get my hands dirty with GD though, so I'm not really in any position to comment on it.

 

Dan, i was simply stating that someone else had done this.

No disrespect. Wasn't sure if you meant somebody else did it, as in wrote it, or not. :pinch:

[Dayo]

... DAMNIT my bars look exactly like that Dayo lol (was thinking of doing GD but GD does use alot of resources correct?)

Wouldn't mind the Percentage on the bars though (in text).

http://alienvshuman.com/images/ubar.php?n=70

check out the image now 8)

[rulerofzu]

This looks interesting may try something like this myself. Nice idea.

[CJ - Twitch]

How could I get this to work with a 150 energy bar. xD

[Dayo]

here is what i did

<?php

if (abs(intval($_GET['n']))==$_GET['n'] && 101 > $_GET['n'] && 0<$_GET['n']) {

$dest=imagecreatefrompng('ubg.png');
$src=imagecreatefrompng('ubgr.png');
imagecopymerge($dest, $src, $_GET['n'], 0, 50, 0, 100, 24, 60);

header('Content-Type: image/gif');
imagepng($dest);

imagedestroy($dest);
imagedestroy($src);
}
?>

you will have to change ubar.png and ubar.png to the images you want and to change the width change the 101 > ie if you wanted 150 change it to 151

also please note this was my first GD scrit so sorry if it could be done better

[LordDan]

How could I get this to work with a 150 energy bar. xD

Unless i've made a mistake then you should be able to change the width paramter and the width attribute to the same +4

[img=draw_bar.php?per=95&bar=gold&width=150]