Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

another health bar for sugarcube 2

i have problem about my kind of health bar feature for my game, here we go:

first we set this variable
<<set $energyTotal to 100>>
<<set $energy to $energyTotal>>
<<set $energyLoss to 0>>

then in story caption, i have button which can fast forward time clock about 1 hour for one click and decrease player energy
<<button "">>
<<set $gameDate.setHours($gameDate.getHours() + 1)>>
<<set $energyLoss to 6>>
<<display "Sleepy">>

and here's the formula i get from greyelf and customize a little for my need
var hBar = $('.energy-bar .stats-bar'),
	bar = hBar.find('.bar'),
	hit = hBar.find('.hit');
var total = State.variables.energyTotal,
	value =,
	damage = State.variables.energyLoss,
	hitWidth = 0,
	barWidth = (value / total) * 100,
	delayReset = false;

if (damage != 0) {
	hitWidth = (damage / value) * 100;
	value -= damage;
	barWidth = (value / total) * 100; = value;
	State.variables.energyLoss = 0;
	delayReset = true;
}'total', total);'value', value);
/*hit.css('width', hitWidth + "%");*/
bar.css('width', barWidth + "%");

if (delayReset) {
	/*hit.css({'width': '0'});*/
	bar.css('width', ( / State.variables.energyTotal) * 100 + "%");
  }, 500);

and here's the energy bar will be display in each passage, im using passageHeader because it will show up in top of each passage or maybe its wrong, yes?
<div class="stats-wrapper energy-bar">
		<div class="stats-bar">
	  		<div class="bar">
		  		<div class="hit"></div>

this thing is works well, the energy bar is decreasing whenever i press the fast forward button..... but the problem is when i go to another passage, the enery bar is back to full (you know what i mean?) when it should be not.

what im missing here? any help will be appreciated, sorry for my bad english. thx before


  • You're not including the Sleepy passage automatically anywhere, which you need to do since you're recreating the health bar's markup every turn.
  • @caberg
    In the Health bar in right side... thread you linked to you will notice that the Javascript code in 2c is contained within a postrender["Update Health Bar"] event handler, which is called after each passage is shown to the reader.

    That event is one way to do as @TheMadExile suggested, another is to use a PassageDone special passage like the following to invoke your Sleepy passage.
    <<display "Sleepy">>
  • wow, thx for the quick reply guys .. its works now, thx very much
Sign In or Register to comment.