health bar (help)

[kpxnamja]

Hello
I’m currently working on a game (MX), that requires a dynamic health bar.

For instance, a user can at any time change the health bars full/total health from 1 - infinity. However, it must also at the same time keep a constant height of 10px/width of 100 px. Here’s the problem… I tried various ways to accomplish, but all had their same faulty side. I tried a variable controlled bar, frame by frame, and no luck…

I know this effect is possible( A game seen by a site). However, I’m completely stumped. I’ve checked Kirupa forums “search option” for the words “health bar, bar, health, hp”

I’ve tried this which comes probably the closest to my goal, but still fails.

1. A rectangle and the outline. The rectangle with a var “bar”, and outline + bar with var “line”
2. I then added a total = current; total being the max hp attained and current as the current depreciable hp.
3. total = 100;
4. _root.line.bar._width = total;

[firehawkdc]

Sorry but I'm not really sure if I'm visualising what you require properly. But have you ever tried using Masking? Do a 100 frame tweened masked healthbar. (each frame will represent 1%)

If you use masking, your displayed image should maintain it's aspect of 10x100px and do what it's supposed to do. After that you can call that MC something like this:

mc_name.gotoAndStop(x);

Where x is the frame that you want to go. If you're running decimal or fractions from your calculations you can use:

percent = Math.round(put your calculation here);

mc_name.gotoAndStop(percent);

Or something like that? Note (this will mean your health bar does not increase or decrease progressively. You'll have to modify this concept to achieve that, perhaps with setInterval or whatever you can imagine.) Hope it helps!

I've attached an example for a really SIMPLE hp bar. You can either use the example Lord Rahl has put up or this. Really depends on what suits your needs and what effect you intend to achieve.

Have Fun!

[Lord Rahl]

Here (http://www.flashplayer.com/forum/showthread.php?t=27493) is the ActionScript Code Handbook. It has multiple codes adn descriptions on what they do and how to do them. A health bar section is on it.
Edit: Let me or the author of the health bar section know if you need help on how to use it or change it a bit.

[kpxnamja]

hey I still have the same problem. I tried the AS handbook, however, the line shrinks from both the +_x and -_x is there a way just to shrink the width while keeping the coordinates?
http://img286.imageshack.us/my.php?image=bar8gr.swf

By the way, here is the example game. http://web.tri-isys.com/wczuniga/ragnarok/

I want it pretty much the way they made it. A HP that will never exceed a certain width, but at the same time it will keep the ratio according to the max hp attained.

This is irrevelant at the moment, but I would also like to know how it decreases gradually, almost with a elastic movement.

Would that be the cause of setIntervals()?

ok thanks!

[Lord Rahl]

Check out the attached file.

[kpxnamja]

lord Rahl, thank you. It was that cross heir I forgot to move... So is this health bar similar to that of the loadbar? in that the register point is occasionally sent to the left?

How would I go about removing the bar with an elastic motion?

would a for loop work?

for(_root.healthMax >= damage; x++){
x-= damage;
}

[firehawkdc]

for loops won't work, because you need a delay to show the animation. One method will be using setInterval and clearInterval

An example would be something like....

syntax:
//startanim = setInterval(functioname,timeinmilleseconds);

startanim = setInterval(decreasehp,200);

function decreasehp(){

if(_root.hp>=_root.toreach_hp){
_root.hp--;
hp_mc.gotoAndStop(_root.hp);
}else{
clearInterval(startanim);
}

}

This doesn't make it elastic, but it's a concept for viewing a gradual decrease in a HP bar by adding a delay into it.


lord Rahl, thank you. It was that cross heir I forgot to move... So is this health bar similar to that of the loadbar? in that the register point is occasionally sent to the left?

How would I go about removing the bar with an elastic motion?

would a for loop work?

for(_root.healthMax >= damage; x++){
x-= damage;
}

[kpxnamja]

firehawkdc, hey that looks like a great script!
However, I'm a bit tied up as to what the variables are...

can you explain the "hp_mc.gotoAndStop(_root.hp);" portion?

[bombsledder]

well i think i can help with the 1 to infinity thing--the formula is like this

Math.ceil((playerCurrentHealth/playerMaxHealth)*100)

this will make it show out of 100% so heres an example that i made using Lord Rahl hpbar

and good luck

[kpxnamja]

^ ah that was exactly what I wanted on my first post! thanks! :D

case solved! Thanks "Kirup-ians" :A+:

[nathan99]

or the best way..

[nathan99]

o nvm, i didnt read ur question properly til bout the 3rd time, noiw i get it lol, my bad

[firehawkdc]

Nice to know you found what you wanted.

well,I'll explain a little since you may want to use a code like this to control delays in the future.

for this segment:
hp_mc.gotoAndStop(_root.hp);

"hp_mc" is the movie clip holding the 100 frame movie tween.
"_root.hp" is the current HP in percentage (rounded to the nearest Integer)

"_root.toreach_hp" is the calculated hp that your hp bar is supposed to reach. (say from 50 hp to 30 hp)

"startanim" is...I've no idea what it's called. but it's just a variable name to contain an instance of "setInterval". This allows you to stop the instance by calling "clearInterval(variable_name_here)" .

(Note: if you do not clear a setInterval, it'll run infinitely and cause problems in your program)

That's about it.

Hope there was something for you to learn here.





firehawkdc, hey that looks like a great script!
However, I'm a bit tied up as to what the variables are...

can you explain the "hp_mc.gotoAndStop(_root.hp);" portion?

[kpxnamja]

^ thanks firehawkdc :D that cleared a few questions

[bombsledder]

cur = 200;
mxh = 250;
btn.onRelease = function() {
prc = Math.ceil(cur/mxh*100);
c = prc+"%";
br._xscale = prc;
};


Nathan -
MAth.round() is not good in this situation
is not good for this nathan see with your code if you put in say 1 out of 250 you will be at 0% in which most games 1hp is not dead yet :ko:

[firehawkdc]

Ah. That's true, bombsledder! Using the "Math.ceil" function rounds UP any decimal/fraction to the greater Integer.

Very important aspect for RPGs where every HP counts. ^_^; (0.2 will be 1, 1.1 will be 2, etc...) [and for controlling HP bars to display accurately]

I guess Math.ceil and Math.floor can be quite neglected but extremely useful functions that we tend to forget about sometimes.

Something to put in our dev bookmarks.




cur = 200;
mxh = 250;
btn.onRelease = function() {
prc = Math.ceil(cur/mxh*100);
c = prc+"%";
br._xscale = prc;
};

Nathan -
MAth.round() is not good in this situation
is not good for this nathan see with your code if you put in say 1 out of 250 you will be at 0% in which most games 1hp is not dead yet :ko:

[nathan99]

yeh, the ciel and roundmath function can often be overlooked as i did, but ur right