Topic: How to make a bar that shows an int value?

[Aėrendyll (formerly Yurina)]

Hi all,

I'm having a bit of a problem making a heath meter in AGS. See, I need to get something like this:



I have a max. health int that indicates the current maximum of health that can be reached. The int that is displayed is named currentheath

What I want to know:
1. This bar has to indicate how much health a character has left. Is this possible
2. If the health increases, is it possible to get a different value in the same bar without any resizing?
3. Can I give the bar a colour? If so, is it possible to change it when the int reaches about 50% and at 25% of the maxhealth int?

I don't have a clue on what to do...

Thanks in advance,
~Yurina

[Akumayo]

Surprisingly enough, I had this exact problem just yesterday.  I would recommend using a Slider.  With a slider, you can change the color of the bar image to show red at the bottom, fading into green at the top.  You can't get the black space like in your examples, but it is a simple way to acheive what you're talking about.  Here's the code I used:

[code]
if (Player_Healthbar.Max != Entity[player.ID].Max_Health) Player_Healthbar.Max = Entity[player.ID].Max_Health;
if (Player_Healthbar.Value != Entity[player.ID].Health) Player_Healthbar.Value = Entity[player.ID].Health;
[/code]

'Player_Healthbar' is a GUI Slider, and Entity[player.ID] is the player's ID in an array I have.  A basic code looks like this:

[code]
if (Slider_HealthDisplay.Max != Max_Health) Slider_HealthDisplay.Max = Max_Health;
if (Slider_HealthDisplay.Value != Health) Slider_HealthDisplay.Value = Health;
[/code]

I hope this helps!  (And, on another note, the ifs are unnecessary, but I dislkike having the game re-write something that is already true, so I added them.  Also, my game eats a lot of memory, so I stop it from doing things like re-writing something that is already displayed as often as possible.)

-Regards, Akumayo

[DoorKnobHandle]

A simple way would be to use rawdraw-functions to draw a colored rectangle as bar.
Let's say x1 and y1 are the coordinates of the upper-left corner of the bar and x2 and y2 are the coordinates of the lower-right corner. x1 and x2 are always the same, because the bar faces upwards as you showed us in your images, y2 is also constant, because the end of the bar should always be at the bottom. We only need to calculate a value for y1, which is how high the health bar should be filled.
In your example, you would use the following formula to calculate the length or height of the bar:


[code]
bar_length = ( 1 / max_health ) * current_health * bar_size;
[/code]

bar_length is the result of the formula - the length of the bar that we want to calculate. max_health and current_health should be self-explanatory. bar_size is how long you want your bar be at most. You could choose 100 as value for example.

If you want your bar to sit in the lower-left corner of the screen, those would be the coordinates:

[code]
x1 = 0;
y1 = SCREEN_HEIGHT - bar_length;
x2 = bar_width;
y2 = SCREEN_HEIGHT;
[/code]

Then you can pass those coordinates into the RawDrawRectangle-function to draw it!

To color it according to the health value, you can use the RawSetColor-function, like this for example:

[code]
if ( ( 1 / max_health ) * current_health < ( 1 / 3 ) )
// if the health value is less than 1/3 of the maximum
   // color the bar red
   RawSetColor ( 40 );

else if ( ( 1 / max_health ) * current_health < ( 2 / 3 ) )
// if the health value is less than 2/3 of the maximum
   // color the bar yellow
   RawSetColor ( 14 );

else
// if the health value is more than 2/3 of the maximum
   // color the bar green
   RawSetColor ( 2 );
[/code]

That's it. Ask if you have more questions, I hope that I didn't give any wrong information or typos or anything. This is all from the top of my head and completly untested!

EDIT: Akumayo was faster, but my approach is different!

[Akumayo]

Hah, good idea dkh, I hadn't thought to write a RawDraw code, since the game I'm working on pretty much forbids tampering with the screen (causes too much slowdown).
If you really want the colors, Yurina, dkh's solution is better.

[Nathan23]

I can sugest, above all the other post... is that you consider how you want to change the bar... I mean if you want only 3 values or perhaps you want more than that..  If that is the case you may consider to use a variable that save the totally amount of health than you can use the rawdraw-Functions, acordind to the value of the variable.

[Pablo]

I recommend using a button. Yes, a button. Just make a new button, import a healthbar image into it, change Clip Image as "Yes", and change the size of the button everytime the int value changes. This way the healthbar can have any color OR image you want.

You can now for example make a new function for adding or removing health:
[code]
function AddHealth(int amount) {
  player_health += amount;
  btnHealthBar.Height = player_health;
}
[/code]

In my opinion this is the best way of doing it.

[Khris]

Pablo's idea is the best. I'd have used RawDraw functions, too, in a similar way to dkh's suggestion.

btw:

[code]
bar_length = ( 1 / max_health ) * current_health * bar_size;
[/code]

This will probably evaluate to zero, no matter what the other values are.
Dividing an int by a bigger int will always result in zero.

[DoorKnobHandle]

Oh, jesus. You are right, KhrisMUC. Yurina, change this line to:

[code]
bar_length = FloatToInt ( ( 1.0 / IntToFloat ( max_health ) ) * IntToFloat ( current_health * bar_size ) );
[/code]

All you need to do is add some Int->Float and Float->Int conversions in order for it to return the expected results. This is what I mentioned in my above posts - if I did this myself in AGS, I'd tried it out the wrong way, noticed it and changed it until it works.

Then, don't use RawDrawRectangle, but clip the button if you want to use an image as bar!