Spherical forums

User-Made => Libraries => Topic started by: Fat Cerberus on April 23, 2013, 11:31:37 pm

Title: kh2Bar 2.0 (Kingdom Hearts 2-style life bars)
Post by: Fat Cerberus on April 23, 2013, 11:31:37 pm
The current version is kh2Bar 2.0 released July 10, 2013. A demo project and screenshot are attached.



Changelog:
v2.0

v1.6.1:

v1.6:

v1.5.1:

v1.5:

v1.0:


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.
Title: Re: kh2Bar 1.0 (Kingdom Hearts 2-style lifebar)
Post by: alpha123 on April 24, 2013, 01:13:25 pm
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));
Title: Re: kh2Bar 1.0 (Kingdom Hearts 2-style lifebar)
Post by: Fat Cerberus on April 24, 2013, 01:57:29 pm
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...
Title: Re: kh2Bar 1.0 (Kingdom Hearts 2-style lifebar)
Post by: Radnen on April 24, 2013, 02:11:45 pm

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 (https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind) and up, no if anything before (so, what Sphere uses). Delegate or a custom bind method would then have to be created.
Title: Re: kh2Bar 1.0 (Kingdom Hearts 2-style lifebar)
Post by: alpha123 on April 24, 2013, 02:41:31 pm

Yes if it was introduced in JS 1.8.5 (https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind) 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)));
        };
    };
}
Title: Re: kh2Bar 1.5 (Kingdom Hearts 2-style life bars)
Post by: Fat Cerberus on May 13, 2013, 11:12:47 am
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. :-)
Title: Re: kh2Bar 1.5 (Kingdom Hearts 2-style life bars)
Post by: Harry Bo21 on May 13, 2013, 11:26:07 am
Attatch a project and ill give it a go, drives me crazy copy/pasting code
Title: Re: kh2Bar 1.5 (Kingdom Hearts 2-style life bars)
Post by: Fat Cerberus on May 13, 2013, 11:39:19 am
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:
Title: Re: kh2Bar 1.5 (Kingdom Hearts 2-style life bars)
Post by: N E O on May 13, 2013, 03:53:42 pm
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 :)
Title: Re: kh2Bar 1.5 (Kingdom Hearts 2-style life bars)
Post by: Fat Cerberus on May 13, 2013, 04:47:32 pm

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. 
Title: Re: kh2Bar 1.5 (Kingdom Hearts 2-style life bars)
Post by: DaVince on May 13, 2013, 05:17:44 pm
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?
Title: Re: kh2Bar 1.5 (Kingdom Hearts 2-style life bars)
Post by: Fat Cerberus on May 13, 2013, 05:30:55 pm
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! :P

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... :)
Title: Re: kh2Bar 1.5 (Kingdom Hearts 2-style life bars)
Post by: Fat Cerberus on May 13, 2013, 07:54:29 pm

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. :)
Title: Re: kh2Bar 1.5 (Kingdom Hearts 2-style life bars)
Post by: Fat Cerberus on May 13, 2013, 09:53:25 pm
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... :P
Title: Re: kh2Bar 1.5.1 (Kingdom Hearts 2-style life bars)
Post by: Radnen on May 14, 2013, 01:20:20 am
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.
Title: Re: kh2Bar 1.5.1 (Kingdom Hearts 2-style life bars)
Post by: Fat Cerberus on May 14, 2013, 01:31:09 am

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.


No, I use the dollar signs to indicate private members as a stopgap to prevent accidental overwriting of internal state from outside code (as you say, nobody else does this so the chance of such an accident are very slim!).  Since all object members are public in JS, I needed to do something, and I hate the look of underscores in code, they break up lines and ruin the flow when reading.  I actually only recently discovered that you could use dollar signs in JS identifiers and as you can see, I latched onto it. :)
Title: Re: kh2Bar 1.5.1 (Kingdom Hearts 2-style life bars)
Post by: Radnen on May 14, 2013, 01:56:10 am
What are your thoughts on closures?

Code: (javascript) [Select]

function MyObject()
{
    var privateVar = 5;
   
    this.doWork = function() {
        Abort(privateVar);
    }
}


Can I ask for a small feature request? I would like to see the ability to show/hide it's visibility. This is useful if you still want it to render but be able to turn it off briefly for an in-battle cutscene or whatever (just so you don't have to manage the render method externally). Many components are built with that in mind.
Title: Re: kh2Bar 1.5.1 (Kingdom Hearts 2-style life bars)
Post by: Fat Cerberus on May 14, 2013, 02:08:14 am
Good idea on the show/hide feature, I'll have to implement that for 1.6.  Thanks! :)

As for your question, I used to do the closure thing, can't remember why I stopped.  I know there was a good reason... oh, I remember now!  With a closure like that, you can't do this:

Code: (javascript) [Select]
function MyObject()
{
    var privateVar = 5;
   
    this.doWork = function(otherObj)
    {
        Abort(otherObj.privateVar); // what do you mean it's 'undefined'?!
    }
};


...which means now you have to expose privateVar as a full property and you're back to square one!
Title: Re: kh2Bar 1.5.1 (Kingdom Hearts 2-style life bars)
Post by: Radnen on May 14, 2013, 02:36:51 am
Unless otherObj is not a type of MyObject you shouldn't be able to do that anyways. Plus, for that I'd suggest then you define a getter (but not a setter... setters are what should be avoided for private data).

Code: (javascript) [Select]

function MyObject()
{
    var privateVar = 5;
   
    // I think this method is deprecated, but I don't know how else to do this with a closure:
    this.__defineGetter__("var", function() { return privateVar; });
   
    this.doWork = function(otherObj) {
        Abort(otherObj.var);
    }
};


But yeah I can see that if the other object is of type MyObject, you should be able to access private variables (get and set). This is useful for clone functions. If you wanted to go full-bore class interface I'd suggest you use one of the many out there, I know MooTools has one.
Title: Re: kh2Bar 1.5.1 (Kingdom Hearts 2-style life bars)
Post by: Fat Cerberus on May 14, 2013, 02:59:01 am
I generally prefer to stick with only what tools the language gives me unless a strong case can be made otherwise (I'm a big advocate of KISS). If the cost of doing so is some odd coding conventions here and there, so be it. :). Besides, JavaScript's dynamic-ness and duck typing is the thing I love about it. Slapping an inheritance framework on top of it kind of defeats the purpose!

But yeah, that's the use case I was getting at: one object accessing the properties of another of the same type.  I did the getter/setter thing for a while, but eventually had to stop because it's specific to SpiderMonkey (and is even deprecated there!), and TurboSphere uses V8.  The transition is going to be hard enough as it is I'm sure, no sense making it any harder than it has to be. :)
Title: Re: kh2Bar 1.5.1 (Kingdom Hearts 2-style life bars)
Post by: alpha123 on May 14, 2013, 12:48:55 pm

I did the getter/setter thing for a while, but eventually had to stop because it's specific to SpiderMonkey (and is even deprecated there!), and TurboSphere uses V8.

V8 supports __defineGetter__ and __defineSetter__. Everything except Internet Explorer's JS engine does, actually. It's still ugly though.
Preferably you could check for Object.defineProperty and use that, falling back to __defineGetter__ otherwise. That's an actual language feature introduced in ES5, and thus is much more future-proof (and more powerful) than __defineGetter__.

EDIT: Also, I agree with Radnen, drop the dollar signs, it's not idiomatic JavaScript. Either just let go of your C# background and feel the power of monkey-punching, or use the more accepted underscore.
Title: Re: kh2Bar 1.5.1 (Kingdom Hearts 2-style life bars)
Post by: Fat Cerberus on May 14, 2013, 12:57:49 pm

EDIT: Also, I agree with Radnen, drop the dollar signs, it's not idiomatic JavaScript. Either just let go of your C# background and feel the power of monkey-punching, or use the more accepted underscore.


I agree the dollar signs are pretty ugly, but... monkey-punching?!  Not sure I've ever heard that expression before... what does it mean?

Edit: Also, that would be a C++ background, but... close enough. ;)
Title: Re: kh2Bar 1.5.1 (Kingdom Hearts 2-style life bars)
Post by: N E O on May 14, 2013, 02:10:36 pm
Damn, only saw just now: apparently the script to embed GitHub Gists adds a class of 'highlight' to one of the container tables in the generated HTML, so the entire text becomes bold because the forum theme sets that class bold. Fixable with some custom CSS, so give me a small bit of time to make that happen.
Title: Re: kh2Bar 1.5.1 (Kingdom Hearts 2-style life bars)
Post by: alpha123 on May 15, 2013, 02:33:21 am

I agree the dollar signs are pretty ugly, but... monkey-punching?!  Not sure I've ever heard that expression before... what does it mean?

It's simply replacing methods of an object at runtime. In this case you'd be allowing your private methods to be replaced at runtime. It sounds scary to static language people, but it is surprisingly useful. It is especially common in Ruby circles; Googling "ruby monkey patching" will get a lot of information.
(BTW, I need to brag a little bit about how Common Lisp gets this really right: you don't have to monkey patch, you can just define methods that get run before, after, or around a class's methods. This solves 90% of the uses of monkey patching in a much cleaner way. I'm really not sure why other languages haven't caught onto this yet. Seems to me like C# should pick it up. (They seem to throw in a lot of miscellaneous but useful features.))

IIRC, the name came from "duck punching," like "duck typing." If it doesn't quack like a duck, punch it until it does. It is also known as "monkey patching," and some people like me get confused and just refer to it as "monkey punching."
Title: Re: kh2Bar 1.5.1 (Kingdom Hearts 2-style life bars)
Post by: Fat Cerberus on May 15, 2013, 02:42:18 am

IIRC, the name came from "duck punching," like "duck typing." If it doesn't quack like a duck, punch it until it does. It is also known as "monkey patching," and some people like me get confused and just refer to it as "monkey punching."


Okay, the duck punching was hilarious. ;D. I needed that laugh, thanks!

For what it's worth, I love the dynamic-ness of JS, a lot more enjoyable to code in than a static language. You need to mock up a quick prototype to try out an experiment in-line, you can, without line upon line of boilerplate creating a new class, types, etc.  Then if it works, you convert the experimental object into a full constructor and go on your way. :)
Title: Re: kh2Bar 1.5.1 (Kingdom Hearts 2-style life bars)
Post by: Fat Cerberus on May 18, 2013, 01:51:24 pm
New version: 1.6.  This implements the show/hide functionality requested by Radnen.
Title: Re: kh2Bar 1.6.1 (Kingdom Hearts 2-style life bars)
Post by: Fat Cerberus on May 22, 2013, 12:13:01 pm
Just updated kh2Bar, now the bar shouldn't completely empty until HP is exactly zero.
Title: Re: kh2Bar 2.0 (Kingdom Hearts 2-style life bars)
Post by: Fat Cerberus on July 10, 2013, 01:57:49 am
New version: 2.0. See the OP for details, lots of new features in this one! :)
Title: Re: kh2Bar 2.0 (Kingdom Hearts 2-style life bars)
Post by: DaVince on July 10, 2013, 06:06:36 am
The combo functionality seems useful. Does it display the damage taken (like in red) and just not subtract it until the combo is done? Because that is neat.
Title: Re: kh2Bar 2.0 (Kingdom Hearts 2-style life bars)
Post by: Fat Cerberus on July 10, 2013, 09:10:30 am
Yes, that's exactly how it works. I noticed when playing KH2 that the delay between when the damage is displayed and when it fades out was variable, but took a whole to realize that the fadeout coincided with the end of a combo (i.e. when you stopped juggling the enemy). Once I realized it I said "hey, that's a great idea!" and implemented it in kh2Bar. :)