Making Stat Bars Update when I want them to.

Question

 

Hey, I've been using this to make a stat bar inside of my game; https://twinery.org/forum/discussion/8945/footers-and-health-bars I'm using sugarcube 2.21.0 The problem I'm running into, is that the bar updates every time I move to a new passage, is there any way to make it update only after a certain variable is modified? 

Answer 1

It looks like the "Meter code" on the page you linked to should do that for you already.  It checks the meter variables every 100ms, and then updates the meters if needed.  Did you include the meter code in your JavaScript section?

If you're interested, I have my own health bar code, which you can see the sample code for here.

Hope that helps!  :-)

Comments

Yes, I included the meter code, and it still updates regardless of whether there was a change to that variable, which is visually distracting. I'm not sure where to go from here to be honest, as your code looks very different from the code I'm using, and  use's two variables instead of just the one that I use. Question what is the this "cur hp"?

---

In old pen and paper roleplaying games, health bars were measured in "hit points".  (The more hit points, the more healthy your character is.  A character down to a few hit points was close to being killed.)

In this code, $CurHP is short for "current hit points".  It just measures the character's current health, as opposed to their maximum health (which is $MaxHP).

---

Oh, ok. I just use one variable to determine how much,and the max is set to 100 using the code above.

Answer 2

TME showed me how to fix this.

I simply modifty the javascript to say:

 

/*
    Create an element for the StoryMeters special passage
    and render the passage into it.
*/
$('<div id="story-meters"></div>')
    .insertBefore('#story-caption')
    .wiki(Story.get('StoryMeters').processText());

/*
    Create a recurring timer to update all meters.

    NOTE: The meters' IDs must match their associated
    story variable names.
*/
window.Game = {};
window.Game.UpdateBars = function () {
    $('.meter-gauge').each(function () {
        var $meter     = $(this);
        var meterMax   = Number($meter.attr('data-max'));
        var meterValue = Number($meter.attr('data-value'));
        var storyValue = State.variables[$meter.attr('id')];

        if (meterValue !== storyValue) {
            var fillPercent = Math.min(storyValue * 100 / meterMax, 100) + '%';
            $meter
                .attr('data-value', storyValue)
                .children('div')
                    .animate({ width : fillPercent });
        }
    });
};

and add this line here to any passage that I want it to update on.

<<run Game.UpdateBars()>>