Sorry your browser is not supported!

You are using an outdated browser that does not support modern web technologies, in order to use this site please update to a new browser.

Browsers supported include Chrome, FireFox, Safari, Opera, Internet Explorer 10+ or Microsoft Edge.

DarkBASIC Professional Discussion / Coloured Health Bars

Author
Message
DB_Newbie
16
Years of Service
User Offline
Joined: 4th Aug 2009
Location:
Posted: 17th Apr 2010 08:34
Hi all,

I'm trying to make a health bar and searched around the forums only to find people making health bars that seem to be generic. Because when I was reading their solutions, they tend to suggest "stretching the sprite".

However I want to make a health bar that has a colour gradient (e.g. Green to Yellow to Red).

If I stretch the sprite, that means that all 3 colours would be visible all the time, which is not what I wanted.

So:

1) How do I make a working health bar that has a colour gradient?
2) Imagine this is a fighting game. How do I calculate how much the bar rises when my player gets hit? For example, with the bar empty, if the player takes 5 damage, the bar should be on yellow colour.

Thanks
Tom0001
20
Years of Service
User Offline
Joined: 30th Dec 2005
Location:
Posted: 17th Apr 2010 10:20
Easy. You need variables for maximum health and current health. Now, for the health bar, say you want it to be 200 pixels width-wise, to figure out how much of the screen will be filled by it, you divide the maximum health by the current health (note it's probably best to use float variables for this and then convert them to integers afterwards for reasons of compatibility when using the box statement) then divide the width of the health bar by the result of that, then use a BOX statement to start at whatever pixel the bar starts at then end at whatever the result of that division was.

For example, say maximum health was 300 and current health was 150, 300 divided by 150 equals 2, then if you divide 200 (width of the health bar) by two, you get the result of 100, which is half of the health bar, to display that you have half of your maximum health. Get it?

Now, for the colour gradient, you can have statements to check what the current health is in, so if it is above, say, 77%, then INK RGB(0, 255, 0), 0 is used to make the bar green, if it is below 77% but above 33% then INK RGB is used to make it yellow and if it is below 33% then INK RGB is used to make it red. Get it?

Tom
DVader
22
Years of Service
User Offline
Joined: 28th Jan 2004
Location:
Posted: 17th Apr 2010 15:24
Tom's answer is a good one. The only other thing is if you want a gradient on the whole bar, say red to yellow, and you want it to look like that, rather than one colour and changing on the fly. Just make a nice graduated bar in the gimp or whatever image tool you use, and use that to grab the various image sizes you need. Then just fill the remainder of your bar with a black to indicate the amount of energy lost using the same technique.

http://s6.bitefight.org/c.php?uid=103081
Tom0001
20
Years of Service
User Offline
Joined: 30th Dec 2005
Location:
Posted: 17th Apr 2010 23:28
@DVader

Quote: "If I stretch the sprite, that means that all 3 colours would be visible all the time, which is not what I wanted."
DB_Newbie
16
Years of Service
User Offline
Joined: 4th Aug 2009
Location:
Posted: 18th Apr 2010 13:45 Edited at: 18th Apr 2010 13:54
Cool! Can't wait to test that out. Probably might take me a while but I'll give it a go and see what happens.

Thanks guys ^^

EDIT: Oh forgot to ask (got too excited).

1) What is a BOX statement?
2) The health bar would just be a rectangular, white sprite image right? So like I would just position it on the top left of the screen and then follow your instructions?
DB_Newbie
16
Years of Service
User Offline
Joined: 4th Aug 2009
Location:
Posted: 18th Apr 2010 15:00
While I'm waiting for a reply, I thought I'd try get my head around this and managed to do this:



What do you guys think of it?
TDK
Retired Moderator
23
Years of Service
User Offline
Joined: 19th Nov 2002
Location: UK
Posted: 18th Apr 2010 15:27
Quote: "What is a BOX statement?"


It's a statement which draws a box in Dark Basic.

With regards to your code, it's good to see that you have at least made an effort to indent your code.

But, I suggest you do it properly - it really will improve readability and save you a lot of time finding problems in the future.

What I'm not sure of though is why you have complicated it all by using functions for everything?

Functions are designed to return a value - which none of yours do, so they should be subroutines. You then wouldn't need that list of globals at the start of your program.

Finally, you already have a camera - you don't need to create another one (Camera 1).

TDK

DB_Newbie
16
Years of Service
User Offline
Joined: 4th Aug 2009
Location:
Posted: 18th Apr 2010 16:10 Edited at: 18th Apr 2010 16:11
Oh yeah, I know functions are used to return a value, but it makes it neater for me because it's like putting them in "folders". Weird and probably irrelevant but it's a system that works for me.

Same goes with the camera. Oh and the camera is there to test the HP Bar staying on the top left when the camera moves around the screen.

But yeah, it's just my style of coding and since I'm like the only one in my school that uses DBPro, I just structured it only for me *shrugs*

Oh and my code can get slightly neater than that =P was in a slight rush, sorry.
TDK
Retired Moderator
23
Years of Service
User Offline
Joined: 19th Nov 2002
Location: UK
Posted: 18th Apr 2010 16:24
Quote: "but it makes it neater for me because it's like putting them in "folders""


But it's no different to using:



...which is actually a lot less work.

Sorry, but combined with your dangerous use of Goto, it's simply very bad coding and not a good basis to start learning to program.

If you don't think it can be dangerous, check this out:

http://forum.thegamecreators.com/?m=forum_view&t=96505&b=7

So, even though you say "it's a system that works for me", it's a bad system and it will trip you up in the future for sure.

I'm not having a go at you, I'm just pointing it out now before it's too late - so you have a chance to change before you get so far into it you can't.

Your choice!

TDK

DB_Newbie
16
Years of Service
User Offline
Joined: 4th Aug 2009
Location:
Posted: 18th Apr 2010 16:35
Hmmm... I guess so.

Well I'm not a pro... yet so I'll take your advice. Will be kinda hard for me since I gotten used to coding like that and so far I haven't raged =P XD

Thanks for your concern though ^^
TDK
Retired Moderator
23
Years of Service
User Offline
Joined: 19th Nov 2002
Location: UK
Posted: 18th Apr 2010 16:53 Edited at: 18th Apr 2010 16:53
Quote: "Will be kinda hard for me since I gotten used to coding like that"


It won't - believe me. All is explained in the thread I linked you to in my last post. The changes required are very minor.

The important thing to realize is that with Goto you are at risk of corrupting the stack which can have a knock-on effect.

If you really prefer to stick to using only functions, fine. Just try to avoid Goto.

TDK

DB_Newbie
16
Years of Service
User Offline
Joined: 4th Aug 2009
Location:
Posted: 18th Apr 2010 17:04 Edited at: 18th Apr 2010 17:06
Yeah I'm reading your thread now. Very detailed and easy to understand, good job on that btw ^^

Anywhos, probably be best to stop this here because this thread was originally about how to make health bars and I don't want it digress XD (not trying to be rude or anything).

Cheers ^^
TDK
Retired Moderator
23
Years of Service
User Offline
Joined: 19th Nov 2002
Location: UK
Posted: 18th Apr 2010 17:19
No probs - and apologies for pushing your thread off track.

With regards to the health bar, there's a fairly simple way to do it.

Create an image the colour you want for representing the 100% value.

Load it in with Load Image and paste it on Bitmap 1 at 0,0.

Call the subroutine and use the value you want to display to calculate what section of the health bar you want to cut from the image on Bitmap 1 using Get Image.

Paste the new image on Bitmap 0 (the main screen) in the correct position you want the health bar to be shown using Paste Image.

If you have any problems with this, just let me know and I'll knock an example together for you.

TDK

DVader
22
Years of Service
User Offline
Joined: 28th Jan 2004
Location:
Posted: 18th Apr 2010 22:46 Edited at: 19th Apr 2010 00:19
@Tom0001
I did not mean stretch the sprite, I meant grab part of it and replace the rest of the bar with pure black. That way it would look like the bar is moving down rather than just shrinking. The colour would cut down from yellow to red but leave whatever gradient was left on the left hand side and black on the right. You could even add in the black part to flash another shade of red when you are really low on health. It all depends on exactly the effect needed. Was just an idea I just took it that he wanted a nice gradient health bar at the start and gradually cut it down as he went, rather than just scaling the bar which would leave all 3 colours at all sizes.
Edit-Here is a a routine I have knocked up just to demonstrate.

I have included the image files too.

http://s6.bitefight.org/c.php?uid=103081
TDK
Retired Moderator
23
Years of Service
User Offline
Joined: 19th Nov 2002
Location: UK
Posted: 18th Apr 2010 23:39 Edited at: 18th Apr 2010 23:42
Here's a function I just made which hopefully does what you need.



Supply the function with the X and Y screen position you want the bar to appear, along with the max value (what a full bar represents) and of course the current value you want to display.

I've also added a white border (which you can rem out on lines 45 and 46 if you don't need it) and the ability to load a bmp of any size for the bar. I've included 3 example bmp files - health1.bmp, health2.bmp and health3.bmp for you to play with. Just change the filename on line 33.

You can trial run the function by using the cursor up and down keys to increase and decrease the value of 'current'.

[Edit] Oops - forgot to attach the zip...

TDK

DVader
22
Years of Service
User Offline
Joined: 28th Jan 2004
Location:
Posted: 19th Apr 2010 00:01 Edited at: 19th Apr 2010 00:09
Lol another post in between me doing it. Here is the other image for testing out my routine. Of course my routine has the benefit of working in 3D, but could easily be changed to pasting images rather than texturing objects. It could also be converted to a function easily enough, I am just old school and always do things that way. I'm just lazy in declaring my variables and such is all, a=1 or a#=1 is good enough for me in general.

http://s6.bitefight.org/c.php?uid=103081
TDK
Retired Moderator
23
Years of Service
User Offline
Joined: 19th Nov 2002
Location: UK
Posted: 19th Apr 2010 00:10
Well yours is a horizontal bar and mine is a vertical, so between us it looks like we got all bases covered!

TDK

DVader
22
Years of Service
User Offline
Joined: 28th Jan 2004
Location:
Posted: 19th Apr 2010 00:21
At least he has some stuff to work with!

http://s6.bitefight.org/c.php?uid=103081
DB_Newbie
16
Years of Service
User Offline
Joined: 4th Aug 2009
Location:
Posted: 19th Apr 2010 09:41
Thanks for the examples guys. Gotta give me some time to work with those and see which one is best.
baxslash
Valued Member
Bronze Codemaster
19
Years of Service
User Offline
Joined: 26th Dec 2006
Location: Duffield
Posted: 20th Apr 2010 00:46
Here's a great highlighted/Vista style one someone posted a while back (I use it all the time now)!!



Sixty Squares
20
Years of Service
User Offline
Joined: 7th Jun 2006
Location: Somewhere in the world
Posted: 20th Apr 2010 04:36
@baxslash: Kinda off-topic, but how did you color-code your code box like that?

<-- Spell based team dueling game!
baxslash
Valued Member
Bronze Codemaster
19
Years of Service
User Offline
Joined: 26th Dec 2006
Location: Duffield
Posted: 20th Apr 2010 11:08
Quote: "how did you color-code your code box like that?"

I'm not sure what you mean?



HowDo
23
Years of Service
User Offline
Joined: 28th Nov 2002
Location: United Kingdom
Posted: 20th Apr 2010 12:19 Edited at: 20th Apr 2010 12:19
I think your asking how do you post the code in color.

add lang=dbp after [code ] like so [code lang=dbp ]

Dark Physics makes any hot drink go cold.
baxslash
Valued Member
Bronze Codemaster
19
Years of Service
User Offline
Joined: 26th Dec 2006
Location: Duffield
Posted: 20th Apr 2010 12:22
Quote: "how do you post the code in color"

Aaah right, sorry!

Yes, @HowDo thanks! I'm sure that's what SS meant!

DB_Newbie
16
Years of Service
User Offline
Joined: 4th Aug 2009
Location:
Posted: 22nd Apr 2010 02:29
Back.

Thanks again for the help. I think I might use DVader's health bar version. I understand its inner workings more and the effects is almost exactly what I wanted.

Thanks all ^^
DVader
22
Years of Service
User Offline
Joined: 28th Jan 2004
Location:
Posted: 22nd Apr 2010 21:58
Cool beans

http://s6.bitefight.org/c.php?uid=103081

Login to post a reply

Server time is: 2026-07-26 08:00:10
Your offset time is: 2026-07-26 08:00:10