The current version is kh2Bar 2.0 released July 10, 2013. A demo project and screenshot are attached.



Changelog:
v2.0

• New maxSectors argument for kh2Bar() constructor, useful if you need to guarantee a gauge can fit a certain number of reserve sectors.


• New combo functionality: Call .beginCombo() to start a combo. Any damage sustained during the combo won't fade away until .endCombo() is called.


• New .changeColor method to adjust the color of the gauge after creation.


• Fixed long-standing glitchiness when recovering HP.


• Gauge now drains smoothly when reading is changed.


• Added checks for correct number of arguments to user-facing methods.

v1.6.1:

• Updated fill logic so bar is never empty if HP is nonzero

v1.6:

• Lots of refactoring.


• Renamed render() to draw().


• New show/hide functionality with optional fade in/out. Gauge is hidden upon creation.

v1.5.1:

• Fixed a few off-by-one errors in kh2Bar.render() that were causing the gauge to be filled inconsistently depending on the amount of damage displayed.

v1.5:

• Updated presentation: The new version is much more faithful to the KH2 design. The main lifebar is right-aligned, and if the bar on top is only a partial (as when the gauge is full and maxHP isn't an exact multiple of the sector size), the bar underneath shows through.
  
• Constructor no longer takes x and y parameters; these have been moved to kh2Bar.render().


• Changed 'reading' property to plain methods as getter/setter methods are SpiderMonkey-specific.


• The size of the gauge is no longer hard-coded: kh2Bar.render() now also takes 'width' and 'height' as parameters.


• Sector size (HP per bar) is now customizable via an optional constructor parameter. The default is 100.


• Color of the gauge is also customizable. The default color is green (#00FF00 @ 100% opacity), as in KH.

v1.0:

• First release.

Usage:
For each kh2Bar you have on-screen, you'll have to call its .update() and .draw() methods once per frame.

Code: (javascript) [Select]

RequireScript("kh2Bar.js");

// maxHP is required, sectorSize and color are optional.  If not provided, the default values are
// sectorSize: 100 (100 HP per bar) and color: #00FF00 (green) @ 100%.
var lifebar = new kh2Bar(maxHP, sectorSize, color);
lifebar.show();  // bar is initially hidden, must call show() or the player won't see it

// Inside your game loop:
lifebar.update();
lifebar.draw(x, y, width, height);

Whenever the amount of HP changes and you want the lifebar to reflect it:

Code: (javascript) [Select]

lifebar.set(currentHP);

If you need to hide the gauge temporarily (for a cutscene, etc.) just call hide(), and later show() when you need it to be visible again.  Both take an optional parameter specifying the amount of time over which to fade it in/out.

Usage:

Code: (javascript) [Select]

RequireScript('hook-list.js');

var UpdateHooks = HookList();
var RenderHooks = HookList();
SetUpdateScript('UpdateHooks()');
SetRenderScript('RenderHooks()');

// ...

UpdateHooks.add(myLifebar.update.bind(myLifebar));
RenderHooks.add(myLifebar.render.bind(myLifebar));

Haha, forgot you have to manually create a delegate with a hook list, I think I got spoiled with C# since there you can just specify obj.method and it does the right thing automatically.

Is method.bind() native JS functionality though?  I thought you needed an extra script for that... If not then I'm a complete idiot for rolling my own delegate() function...

Is method.bind() native JS functionality though?  I thought you needed an extra script for that... If not then I'm a complete idiot for rolling my own delegate() function...

Yes if it was introduced in JS 1.8.5 and up, no if anything before (so, what Sphere uses). Delegate or a custom bind method would then have to be created.

Yes if it was introduced in JS 1.8.5 and up, no if anything before (so, what Sphere uses). Delegate or a custom bind method would then have to be created.

Ah, thanks. I thought it was introduced in 1.8.0 (Sphere 1.6). In that case you'll have to augment Function.prototype, which isn't hard (well, if you want to conform to the spec in the bizarre corner cases, it's a bit tricky, but for 99% of cases a simple bind works just fine).

TurboSphere has it native though.

Here's a basic bind implementation:

Code: (javascript) [Select]

if (typeof Function.prototype.bind != 'function') {
    Function.prototype.bind = function (self) {
        var args = Array.prototype.slice.call(arguments, 1), fn = this;
        return function () {
            return fn.apply(self, args.concat(Array.prototype.slice.call(arguments)));
        };
    };
}

Just updated kh2Bar to v1.5.  I don't know if anyone tried 1.0 at all, but if anyone did they would have found it didn't work without modifications.  Turns out I was referencing Engine.frameRate, which is part of the Specs engine and wouldn't have worked in any other project.   Anyway, I fixed that, and also made the script much more flexible.  It's a lot more faithful to the KH2 design now, as well. :-)

Attatch a project and ill give it a go, drives me crazy copy/pasting code

I have to leave for work in about 20 minutes, but I'll mock up a quick project later.  For now a screenshot will have to suffice:

See now that you have a screenshot of what's going on people like myself can now realize what you meant by KH2-style life bar. It looks to be very useful and I look forward to analyzing the code and seeing how to use it or something like it in NShoot

See now that you have a screenshot of what's going on people like myself can now realize what you meant by KH2-style life bar. It looks to be very useful and I look forward to analyzing the code and seeing how to use it or something like it in NShoot

Yeah, it's really a very well-done lifebar design. Each pip on the bar always represents the same amount of HP, so the minute you see the boss's lifebar you know how much it's going to take to put down, even without seeing the exact HP numbers. 

My memory might be wrong, but wasn't there something like the HP bar being a certain color that you beat until it's green and actually starts going down? Or is that KH1? Also, are there any plans for adding the round curl that the player life bar has in KH?

You're thinking of KH1. That was the same concept but less refined. KH1 was a single multi-layer bar and the layers from bottom to top were green, yellow, orange, red, and magenta. Anything past magenta was overflow and the bar wouldn't move at all until damage hit the magenta level (only Sephiroth actually had that much HP though).  I didn't do the KH1 bar because it's rather confusing to the uninitiated: the first time I fought a boss with a yellow and green bar I was utterly confused for half the fight as to what was going on!

As for the curled bar, I've considered it, but I have no need for it in Specs and I think it would be difficult to implement (some trig functions involved I'd wager), so I didn't bother trying.  Maybe one day when I'm bored enough...

Attatch a project and ill give it a go, drives me crazy copy/pasting code

Here you go, a quick tech demo to show off the functionality of kh2Bar.

Just posted a quick update to 1.5.1.  No breaking changes in this, just minor fixes for off-by-one errors in the draw routine that caused the bar to randomly gain or lose pixels as it received damage.

See now that you have a screenshot of what's going on people like myself can now realize what you meant by KH2-style life bar. It looks to be very useful and I look forward to analyzing the code and seeing how to use it or something like it in NShoot

Also, N E O... Have fun trying to decipher all the math in render().   I understand it right now, having just worked extensively with it, but I have this feeling that a few months down the road when I go to make improvements, it's going to be an uphill battle trying to figure out all the calculations again...

I already got lost looking at the dollar signs in JS code, honestly who does that!? Back in the old days it was used strictly for generated code, nowadays it's entirely associated with Jquery. I'n guessing you come from a very PHP oriented background.