Skip to main content

News

Topic: kh2Bar 2.0 (Kingdom Hearts 2-style life bars) (Read 19296 times) previous topic - next topic

0 Members and 2 Guests are viewing this topic.
  • Fat Cerberus
  • [*][*][*][*][*]
  • Global Moderator
  • Sphere Developer
kh2Bar 2.0 (Kingdom Hearts 2-style life bars)
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.
  • Last Edit: July 10, 2013, 01:58:30 am by Lord English
neoSphere 5.9.2 - neoSphere engine - Cell compiler - SSj debugger
forum thread | on GitHub

Re: kh2Bar 1.0 (Kingdom Hearts 2-style lifebar)
Reply #1
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));

  • Fat Cerberus
  • [*][*][*][*][*]
  • Global Moderator
  • Sphere Developer
Re: kh2Bar 1.0 (Kingdom Hearts 2-style lifebar)
Reply #2
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...
neoSphere 5.9.2 - neoSphere engine - Cell compiler - SSj debugger
forum thread | on GitHub

  • Radnen
  • [*][*][*][*][*]
  • Senior Staff
  • Wise Warrior
Re: kh2Bar 1.0 (Kingdom Hearts 2-style lifebar)
Reply #3

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.
If you use code to help you code you can use less code to code. Also, I have approximate knowledge of many things.

Sphere-sfml here
Sphere Studio editor here

Re: kh2Bar 1.0 (Kingdom Hearts 2-style lifebar)
Reply #4

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)));
        };
    };
}
  • Last Edit: April 24, 2013, 02:45:09 pm by alpha123

  • Fat Cerberus
  • [*][*][*][*][*]
  • Global Moderator
  • Sphere Developer
Re: kh2Bar 1.5 (Kingdom Hearts 2-style life bars)
Reply #5
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. :-)
neoSphere 5.9.2 - neoSphere engine - Cell compiler - SSj debugger
forum thread | on GitHub

Re: kh2Bar 1.5 (Kingdom Hearts 2-style life bars)
Reply #6
Attatch a project and ill give it a go, drives me crazy copy/pasting code

  • Fat Cerberus
  • [*][*][*][*][*]
  • Global Moderator
  • Sphere Developer
Re: kh2Bar 1.5 (Kingdom Hearts 2-style life bars)
Reply #7
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:
neoSphere 5.9.2 - neoSphere engine - Cell compiler - SSj debugger
forum thread | on GitHub

  • N E O
  • [*][*][*][*][*]
  • Administrator
  • Senior Administrator
Re: kh2Bar 1.5 (Kingdom Hearts 2-style life bars)
Reply #8
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 :)

  • Fat Cerberus
  • [*][*][*][*][*]
  • Global Moderator
  • Sphere Developer
Re: kh2Bar 1.5 (Kingdom Hearts 2-style life bars)
Reply #9

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. 
neoSphere 5.9.2 - neoSphere engine - Cell compiler - SSj debugger
forum thread | on GitHub

  • DaVince
  • [*][*][*][*][*]
  • Administrator
  • Used Sphere for, like, half my life
Re: kh2Bar 1.5 (Kingdom Hearts 2-style life bars)
Reply #10
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?

  • Fat Cerberus
  • [*][*][*][*][*]
  • Global Moderator
  • Sphere Developer
Re: kh2Bar 1.5 (Kingdom Hearts 2-style life bars)
Reply #11
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... :)
neoSphere 5.9.2 - neoSphere engine - Cell compiler - SSj debugger
forum thread | on GitHub

  • Fat Cerberus
  • [*][*][*][*][*]
  • Global Moderator
  • Sphere Developer
Re: kh2Bar 1.5 (Kingdom Hearts 2-style life bars)
Reply #12

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. :)
  • Last Edit: May 13, 2013, 10:13:47 pm by Lord English
neoSphere 5.9.2 - neoSphere engine - Cell compiler - SSj debugger
forum thread | on GitHub

  • Fat Cerberus
  • [*][*][*][*][*]
  • Global Moderator
  • Sphere Developer
Re: kh2Bar 1.5 (Kingdom Hearts 2-style life bars)
Reply #13
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
  • Last Edit: May 13, 2013, 10:17:46 pm by Lord English
neoSphere 5.9.2 - neoSphere engine - Cell compiler - SSj debugger
forum thread | on GitHub

  • Radnen
  • [*][*][*][*][*]
  • Senior Staff
  • Wise Warrior
Re: kh2Bar 1.5.1 (Kingdom Hearts 2-style life bars)
Reply #14
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.
If you use code to help you code you can use less code to code. Also, I have approximate knowledge of many things.

Sphere-sfml here
Sphere Studio editor here